fix: Adding invite to app permission to fix share modal getting auto-closed issue (#27106)

## Description

A public app that the logged-in user doesn't have access to was
auto-closing the share modal when opened. This was happening because we
were fetching workspace even when the user did not have the invite to
app permission. This is now fixed with this PR.

#### PR fixes following issue(s)
Fixes [#26870](https://github.com/appsmithorg/appsmith/issues/26870)

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing

#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [x] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

app/client/src/ce/actions/applicationActions.ts

@@ -175,11 +175,6 @@ export const resetCurrentApplication = () => {
   };
 };
 
-export const setShowAppInviteUsersDialog = (payload: boolean) => ({
-  type: ReduxActionTypes.SET_SHOW_APP_INVITE_USERS_MODAL,
-  payload,
-});
-
 export const initDatasourceConnectionDuringImportRequest = (
   payload: string,
 ) => ({

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -136,7 +136,6 @@ const ActionTypes = {
   FETCH_FEATURE_FLAGS_SUCCESS: "FETCH_FEATURE_FLAGS_SUCCESS",
   BIND_DATA_TO_WIDGET: "BIND_DATA_TO_WIDGET",
   BIND_DATA_ON_CANVAS: "BIND_DATA_ON_CANVAS",
-  SET_SHOW_APP_INVITE_USERS_MODAL: "SET_SHOW_APP_INVITE_USERS_MODAL",
   UPLOAD_PROFILE_PHOTO: "UPLOAD_PROFILE_PHOTO",
   REMOVE_PROFILE_PHOTO: "REMOVE_PROFILE_PHOTO",
   UPDATE_PHOTO_ID: "UPDATE_PHOTO_ID",

app/client/src/ce/constants/messages.ts

@@ -164,7 +164,7 @@ export const INVITE_TAB = () => "Invite";
 export const INVITE_USERS_VALIDATION_EMAIL_LIST = () =>
   `Invalid email address(es) found`;
 export const INVITE_USERS_VALIDATION_ROLE_EMPTY = () => `Please select a role`;
-
+export const APPLICATION_INVITE = () => "Application Invite";
 export const INVITE_USERS_EMAIL_LIST_PLACEHOLDER = () =>
   `Comma separated emails`;
 export const INVITE_USERS_ROLE_SELECT_PLACEHOLDER = () => `Select role`;

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

@@ -44,10 +44,7 @@ import {
   TextType,
 } from "design-system-old";
 import { Divider, Icon } from "design-system";
-import {
-  setShowAppInviteUsersDialog,
-  updateApplication,
-} from "@appsmith/actions/applicationActions";
+import { updateApplication } from "@appsmith/actions/applicationActions";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import type { UpdateApplicationPayload } from "@appsmith/api/ApplicationApi";
 import PerformanceTracker, {
@@ -546,10 +543,6 @@ export function ApplicationsSection(props: any) {
     });
   };
 
-  const handleFormOpenOrClose = useCallback((isOpen: boolean) => {
-    dispatch(setShowAppInviteUsersDialog(isOpen));
-  }, []);
-
   let updatedWorkspaces;
   if (!isLoadingResources) {
     updatedWorkspaces = userWorkspaces;
@@ -659,7 +652,6 @@ export function ApplicationsSection(props: any) {
                     {canInviteToWorkspace && !isMobile && (
                       <FormDialogComponent
                         Form={WorkspaceInviteUsersForm}
-                        onOpenOrClose={handleFormOpenOrClose}
                         placeholder={createMessage(
                           INVITE_USERS_PLACEHOLDER,
                           cloudHosting,

app/client/src/ce/reducers/uiReducers/applicationsReducer.tsx

@@ -42,7 +42,6 @@ export const initialState: ApplicationsReduxState = {
   isSavingWorkspaceInfo: false,
   importingApplication: false,
   importedApplication: null,
-  showAppInviteUsersDialog: false,
   isImportAppModalOpen: false,
   workspaceIdForImport: null,
   pageIdForImport: "",
@@ -450,13 +449,6 @@ export const handlers = {
     ...state,
     currentApplication: null,
   }),
-  [ReduxActionTypes.SET_SHOW_APP_INVITE_USERS_MODAL]: (
-    state: ApplicationsReduxState,
-    action: ReduxAction<boolean>,
-  ) => ({
-    ...state,
-    showAppInviteUsersDialog: action.payload,
-  }),
   [ReduxActionTypes.CONNECT_TO_GIT_SUCCESS]: (
     state: ApplicationsReduxState,
     action: ReduxAction<ConnectToGitResponse>,
@@ -686,7 +678,6 @@ export interface ApplicationsReduxState {
   userWorkspaces: Workspaces[];
   isSavingWorkspaceInfo: boolean;
   importingApplication: boolean;
-  showAppInviteUsersDialog: boolean;
   importedApplication: unknown;
   isImportAppModalOpen: boolean;
   workspaceIdForImport: any;

app/client/src/ce/selectors/applicationSelectors.tsx

@@ -207,9 +207,6 @@ export const getCurrentAppGitMetaData = createSelector(
 export const getIsSavingWorkspaceInfo = (state: AppState) =>
   state.ui.applications.isSavingWorkspaceInfo;
 
-export const showAppInviteUsersDialogSelector = (state: AppState) =>
-  state.ui.applications.showAppInviteUsersDialog;
-
 export const getIsDatasourceConfigForImportFetched = (state: AppState) =>
   state.ui.applications.isDatasourceConfigForImportFetched;
 

app/client/src/components/editorComponents/form/FormDialogComponent.tsx

@@ -14,7 +14,6 @@ type FormDialogComponentProps = {
   message?: string;
   Form: any;
   onClose?: () => void;
-  onOpenOrClose?: (isOpen: boolean) => void;
   applicationId?: string;
   placeholder?: string;
   hideDefaultTrigger?: boolean;
@@ -29,7 +28,6 @@ export function FormDialogComponent(props: FormDialogComponentProps) {
 
   const setIsOpen = (isOpen: boolean) => {
     setIsModalOpenState(isOpen);
-    props.onOpenOrClose && props.onOpenOrClose(isOpen);
   };
 
   const onOpenChange = (isOpen: boolean) => {

app/client/src/pages/AppViewer/Navigation/components/ShareButton.tsx

@@ -10,6 +10,7 @@ import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import { get } from "lodash";
 import type { ApplicationPayload } from "@appsmith/constants/ReduxActionConstants";
 import {
+  APPLICATION_INVITE,
   createMessage,
   INVITE_USERS_PLACEHOLDER,
   SHARE_APP,
@@ -80,7 +81,7 @@ const ShareButton = (props: ShareButtonProps) => {
           isOpen={showModal}
           onClose={() => setShowModal(false)}
           placeholder={createMessage(INVITE_USERS_PLACEHOLDER, cloudHosting)}
-          title={currentApplicationDetails?.name}
+          title={createMessage(APPLICATION_INVITE)}
           workspace={{ id: currentWorkspaceId }}
         />
       )}

app/client/src/pages/AppViewer/PageMenu.tsx

@@ -80,11 +80,6 @@ export function PageMenu(props: NavigationProps) {
     });
   }
 
-  // TODO: Rahul - Check how to use this function in the new layout.
-  // const handleFormOpenOrClose = useCallback((isOpen: boolean) => {
-  //   dispatch(setShowAppInviteUsersDialog(isOpen));
-  // }, []);
-
   return (
     <>
       {/* BG OVERLAY */}

app/client/src/pages/Editor/EditorHeader.tsx

@@ -86,6 +86,7 @@ import {
   RENAME_APPLICATION_TOOLTIP,
   SHARE_BUTTON_TOOLTIP,
   SHARE_BUTTON_TOOLTIP_WITH_USER,
+  APPLICATION_INVITE,
 } from "@appsmith/constants/messages";
 import { getExplorerPinned } from "selectors/explorerSelector";
 import {
@@ -539,7 +540,7 @@ export function EditorHeader() {
               open={showModal}
             >
               <ModalContent style={{ width: "640px" }}>
-                <ModalHeader>Application Invite</ModalHeader>
+                <ModalHeader>{createMessage(APPLICATION_INVITE)}</ModalHeader>
                 <ModalBody>
                   <Tabs
                     onValueChange={(value) => setActiveTab(value)}

app/client/src/pages/workspace/AppInviteUsersForm.tsx

@@ -60,7 +60,7 @@ function AppInviteUsersForm(props: any) {
   const [isCopied, setIsCopied] = useState(false);
   const currentWorkspaceId = useSelector(getCurrentWorkspaceId);
   const currentWorkspace = useWorkspace(currentWorkspaceId);
-  const userWorkspacePermissions = currentWorkspace.userPermissions ?? [];
+  const userWorkspacePermissions = currentWorkspace?.userPermissions ?? [];
   const userAppPermissions = currentApplicationDetails?.userPermissions ?? [];
   const canInviteToApplication = hasInviteUserToApplicationPermission([
     ...userWorkspacePermissions,

app/client/src/pages/workspace/settings.tsx

@@ -14,10 +14,7 @@ import { Tabs, Tab, TabsList, TabPanel } from "design-system";
 import MemberSettings from "@appsmith/pages/workspace/Members";
 import { GeneralSettings } from "./General";
 import * as Sentry from "@sentry/react";
-import {
-  getAllApplications,
-  setShowAppInviteUsersDialog,
-} from "@appsmith/actions/applicationActions";
+import { getAllApplications } from "@appsmith/actions/applicationActions";
 import { useMediaQuery } from "react-responsive";
 import { BackButton, StickyHeader } from "components/utils/helperComponents";
 import { debounce } from "lodash";
@@ -159,10 +156,6 @@ export default function Settings() {
     }
   }, [dispatch, currentWorkspace]);
 
-  const handleFormOpenOrClose = useCallback((isOpen: boolean) => {
-    dispatch(setShowAppInviteUsersDialog(isOpen));
-  }, []);
-
   const GeneralSettingsComponent = (
     <SentryRoute
       component={GeneralSettings}
@@ -276,7 +269,6 @@ export default function Settings() {
           hideDefaultTrigger
           isOpen={showModal}
           onClose={() => setShowModal(false)}
-          onOpenOrClose={handleFormOpenOrClose}
           placeholder={createMessage(INVITE_USERS_PLACEHOLDER, cloudHosting)}
           workspace={currentWorkspace}
         />

app/client/src/utils/hooks/useWorkspace.tsx

@@ -5,16 +5,30 @@ import { getCurrentUser } from "selectors/usersSelectors";
 
 import { getCurrentAppWorkspace } from "@appsmith/selectors/workspaceSelectors";
 import { ANONYMOUS_USERNAME } from "constants/userConstants";
+import { getCurrentApplication } from "selectors/editorSelectors";
+import { hasInviteUserToApplicationPermission } from "@appsmith/utils/permissionHelpers";
 
 const useWorkspace = (workspaceId: string) => {
   const dispatch = useDispatch();
   const workspace = useSelector(getCurrentAppWorkspace);
   const currentUser = useSelector(getCurrentUser);
+  const currentApplicationDetails = useSelector(getCurrentApplication);
+
+  const userWorkspacePermissions = workspace?.userPermissions ?? [];
+  const userAppPermissions = currentApplicationDetails?.userPermissions ?? [];
+  const canInviteToApplication = hasInviteUserToApplicationPermission([
+    ...userWorkspacePermissions,
+    ...userAppPermissions,
+  ]);
 
   useEffect(() => {
     if (!currentUser || currentUser.username === ANONYMOUS_USERNAME) return;
 
-    if ((!workspace || !workspace.userPermissions) && workspaceId) {
+    if (
+      (!workspace || !workspace?.userPermissions) &&
+      workspaceId &&
+      canInviteToApplication
+    ) {
       dispatch(fetchWorkspace(workspaceId, true));
     }
   }, [workspaceId, currentUser && currentUser.username]);