chore: Page Pane visual revisions (#29927)

Further revisions on visual elements marked in
fixes #29921

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

## Summary by CodeRabbit

- **New Features**
- Introduced `SegmentAddHeader` and `SegmentedHeader` components for
improved navigation and functionality in the editor pane.
  
- **Enhancements**
- Updated the editor pane layout and styling for better visual appeal
and usability.
- Enhanced button functionality to streamline user interactions within
the editor.

- **Style Updates**
- Adjusted various styling properties across components, including
padding, gap, and flex attributes for a more cohesive design language.

- **Bug Fixes**
- Fixed button logic and event handling functions to ensure smoother
user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/pages/Editor/IDE/EditorPane/AddQuery.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { Button, Flex, List, Text } from "design-system";
+import { Flex, List, Text } from "design-system";
 import type { ListItemProps } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import keyBy from "lodash/keyBy";
@@ -20,6 +20,7 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { getPagePermissions } from "selectors/editorSelectors";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import { createMessage, PAGES_PANE_TEXTS } from "@appsmith/constants/messages";
+import SegmentAddHeader from "./components/SegmentAddHeader";
 
 const StyledList = styled(List)`
   padding: 0;
@@ -94,33 +95,19 @@ const AddQuery = () => {
   }, [pageId]);
 
   return (
-    <>
-      <Flex
-        alignItems="center"
-        borderBottom={"1px solid var(--ads-v2-color-border)"}
-        justifyContent="space-between"
-        px="spaces-4"
-        py="spaces-2"
-      >
-        <Text color="var(--ads-v2-color-fg)" kind="heading-xs">
-          {createMessage(PAGES_PANE_TEXTS.query_create_tab_title)}
-        </Text>
-        <Button
-          isIconButton
-          kind={"tertiary"}
-          onClick={closeButtonClickHandler}
-          size={"sm"}
-          startIcon={"close-line"}
-        />
-      </Flex>
+    <Flex flexDirection="column" gap={"spaces-4"}>
+      <SegmentAddHeader
+        onCloseClick={closeButtonClickHandler}
+        titleMessage={PAGES_PANE_TEXTS.query_create_tab_title}
+      />
       <Flex
         flexDirection="column"
-        gap="spaces-3"
+        gap="spaces-4"
         overflow="scroll"
+        pr="spaces-2"
         px="spaces-3"
-        py="spaces-4"
       >
-        <Flex flexDirection="column" gap="spaces-2">
+        <Flex flexDirection="column">
           {/* From source */}
           <Text
             className="px-[var(--ads-v2-spaces-3)] py-[var(--ads-v2-spaces-1)]"
@@ -134,7 +121,7 @@ const AddQuery = () => {
             items={getListItems(fromExistingSources)}
           />
         </Flex>
-        <Flex flexDirection="column" gap="spaces-2">
+        <Flex flexDirection="column">
           {/* From source */}
           <Text
             className="px-[var(--ads-v2-spaces-3)] py-[var(--ads-v2-spaces-1)]"
@@ -149,7 +136,7 @@ const AddQuery = () => {
           />
         </Flex>
       </Flex>
-    </>
+    </Flex>
   );
 };
 

app/client/src/pages/Editor/IDE/EditorPane/AddWidgets.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback } from "react";
-import { Flex, Text, Button } from "design-system";
+import { Flex } from "design-system";
 import { useSelector } from "react-redux";
 
 import history from "utils/history";
 import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
 import WidgetSidebarWithTags from "pages/Editor/WidgetSidebarWithTags";
 import { widgetListURL } from "@appsmith/RouteBuilder";
-import { createMessage, PAGES_PANE_TEXTS } from "@appsmith/constants/messages";
+import { PAGES_PANE_TEXTS } from "@appsmith/constants/messages";
+import SegmentAddHeader from "./components/SegmentAddHeader";
 
 const AddWidgets = () => {
   const pageId = useSelector(getCurrentPageId) as string;
@@ -17,28 +18,10 @@ const AddWidgets = () => {
 
   return (
     <>
-      <Flex
-        alignItems="center"
-        borderBottom={"1px solid var(--ads-v2-color-border)"}
-        justifyContent="space-between"
-        px="spaces-4"
-        py="spaces-2"
-      >
-        <Text
-          className="overflow-hidden overflow-ellipsis whitespace-nowrap"
-          color="var(--ads-v2-color-fg)"
-          kind="heading-xs"
-        >
-          {createMessage(PAGES_PANE_TEXTS.widgets_create_tab_title)}
-        </Text>
-        <Button
-          isIconButton
-          kind={"tertiary"}
-          onClick={closeButtonClickHandler}
-          size={"sm"}
-          startIcon={"close-line"}
-        />
-      </Flex>
+      <SegmentAddHeader
+        onCloseClick={closeButtonClickHandler}
+        titleMessage={PAGES_PANE_TEXTS.widgets_create_tab_title}
+      />
       <Flex flexDirection="column" gap="spaces-3" height="calc(100vh - 310px)">
         <WidgetSidebarWithTags isActive />
       </Flex>

app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { Button, Flex, SegmentedControl } from "design-system";
-import { createMessage, PAGES_PANE_TEXTS } from "@appsmith/constants/messages";
+import { Flex } from "design-system";
 import { Switch, useRouteMatch } from "react-router";
 import { SentryRoute } from "@appsmith/AppRouter";
 import { QueriesSection } from "./QueriesSection";
@@ -18,91 +17,15 @@ import {
 import { SAAS_EDITOR_API_ID_PATH } from "../../SaaSEditor/constants";
 import { JSSection } from "./JS_Section";
 import { WidgetsSection } from "./WidgetsSection";
-import { useSelector } from "react-redux";
-import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
-import history, { NavigationMethod } from "utils/history";
-import {
-  globalAddURL,
-  jsCollectionListURL,
-  queryListURL,
-  widgetListURL,
-} from "@appsmith/RouteBuilder";
-import { EditorEntityTab } from "entities/IDE/constants";
 import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
-import { useCurrentEditorState } from "../hooks";
+import SegmentedHeader from "./components/SegmentedHeader";
 
 const EditorPaneSegments = () => {
-  const pageId = useSelector(getCurrentPageId);
   const { path } = useRouteMatch();
-  const { segment } = useCurrentEditorState();
-  /**
-   * Callback to handle the segment change
-   *
-   * @param value
-   * @returns
-   *
-   */
-  const onSegmentChange = (value: string) => {
-    switch (value) {
-      case EditorEntityTab.QUERIES:
-        history.push(queryListURL({ pageId }), {
-          invokedBy: NavigationMethod.SegmentControl,
-        });
-        break;
-      case EditorEntityTab.JS:
-        history.push(jsCollectionListURL({ pageId }), {
-          invokedBy: NavigationMethod.SegmentControl,
-        });
-        break;
-      case EditorEntityTab.UI:
-        history.push(widgetListURL({ pageId }), {
-          invokedBy: NavigationMethod.SegmentControl,
-        });
-        break;
-    }
-  };
-
-  const onAddButtonClick = () => {
-    history.push(globalAddURL({ pageId }));
-  };
 
   return (
     <Flex flexDirection="column" gap="spacing-2" overflow="hidden">
-      <Flex
-        alignItems="center"
-        className="ide-pages-pane__header"
-        gap="spaces-2"
-        justifyContent="space-between"
-        padding="spaces-2"
-      >
-        <SegmentedControl
-          isFullWidth
-          onChange={onSegmentChange}
-          options={[
-            {
-              label: createMessage(PAGES_PANE_TEXTS.queries_tab),
-              value: EditorEntityTab.QUERIES,
-            },
-            {
-              label: createMessage(PAGES_PANE_TEXTS.js_tab),
-              value: EditorEntityTab.JS,
-            },
-            {
-              label: createMessage(PAGES_PANE_TEXTS.ui_tab),
-              value: EditorEntityTab.UI,
-            },
-          ]}
-          value={segment}
-        />
-        <Button
-          className={"t--add-editor-button"}
-          isIconButton
-          kind="primary"
-          onClick={onAddButtonClick}
-          size="sm"
-          startIcon="add-line"
-        />
-      </Flex>
+      <SegmentedHeader />
       <EntityProperties />
       <Flex
         className="ide-pages-pane__content"

app/client/src/pages/Editor/IDE/EditorPane/EmptyState.tsx

@@ -46,7 +46,7 @@ const EmptyState = ({
       {onClick && (
         <Button
           className={buttonClassName}
-          kind={"primary"}
+          kind={"secondary"}
           onClick={onClick}
           size={"sm"}
         >

app/client/src/pages/Editor/IDE/EditorPane/JS_Section.tsx

@@ -22,6 +22,7 @@ import { ActionParentEntityType } from "@appsmith/entities/Engine/actionHelpers"
 import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextProvider";
 
 const JSContainer = styled(Flex)`
+  gap: var(--ads-v2-spaces-4);
   & .t--entity-item {
     grid-template-columns: 0 auto 1fr auto auto auto auto auto;
     height: 32px;
@@ -58,9 +59,10 @@ const JSSection = () => {
       className="ide-pages-pane__content-js"
       flexDirection="column"
       overflow="hidden"
+      py="spaces-3"
     >
       {JSObjects && JSObjects.length > 0 && canCreateActions && (
-        <Flex flexDirection="column" padding="spaces-3">
+        <Flex flexDirection="column" px="spaces-3">
           <Button
             kind={"secondary"}
             onClick={addButtonClickHandler}
@@ -77,13 +79,7 @@ const JSSection = () => {
         parentEntityId={pageId}
         parentEntityType={ActionParentEntityType.PAGE}
       >
-        <Flex
-          flex="1"
-          flexDirection="column"
-          gap="spaces-2"
-          overflowY="auto"
-          padding="spaces-3"
-        >
+        <Flex flex="1" flexDirection="column" overflowY="auto" px="spaces-3">
           {JSObjects &&
             JSObjects.map((JSobject) => {
               return (

app/client/src/pages/Editor/IDE/EditorPane/ListQuery.tsx

@@ -40,9 +40,15 @@ const ListQuery = () => {
   }, [pageId]);
 
   return (
-    <Flex flex="1" flexDirection="column" overflow="hidden">
+    <Flex
+      flex="1"
+      flexDirection="column"
+      gap="spaces-4"
+      overflow="hidden"
+      py="spaces-3"
+    >
       {Object.keys(files).length > 0 && canCreateActions && (
-        <Flex flexDirection={"column"} padding="spaces-3">
+        <Flex flexDirection={"column"} px="spaces-3">
           <Button
             kind={"secondary"}
             onClick={addButtonClickHandler}
@@ -53,15 +59,10 @@ const ListQuery = () => {
           </Button>
         </Flex>
       )}
-      <Flex
-        flexDirection={"column"}
-        gap="spaces-3"
-        overflowY="auto"
-        padding="spaces-3"
-      >
+      <Flex flexDirection={"column"} overflowY="auto" px="spaces-3">
         {Object.keys(files).map((key) => {
           return (
-            <Flex flexDirection={"column"} gap="spaces-2" key={key}>
+            <Flex flexDirection={"column"} key={key}>
               <Flex px="spaces-3" py="spaces-1">
                 <Text
                   className="overflow-hidden overflow-ellipsis whitespace-nowrap"

app/client/src/pages/Editor/IDE/EditorPane/ListWidgets.tsx

@@ -45,12 +45,12 @@ const ListWidgets = () => {
   }, [widgets]);
 
   return (
-    <Flex flexDirection="column" overflow="hidden">
+    <Flex flexDirection="column" gap="spaces-4" overflow="hidden" py="spaces-3">
       {widgets &&
         widgets.children &&
         widgets.children.length > 0 &&
         canManagePages && (
-          <Flex flexDirection="column" padding="spaces-3">
+          <Flex flexDirection="column" px="spaces-3">
             <Button
               kind={"secondary"}
               onClick={addButtonClickHandler}
@@ -61,13 +61,7 @@ const ListWidgets = () => {
             </Button>
           </Flex>
         )}
-      <Flex
-        flex="1"
-        flexDirection={"column"}
-        gap="spaces-3"
-        overflowY="auto"
-        padding="spaces-3"
-      >
+      <Flex flex="1" flexDirection={"column"} overflowY="auto" px="spaces-3">
         {widgets?.children?.map((child) => (
           <WidgetEntity
             childWidgets={child.children}

app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Button, Flex, Text } from "design-system";
+import { createMessage } from "@appsmith/constants/messages";
+import styled from "styled-components";
+
+interface Props {
+  titleMessage: () => string;
+  onCloseClick: () => void;
+}
+
+const Container = styled(Flex)`
+  padding-right: var(--ads-v2-spaces-2);
+  background-color: var(--ads-v2-color-gray-50);
+`;
+
+const SegmentAddHeader = (props: Props) => {
+  return (
+    <Container
+      alignItems="center"
+      borderBottom={"1px solid var(--ads-v2-color-border)"}
+      justifyContent="space-between"
+      px="spaces-4"
+      py="spaces-2"
+    >
+      <Text color="var(--ads-v2-color-fg)" kind="heading-xs">
+        {createMessage(props.titleMessage)}
+      </Text>
+      <Button
+        isIconButton
+        kind={"tertiary"}
+        onClick={props.onCloseClick}
+        size={"sm"}
+        startIcon={"close-line"}
+      />
+    </Container>
+  );
+};
+
+export default SegmentAddHeader;

app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Button, Flex, SegmentedControl } from "design-system";
+import { createMessage, PAGES_PANE_TEXTS } from "@appsmith/constants/messages";
+import { EditorEntityTab } from "entities/IDE/constants";
+import history, { NavigationMethod } from "utils/history";
+import {
+  globalAddURL,
+  jsCollectionListURL,
+  queryListURL,
+  widgetListURL,
+} from "@appsmith/RouteBuilder";
+import { useSelector } from "react-redux";
+import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
+import { useCurrentEditorState } from "../../hooks";
+import styled from "styled-components";
+
+const Container = styled(Flex)`
+  button {
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
+`;
+
+const SegmentedHeader = () => {
+  const pageId = useSelector(getCurrentPageId);
+  const onAddButtonClick = () => {
+    history.push(globalAddURL({ pageId }));
+  };
+  const { segment } = useCurrentEditorState();
+  /**
+   * Callback to handle the segment change
+   *
+   * @param value
+   * @returns
+   *
+   */
+  const onSegmentChange = (value: string) => {
+    switch (value) {
+      case EditorEntityTab.QUERIES:
+        history.push(queryListURL({ pageId }), {
+          invokedBy: NavigationMethod.SegmentControl,
+        });
+        break;
+      case EditorEntityTab.JS:
+        history.push(jsCollectionListURL({ pageId }), {
+          invokedBy: NavigationMethod.SegmentControl,
+        });
+        break;
+      case EditorEntityTab.UI:
+        history.push(widgetListURL({ pageId }), {
+          invokedBy: NavigationMethod.SegmentControl,
+        });
+        break;
+    }
+  };
+  return (
+    <Container
+      alignItems="center"
+      backgroundColor="var(--ads-v2-colors-control-track-default-bg)"
+      className="ide-pages-pane__header"
+      gap="spaces-2"
+      padding="spaces-2"
+    >
+      <SegmentedControl
+        onChange={onSegmentChange}
+        options={[
+          {
+            label: createMessage(PAGES_PANE_TEXTS.queries_tab),
+            value: EditorEntityTab.QUERIES,
+          },
+          {
+            label: createMessage(PAGES_PANE_TEXTS.js_tab),
+            value: EditorEntityTab.JS,
+          },
+          {
+            label: createMessage(PAGES_PANE_TEXTS.ui_tab),
+            value: EditorEntityTab.UI,
+          },
+        ]}
+        value={segment}
+      />
+      <Button
+        className={"t--add-editor-button"}
+        isIconButton
+        kind="primary"
+        onClick={onAddButtonClick}
+        size="sm"
+        startIcon="add-line"
+      />
+    </Container>
+  );
+};
+
+export default SegmentedHeader;

app/client/src/pages/Editor/IDE/LeftPane/PaneHeader.tsx

@@ -10,6 +10,7 @@ interface Props {
 const Container = styled.div`
   background: var(--ads-v2-color-gray-50);
   padding: var(--ads-v2-spaces-3) var(--ads-v2-spaces-4);
+  padding-right: var(--ads-v2-spaces-2);
   display: flex;
   justify-content: space-between;
   align-items: center;