chore: Handling the updation of action name in the plugin action toolbar

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<SaveActionNameParams>;
+}
+
+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 (
+    <div>
+      <ActionNameEditor
+        disabled={!isChangePermitted}
+        enableFontStyling={plugin?.type === PluginType.API}
+        saveActionName={props.saveActionName}
+      />
+    </div>
+  );
+};
+
+export default PluginActionNameEditor;

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 PluginActionResponse } from "./components/PluginActionResponse";
+export type {
+  SaveActionNameParams,
+  PluginActionNameEditorProps,
+} from "./components/PluginActionNameEditor";
+export { default as PluginActionNameEditor } from "./components/PluginActionNameEditor";

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<SaveActionNameParams>;
 }
 
 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 (
     <NameEditorComponent
-      /**
-       * This component is used by module editor in EE which uses a different
-       * action to save the name of an action. The current callers of this component
-       * pass the existing saveAction action but as fallback the saveActionName is used here
-       * as a guard.
-       */
-      dispatchAction={props.saveActionName || saveActionName}
       id={currentActionConfig?.id}
       idUndefinedErrorMessage={ACTION_ID_NOT_FOUND_IN_URL}
       name={currentActionConfig?.name}
+      onSaveName={props.saveActionName}
       saveStatus={saveStatus}
     >
       {({

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<SaveActionNameParams>;
   // 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],

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<SaveActionNameParams>;
   closeEditorLink?: React.ReactNode;

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 <ConvertEntityNotification icon={icon} name={action?.name || ""} />;
-  }, [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}
     >
       <Disabler isDisabled={isConverting}>

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<SaveActionNameParams>;
   entityId: string;
   searchKeyword?: string;
   className?: string;
@@ -164,10 +166,10 @@ export const EntityName = React.memo(
 
     return (
       <NameEditorComponent
-        dispatchAction={handleUpdateName}
         id={props.entityId}
         idUndefinedErrorMessage={ACTION_ID_NOT_FOUND_IN_URL}
         name={updatedName}
+        onSaveName={handleUpdateName}
         saveStatus={saveStatus}
         suffixErrorMessage={ENTITY_EXPLORER_ACTION_NAME_CONFLICT_ERROR}
       >

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 (
     <NameEditorComponent
-      dispatchAction={props.saveJSObjectName}
       id={currentJSObjectConfig?.id}
       idUndefinedErrorMessage={JSOBJECT_ID_NOT_FOUND_IN_URL}
       name={currentJSObjectConfig?.name}
+      onSaveName={props.saveJSObjectName}
       saveStatus={saveStatus}
     >
       {({

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<SaveActionNameParams>;
   closeEditorLink?: React.ReactNode;

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<QueryEditorRouteParams>;
 
@@ -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}
     >
       <Disabler isDisabled={isConverting}>
         <Editor