chore: Use ADS components in Page List

app/client/src/pages/AppIDE/components/PageList/ContextMenu/Clone.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import { CONTEXT_CLONE, createMessage } from "ee/constants/messages";
+import { useDispatch } from "react-redux";
+import { clonePageInit } from "actions/pageActions";
+
+interface Props {
+  pageId: string;
+  disabled?: boolean;
+}
+
+export const Clone = ({ disabled, pageId }: Props) => {
+  const dispatch = useDispatch();
+  const clonePage = useCallback(() => {
+    dispatch(clonePageInit(pageId));
+  }, [dispatch, pageId]);
+
+  return (
+    <MenuItem disabled={disabled} onSelect={clonePage} startIcon="duplicate">
+      {createMessage(CONTEXT_CLONE)}
+    </MenuItem>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { EntityContextMenu, MenuSeparator } from "@appsmith/ads";
+import { Rename } from "./Rename";
+import { Clone } from "./Clone";
+import { Visibility } from "./Visibility";
+import { SetAsHomePage } from "./SetAsHomePage";
+import { Delete } from "./Delete";
+import { PartialExport } from "./PartialExport";
+import { PartialImport } from "./PartialImport";
+import {
+  getHasManagePagePermission,
+  getHasCreatePagePermission,
+  getHasDeletePagePermission,
+} from "ee/utils/BusinessFeatures/permissionPageHelpers";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import { getPageById } from "selectors/editorSelectors";
+import { getCurrentApplication } from "ee/selectors/applicationSelectors";
+import { useSelector } from "react-redux";
+import type { AppState } from "ee/reducers";
+import { EntityClassNames } from "pages/Editor/Explorer/Entity";
+
+interface Props {
+  pageId: string;
+  pageName: string;
+  applicationId: string;
+  isCurrentPage: boolean;
+  isDefaultPage: boolean;
+  isHidden: boolean;
+  hasExportPermission: boolean;
+  onItemSelected?: () => void;
+}
+
+export const ContextMenu = (props: Props) => {
+  const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
+
+  const pagePermissions =
+    useSelector(getPageById(props.pageId))?.userPermissions || [];
+
+  const userAppPermissions = useSelector(
+    (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [],
+  );
+
+  const canManagePages = getHasManagePagePermission(
+    isFeatureEnabled,
+    pagePermissions,
+  );
+
+  const canCreatePages = getHasCreatePagePermission(
+    isFeatureEnabled,
+    userAppPermissions,
+  );
+
+  const canDeletePages = getHasDeletePagePermission(
+    isFeatureEnabled,
+    pagePermissions,
+  );
+
+  const showPartialImportExport =
+    props.hasExportPermission && props.isCurrentPage;
+
+  return (
+    <EntityContextMenu dataTestId={EntityClassNames.CONTEXT_MENU}>
+      <Rename disabled={!canManagePages} pageId={props.pageId} />
+      <MenuSeparator />
+      <Clone
+        disabled={!canCreatePages || !canManagePages}
+        pageId={props.pageId}
+      />
+      <Visibility
+        disabled={!canManagePages}
+        isHidden={props.isHidden}
+        pageId={props.pageId}
+        pageName={props.pageName}
+      />
+      <SetAsHomePage
+        applicationId={props.applicationId}
+        disabled={!canManagePages || props.isDefaultPage}
+        pageId={props.pageId}
+      />
+      {showPartialImportExport && (
+        <>
+          <MenuSeparator />
+          <PartialExport
+            disabled={!props.hasExportPermission}
+            onItemSelected={props.onItemSelected}
+          />
+          <PartialImport
+            disabled={!props.hasExportPermission}
+            onItemSelected={props.onItemSelected}
+          />
+        </>
+      )}
+      <MenuSeparator />
+      <Delete
+        disabled={!canDeletePages || props.isDefaultPage}
+        pageId={props.pageId}
+        pageName={props.pageName}
+      />
+    </EntityContextMenu>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/Delete.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, useState } from "react";
+import { MenuItem } from "@appsmith/ads";
+import {
+  CONTEXT_DELETE,
+  CONFIRM_CONTEXT_DELETE,
+  createMessage,
+} from "ee/constants/messages";
+import { useDispatch } from "react-redux";
+import { deletePageAction } from "actions/pageActions";
+import AnalyticsUtil from "ee/utils/AnalyticsUtil";
+import clsx from "clsx";
+
+interface Props {
+  pageId: string;
+  pageName: string;
+  disabled?: boolean;
+}
+
+export const Delete = ({ disabled, pageId, pageName }: Props) => {
+  const dispatch = useDispatch();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const deletePageCallback = useCallback(() => {
+    dispatch(deletePageAction(pageId));
+    AnalyticsUtil.logEvent("DELETE_PAGE", {
+      pageName: pageName,
+    });
+  }, [dispatch, pageId, pageName]);
+
+  const onSelect = useCallback(
+    (e?: Event) => {
+      e?.preventDefault();
+      confirmDelete ? deletePageCallback() : setConfirmDelete(true);
+      e?.stopPropagation();
+    },
+    [confirmDelete, deletePageCallback],
+  );
+
+  return (
+    <MenuItem
+      className={clsx("single-select", { "error-menuitem": !disabled })}
+      disabled={disabled}
+      onSelect={onSelect}
+      startIcon="trash"
+    >
+      {confirmDelete
+        ? createMessage(CONFIRM_CONTEXT_DELETE)
+        : createMessage(CONTEXT_DELETE)}
+    </MenuItem>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/PartialExport.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import { CONTEXT_PARTIAL_EXPORT, createMessage } from "ee/constants/messages";
+import { useDispatch } from "react-redux";
+import { openPartialExportModal } from "actions/widgetActions";
+
+interface Props {
+  disabled?: boolean;
+  onItemSelected?: () => void;
+}
+
+export const PartialExport = ({ disabled, onItemSelected }: Props) => {
+  const dispatch = useDispatch();
+
+  const handlePartialExportClick = useCallback(() => {
+    if (onItemSelected) onItemSelected();
+
+    dispatch(openPartialExportModal(true));
+  }, [onItemSelected, dispatch]);
+
+  return (
+    <MenuItem
+      disabled={disabled}
+      onSelect={handlePartialExportClick}
+      startIcon="download"
+    >
+      {createMessage(CONTEXT_PARTIAL_EXPORT)}
+    </MenuItem>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/PartialImport.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import { CONTEXT_PARTIAL_IMPORT, createMessage } from "ee/constants/messages";
+import { useDispatch } from "react-redux";
+import { openPartialImportModal } from "ee/actions/applicationActions";
+
+interface Props {
+  disabled?: boolean;
+  onItemSelected?: () => void;
+}
+
+export const PartialImport = ({ disabled, onItemSelected }: Props) => {
+  const dispatch = useDispatch();
+
+  const handlePartialImportClick = useCallback(() => {
+    if (onItemSelected) onItemSelected();
+
+    dispatch(openPartialImportModal(true));
+  }, [onItemSelected, dispatch]);
+
+  return (
+    <MenuItem
+      disabled={disabled}
+      onSelect={handlePartialImportClick}
+      startIcon="upload-cloud"
+    >
+      {createMessage(CONTEXT_PARTIAL_IMPORT)}
+    </MenuItem>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/Rename.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import { CONTEXT_RENAME, createMessage } from "ee/constants/messages";
+import { useDispatch } from "react-redux";
+import { initExplorerEntityNameEdit } from "actions/explorerActions";
+
+interface Props {
+  pageId: string;
+  disabled?: boolean;
+}
+
+export const Rename = ({ disabled, pageId }: Props) => {
+  const dispatch = useDispatch();
+  const setRename = useCallback(() => {
+    // We add a delay to avoid having the focus stuck in the menu trigger
+    setTimeout(() => {
+      dispatch(initExplorerEntityNameEdit(pageId));
+    }, 100);
+  }, [dispatch, pageId]);
+
+  return (
+    <MenuItem
+      disabled={disabled}
+      onSelect={setRename}
+      startIcon="input-cursor-move"
+    >
+      {createMessage(CONTEXT_RENAME)}
+    </MenuItem>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/SetAsHomePage.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import { CONTEXT_SET_AS_HOME_PAGE, createMessage } from "ee/constants/messages";
+import { useDispatch } from "react-redux";
+import { setPageAsDefault } from "actions/pageActions";
+
+interface Props {
+  pageId: string;
+  applicationId: string;
+  disabled?: boolean;
+}
+
+export const SetAsHomePage = ({ applicationId, disabled, pageId }: Props) => {
+  const dispatch = useDispatch();
+  const setPageAsDefaultCallback = useCallback(() => {
+    dispatch(setPageAsDefault(pageId, applicationId));
+  }, [dispatch, pageId, applicationId]);
+
+  return (
+    <MenuItem
+      disabled={disabled}
+      onSelect={setPageAsDefaultCallback}
+      startIcon="home-3-line"
+    >
+      {createMessage(CONTEXT_SET_AS_HOME_PAGE)}
+    </MenuItem>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/Visibility.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import { useDispatch } from "react-redux";
+import { updatePageAction } from "actions/pageActions";
+
+interface Props {
+  pageId: string;
+  pageName: string;
+  disabled?: boolean;
+  isHidden?: boolean;
+}
+
+export const Visibility = ({ disabled, isHidden, pageId, pageName }: Props) => {
+  const dispatch = useDispatch();
+  const setHiddenField = useCallback(() => {
+    dispatch(
+      updatePageAction({
+        id: pageId,
+        name: pageName,
+        isHidden: !isHidden,
+      }),
+    );
+  }, [dispatch, pageId, pageName, isHidden]);
+
+  return (
+    <MenuItem
+      disabled={disabled}
+      onSelect={setHiddenField}
+      startIcon={isHidden ? "eye-on" : "eye-off"}
+    >
+      <div className="flex items-center justify-between w-full">
+        <span>{isHidden ? "Show" : "Hide"}</span>
+      </div>
+    </MenuItem>
+  );
+};

app/client/src/pages/AppIDE/components/PageList/ContextMenu/index.ts

@@ -0,0 +1 @@
+export { ContextMenu } from "./ContextMenu";

app/client/src/pages/AppIDE/components/PageList/PageElement.tsx → app/client/src/pages/AppIDE/components/PageList/OldPageEntity.tsx

@@ -7,7 +7,7 @@ import { defaultPageIcon, pageIcon } from "pages/Editor/Explorer/ExplorerIcons";
 import { getHasManagePagePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-import PageContextMenu from "./PageContextMenu";
+import PageContextMenu from "./ContextMenu/OldPageContextMenu";
 import {
   getCurrentApplicationId,
   getCurrentPageId,