refactoring ActionNameEditor component

appsmithorg · Sep 26, 2024 · 418af63 · 418af63
1 parent 3593974
commit 418af63
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 41 deletions.
diff --git 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 (
     <ActionNameEditorWrapper>
       <ActionNameEditor
+        actionConfig={currentActionConfig}
         disabled={!isChangePermitted}
         enableFontStyling={plugin?.type === PluginType.API}
+        icon={icon}
         saveActionName={props.saveActionName}
+        saveStatus={saveStatus}
       />
     </ActionNameEditorWrapper>
   );

diff --git 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,39 +34,31 @@ interface ActionNameEditorProps {
   saveActionName: (
     params: SaveActionNameParams,
   ) => ReduxAction<SaveActionNameParams>;
+  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,
   );
 
   return (
     <NameEditorComponent
-      id={currentActionConfig?.id}
+      id={actionConfig?.id}
       idUndefinedErrorMessage={ACTION_ID_NOT_FOUND_IN_URL}
-      name={currentActionConfig?.name}
-      onSaveName={props.saveActionName}
+      name={actionConfig?.name}
+      onSaveName={saveActionName}
       saveStatus={saveStatus}
     >
       {({
@@ -90,22 +74,18 @@ function ActionNameEditor(props: ActionNameEditorProps) {
         isNew: boolean;
         saveStatus: { isSaving: boolean; error: boolean };
       }) => (
-        <NameWrapper enableFontStyling={props.enableFontStyling}>
+        <NameWrapper enableFontStyling={enableFontStyling}>
           <Flex
             alignItems="center"
             gap="spaces-3"
             overflow="hidden"
             width="100%"
           >
-            {currentPlugin && (
-              <IconBox className="t--plugin-icon-box">
-                {iconUrl ? ActionUrlIcon(iconUrl) : DefaultModuleIcon()}
-              </IconBox>
-            )}
+            {icon && <IconBox className="t--plugin-icon-box">{icon}</IconBox>}
             <EditableText
               className="t--action-name-edit-field"
-              defaultValue={currentActionConfig ? currentActionConfig.name : ""}
-              disabled={props.disabled}
+              defaultValue={actionConfig ? actionConfig.name : ""}
+              disabled={disabled}
               editInteractionKind={EditInteractionKind.SINGLE}
               errorTooltipClass="t--action-name-edit-error"
               forceDefault={forceUpdate}

diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
@@ -35,6 +35,9 @@ import {
   InfoFields,
   RequestTabs,
 } from "PluginActionEditor/components/PluginActionForm/components/CommonEditorForm";
+import { getSavingStatusForActionName } from "selectors/actionSelectors";
+import { getAssetUrl } from "ee/utils/airgapHelpers";
+import { ActionUrlIcon } from "../Explorer/ExplorerIcons";
 
 const Form = styled.form`
   position: relative;
@@ -245,6 +248,18 @@ function CommonEditorForm(props: CommonFormPropsWithExtraParams) {
     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);
+
   const plugin = useSelector((state: AppState) =>
     getPlugin(state, pluginId ?? ""),
   );
@@ -281,9 +296,12 @@ function CommonEditorForm(props: CommonFormPropsWithExtraParams) {
           <FormRow className="form-row-header">
             <NameWrapper className="t--nameOfApi">
               <ActionNameEditor
+                actionConfig={currentActionConfig}
                 disabled={!isChangePermitted}
                 enableFontStyling
+                icon={icon}
                 saveActionName={saveActionName}
+                saveStatus={saveStatus}
               />
             </NameWrapper>
             <ActionButtons className="t--formActionButtons">

diff --git 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) => {
     <StyledFormRow>
       <NameWrapper>
         <ActionNameEditor
+          actionConfig={currentActionConfig}
           disabled={!isChangePermitted}
+          icon={icon}
           saveActionName={saveActionName}
+          saveStatus={saveStatus}
         />
       </NameWrapper>
       <ActionsWrapper>