fix: page list item icons aren't permission driven on first load (#18586)

* fix: page list ctas permission driven fix

* fix: page list and page context menu , datasource action pane create permission driven

* fix: check manage permission on page aswell for cloning

* fix: duplicate & fork app permission driven

* fix: onclick triggers on disabled icons

app/client/src/pages/Applications/ApplicationCard.tsx

@@ -310,6 +310,7 @@ type ApplicationCardProps = {
   update?: (id: string, data: UpdateApplicationPayload) => void;
   enableImportExport?: boolean;
   isMobile?: boolean;
+  hasCreateNewApplicationPermission?: boolean;
 };
 
 const EditButton = styled(Button)`
@@ -469,7 +470,11 @@ export function ApplicationCard(props: ApplicationCardProps) {
         cypressSelector: "t--share",
       });
     }
-    if (props.duplicate && hasEditPermission) {
+    if (
+      props.duplicate &&
+      props.hasCreateNewApplicationPermission &&
+      hasEditPermission
+    ) {
       moreActionItems.push({
         onSelect: duplicateApp,
         text: "Duplicate",
@@ -516,6 +521,7 @@ export function ApplicationCard(props: ApplicationCardProps) {
   const hasDeletePermission = hasDeleteApplicationPermission(
     props.application?.userPermissions,
   );
+
   const updateColor = (color: string) => {
     setSelectedColor(color);
     props.update &&

app/client/src/pages/Applications/index.tsx

@@ -922,6 +922,9 @@ function ApplicationsSection(props: any) {
                       delete={deleteApplication}
                       duplicate={duplicateApplicationDispatch}
                       enableImportExport={enableImportExport}
+                      hasCreateNewApplicationPermission={
+                        hasCreateNewApplicationPermission
+                      }
                       isMobile={isMobile}
                       key={application.id}
                       update={updateApplicationDispatch}

app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx

@@ -25,10 +25,13 @@ import {
   createMessage,
 } from "@appsmith/constants/messages";
 import {
+  hasCreatePagePermission,
   hasDeletePagePermission,
   hasManagePagePermission,
 } from "@appsmith/utils/permissionHelpers";
 import { getPageById } from "selectors/editorSelectors";
+import { getCurrentApplication } from "selectors/applicationSelectors";
+import { AppState } from "@appsmith/reducers";
 
 const CustomLabel = styled.div`
   display: flex;
