fix: Improve separations

app/client/src/IDE/Components/EditableName/index.ts

@@ -1,3 +1,4 @@
 export { EditableName } from "./EditableName";
 export { RenameMenuItem } from "./RenameMenuItem";
 export { useIsRenaming } from "./useIsRenaming";
+export { useValidateEntityName } from "./useValidateEntityName";

app/client/src/IDE/index.ts

@@ -48,6 +48,7 @@ export {
   EditableName,
   RenameMenuItem,
   useIsRenaming,
+  useValidateEntityName,
 } from "./Components/EditableName";
 
 /* ====================================================

app/client/src/ce/selectors/entitiesSelector.ts

@@ -1072,9 +1072,6 @@ export const getExistingActionNames = createSelector(
   },
 );
 
-export const getEditingEntityName = (state: AppState) =>
-  state.ui.explorer.entity.editingEntityName;
-
 export const getExistingJSCollectionNames = createSelector(
   getJSCollections,
   (jsActions) =>

app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/UIEntityListTree.tsx

@@ -1,57 +1,27 @@
-import React, { useCallback, useState } from "react";
-import { EntityListTree, type EntityListTreeItem } from "@appsmith/ads";
+import React, { useCallback } from "react";
+import { EntityListTree } from "@appsmith/ads";
 import { useDispatch, useSelector } from "react-redux";
-import {
-  getEditingEntityName,
-  selectWidgetsForCurrentPage,
-} from "ee/selectors/entitiesSelector";
-import type { CanvasStructure } from "reducers/uiReducers/pageCanvasStructureReducer";
+import { selectWidgetsForCurrentPage } from "ee/selectors/entitiesSelector";
 import { getSelectedWidgets } from "selectors/ui";
-import { getEntityExplorerWidgetsToExpand } from "selectors/widgetSelectors";
 import { getPagePermissions } from "selectors/editorSelectors";
-import { getUpdatingEntity } from "selectors/explorerSelector";
 import { getHasManagePagePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import { useValidateEntityName } from "IDE";
 import { updateWidgetName } from "actions/propertyPaneActions";
-import { initExplorerEntityNameEdit } from "actions/explorerActions";
-import { useValidateEntityName } from "IDE/Components/EditableName/useValidateEntityName";
-import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
 import { WidgetContextMenu } from "./WidgetContextMenu";
 import { useSwitchToWidget } from "./hooks/useSwitchToWidget";
 import { WidgetTypeIcon } from "./WidgetTypeIcon";
-
-const enhanceItemsTree = (
-  items: CanvasStructure[],
-  enhancer: (item: CanvasStructure) => EntityListTreeItem,
-) => {
-  return items.map((child): EntityListTreeItem => {
-    return {
-      ...enhancer(child),
-      children: child.children
-        ? enhanceItemsTree(child.children, enhancer)
-        : undefined,
-    };
-  });
-};
+import { useWidgetTreeState } from "./hooks/useWidgetTreeExpandedState";
+import { enhanceItemsTree } from "./utils/enhanceTree";
+import { useNameEditorState } from "../../hooks/useNameEditorState";
 
 export const UIEntityListTree = () => {
   const widgets = useSelector(selectWidgetsForCurrentPage);
   const selectedWidgets = useSelector(getSelectedWidgets);
-  const widgetsToExpand = useSelector(getEntityExplorerWidgetsToExpand);
-  const [expandedWidgets, setExpandedWidgets] =
-    useState<string[]>(widgetsToExpand);
 
   const switchToWidget = useSwitchToWidget();
 
-  const handleOnClick = useCallback(
-    (e, widget) => switchToWidget(e, widget),
-    [switchToWidget],
-  );
-
-  const updatingEntity = useSelector(getUpdatingEntity);
-  const editingEntity = useSelector(getEditingEntityName);
-
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
   const pagePermissions = useSelector(getPagePermissions);
   const canManagePages = getHasManagePagePermission(
@@ -67,28 +37,20 @@ export const UIEntityListTree = () => {
     [dispatch],
   );
 
-  const enterEditMode = useCallback(
-    (id: string) => {
-      dispatch(initExplorerEntityNameEdit(id));
-    },
-    [dispatch],
-  );
-
-  const exitEditMode = useCallback(() => {
-    dispatch({
-      type: ReduxActionTypes.END_EXPLORER_ENTITY_NAME_EDIT,
-    });
-  }, [dispatch]);
+  const { editingEntity, enterEditMode, exitEditMode, updatingEntity } =
+    useNameEditorState();
 
   const validateName = useValidateEntityName({});
 
+  const { expandedWidgets, handleExpand } = useWidgetTreeState();
+
   const items = enhanceItemsTree(widgets?.children || [], (widget) => ({
     id: widget.widgetId,
     title: widget.widgetName,
     startIcon: WidgetTypeIcon(widget.type),
     isSelected: selectedWidgets.includes(widget.widgetId),
     isExpanded: expandedWidgets.includes(widget.widgetId),
-    onClick: (e) => handleOnClick(e, widget),
+    onClick: (e) => switchToWidget(e, widget),
     onDoubleClick: () => enterEditMode(widget.widgetId),
     rightControl: (
       <WidgetContextMenu
@@ -107,18 +69,5 @@ export const UIEntityListTree = () => {
     },
   }));
 
-  const handleWidgetExpand = useCallback(
-    (id: string) => {
-      if (expandedWidgets.includes(id)) {
-        setExpandedWidgets(
-          [...expandedWidgets].filter((widgetId) => widgetId !== id),
-        );
-      } else {
-        setExpandedWidgets([...expandedWidgets, id]);
-      }
-    },
-    [expandedWidgets],
-  );
-
-  return <EntityListTree items={items} onItemExpand={handleWidgetExpand} />;
+  return <EntityListTree items={items} onItemExpand={handleExpand} />;
 };

app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/hooks/useWidgetTreeExpandedState.ts

@@ -0,0 +1,22 @@
+import { useCallback, useState } from "react";
+import { useSelector } from "react-redux";
+import { getEntityExplorerWidgetsToExpand } from "selectors/widgetSelectors";
+
+export const useWidgetTreeState = () => {
+  const widgetsToExpand = useSelector(getEntityExplorerWidgetsToExpand);
+  const [expandedWidgets, setExpandedWidgets] =
+    useState<string[]>(widgetsToExpand);
+
+  const handleExpand = useCallback((id: string) => {
+    setExpandedWidgets((prev) =>
+      prev.includes(id)
+        ? prev.filter((widgetId) => widgetId !== id)
+        : [...prev, id],
+    );
+  }, []);
+
+  return {
+    expandedWidgets,
+    handleExpand,
+  };
+};

app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/utils/enhanceTree.ts

@@ -0,0 +1,16 @@
+import type { CanvasStructure } from "reducers/uiReducers/pageCanvasStructureReducer";
+import type { EntityListTreeItem } from "@appsmith/ads";
+
+export const enhanceItemsTree = (
+  items: CanvasStructure[],
+  enhancer: (item: CanvasStructure) => EntityListTreeItem,
+) => {
+  return items.map((child): EntityListTreeItem => {
+    return {
+      ...enhancer(child),
+      children: child.children
+        ? enhanceItemsTree(child.children, enhancer)
+        : undefined,
+    };
+  });
+};

app/client/src/pages/Editor/IDE/EditorPane/hooks/useNameEditorState.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { initExplorerEntityNameEdit } from "actions/explorerActions";
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+import {
+  getUpdatingEntity,
+  getEditingEntityName,
+} from "selectors/explorerSelector";
+
+export function useNameEditorState() {
+  const dispatch = useDispatch();
+
+  const editingEntity = useSelector(getEditingEntityName);
+
+  const updatingEntity = useSelector(getUpdatingEntity);
+
+  const enterEditMode = useCallback(
+    (id: string) => {
+      dispatch(initExplorerEntityNameEdit(id));
+    },
+    [dispatch],
+  );
+
+  const exitEditMode = useCallback(() => {
+    dispatch({
+      type: ReduxActionTypes.END_EXPLORER_ENTITY_NAME_EDIT,
+    });
+  }, [dispatch]);
+
+  return {
+    enterEditMode,
+    exitEditMode,
+    editingEntity,
+    updatingEntity,
+  };
+}

app/client/src/selectors/explorerSelector.ts

@@ -34,3 +34,5 @@ export const getExplorerActive = (state: AppState) => {
 export const getUpdatingEntity = (state: AppState) => {
   return state.ui.explorer.entity.updatingEntity;
 };
+export const getEditingEntityName = (state: AppState) =>
+  state.ui.explorer.entity.editingEntityName;