Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

…o chore/remove-ff-entity-item-usage
appsmithorg · Feb 6, 2025 · 75b36b7 · 75b36b7
2 parents 1682ff2 + afe630a
commit 75b36b7
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 119 deletions.
diff --git a/app/client/packages/design-system/ads/src/Select/Select.tsx b/app/client/packages/design-system/ads/src/Select/Select.tsx
@@ -108,7 +108,7 @@ function Select(props: SelectProps) {
       maxTagCount={maxTagCount}
       maxTagPlaceholder={maxTagPlaceholder || getMaxTagPlaceholder}
       menuItemSelectedIcon=""
-      mode={isMultiSelect ? "tags" : undefined}
+      mode={isMultiSelect ? "multiple" : undefined}
       onDropdownVisibleChange={handleDropdownVisibleChange}
       placeholder={placeholder}
       searchValue={searchValue}

diff --git a/app/client/src/IDE/Components/SidePaneWrapper.tsx b/app/client/src/IDE/Components/SidePaneWrapper.tsx
@@ -15,7 +15,6 @@ const StyledContainer = styled(Flex)<Pick<SidePaneContainerProps, "padded">>`
 function SidePaneWrapper({ children, padded = false }: SidePaneContainerProps) {
   return (
     <StyledContainer
-      borderRight="1px solid var(--ads-v2-color-border)"
       flexDirection="column"
       height="100%"
       padded={padded}

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ExplorerContainer } from "@appsmith/ads";
 import { Switch, useRouteMatch } from "react-router";
 import { SentryRoute } from "ee/AppRouter";
@@ -18,17 +18,32 @@ import {
 import SegmentSwitcher from "./components/SegmentSwitcher";
 import { useSelector } from "react-redux";
 import { getIDEViewMode } from "selectors/ideSelectors";
-import { EditorViewMode } from "ee/entities/IDE/constants";
+import { EditorEntityTab, EditorViewMode } from "ee/entities/IDE/constants";
 import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
+import { useCurrentEditorState } from "../hooks";
 
 const EditorPaneExplorer = () => {
   const { path } = useRouteMatch();
   const ideViewMode = useSelector(getIDEViewMode);
+  const { segment } = useCurrentEditorState();
+
+  const widgetSegmentPaths = useMemo(
+    () => [
+      BUILDER_PATH,
+      BUILDER_CUSTOM_PATH,
+      BUILDER_PATH_DEPRECATED,
+      ...widgetSegmentRoutes.map((route) => `${path}${route}`),
+    ],
+    [path],
+  );
 
   return (
     <ExplorerContainer
       borderRight={
-        ideViewMode === EditorViewMode.SplitScreen ? "NONE" : "STANDARD"
+        ideViewMode === EditorViewMode.SplitScreen ||
+        segment === EditorEntityTab.UI
+          ? "NONE"
+          : "STANDARD"
       }
       className="ide-editor-left-pane__content"
       width={
@@ -47,15 +62,7 @@ const EditorPaneExplorer = () => {
           component={QueryExplorer}
           path={querySegmentRoutes.map((route) => `${path}${route}`)}
         />
-        <SentryRoute
-          component={WidgetsSegment}
-          path={[
-            BUILDER_PATH,
-            BUILDER_CUSTOM_PATH,
-            BUILDER_PATH_DEPRECATED,
-            ...widgetSegmentRoutes.map((route) => `${path}${route}`),
-          ]}
-        />
+        <SentryRoute component={WidgetsSegment} path={widgetSegmentPaths} />
       </Switch>
     </ExplorerContainer>
   );

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx
@@ -55,16 +55,16 @@ export const WidgetContextMenu = (props: {
   const menuContent = useMemo(() => {
     return (
       <>
-        <MenuItem onClick={showBinding}>
-          {createMessage(CONTEXT_SHOW_BINDING)}
-        </MenuItem>
         <MenuItem
           disabled={!canManagePages}
           onClick={editWidgetName}
           startIcon="input-cursor-move"
         >
           {createMessage(CONTEXT_RENAME)}
         </MenuItem>
+        <MenuItem onClick={showBinding} startIcon="binding-new">
+          {createMessage(CONTEXT_SHOW_BINDING)}
+        </MenuItem>
         <MenuItem
           className="error-menuitem"
           disabled={!canManagePages && widget?.isDeletable !== false}

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ExplorerContainerBorder, Flex } from "@appsmith/ads";
+import { Flex } from "@appsmith/ads";
 import EditorPaneExplorer from "./Explorer";
 import Editor from "./Editor";
 import { useSelector } from "react-redux";
@@ -12,11 +12,6 @@ const EditorPane = () => {
 
   return (
     <Flex
-      borderRight={
-        ideViewMode === EditorViewMode.SplitScreen
-          ? ExplorerContainerBorder.STANDARD
-          : ExplorerContainerBorder.NONE
-      }
       className="ide-editor-left-pane"
       flexDirection={
         ideViewMode === EditorViewMode.SplitScreen ? "column" : "row"

diff --git a/app/client/src/pages/Editor/IDE/Header/index.tsx b/app/client/src/pages/Editor/IDE/Header/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import {
-  Flex,
   Divider,
   Modal,
   ModalContent,
@@ -158,41 +157,39 @@ const Header = () => {
           <EditorSaveIndicator isSaving={isSaving} saveError={pageSaveError} />
         </IDEHeader.Left>
         <IDEHeader.Center>
-          <Flex alignItems={"center"}>
-            {currentWorkspace.name && (
-              <>
-                <Link className="mr-1.5" to={APPLICATIONS_URL}>
-                  {currentWorkspace.name}
-                </Link>
-                {"/"}
-                <EditorName
-                  applicationId={applicationId}
-                  className="t--application-name editable-application-name max-w-48"
-                  defaultSavingState={
-                    isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
-                  }
-                  defaultValue={currentApplication?.name || ""}
-                  editInteractionKind={EditInteractionKind.SINGLE}
-                  editorName="Application"
-                  fill
-                  getNavigationMenu={useNavigationMenuData}
-                  isError={isErroredSavingName}
-                  isNewEditor={
-                    applicationList.filter((el) => el.id === applicationId)
-                      .length > 0
-                  }
-                  isPopoverOpen={isPopoverOpen}
-                  onBlur={(value: string) =>
-                    updateApplicationDispatch(applicationId || "", {
-                      name: value,
-                      currentApp: true,
-                    })
-                  }
-                  setIsPopoverOpen={setIsPopoverOpen}
-                />
-              </>
-            )}
-          </Flex>
+          {currentWorkspace.name && (
+            <>
+              <Link className="mr-1.5" to={APPLICATIONS_URL}>
+                {currentWorkspace.name}
+              </Link>
+              {"/"}
+              <EditorName
+                applicationId={applicationId}
+                className="t--application-name editable-application-name max-w-48"
+                defaultSavingState={
+                  isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
+                }
+                defaultValue={currentApplication?.name || ""}
+                editInteractionKind={EditInteractionKind.SINGLE}
+                editorName="Application"
+                fill
+                getNavigationMenu={useNavigationMenuData}
+                isError={isErroredSavingName}
+                isNewEditor={
+                  applicationList.filter((el) => el.id === applicationId)
+                    .length > 0
+                }
+                isPopoverOpen={isPopoverOpen}
+                onBlur={(value: string) =>
+                  updateApplicationDispatch(applicationId || "", {
+                    name: value,
+                    currentApp: true,
+                  })
+                }
+                setIsPopoverOpen={setIsPopoverOpen}
+              />
+            </>
+          )}
         </IDEHeader.Center>
         <IDEHeader.Right>
           <HelpBar />

diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.test.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.test.tsx
@@ -7,6 +7,8 @@ import { getIDETestState } from "test/factories/AppIDEFactoryUtils";
 import { PostgresFactory } from "test/factories/Actions/Postgres";
 import type { AppState } from "ee/reducers";
 import { render } from "test/testUtils";
+import { getDatasourceUsageCountForApp } from "ee/selectors/entitiesSelector";
+import { IDE_TYPE } from "ee/entities/IDE/constants";
 
 const productsDS = datasourceFactory().build({
   name: "Products",
@@ -34,13 +36,15 @@ const ordersAction1 = PostgresFactory.build({
 });
 
 describe("DataSidePane", () => {
-  it("renders the ds and count by using the default selector if dsUsageSelector not passed as a props", () => {
+  it("renders the ds and count by using the dsUsageMap passed as props", () => {
     const state = getIDETestState({
       actions: [usersAction1, usersAction2, ordersAction1],
       datasources: [productsDS, usersDS, ordersDS],
     }) as AppState;
 
-    render(<DataSidePane />, {
+    const dsUsageMap = getDatasourceUsageCountForApp(state, IDE_TYPE.App);
+
+    render(<DataSidePane dsUsageMap={dsUsageMap} />, {
       url: "/app/untitled-application-1/page1-678a356f18346f618bc2c80a/edit/datasource/users-ds-id",
       initialState: state,
     });
@@ -66,41 +70,4 @@ describe("DataSidePane", () => {
       "1 queries in this app",
     );
   });
-
-  it("it uses the selector dsUsageSelector passed as prop", () => {
-    const state = getIDETestState({
-      datasources: [productsDS, usersDS, ordersDS],
-    }) as AppState;
-
-    const usageSelector = () => {
-      return {
-        [usersDS.id]: "Rendering description for users",
-        [productsDS.id]: "Rendering description for products",
-      };
-    };
-
-    render(<DataSidePane dsUsageSelector={usageSelector} />, {
-      url: "/app/untitled-application-1/page1-2/edit/datasource/users-ds-id",
-      initialState: state,
-    });
-
-    expect(screen.getByText("Databases")).toBeInTheDocument();
-
-    expect(screen.getAllByRole("listitem")).toHaveLength(3);
-
-    expect(screen.getAllByRole("listitem")[0].textContent).toContain(
-      "Products",
-    );
-    expect(screen.getAllByRole("listitem")[0].textContent).toContain(
-      "Rendering description for products",
-    );
-
-    expect(screen.getAllByRole("listitem")[1].textContent).toContain("Users");
-    expect(screen.getAllByRole("listitem")[1].textContent).toContain(
-      "Rendering description for users",
-    );
-
-    // No description for orders as not passed in by the selector
-    expect(screen.getAllByRole("listitem")[2].textContent).toEqual("Orders");
-  });
 });
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 import { EntityGroupsList, Flex } from "@appsmith/ads";
 import { useSelector } from "react-redux";
 import {
-  getDatasourceUsageCountForApp,
   getDatasources,
   getDatasourcesGroupedByPluginCategory,
   getPlugins,
@@ -30,7 +29,6 @@ import { getHasCreateDatasourcePermission } from "ee/utils/BusinessFeatures/perm
 import { EmptyState } from "@appsmith/ads";
 import { getAssetUrl } from "ee/utils/airgapHelpers";
 import { getCurrentBasePageId } from "selectors/editorSelectors";
-import { getIDETypeByUrl } from "ee/entities/IDE/utils";
 
 const PaneBody = styled.div`
   padding: var(--ads-v2-spaces-3) 0;
@@ -44,13 +42,11 @@ const DatasourceIcon = styled.img`
 `;
 
 interface DataSidePaneProps {
-  // TODO: Fix this the next time the file is edited
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dsUsageSelector?: (...args: any[]) => Record<string, string>;
+  dsUsageMap: Record<string, string>;
 }
 
 const DataSidePane = (props: DataSidePaneProps) => {
-  const { dsUsageSelector = getDatasourceUsageCountForApp } = props;
+  const { dsUsageMap } = props;
   const basePageId = useSelector(getCurrentBasePageId) as string;
   const [currentSelectedDatasource, setCurrentSelectedDatasource] = useState<
     string | undefined
@@ -60,8 +56,6 @@ const DataSidePane = (props: DataSidePaneProps) => {
   const plugins = useSelector(getPlugins);
   const groupedPlugins = keyBy(plugins, "id");
   const location = useLocation();
-  const ideType = getIDETypeByUrl(location.pathname);
-  const dsUsageMap = useSelector((state) => dsUsageSelector(state, ideType));
   const goToDatasource = useCallback((id: string) => {
     history.push(datasourcesEditorIdURL({ datasourceId: id }));
   }, []);
@@ -101,12 +95,7 @@ const DataSidePane = (props: DataSidePaneProps) => {
   );
 
   return (
-    <Flex
-      borderRight="1px solid var(--ads-v2-color-border)"
-      flexDirection="column"
-      height="100%"
-      width="100%"
-    >
+    <Flex flexDirection="column" height="100%" width="100%">
       <PaneHeader
         rightIcon={
           canCreateDatasource && datasources.length !== 0 ? (

diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
 import { Switch, useRouteMatch } from "react-router";
 import { SentryRoute } from "ee/AppRouter";
@@ -15,11 +16,12 @@ import AppSettingsPane from "./AppSettings";
 import DataSidePane from "./DataSidePane";
 import EditorPane from "../EditorPane";
 import LibrarySidePane from "ee/pages/Editor/IDE/LeftPane/LibrarySidePane";
+import { getDatasourceUsageCountForApp } from "ee/selectors/entitiesSelector";
+import { IDE_TYPE } from "ee/entities/IDE/constants";
 
-export const LeftPaneContainer = styled.div<{ showRightBorder?: boolean }>`
+export const LeftPaneContainer = styled.div`
   height: 100%;
-  border-right: ${({ showRightBorder = true }) =>
-    showRightBorder ? "1px solid var(--ads-v2-color-border)" : "none"};
+  border-right: 1px solid var(--ads-v2-color-border);
   background: var(--ads-v2-color-bg);
   overflow: hidden;
 `;
@@ -45,10 +47,20 @@ const LeftPane = () => {
     [path],
   );
 
+  const dsUsageMap = useSelector((state) =>
+    getDatasourceUsageCountForApp(state, IDE_TYPE.App),
+  );
+
   return (
-    <LeftPaneContainer showRightBorder={false}>
+    <LeftPaneContainer>
       <Switch>
-        <SentryRoute component={DataSidePane} exact path={dataSidePanePaths} />
+        <SentryRoute
+          exact
+          path={dataSidePanePaths}
+          render={(routeProps) => (
+            <DataSidePane {...routeProps} dsUsageMap={dsUsageMap} />
+          )}
+        />
         <SentryRoute
           component={LibrarySidePane}
           exact

diff --git a/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx b/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx
@@ -14,8 +14,6 @@ const SettingsPageWrapper = styled.div`
   &:nth-child(2) {
     height: 100%;
   }
-
-  border-right: 1px solid var(--ads-v2-color-border);
 `;
 
 const EditorSettingsPaneContainer = ({