From c13256762e804bdef646502b96e1b274ca72fae7 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 26 Sep 2024 12:03:58 +0530 Subject: [PATCH 1/6] handling the action name update in the plugin action toolbar --- .../components/PluginActionNameEditor.tsx | 45 +++++++++++++++++++ app/client/src/PluginActionEditor/index.ts | 5 +++ .../editorComponents/ActionNameEditor.tsx | 22 ++++----- .../components/utils/NameEditorComponent.tsx | 13 +++--- .../Editor/APIEditor/ApiEditorContext.tsx | 8 +--- .../src/pages/Editor/APIEditor/index.tsx | 21 ++++----- .../src/pages/Editor/Explorer/Entity/Name.tsx | 6 ++- .../Editor/JSEditor/JSObjectNameEditor.tsx | 7 +-- .../Editor/QueryEditor/QueryEditorContext.tsx | 8 +--- .../src/pages/Editor/QueryEditor/index.tsx | 17 +++---- 10 files changed, 92 insertions(+), 60 deletions(-) create mode 100644 app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx diff --git a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx new file mode 100644 index 000000000000..34be5b5f93b0 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { useSelector } from "react-redux"; +import ActionNameEditor from "components/editorComponents/ActionNameEditor"; +import { usePluginActionContext } from "PluginActionEditor/PluginActionContext"; +import { getActionByBaseId } from "ee/selectors/entitiesSelector"; +import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; +import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; +import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; +import { PluginType } from "entities/Action"; +import type { ReduxAction } from "ee/constants/ReduxActionConstants"; + +export interface SaveActionNameParams { + id: string; + name: string; +} + +export interface PluginActionNameEditorProps { + saveActionName: ( + params: SaveActionNameParams, + ) => ReduxAction; +} + +const PluginActionNameEditor = (props: PluginActionNameEditorProps) => { + const { action, plugin } = usePluginActionContext(); + const currentActionConfig = useSelector((state) => + action.baseId ? getActionByBaseId(state, action.baseId) : undefined, + ); + const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); + const isChangePermitted = getHasManageActionPermission( + isFeatureEnabled, + currentActionConfig?.userPermissions, + ); + + return ( +
+ +
+ ); +}; + +export default PluginActionNameEditor; diff --git a/app/client/src/PluginActionEditor/index.ts b/app/client/src/PluginActionEditor/index.ts index 0a58d00bdaae..c5e66bdb6b1e 100644 --- a/app/client/src/PluginActionEditor/index.ts +++ b/app/client/src/PluginActionEditor/index.ts @@ -6,3 +6,8 @@ export { export { default as PluginActionToolbar } from "./components/PluginActionToolbar"; export { default as PluginActionForm } from "./components/PluginActionForm"; export { default as PluginActionResponsePane } from "./components/PluginActionResponsePane"; +export type { + SaveActionNameParams, + PluginActionNameEditorProps, +} from "./components/PluginActionNameEditor"; +export { default as PluginActionNameEditor } from "./components/PluginActionNameEditor"; diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx index 8467855f479f..deb7e143224e 100644 --- a/app/client/src/components/editorComponents/ActionNameEditor.tsx +++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx @@ -8,7 +8,6 @@ import EditableText, { import { removeSpecialChars } from "utils/helpers"; import type { AppState } from "ee/reducers"; -import { saveActionName } from "actions/pluginActionActions"; import { Flex } from "@appsmith/ads"; import { getActionByBaseId, getPlugin } from "ee/selectors/entitiesSelector"; import NameEditorComponent, { @@ -24,11 +23,8 @@ import { import { getAssetUrl } from "ee/utils/airgapHelpers"; import { getSavingStatusForActionName } from "selectors/actionSelectors"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; +import type { SaveActionNameParams } from "PluginActionEditor"; -interface SaveActionNameParams { - id: string; - name: string; -} interface ActionNameEditorProps { /* This prop checks if page is API Pane or Query Pane or Curl Pane @@ -38,13 +34,17 @@ interface ActionNameEditorProps { */ enableFontStyling?: boolean; disabled?: boolean; - saveActionName?: ( + saveActionName: ( params: SaveActionNameParams, ) => ReduxAction; } function ActionNameEditor(props: ActionNameEditorProps) { - const params = useParams<{ baseApiId?: string; baseQueryId?: string }>(); + const params = useParams<{ + baseApiId?: string; + baseQueryId?: string; + moduleInstanceId?: string; + }>(); const currentActionConfig = useSelector((state: AppState) => getActionByBaseId(state, params.baseApiId || params.baseQueryId || ""), @@ -60,16 +60,10 @@ function ActionNameEditor(props: ActionNameEditorProps) { return ( {({ diff --git a/app/client/src/components/utils/NameEditorComponent.tsx b/app/client/src/components/utils/NameEditorComponent.tsx index b7aa2e03ce4e..7c4abe3a23b8 100644 --- a/app/client/src/components/utils/NameEditorComponent.tsx +++ b/app/client/src/components/utils/NameEditorComponent.tsx @@ -11,6 +11,8 @@ import { } from "ee/constants/messages"; import styled from "styled-components"; import { Classes } from "@blueprintjs/core"; +import type { SaveActionNameParams } from "PluginActionEditor"; +import type { ReduxAction } from "ee/constants/ReduxActionConstants"; export const NameWrapper = styled.div<{ enableFontStyling?: boolean }>` min-width: 50%; @@ -71,9 +73,10 @@ interface NameEditorProps { children: (params: any) => JSX.Element; id?: string; name?: string; - // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any - dispatchAction: (a: any) => any; + onSaveName: ( + params: SaveActionNameParams, + ) => ReduxAction; // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any suffixErrorMessage?: (params?: any) => string; @@ -90,10 +93,10 @@ interface NameEditorProps { function NameEditor(props: NameEditorProps) { const { - dispatchAction, id: entityId, idUndefinedErrorMessage, name: entityName, + onSaveName, saveStatus, suffixErrorMessage = ACTION_NAME_CONFLICT_ERROR, } = props; @@ -131,8 +134,8 @@ function NameEditor(props: NameEditorProps) { const handleNameChange = useCallback( (name: string) => { - if (name !== entityName && !isInvalidNameForEntity(name)) { - dispatch(dispatchAction({ id: entityId, name })); + if (name !== entityName && !isInvalidNameForEntity(name) && entityId) { + dispatch(onSaveName({ id: entityId, name })); } }, [dispatch, isInvalidNameForEntity, entityId, entityName], diff --git a/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx b/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx index a5d3aa5e235f..1a2d9d517898 100644 --- a/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx +++ b/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx @@ -1,11 +1,7 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import type { PaginationField } from "api/ActionAPI"; import React, { createContext, useMemo } from "react"; - -interface SaveActionNameParams { - id: string; - name: string; -} +import type { SaveActionNameParams } from "PluginActionEditor"; interface ApiEditorContextContextProps { moreActionsMenu?: React.ReactNode; @@ -15,7 +11,7 @@ interface ApiEditorContextContextProps { // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any settingsConfig: any; - saveActionName?: ( + saveActionName: ( params: SaveActionNameParams, ) => ReduxAction; closeEditorLink?: React.ReactNode; diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx index 247c2cfd408d..31328d250556 100644 --- a/app/client/src/pages/Editor/APIEditor/index.tsx +++ b/app/client/src/pages/Editor/APIEditor/index.tsx @@ -8,7 +8,11 @@ import { getPluginSettingConfigs, getPlugins, } from "ee/selectors/entitiesSelector"; -import { deleteAction, runAction } from "actions/pluginActionActions"; +import { + deleteAction, + runAction, + saveActionName, +} from "actions/pluginActionActions"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import Editor from "./Editor"; import BackToCanvas from "components/common/BackToCanvas"; @@ -151,15 +155,7 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) { }); dispatch(runAction(action?.id ?? "", paginationField)); }, - [ - action?.id, - apiName, - pageName, - getPageName, - plugins, - pluginId, - datasourceId, - ], + [action?.id, apiName, pageName, plugins, pluginId, datasourceId, dispatch], ); const actionRightPaneBackLink = useMemo(() => { @@ -173,13 +169,13 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) { pageName, }); dispatch(deleteAction({ id: action?.id ?? "", name: apiName })); - }, [getPageName, pages, basePageId, apiName]); + }, [pages, basePageId, apiName, action?.id, dispatch, pageName]); const notification = useMemo(() => { if (!isConverting) return null; return ; - }, [action?.name, isConverting]); + }, [action?.name, isConverting, icon]); const isActionRedesignEnabled = useFeatureFlag( FEATURE_FLAG.release_actions_redesign_enabled, @@ -196,6 +192,7 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) { handleRunClick={handleRunClick} moreActionsMenu={moreActionsMenu} notification={notification} + saveActionName={saveActionName} settingsConfig={settingsConfig} > diff --git a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx index de937dd86a11..e0fb005bc005 100644 --- a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx +++ b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx @@ -16,6 +16,8 @@ import { import { Tooltip } from "@appsmith/ads"; import { useSelector } from "react-redux"; import { getSavingStatusForActionName } from "selectors/actionSelectors"; +import type { ReduxAction } from "ee/constants/ReduxActionConstants"; +import type { SaveActionNameParams } from "PluginActionEditor"; export const searchHighlightSpanClassName = "token"; export const searchTokenizationDelimiter = "!!"; @@ -84,7 +86,7 @@ export interface EntityNameProps { name: string; isEditing?: boolean; onChange?: (name: string) => void; - updateEntityName: (name: string) => void; + updateEntityName: (name: string) => ReduxAction; entityId: string; searchKeyword?: string; className?: string; @@ -164,10 +166,10 @@ export const EntityName = React.memo( return ( diff --git a/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx b/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx index f82860f134b1..ff1a598bc1ba 100644 --- a/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx +++ b/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx @@ -25,11 +25,8 @@ import NameEditorComponent, { } from "components/utils/NameEditorComponent"; import { getSavingStatusForJSObjectName } from "selectors/actionSelectors"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; +import type { SaveActionNameParams } from "PluginActionEditor"; -export interface SaveActionNameParams { - id: string; - name: string; -} export interface JSObjectNameEditorProps { /* This prop checks if page is API Pane or Query Pane or Curl Pane @@ -64,10 +61,10 @@ export function JSObjectNameEditor(props: JSObjectNameEditorProps) { return ( {({ diff --git a/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx b/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx index 03c46a99d0db..c5089fc6bdfc 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx @@ -1,18 +1,14 @@ import type { ReduxAction } from "ee/constants/ReduxActionConstants"; +import type { SaveActionNameParams } from "PluginActionEditor"; import React, { createContext, useMemo } from "react"; -interface SaveActionNameParams { - id: string; - name: string; -} - interface QueryEditorContextContextProps { moreActionsMenu?: React.ReactNode; onCreateDatasourceClick?: () => void; onEntityNotFoundBackClick?: () => void; changeQueryPage?: (baseQueryId: string) => void; actionRightPaneBackLink?: React.ReactNode; - saveActionName?: ( + saveActionName: ( params: SaveActionNameParams, ) => ReduxAction; closeEditorLink?: React.ReactNode; diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx index f76cbffe1b5f..03457a6228ea 100644 --- a/app/client/src/pages/Editor/QueryEditor/index.tsx +++ b/app/client/src/pages/Editor/QueryEditor/index.tsx @@ -42,6 +42,7 @@ import { ENTITY_ICON_SIZE, EntityIcon } from "../Explorer/ExplorerIcons"; import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorViewMode } from "ee/entities/IDE/constants"; import { AppPluginActionEditor } from "../AppPluginActionEditor"; +import { saveActionName } from "actions/pluginActionActions"; type QueryEditorProps = RouteComponentProps; @@ -126,6 +127,7 @@ function QueryEditor(props: QueryEditorProps) { }, [ action?.id, action?.name, + action?.pluginType, isChangePermitted, isDeletePermitted, basePageId, @@ -143,7 +145,7 @@ function QueryEditor(props: QueryEditorProps) { changeQuery({ baseQueryId: baseQueryId, basePageId, applicationId }), ); }, - [basePageId, applicationId], + [basePageId, applicationId, dispatch], ); const onCreateDatasourceClick = useCallback(() => { @@ -159,13 +161,7 @@ function QueryEditor(props: QueryEditorProps) { AnalyticsUtil.logEvent("NAVIGATE_TO_CREATE_NEW_DATASOURCE_PAGE", { entryPoint, }); - }, [ - basePageId, - history, - integrationEditorURL, - DatasourceCreateEntryPoints, - AnalyticsUtil, - ]); + }, [basePageId]); // custom function to return user to integrations page if action is not found const onEntityNotFoundBackClick = useCallback( @@ -176,7 +172,7 @@ function QueryEditor(props: QueryEditorProps) { selectedTab: INTEGRATION_TABS.ACTIVE, }), ), - [basePageId, history, integrationEditorURL], + [basePageId], ); const notification = useMemo(() => { @@ -189,7 +185,7 @@ function QueryEditor(props: QueryEditorProps) { withPadding /> ); - }, [action?.name, isConverting]); + }, [action?.name, isConverting, icon]); const isActionRedesignEnabled = useFeatureFlag( FEATURE_FLAG.release_actions_redesign_enabled, @@ -207,6 +203,7 @@ function QueryEditor(props: QueryEditorProps) { notification={notification} onCreateDatasourceClick={onCreateDatasourceClick} onEntityNotFoundBackClick={onEntityNotFoundBackClick} + saveActionName={saveActionName} > Date: Thu, 26 Sep 2024 17:55:29 +0530 Subject: [PATCH 2/6] updating styles --- .../components/PluginActionNameEditor.tsx | 36 +++++++++++++++++-- .../editorComponents/ActionNameEditor.tsx | 3 +- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx index 34be5b5f93b0..df3892b153a1 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx @@ -8,6 +8,7 @@ import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissi import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { PluginType } from "entities/Action"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; +import styled from "styled-components"; export interface SaveActionNameParams { id: string; @@ -20,6 +21,37 @@ export interface PluginActionNameEditorProps { ) => ReduxAction; } +const ActionNameEditorWrapper = styled.div` + & .ads-v2-box { + gap: 4px; + } + + && .t--action-name-edit-field { + padding: 0; + + .bp3-editable-text-content, + .bp3-editable-text-input { + font-size: 12px; + } + + .bp3-editable-text-content { + height: unset !important; + line-height: unset !important; + min-width: 90px !important; + } + } + + & .t--plugin-icon { + width: 16px; + height: auto; + } + + & .t--plugin-icon-box { + height: 24px; + width: 24px; + } +`; + const PluginActionNameEditor = (props: PluginActionNameEditorProps) => { const { action, plugin } = usePluginActionContext(); const currentActionConfig = useSelector((state) => @@ -32,13 +64,13 @@ const PluginActionNameEditor = (props: PluginActionNameEditorProps) => { ); return ( -
+ -
+ ); }; diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx index deb7e143224e..923df08f2455 100644 --- a/app/client/src/components/editorComponents/ActionNameEditor.tsx +++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx @@ -87,9 +87,10 @@ function ActionNameEditor(props: ActionNameEditorProps) { width="100%" > {currentPlugin && ( - + From a5e5d80680a0729ae708a1fe8bcb3cdd757602a0 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 26 Sep 2024 17:56:43 +0530 Subject: [PATCH 3/6] minor change --- .../PluginActionEditor/components/PluginActionNameEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx index df3892b153a1..b4703ae76dbd 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx @@ -64,7 +64,7 @@ const PluginActionNameEditor = (props: PluginActionNameEditorProps) => { ); return ( - + Date: Thu, 26 Sep 2024 20:33:34 +0530 Subject: [PATCH 4/6] updating css --- .../components/PluginActionNameEditor.tsx | 24 +++++++------------ .../editorComponents/ActionNameEditor.tsx | 20 +++++++++++----- .../editorComponents/EditableText.tsx | 12 ++++++++-- 3 files changed, 33 insertions(+), 23 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx index b4703ae76dbd..5997e59cd146 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx @@ -23,32 +23,26 @@ export interface PluginActionNameEditorProps { const ActionNameEditorWrapper = styled.div` & .ads-v2-box { - gap: 4px; + gap: var(--ads-v2-spaces-2); } && .t--action-name-edit-field { - padding: 0; - - .bp3-editable-text-content, - .bp3-editable-text-input { - font-size: 12px; - } + font-size: 12px; .bp3-editable-text-content { height: unset !important; line-height: unset !important; - min-width: 90px !important; } } - & .t--plugin-icon { - width: 16px; - height: auto; - } - & .t--plugin-icon-box { - height: 24px; - width: 24px; + height: 12px; + width: 12px; + + img { + width: 12px; + height: auto; + } } `; diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx index 923df08f2455..f50cb37de0c3 100644 --- a/app/client/src/components/editorComponents/ActionNameEditor.tsx +++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx @@ -12,7 +12,6 @@ import { Flex } from "@appsmith/ads"; import { getActionByBaseId, getPlugin } from "ee/selectors/entitiesSelector"; import NameEditorComponent, { IconBox, - IconWrapper, NameWrapper, } from "components/utils/NameEditorComponent"; import { @@ -24,6 +23,12 @@ import { getAssetUrl } from "ee/utils/airgapHelpers"; import { getSavingStatusForActionName } from "selectors/actionSelectors"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import type { SaveActionNameParams } from "PluginActionEditor"; +import { + ActionUrlIcon, + DefaultModuleIcon, +} from "pages/Editor/Explorer/ExplorerIcons"; +import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; +import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; interface ActionNameEditorProps { /* @@ -58,6 +63,12 @@ function ActionNameEditor(props: ActionNameEditorProps) { getSavingStatusForActionName(state, currentActionConfig?.id || ""), ); + const iconUrl = getAssetUrl(currentPlugin?.iconLocation) || ""; + + const isActionRedesignEnabled = useFeatureFlag( + FEATURE_FLAG.release_actions_redesign_enabled, + ); + return ( {currentPlugin && ( - + {iconUrl ? ActionUrlIcon(iconUrl) : DefaultModuleIcon()} )} ))} From 418af63ea11799abc084fe32c2f60bbe898146b8 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 26 Sep 2024 22:40:52 +0530 Subject: [PATCH 5/6] refactoring ActionNameEditor component --- .../components/PluginActionNameEditor.tsx | 21 ++++++- .../editorComponents/ActionNameEditor.tsx | 60 +++++++------------ .../Editor/APIEditor/CommonEditorForm.tsx | 18 ++++++ .../Editor/QueryEditor/QueryEditorHeader.tsx | 19 ++++++ 4 files changed, 77 insertions(+), 41 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx index 5997e59cd146..925943251481 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx @@ -2,13 +2,17 @@ import React from "react"; import { useSelector } from "react-redux"; import ActionNameEditor from "components/editorComponents/ActionNameEditor"; import { usePluginActionContext } from "PluginActionEditor/PluginActionContext"; -import { getActionByBaseId } from "ee/selectors/entitiesSelector"; +import { getActionByBaseId, getPlugin } from "ee/selectors/entitiesSelector"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { PluginType } from "entities/Action"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import styled from "styled-components"; +import type { AppState } from "ee/reducers"; +import { getSavingStatusForActionName } from "selectors/actionSelectors"; +import { getAssetUrl } from "ee/utils/airgapHelpers"; +import { ActionUrlIcon } from "pages/Editor/Explorer/ExplorerIcons"; export interface SaveActionNameParams { id: string; @@ -57,12 +61,27 @@ const PluginActionNameEditor = (props: PluginActionNameEditorProps) => { currentActionConfig?.userPermissions, ); + const currentPlugin = useSelector((state: AppState) => + getPlugin(state, currentActionConfig?.pluginId || ""), + ); + + const saveStatus = useSelector((state) => + getSavingStatusForActionName(state, currentActionConfig?.id || ""), + ); + + const iconUrl = getAssetUrl(currentPlugin?.iconLocation) || ""; + + const icon = ActionUrlIcon(iconUrl); + return ( ); diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx index f50cb37de0c3..1d9bf01aa7cb 100644 --- a/app/client/src/components/editorComponents/ActionNameEditor.tsx +++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx @@ -1,15 +1,11 @@ import React, { memo } from "react"; -import { useSelector } from "react-redux"; -import { useParams } from "react-router-dom"; import EditableText, { EditInteractionKind, } from "components/editorComponents/EditableText"; import { removeSpecialChars } from "utils/helpers"; -import type { AppState } from "ee/reducers"; import { Flex } from "@appsmith/ads"; -import { getActionByBaseId, getPlugin } from "ee/selectors/entitiesSelector"; import NameEditorComponent, { IconBox, NameWrapper, @@ -19,16 +15,12 @@ import { ACTION_NAME_PLACEHOLDER, createMessage, } from "ee/constants/messages"; -import { getAssetUrl } from "ee/utils/airgapHelpers"; -import { getSavingStatusForActionName } from "selectors/actionSelectors"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import type { SaveActionNameParams } from "PluginActionEditor"; -import { - ActionUrlIcon, - DefaultModuleIcon, -} from "pages/Editor/Explorer/ExplorerIcons"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; +import type { Action } from "entities/Action"; +import type { ModuleInstance } from "ee/constants/ModuleInstanceConstants"; interface ActionNameEditorProps { /* @@ -42,28 +34,20 @@ interface ActionNameEditorProps { saveActionName: ( params: SaveActionNameParams, ) => ReduxAction; + actionConfig?: Action | ModuleInstance; + icon?: JSX.Element; + saveStatus: { isSaving: boolean; error: boolean }; } function ActionNameEditor(props: ActionNameEditorProps) { - const params = useParams<{ - baseApiId?: string; - baseQueryId?: string; - moduleInstanceId?: string; - }>(); - - const currentActionConfig = useSelector((state: AppState) => - getActionByBaseId(state, params.baseApiId || params.baseQueryId || ""), - ); - - const currentPlugin = useSelector((state: AppState) => - getPlugin(state, currentActionConfig?.pluginId || ""), - ); - - const saveStatus = useSelector((state) => - getSavingStatusForActionName(state, currentActionConfig?.id || ""), - ); - - const iconUrl = getAssetUrl(currentPlugin?.iconLocation) || ""; + const { + actionConfig, + disabled = false, + enableFontStyling = false, + icon = "", + saveActionName, + saveStatus, + } = props; const isActionRedesignEnabled = useFeatureFlag( FEATURE_FLAG.release_actions_redesign_enabled, @@ -71,10 +55,10 @@ function ActionNameEditor(props: ActionNameEditorProps) { return ( {({ @@ -90,22 +74,18 @@ function ActionNameEditor(props: ActionNameEditorProps) { isNew: boolean; saveStatus: { isSaving: boolean; error: boolean }; }) => ( - + - {currentPlugin && ( - - {iconUrl ? ActionUrlIcon(iconUrl) : DefaultModuleIcon()} - - )} + {icon && {icon}} + getPlugin(state, currentActionConfig?.pluginId || ""), + ); + + const saveStatus = useSelector((state) => + getSavingStatusForActionName(state, currentActionConfig?.id || ""), + ); + + const iconUrl = getAssetUrl(currentPlugin?.iconLocation) || ""; + + const icon = ActionUrlIcon(iconUrl); + const plugin = useSelector((state: AppState) => getPlugin(state, pluginId ?? ""), ); @@ -281,9 +296,12 @@ function CommonEditorForm(props: CommonFormPropsWithExtraParams) { diff --git a/app/client/src/pages/Editor/QueryEditor/QueryEditorHeader.tsx b/app/client/src/pages/Editor/QueryEditor/QueryEditorHeader.tsx index af1d28c83a99..38f9a9b3d72e 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryEditorHeader.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryEditorHeader.tsx @@ -13,6 +13,7 @@ import { useActiveActionBaseId } from "ee/pages/Editor/Explorer/hooks"; import { useSelector } from "react-redux"; import { getActionByBaseId, + getPlugin, getPluginNameFromId, } from "ee/selectors/entitiesSelector"; import { QueryEditorContext } from "./QueryEditorContext"; @@ -21,6 +22,9 @@ import type { Datasource } from "entities/Datasource"; import type { AppState } from "ee/reducers"; import { SQL_DATASOURCES } from "constants/QueryEditorConstants"; import DatasourceSelector from "./DatasourceSelector"; +import { getSavingStatusForActionName } from "selectors/actionSelectors"; +import { getAssetUrl } from "ee/utils/airgapHelpers"; +import { ActionUrlIcon } from "../Explorer/ExplorerIcons"; const NameWrapper = styled.div` display: flex; @@ -79,6 +83,18 @@ const QueryEditorHeader = (props: Props) => { currentActionConfig?.userPermissions, ); + const currentPlugin = useSelector((state: AppState) => + getPlugin(state, currentActionConfig?.pluginId || ""), + ); + + const saveStatus = useSelector((state) => + getSavingStatusForActionName(state, currentActionConfig?.id || ""), + ); + + const iconUrl = getAssetUrl(currentPlugin?.iconLocation) || ""; + + const icon = ActionUrlIcon(iconUrl); + // get the current action's plugin name const currentActionPluginName = useSelector((state: AppState) => getPluginNameFromId(state, currentActionConfig?.pluginId || ""), @@ -106,8 +122,11 @@ const QueryEditorHeader = (props: Props) => { From d506892551053072c81eb910a34ae7cb4aa6ea07 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Fri, 27 Sep 2024 12:33:12 +0530 Subject: [PATCH 6/6] addressing review comments --- .../components/PluginActionNameEditor.tsx | 19 +++++-------------- .../components/utils/NameEditorComponent.tsx | 1 - 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx index 925943251481..a51d6006dec0 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx @@ -2,14 +2,12 @@ import React from "react"; import { useSelector } from "react-redux"; import ActionNameEditor from "components/editorComponents/ActionNameEditor"; import { usePluginActionContext } from "PluginActionEditor/PluginActionContext"; -import { getActionByBaseId, getPlugin } from "ee/selectors/entitiesSelector"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { PluginType } from "entities/Action"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import styled from "styled-components"; -import type { AppState } from "ee/reducers"; import { getSavingStatusForActionName } from "selectors/actionSelectors"; import { getAssetUrl } from "ee/utils/airgapHelpers"; import { ActionUrlIcon } from "pages/Editor/Explorer/ExplorerIcons"; @@ -52,31 +50,24 @@ const ActionNameEditorWrapper = styled.div` const PluginActionNameEditor = (props: PluginActionNameEditorProps) => { const { action, plugin } = usePluginActionContext(); - const currentActionConfig = useSelector((state) => - action.baseId ? getActionByBaseId(state, action.baseId) : undefined, - ); + const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); const isChangePermitted = getHasManageActionPermission( isFeatureEnabled, - currentActionConfig?.userPermissions, - ); - - const currentPlugin = useSelector((state: AppState) => - getPlugin(state, currentActionConfig?.pluginId || ""), + action?.userPermissions, ); const saveStatus = useSelector((state) => - getSavingStatusForActionName(state, currentActionConfig?.id || ""), + getSavingStatusForActionName(state, action?.id || ""), ); - const iconUrl = getAssetUrl(currentPlugin?.iconLocation) || ""; - + const iconUrl = getAssetUrl(plugin?.iconLocation) || ""; const icon = ActionUrlIcon(iconUrl); return ( JSX.Element; id?: string; name?: string; - // eslint-disable-next-line @typescript-eslint/no-explicit-any onSaveName: ( params: SaveActionNameParams, ) => ReduxAction;