@@ -101,6 +104,12 @@ export function PageContextMenu(props: {
   const pagePermissions =
     useSelector(getPageById(props.pageId))?.userPermissions || [];
 
+  const userAppPermissions = useSelector(
+    (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [],
+  );
+
+  const canCreatePages = hasCreatePagePermission(userAppPermissions);
+
   const canManagePages = hasManagePagePermission(pagePermissions);
 
   const canDeletePages = hasDeletePagePermission(pagePermissions);
@@ -111,11 +120,12 @@ export function PageContextMenu(props: {
       onSelect: editPageName,
       label: createMessage(CONTEXT_EDIT_NAME),
     },
-    canManagePages && {
+    canCreatePages &&
-      value: "clone",
+      canManagePages && {
-      onSelect: clonePage,
+        value: "clone",
-      label: createMessage(CONTEXT_CLONE),
+        onSelect: clonePage,
-    },
+        label: createMessage(CONTEXT_CLONE),
+      },
     canManagePages && {
       value: "visibility",
       onSelect: setHiddenField,

app/client/src/pages/Editor/Explorer/Pages/index.tsx

@@ -10,7 +10,6 @@ import {
   getCurrentApplication,
   getCurrentApplicationId,
   getCurrentPageId,
-  getPagePermissions,
 } from "selectors/editorSelectors";
 import Entity, { EntityClassNames } from "../Entity";
 import history from "utils/history";
@@ -192,18 +191,16 @@ function Pages() {
     (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [],
   );
 
-  const pagePermissions = useSelector(getPagePermissions);
-
   const canCreatePages = hasCreatePagePermission(userAppPermissions);
 
-  const canManagePages = hasManagePagePermission(pagePermissions);
-
   const pageElements = useMemo(
     () =>
       pages.map((page) => {
         const icon = page.isDefault ? defaultPageIcon : pageIcon;
         const rightIcon = !!page.isHidden ? hiddenPageIcon : null;
         const isCurrentPage = currentPageId === page.pageId;
+        const pagePermissions = page.userPermissions;
+        const canManagePages = hasManagePagePermission(pagePermissions);
         const contextMenu = (
           <PageContextMenu
             applicationId={applicationId as string}
@@ -247,7 +244,6 @@ function Pages() {
         action={onPageListSelection}
         addButtonHelptext={createMessage(ADD_PAGE_TOOLTIP)}
         alwaysShowRightIcon
-        canEditEntityName={canManagePages}
         className="group pages"
         collapseRef={pageResizeRef}
         customAddButton={

app/client/src/pages/Editor/PagesEditor/ContextMenu.tsx

@@ -14,17 +14,20 @@ import EditName from "./EditName";
 import { useSelector } from "react-redux";
 
 import {
+  getCurrentApplication,
   getCurrentApplicationId,
-  getPagePermissions,
+  getPageById,
 } from "selectors/editorSelectors";
 import { Colors } from "constants/Colors";
 import { TooltipComponent } from "design-system";
 import { createMessage, SETTINGS_TOOLTIP } from "@appsmith/constants/messages";
 import { TOOLTIP_HOVER_ON_DELAY } from "constants/AppConstants";
 import {
+  hasCreatePagePermission,
   hasDeletePagePermission,
   hasManagePagePermission,
 } from "@appsmith/utils/permissionHelpers";
+import { AppState } from "@appsmith/reducers";
 
 // render over popover portals
 const Container = styled.div`
@@ -141,15 +144,24 @@ function ContextMenu(props: Props) {
    * opens the context menu on interaction ( on click )
    */
   const handleInteraction = useCallback((isOpen) => {
-    setIsOpen(isOpen);
+    (canManagePages || canDeletePages) && setIsOpen(isOpen);
   }, []);
 
-  const pagePermissions = useSelector(getPagePermissions);
+  const pagePermissions =
+    useSelector(getPageById(page.pageId))?.userPermissions || [];
+
+  const userAppPermissions = useSelector(
+    (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [],
+  );
+
+  const canCreatePages = hasCreatePagePermission(userAppPermissions);
 
   const canManagePages = hasManagePagePermission(pagePermissions);
 
   const canDeletePages = hasDeletePagePermission(pagePermissions);
 
+  const canClonePages = canCreatePages && canManagePages;
+
   return (
     <Popover2
       content={
@@ -164,9 +176,9 @@ function ContextMenu(props: Props) {
               <Action>
                 <CopyIcon
                   color={Colors.GREY_9}
-                  disabled={!canManagePages}
+                  disabled={!canClonePages}
                   height={16}
-                  onClick={!canManagePages ? noop : () => onCopy(page.pageId)}
+                  onClick={!canClonePages ? noop : () => onCopy(page.pageId)}
                   width={16}
                 />
               </Action>
@@ -239,6 +251,7 @@ function ContextMenu(props: Props) {
         <Action className={isOpen ? "active" : ""} type="button">
           <SettingsIcon
             color={Colors.GREY_9}
+            disabled={!canManagePages && !canDeletePages}
             height={16}
             onClick={noop}
             width={16}

app/client/src/pages/Editor/PagesEditor/PageListItem.tsx

@@ -31,16 +31,18 @@ import { TOOLTIP_HOVER_ON_DELAY } from "constants/AppConstants";
 
 import {
   getCurrentApplicationId,
-  getPagePermissions,
+  getPageById,
   selectApplicationVersion,
 } from "selectors/editorSelectors";
 import { ApplicationVersion } from "actions/applicationActions";
 import { AppState } from "@appsmith/reducers";
 import {
+  hasCreatePagePermission,
   hasDeletePagePermission,
   hasManagePagePermission,
 } from "@appsmith/utils/permissionHelpers";
 import { noop } from "utils/AppsmithUtils";
+import { getCurrentApplication } from "selectors/applicationSelectors";
 
 export const Container = styled.div`
   display: flex;
@@ -152,12 +154,21 @@ function PageListItem(props: PageListItemProps) {
     return dispatch(updatePage(item.pageId, item.pageName, !item.isHidden));
   }, [dispatch, item]);
 
-  const pagePermissions = useSelector(getPagePermissions);
+  const pagePermissions =
+    useSelector(getPageById(item.pageId))?.userPermissions || [];
+
+  const userAppPermissions = useSelector(
+    (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [],
+  );
+
+  const canCreatePages = hasCreatePagePermission(userAppPermissions);
 
   const canManagePages = hasManagePagePermission(pagePermissions);
 
   const canDeletePages = hasDeletePagePermission(pagePermissions);
 
+  const canClonePages = canCreatePages && canManagePages;
+
   return (
     <Container>
       <ListItem>
@@ -212,9 +223,9 @@ function PageListItem(props: PageListItemProps) {
                 <Action type="button">
                   <CopyIcon
                     color={Colors.GREY_9}
-                    disabled={!canManagePages}
+                    disabled={!canClonePages}
                     height={16}
-                    onClick={!canManagePages ? noop : clonePageCallback}
+                    onClick={!canClonePages ? noop : clonePageCallback}
                     width={16}
                   />
                 </Action>

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -109,6 +109,7 @@ import {
 import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import {
+  hasCreateDatasourcePermission,
   hasDeleteActionPermission,
   hasExecuteActionPermission,
   hasManageActionPermission,
@@ -125,6 +126,7 @@ import {
   setQueryPaneResponseSelectedTab,
 } from "actions/queryPaneActions";
 import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
+import { getCurrentAppWorkspace } from "@appsmith/selectors/workspaceSelectors";
 
 const QueryFormContainer = styled.form`
   flex: 1;
@@ -522,6 +524,14 @@ export function EditorJSONtoForm(props: Props) {
     currentActionConfig?.userPermissions,
   );
 
+  const userWorkspacePermissions = useSelector(
+    (state: AppState) => getCurrentAppWorkspace(state).userPermissions ?? [],
+  );
+
+  const canCreateDatasource = hasCreateDatasourcePermission(
+    userWorkspacePermissions,
+  );
+
   // Query is executed even once during the session, show the response data.
   if (executedQueryData) {
     if (!executedQueryData.isExecutionSuccess) {
@@ -555,10 +565,12 @@ export function EditorJSONtoForm(props: Props) {
     return (
       <>
         <components.MenuList {...props}>{props.children}</components.MenuList>
-        <CreateDatasource onClick={() => onCreateDatasourceClick()}>
+        {canCreateDatasource ? (
-          <Icon className="createIcon" icon="plus" iconSize={11} />
+          <CreateDatasource onClick={() => onCreateDatasourceClick()}>
-          {createMessage(CREATE_NEW_DATASOURCE)}
+            <Icon className="createIcon" icon="plus" iconSize={11} />
-        </CreateDatasource>
+            {createMessage(CREATE_NEW_DATASOURCE)}
+          </CreateDatasource>
+        ) : null}
       </>
     );
   }