chore: Refactoring multiple environments to use editorId instead of a…

…ppId (appsmithorg#29965)

Reverts appsmithorg#29942

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Refactor**
- Streamlined the process for setting workspace and editor IDs across
various components and actions.
- Enhanced the route matching mechanism for improved navigation within
the app.

- **Bug Fixes**
- Corrected typos and variable naming inconsistencies to ensure clarity
and consistency in the codebase.

- **Style**
- Adjusted UI components for better accessibility, including the correct
use of Aria attributes.

- **Chores**
- Removed unused imports and code to clean up the codebase and improve
maintainability.

- **Documentation**
- Updated internal documentation to reflect changes in function
signatures and payload structures.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/ButtonGroup2_spec.ts

@@ -150,7 +150,7 @@ describe(
       agHelper.GetNClick(buttongroupwidgetlocators.menu);
       agHelper.GetNClick(buttongroupwidgetlocators.menuSettingInPropPane, 0);
       propPane.TogglePropertyState("Disabled", "On");
-      propPane.TogglePropertyState("Visible", "On", "updateLayout", false);
+      propPane.TogglePropertyState("Visible", "On", "updateLayout");
       agHelper.GetNClick(propPane._goBackToProperty);
       deployMode.DeployApp();
       agHelper.ClickButton("More");

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

@@ -220,9 +220,18 @@ export const setIsReconnectingDatasourcesModalOpen = (payload: {
   payload,
 });
 
-export const setWorkspaceIdForImport = (workspaceId?: string) => ({
+export const setWorkspaceIdForImport = ({
+  editorId = "",
+  workspaceId,
+}: {
+  editorId: string;
+  workspaceId?: string;
+}) => ({
   type: ReduxActionTypes.SET_WORKSPACE_ID_FOR_IMPORT,
-  payload: workspaceId,
+  payload: {
+    workspaceId,
+    editorId,
+  },
 });
 
 export const setPageIdForImport = (pageId?: string) => ({

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

@@ -8,10 +8,15 @@ export const setCurrentEditingEnvironmentID = (currentEditingId: string) => ({
 });
 
 // Redux action to fetch environments
-export const fetchingEnvironmentConfigs = (
-  workspaceId: string,
+export const fetchingEnvironmentConfigs = ({
+  editorId,
   fetchDatasourceMeta = false,
-) => ({
+  workspaceId,
+}: {
+  editorId: string;
+  fetchDatasourceMeta: boolean;
+  workspaceId: string;
+}) => ({
   type: "",
-  payload: { workspaceId, fetchDatasourceMeta },
+  payload: { workspaceId, editorId, fetchDatasourceMeta },
 });

app/client/src/ce/components/SwitchEnvironment/index.tsx

@@ -14,7 +14,6 @@ import {
 } from "@appsmith/selectors/rampSelectors";
 import { isDatasourceInViewMode } from "selectors/ui";
 import { matchDatasourcePath, matchSAASGsheetsPath } from "constants/routes";
-import { useLocation } from "react-router";
 import {
   RAMP_NAME,
   RampFeature,
@@ -48,6 +47,8 @@ const StyledIcon = styled(Icon)`
 
 interface Props {
   viewMode?: boolean;
+  editorId: string;
+  onChangeEnv?: () => void;
 }
 
 interface EnvironmentType {
@@ -74,7 +75,8 @@ const TooltipLink = styled(Link)`
 `;
 
 export default function SwitchEnvironment({}: Props) {
-  const [diableSwitchEnvironment, setDiableSwitchEnvironment] = useState(false);
+  const [disableSwitchEnvironment, setDisableSwitchEnvironment] =
+    useState(false);
   // Fetching feature flags from the store and checking if the feature is enabled
   const showRampSelector = showProductRamps(RAMP_NAME.MULTIPLE_ENV, true);
   const canShowRamp = useSelector(showRampSelector);
@@ -83,14 +85,14 @@ export default function SwitchEnvironment({}: Props) {
     feature: RampFeature.MultipleEnv,
   });
   const rampLink = useSelector(rampLinkSelector);
-  const location = useLocation();
+
   //listen to url change and disable switch environment if datasource page is open
   useEffect(() => {
-    setDiableSwitchEnvironment(
+    setDisableSwitchEnvironment(
       !!matchDatasourcePath(window.location.pathname) ||
         !!matchSAASGsheetsPath(window.location.pathname),
     );
-  }, [location.pathname]);
+  }, [window.location.pathname]);
   //URL for datasource edit and review page is same
   //this parameter helps us to differentiate between the two.
   const isDatasourceViewMode = useSelector(isDatasourceInViewMode);
@@ -125,15 +127,15 @@ export default function SwitchEnvironment({}: Props) {
 
   return (
     <Wrapper
-      aria-disabled={diableSwitchEnvironment && !isDatasourceViewMode}
+      aria-disabled={disableSwitchEnvironment && !isDatasourceViewMode}
       data-testid="t--switch-env"
     >
       <Select
         className="select_environemnt"
         dropdownClassName="select_environemnt_dropdown"
         getPopupContainer={(triggerNode) => triggerNode.parentNode.parentNode}
         isDisabled={
-          (diableSwitchEnvironment && !isDatasourceViewMode) ||
+          (disableSwitchEnvironment && !isDatasourceViewMode) ||
           environmentList.length === 1
         }
         listHeight={400}

app/client/src/ce/constants/routes/appRoutes.ts

@@ -1,6 +1,9 @@
 // Leaving this require here. The path-to-regexp module has a commonJS version and an ESM one.
 // We are loading the correct one with the typings with our compilerOptions property "moduleResolution" set to "node". Ref: https://stackoverflow.com/questions/59013618/unable-to-find-module-path-to-regexp
 // All solutions from closed issues on their repo have been tried. Ref: https://github.com/pillarjs/path-to-regexp/issues/193
+
+import { matchPath } from "react-router";
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { match } = require("path-to-regexp");
 
@@ -69,12 +72,19 @@ export const APP_STATE_PATH = `/:appState`;
 
 export const matchApiBasePath = match(API_EDITOR_BASE_PATH);
 export const matchApiPath = match(API_EDITOR_ID_PATH);
-export const matchDatasourcePath = match(
-  `${BUILDER_PATH}${DATA_SOURCES_EDITOR_ID_PATH}`,
-);
-export const matchSAASGsheetsPath = match(
-  `${BUILDER_PATH}${SAAS_GSHEET_EDITOR_ID_PATH}`,
-);
+export const matchDatasourcePath = (pathname: string) =>
+  matchPath(pathname, {
+    path: [`${BUILDER_PATH}${DATA_SOURCES_EDITOR_ID_PATH}`],
+    strict: false,
+    exact: false,
+  });
+
+export const matchSAASGsheetsPath = (pathname: string) =>
+  matchPath(pathname, {
+    path: [`${BUILDER_PATH}${SAAS_GSHEET_EDITOR_ID_PATH}`],
+    strict: false,
+    exact: false,
+  });
 export const matchQueryBasePath = match(QUERIES_EDITOR_BASE_PATH);
 export const matchQueryPath = match(QUERIES_EDITOR_ID_PATH);
 export const matchQueryBuilderPath = match(

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

@@ -226,7 +226,13 @@ const CreateNewAppsOption = ({
     dispatch(fetchPlugins());
     dispatch(fetchMockDatasources());
     if (application?.workspaceId) {
-      dispatch(fetchingEnvironmentConfigs(application?.workspaceId, true));
+      dispatch(
+        fetchingEnvironmentConfigs({
+          editorId: application.id,
+          fetchDatasourceMeta: true,
+          workspaceId: application?.workspaceId,
+        }),
+      );
     }
     setUseType(START_WITH_TYPE.DATA);
   };

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

@@ -644,11 +644,11 @@ export const handlers = {
   }),
   [ReduxActionTypes.SET_WORKSPACE_ID_FOR_IMPORT]: (
     state: ApplicationsReduxState,
-    action: ReduxAction<string>,
+    action: ReduxAction<{ workspaceId: string }>,
   ) => {
     return {
       ...state,
-      workspaceIdForImport: action.payload,
+      workspaceIdForImport: action.payload.workspaceId,
     };
   },
   [ReduxActionTypes.SET_PAGE_ID_FOR_IMPORT]: (

app/client/src/ce/sagas/ApplicationSagas.tsx

@@ -317,6 +317,7 @@ export function* fetchAppAndPagesSaga(
         type: ReduxActionTypes.SET_CURRENT_WORKSPACE_ID,
         payload: {
           workspaceId: response.data.workspaceId,
+          editorId: response.data.application?.id,
         },
       });
 
@@ -735,6 +736,7 @@ export function* forkApplicationSaga(
         type: ReduxActionTypes.SET_CURRENT_WORKSPACE_ID,
         payload: {
           workspaceId: action.payload.workspaceId,
+          editorId: application.id,
         },
       });
 
@@ -799,7 +801,7 @@ export function* showReconnectDatasourcesModalSaga(
     setUnconfiguredDatasourcesDuringImport(unConfiguredDatasourceList || []),
   );
 
-  yield put(setWorkspaceIdForImport(workspaceId));
+  yield put(setWorkspaceIdForImport({ editorId: application.id, workspaceId }));
   yield put(setPageIdForImport(pageId));
   yield put(setIsReconnectingDatasourcesModalOpen({ isOpen: true }));
 }

app/client/src/ce/sagas/PageSagas.tsx

@@ -202,6 +202,7 @@ export function* fetchPageListSaga(
         type: ReduxActionTypes.SET_CURRENT_WORKSPACE_ID,
         payload: {
           workspaceId,
+          editorId: applicationId,
         },
       });
       yield put({

app/client/src/components/BottomBar/index.tsx

@@ -6,12 +6,27 @@ import ManualUpgrades from "./ManualUpgrades";
 import { Button } from "design-system";
 import SwitchEnvironment from "@appsmith/components/SwitchEnvironment";
 import { Container, Wrapper } from "./components";
+import { useSelector } from "react-redux";
+import { getCurrentApplicationId } from "selectors/editorSelectors";
+import { useDispatch } from "react-redux";
+import { softRefreshActions } from "actions/pluginActionActions";
 
 export default function BottomBar({ viewMode }: { viewMode: boolean }) {
+  const appId = useSelector(getCurrentApplicationId) || "";
+  const dispatch = useDispatch();
+
+  const onChangeEnv = () => {
+    dispatch(softRefreshActions());
+  };
+
   return (
     <Container>
       <Wrapper>
-        <SwitchEnvironment viewMode={viewMode} />
+        <SwitchEnvironment
+          editorId={appId}
+          onChangeEnv={onChangeEnv}
+          viewMode={viewMode}
+        />
         {!viewMode && <QuickGitActions />}
       </Wrapper>
       {!viewMode && (

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

@@ -204,7 +204,7 @@ function ImportApplicationModal(props: ImportApplicationModalProps) {
     dispatch({
       type: ReduxActionTypes.GIT_INFO_INIT,
     });
-    dispatch(setWorkspaceIdForImport(workspaceId));
+    dispatch(setWorkspaceIdForImport({ editorId: appId || "", workspaceId }));
 
     dispatch(
       setIsGitSyncModalOpen({

app/client/src/pages/Editor/gitSync/GitSyncModal/GitSyncModalV1.tsx

@@ -29,6 +29,7 @@ import {
   IMPORT_FROM_GIT_REPOSITORY,
 } from "@appsmith/constants/messages";
 import { GitSyncModalTab } from "entities/GitSync";
+import { getCurrentApplicationId } from "selectors/editorSelectors";
 
 const ModalContentContainer = styled(ModalContent)`
   min-height: 650px;
@@ -67,10 +68,13 @@ function GitSyncModalV1(props: { isImport?: boolean }) {
   const isGitConnected = useSelector(getIsGitConnected);
 
   const activeTabKey = useSelector(getActiveGitSyncModalTab);
+  const appId = useSelector(getCurrentApplicationId);
 
   const handleClose = useCallback(() => {
     dispatch(setIsGitSyncModalOpen({ isOpen: false }));
-    dispatch(setWorkspaceIdForImport(""));
+    dispatch(
+      setWorkspaceIdForImport({ editorId: appId || "", workspaceId: "" }),
+    );
   }, [dispatch, setIsGitSyncModalOpen]);
 
   const setActiveTabKey = useCallback(

app/client/src/pages/Editor/gitSync/GitSyncModal/GitSyncModalV2.tsx

@@ -32,6 +32,7 @@ import ConnectionSuccess from "../Tabs/ConnectionSuccess";
 import styled from "styled-components";
 import ReconnectSSHError from "../components/ReconnectSSHError";
 import { getCurrentAppGitMetaData } from "@appsmith/selectors/applicationSelectors";
+import { getCurrentApplicationId } from "selectors/editorSelectors";
 
 const StyledModalContent = styled(ModalContent)`
   &&& {
@@ -53,6 +54,7 @@ function GitSyncModalV2({ isImport = false }: GitSyncModalV2Props) {
   const isModalOpen = useSelector(getIsGitSyncModalOpen);
   const isGitConnected = useSelector(getIsGitConnected);
   const isDeploying = useSelector(getIsDeploying);
+  const appId = useSelector(getCurrentApplicationId);
 
   const menuOptions = [
     {
@@ -113,7 +115,9 @@ function GitSyncModalV2({ isImport = false }: GitSyncModalV2Props) {
 
   const handleClose = useCallback(() => {
     dispatch(setIsGitSyncModalOpen({ isOpen: false }));
-    dispatch(setWorkspaceIdForImport(""));
+    dispatch(
+      setWorkspaceIdForImport({ editorId: appId || "", workspaceId: "" }),
+    );
   }, [dispatch, setIsGitSyncModalOpen]);
 
   return (

app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx

@@ -348,7 +348,12 @@ function ReconnectDatasourceModal() {
             (app: any) => app.id === queryAppId,
           );
           if (application) {
-            dispatch(setWorkspaceIdForImport(workspace.id));
+            dispatch(
+              setWorkspaceIdForImport({
+                editorId: appId || "",
+                workspaceId: workspace.id,
+              }),
+            );
             dispatch(setIsReconnectingDatasourcesModalOpen({ isOpen: true }));
             const defaultPageId = getDefaultPageId(application.pages);
             if (pageIdForImport) {
@@ -430,7 +435,9 @@ function ReconnectDatasourceModal() {
   const onClose = () => {
     localStorage.setItem("importedAppPendingInfo", "null");
     dispatch(setIsReconnectingDatasourcesModalOpen({ isOpen: false }));
-    dispatch(setWorkspaceIdForImport(""));
+    dispatch(
+      setWorkspaceIdForImport({ editorId: appId || "", workspaceId: "" }),
+    );
     dispatch(setPageIdForImport(""));
     dispatch(resetDatasourceConfigForImportFetchedFlag());
     setSelectedDatasourceId("");

app/client/src/pages/Editor/gitSync/Tabs/GitConnectionV2/ChooseGitProvider.tsx

@@ -42,6 +42,7 @@ import {
   createMessage,
 } from "@appsmith/constants/messages";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import { getCurrentApplicationId } from "selectors/editorSelectors";
 
 const WellInnerContainer = styled.div`
   padding-left: 16px;
@@ -70,6 +71,7 @@ function ChooseGitProvider({
   onChange = noop,
   value = {},
 }: ChooseGitProviderProps) {
+  const appId = useSelector(getCurrentApplicationId);
   const workspace = useSelector(getCurrentAppWorkspace);
   const isMobile = useIsMobileDevice();
 
@@ -80,7 +82,12 @@ function ChooseGitProvider({
     dispatch({
       type: ReduxActionTypes.GIT_INFO_INIT,
     });
-    dispatch(setWorkspaceIdForImport(workspace.id));
+    dispatch(
+      setWorkspaceIdForImport({
+        editorId: appId || "",
+        workspaceId: workspace.id,
+      }),
+    );
 
     dispatch(
       setIsGitSyncModalOpen({