diff --git a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx index c34b4a14a5..cebec4ad61 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx @@ -12,7 +12,7 @@ import { Flex } from "@appsmith/ads"; import styled from "styled-components"; import { noop } from "lodash"; import { EditableName, useIsRenaming } from "IDE"; - +import ImageAlt from "assets/images/placeholder-image.svg"; export interface SaveActionNameParams { id: string; name: string; @@ -64,7 +64,7 @@ const PluginActionNameEditor = ({ isFeatureEnabled, action?.userPermissions, ); - const iconUrl = getAssetUrl(plugin?.iconLocation) || ""; + const iconUrl = getAssetUrl(plugin?.iconLocation ?? ImageAlt); const icon = ActionUrlIcon(iconUrl); const handleDoubleClick = isChangePermitted ? enterEditMode : noop; diff --git a/app/client/src/ce/selectors/entitiesSelector.ts b/app/client/src/ce/selectors/entitiesSelector.ts index c33a71ef95..e81be33503 100644 --- a/app/client/src/ce/selectors/entitiesSelector.ts +++ b/app/client/src/ce/selectors/entitiesSelector.ts @@ -598,15 +598,25 @@ export const getDatasourcePlugins = createSelector(getPlugins, (plugins) => { return plugins.filter((plugin) => plugin?.allowUserDatasources ?? true); }); -export const getPluginImages = createSelector(getPlugins, (plugins) => { - const pluginImages: Record = {}; +export const getPluginImages = createSelector( + getPlugins, + getDatasources, + (plugins, datasources) => { + const pluginImages: Record = {}; - plugins.forEach((plugin) => { - pluginImages[plugin.id] = plugin?.iconLocation ?? ImageAlt; - }); + plugins.forEach((plugin) => { + pluginImages[plugin.id] = plugin?.iconLocation ?? ImageAlt; + }); - return pluginImages; -}); + datasources.forEach((datasource) => { + if (!pluginImages[datasource.pluginId]) { + pluginImages[datasource.pluginId] = ImageAlt; + } + }); + + return pluginImages; + }, +); export const getPluginNames = createSelector(getPlugins, (plugins) => { const pluginNames: Record = {}; @@ -1676,7 +1686,7 @@ export const getQuerySegmentItems = createSelector( const items: EntityItem[] = actions.map((action) => { let group; const iconUrl = getAssetUrl( - pluginGroups[action.config.pluginId]?.iconLocation, + pluginGroups[action.config.pluginId]?.iconLocation ?? ImageAlt, ); if (action.config.pluginType === PluginType.API) { diff --git a/app/client/src/components/editorComponents/ActionCreator/helpers.tsx b/app/client/src/components/editorComponents/ActionCreator/helpers.tsx index bef3973930..eb4a067b7e 100644 --- a/app/client/src/components/editorComponents/ActionCreator/helpers.tsx +++ b/app/client/src/components/editorComponents/ActionCreator/helpers.tsx @@ -32,6 +32,7 @@ import { getCurrentJSCollections, getQueryModuleInstances, getJSModuleInstancesData, + getPluginImages, } from "ee/selectors/entitiesSelector"; import { getModalDropdownList, @@ -64,7 +65,7 @@ import { selectEvaluationVersion } from "ee/selectors/applicationSelectors"; import { isJSAction } from "ee/workers/Evaluation/evaluationUtils"; import type { DataTreeEntity } from "entities/DataTree/dataTreeTypes"; import type { ModuleInstanceDataState } from "ee/constants/ModuleInstanceConstants"; -import { getModuleIcon, getPluginImagesFromPlugins } from "pages/Editor/utils"; +import { getModuleIcon } from "pages/Editor/utils"; import { getAllModules } from "ee/selectors/modulesSelector"; import type { Module } from "ee/constants/ModuleConstants"; import { @@ -420,6 +421,7 @@ export function getApiQueriesAndJSActionOptionsWithChildren( queryModuleInstances: ModuleInstanceDataState, jsModuleInstances: ReturnType, modules: Record, + pluginImages: Record, ) { // this function gets a list of all the queries/apis and attaches it to actionList getApiAndQueryOptions( @@ -429,6 +431,7 @@ export function getApiQueriesAndJSActionOptionsWithChildren( handleClose, queryModuleInstances, modules, + pluginImages, ); // this function gets a list of all the JS Objects and attaches it to actionList @@ -446,8 +449,8 @@ function getApiAndQueryOptions( handleClose: () => void, queryModuleInstances: ModuleInstanceDataState, modules: Record, + pluginImages: Record, ) { - const pluginImages = getPluginImagesFromPlugins(plugins); // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any const pluginGroups: any = keyBy(plugins, "id"); @@ -686,6 +689,7 @@ export function useApisQueriesAndJsActionOptions(handleClose: () => void) { ) as unknown as ModuleInstanceDataState; const jsModuleInstancesData = useSelector(getJSModuleInstancesData); const modules = useSelector(getAllModules); + const pluginImages = useSelector(getPluginImages); // this function gets all the Queries/API's/JS Objects and attaches it to actionList return getApiQueriesAndJSActionOptionsWithChildren( @@ -698,5 +702,6 @@ export function useApisQueriesAndJsActionOptions(handleClose: () => void) { queryModuleInstances, jsModuleInstancesData, modules, + pluginImages, ); } diff --git a/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogEntityLink.tsx b/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogEntityLink.tsx index d3bab47655..ff72f48489 100644 --- a/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogEntityLink.tsx +++ b/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogEntityLink.tsx @@ -4,11 +4,10 @@ import { useSelector } from "react-redux"; import { keyBy } from "lodash"; import type { LogItemProps } from "../ErrorLogItem"; import { Colors } from "constants/Colors"; -import { getPlugins } from "ee/selectors/entitiesSelector"; +import { getPluginImages, getPlugins } from "ee/selectors/entitiesSelector"; import EntityLink from "../../EntityLink"; import { DebuggerLinkUI } from "components/editorComponents/Debugger/DebuggerEntityLink"; import { getIconForEntity } from "ee/components/editorComponents/Debugger/ErrorLogs/getLogIconForEntity"; -import { getPluginImagesFromPlugins } from "pages/Editor/utils"; const EntityLinkWrapper = styled.div` display: flex; @@ -50,7 +49,7 @@ const getIcon = (props: LogItemProps, pluginImages: Record) => { export default function LogEntityLink(props: LogItemProps) { const plugins = useSelector(getPlugins); const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]); - const pluginImages = getPluginImagesFromPlugins(plugins); + const pluginImages = useSelector(getPluginImages); const plugin = props.iconId ? pluginGroups[props.iconId] : undefined; diff --git a/app/client/src/components/propertyControls/ActionSelectorControl.tsx b/app/client/src/components/propertyControls/ActionSelectorControl.tsx index 911cc733b8..7a2824fcf6 100644 --- a/app/client/src/components/propertyControls/ActionSelectorControl.tsx +++ b/app/client/src/components/propertyControls/ActionSelectorControl.tsx @@ -19,6 +19,7 @@ import { getAllJSCollections, getJSModuleInstancesData, getModuleInstances, + getPluginImages, getPlugins, } from "ee/selectors/entitiesSelector"; import store from "store"; @@ -115,6 +116,7 @@ class ActionSelectorControl extends BaseControl { const queryModuleInstances = [] as ModuleInstanceDataState; const jsModuleInstances = getJSModuleInstancesData(state); const modules = getAllModules(state); + const pluginImages = getPluginImages(state); if (!!moduleInstances) { for (const moduleInstance of Object.values(moduleInstances)) { @@ -174,6 +176,7 @@ class ActionSelectorControl extends BaseControl { queryModuleInstances, jsModuleInstances, modules, + pluginImages, ); try { diff --git a/app/client/src/pages/Editor/DataSidePane/DataSidePane.tsx b/app/client/src/pages/Editor/DataSidePane/DataSidePane.tsx index fa6107dd51..980d8b1ad9 100644 --- a/app/client/src/pages/Editor/DataSidePane/DataSidePane.tsx +++ b/app/client/src/pages/Editor/DataSidePane/DataSidePane.tsx @@ -5,12 +5,12 @@ import { useSelector } from "react-redux"; import { getDatasources, getDatasourcesGroupedByPluginCategory, - getPlugins, + getPluginImages, } from "ee/selectors/entitiesSelector"; import history from "utils/history"; import { datasourcesEditorIdURL, integrationEditorURL } from "ee/RouteBuilder"; import { getSelectedDatasourceId } from "ee/navigation/FocusSelectors"; -import { get, keyBy } from "lodash"; +import { get } from "lodash"; import CreateDatasourceButton from "./CreateDatasourceButton"; import { useLocation } from "react-router"; import { @@ -53,8 +53,7 @@ export const DataSidePane = (props: DataSidePaneProps) => { >(""); const datasources = useSelector(getDatasources); const groupedDatasources = useSelector(getDatasourcesGroupedByPluginCategory); - const plugins = useSelector(getPlugins); - const groupedPlugins = keyBy(plugins, "id"); + const pluginImages = useSelector(getPluginImages); const location = useLocation(); const goToDatasource = useCallback((id: string) => { history.push(datasourcesEditorIdURL({ datasourceId: id })); @@ -123,9 +122,7 @@ export const DataSidePane = (props: DataSidePaneProps) => { title: data.name, startIcon: ( ), description: get(dsUsageMap, data.id, ""), diff --git a/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx b/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx index b88ef6da43..30a1cb9eff 100644 --- a/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx +++ b/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx @@ -6,6 +6,7 @@ import styled from "styled-components"; import { getAssetUrl } from "ee/utils/airgapHelpers"; import { PluginImage } from "pages/Editor/DataSourceEditor/DSFormHeader"; import { isEnvironmentConfigured } from "ee/utils/Environments"; +import ImageAlt from "assets/images/placeholder-image.svg"; import type { Plugin } from "entities/Plugin"; import { isDatasourceAuthorizedForQueryCreation, @@ -76,7 +77,10 @@ function ListItemWrapper(props: { className={`t--ds-list ${selected ? "active" : ""}`} onClick={() => onClick(ds)} > - + diff --git a/app/client/src/pages/Editor/utils.tsx b/app/client/src/pages/Editor/utils.tsx index 501c800b3b..6bc8d9ac84 100644 --- a/app/client/src/pages/Editor/utils.tsx +++ b/app/client/src/pages/Editor/utils.tsx @@ -28,8 +28,7 @@ import { JsFileIconV2, } from "pages/Editor/Explorer/ExplorerIcons"; import { getAssetUrl } from "ee/utils/airgapHelpers"; -import { type Plugin, PluginType } from "entities/Plugin"; -import ImageAlt from "assets/images/placeholder-image.svg"; +import { PluginType } from "entities/Plugin"; import { Icon } from "@appsmith/ads"; import { objectKeys } from "@appsmith/utils"; @@ -438,13 +437,3 @@ export function getModuleIcon( ); } - -export function getPluginImagesFromPlugins(plugins: Plugin[]) { - const pluginImages: Record = {}; - - plugins.forEach((plugin) => { - pluginImages[plugin.id] = plugin?.iconLocation ?? ImageAlt; - }); - - return pluginImages; -} diff --git a/app/client/src/sagas/selectors.tsx b/app/client/src/sagas/selectors.tsx index 0a4dd8469a..f1230fe456 100644 --- a/app/client/src/sagas/selectors.tsx +++ b/app/client/src/sagas/selectors.tsx @@ -169,18 +169,6 @@ export const getExistingActionNames = createSelector( }, ); -export const getPluginIdToImageLocation = createSelector( - getPlugins, - (plugins) => - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - plugins.reduce((acc: any, p: Plugin) => { - acc[p.id] = p.iconLocation; - - return acc; - }, {}), -); - /** * returns a objects of existing page name in data tree *