From bc8e77be9a4e17b52ad59a148084dfd051a1210c Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Fri, 9 Feb 2024 12:44:41 +0530
Subject: [PATCH] feat: Queries and JS tabs redesign (#31006)

## Description

This PR introduces significant enhancements to the queries and JS tabs
design, aimed at improving user experience.


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

#### Media


https://github.com/appsmithorg/appsmith/assets/87797149/8453de14-ee78-4835-8528-8a94cd84d660



#### Type of change

- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)


## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## 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


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

- **New Features**
- Enhanced UI with a new icon and tooltip for better visual cues in the
editor tabs.
- Introduced a styled icon container in the `QueryTab` for displaying
the current plugin icon next to the tab title.
- Added a new constant for default split screen width, improving layout
responsiveness.
- **Style**
- Updated styling properties across various components for improved
alignment, background color, and overall aesthetics.
- Introduced a `StyledButton` component for a more customized button
appearance in split-screen tabs.
- Adjusted tab width and styling for a cleaner, more organized tab
display.
- **Refactor**
- Improved layout behavior of editor tabs by adjusting height properties
and removing unnecessary overflow and padding.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/package.json                       |  2 +-
 app/client/src/constants/AppConstants.ts      |  1 +
 .../EditorPane/components/SegmentedHeader.tsx |  3 +-
 .../pages/Editor/IDE/EditorTabs/Container.tsx |  7 ++-
 .../pages/Editor/IDE/EditorTabs/FileTabs.tsx  |  8 +---
 .../Editor/IDE/EditorTabs/FullScreenTabs.tsx  |  3 +-
 .../src/pages/Editor/IDE/EditorTabs/JSTab.tsx |  9 +++-
 .../pages/Editor/IDE/EditorTabs/QueryTab.tsx  | 34 +++++++++++++-
 .../Editor/IDE/EditorTabs/SplitScreenTabs.tsx |  3 +-
 .../IDE/EditorTabs/StyledComponents.tsx       | 47 ++++++++++++++++++-
 app/client/src/pages/Editor/IDE/hooks.ts      |  7 ++-
 app/client/yarn.lock                          | 10 ++--
 12 files changed, 108 insertions(+), 26 deletions(-)

diff --git a/app/client/package.json b/app/client/package.json
index 0611820c77..70558ca525 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -108,7 +108,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@2.1.31",
+    "design-system": "npm:@appsmithorg/design-system@2.1.32",
     "design-system-old": "npm:@appsmithorg/design-system-old@1.1.14",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
diff --git a/app/client/src/constants/AppConstants.ts b/app/client/src/constants/AppConstants.ts
index 7d20257c3b..74000e26d9 100644
--- a/app/client/src/constants/AppConstants.ts
+++ b/app/client/src/constants/AppConstants.ts
@@ -13,6 +13,7 @@ export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256;
 export const DEFAULT_PROPERTY_PANE_WIDTH = 288;
 export const APP_SETTINGS_PANE_WIDTH = 525;
 export const DEFAULT_EDITOR_PANE_WIDTH = 255;
+export const DEFAULT_SPLIT_SCREEN_WIDTH = "40.4vw";
 
 const APP_STORE_NAMESPACE = "APPSMITH_LOCAL_STORE";
 
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx
index d8046220bb..52e01783da 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx
@@ -81,12 +81,13 @@ const SegmentedHeader = () => {
       ) : null}
       {isSideBySideEnabled && editorMode === EditorViewMode.SplitScreen ? (
         <Button
+          id="editor-mode-maximize"
           isIconButton
           kind="tertiary"
           onClick={() =>
             dispatch(setIdeEditorViewMode(EditorViewMode.FullScreen))
           }
-          startIcon="icon-align-right"
+          startIcon="maximize"
         />
       ) : null}
     </Container>
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx
index b081196b10..f497b47ffd 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx
@@ -5,10 +5,13 @@ import { Flex } from "design-system";
 const Container = (props: { children: ReactNode }) => {
   return (
     <Flex
+      alignItems="center"
       backgroundColor="#F8FAFC"
-      borderBottom="#F1F5F9"
+      borderBottom="1px solid var(--ads-v2-color-border)"
       gap="spaces-2"
-      padding="spaces-2"
+      maxHeight="32px"
+      minHeight="32px"
+      px="spaces-2"
       width="100%"
     >
       {props.children}
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
index 1ab0b50662..23150972b0 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
@@ -29,13 +29,7 @@ const FileTabs = () => {
   }
 
   return (
-    <Flex
-      className="editor-tabs"
-      flex="1"
-      gap="spaces-2"
-      overflow="hidden"
-      paddingBottom="spaces-2"
-    >
+    <Flex data-test-id="editor-tabs" flex="1" gap="spaces-2" height="100%">
       {files.map((tab: EntityItem) =>
         segment === EditorEntityTab.JS ? (
           <JSTab data={tab} key={tab.key} />
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx
index c6131669d5..9429d6c2df 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FullScreenTabs.tsx
@@ -26,10 +26,11 @@ const FullScreenTabs = () => {
     <Container>
       <FileTabs />
       <Button
+        id="editor-mode-minimize"
         isIconButton
         kind="tertiary"
         onClick={setSplitScreenMode}
-        startIcon="icon-align-left"
+        startIcon="minimize"
       />
     </Container>
   );
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/JSTab.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/JSTab.tsx
index e154f6c211..63b612d916 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/JSTab.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/JSTab.tsx
@@ -7,7 +7,9 @@ import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
 import { useActiveAction } from "@appsmith/pages/Editor/Explorer/hooks";
 import { jsCollectionIdURL } from "@appsmith/RouteBuilder";
 import history, { NavigationMethod } from "utils/history";
-import { StyledTab } from "./StyledComponents";
+import { StyledTab, TabTextContainer } from "./StyledComponents";
+import { JsFileIconV2 } from "pages/Editor/Explorer/ExplorerIcons";
+import { Tooltip } from "design-system";
 
 const JSTab = ({ data }: { data: EntityItem }) => {
   const activeActionId = useActiveAction();
@@ -30,7 +32,10 @@ const JSTab = ({ data }: { data: EntityItem }) => {
       className={clsx("editor-tab", activeActionId === data.key && "active")}
       onClick={navigateToJSCollection}
     >
-      {data.title}
+      {JsFileIconV2(12, 12)}
+      <Tooltip content={data.title} mouseEnterDelay={1}>
+        <TabTextContainer>{data.title}</TabTextContainer>
+      </Tooltip>
     </StyledTab>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/QueryTab.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/QueryTab.tsx
index ae15b7eb6e..a88cb66f7e 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/QueryTab.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/QueryTab.tsx
@@ -1,19 +1,36 @@
 import React, { useMemo } from "react";
 import clsx from "classnames";
 import { useSelector } from "react-redux";
+import { Tooltip } from "design-system";
+import styled from "styled-components";
 
 import type { EntityItem } from "@appsmith/entities/IDE/constants";
 import {
   getAction,
   getPlugins,
   getCurrentPageId,
+  getPlugin,
 } from "@appsmith/selectors/entitiesSelector";
 import { useActiveAction } from "@appsmith/pages/Editor/Explorer/hooks";
 import history, { NavigationMethod } from "utils/history";
 import { getActionConfig } from "pages/Editor/Explorer/Actions/helpers";
 import type { Action } from "entities/Action";
 import keyBy from "lodash/keyBy";
-import { StyledTab } from "./StyledComponents";
+import { StyledTab, TabTextContainer } from "./StyledComponents";
+import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
+
+const StyledIconContainer = styled.div`
+  height: 12px;
+  width: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  img {
+    width: 12px;
+  }
+`;
 
 const QueryTab = ({ data }: { data: EntityItem }) => {
   const activeActionId = useActiveAction();
@@ -21,6 +38,9 @@ const QueryTab = ({ data }: { data: EntityItem }) => {
   const plugins = useSelector(getPlugins);
   const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]);
   const action = useSelector((state) => getAction(state, data.key)) as Action;
+  const currentPlugin = useSelector((state) =>
+    getPlugin(state, action?.pluginId || ""),
+  );
 
   const config = getActionConfig(data.type);
   const url = config?.getURL(
@@ -39,7 +59,17 @@ const QueryTab = ({ data }: { data: EntityItem }) => {
       className={clsx("editor-tab", activeActionId === data.key && "active")}
       onClick={navigateToQuery}
     >
-      {data.title}
+      {currentPlugin && (
+        <StyledIconContainer>
+          <img
+            alt={currentPlugin.name}
+            src={getAssetUrl(currentPlugin?.iconLocation)}
+          />
+        </StyledIconContainer>
+      )}
+      <Tooltip content={data.title} mouseEnterDelay={1}>
+        <TabTextContainer>{data.title}</TabTextContainer>
+      </Tooltip>
     </StyledTab>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
index 4e9ae70a41..6a3b1556db 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback } from "react";
+import { Button } from "design-system";
+
 import FileTabs from "./FileTabs";
 import { useSelector } from "react-redux";
 import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
-import { Button } from "design-system";
 import Container from "./Container";
 import { useCurrentEditorState } from "../hooks";
 import {
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
index 6b3c949159..18cffd5607 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/StyledComponents.tsx
@@ -1,16 +1,59 @@
 import styled from "styled-components";
 import { Flex } from "design-system";
+import { DEFAULT_SPLIT_SCREEN_WIDTH } from "constants/AppConstants";
 
+/**
+ * Logic for 54px in max width
+ *
+ * 4px  tabs + add icon container left padding
+ * 4px  tabs + add icon container right padding
+ * 4px  gap between tabs and add icon
+ * 4px  gap between every tabs * 4 (since max tab count is 5,
+ *      there will be 5 gaps)
+ * 26px Add button width
+ * ======================================
+ * 54px
+ *
+ */
 export const StyledTab = styled(Flex)`
-  border-radius: var(--ads-v2-border-radius);
+  position: relative;
+  top: 1px;
   padding: var(--ads-v2-spaces-2) var(--ads-v2-spaces-4);
   font-size: 12px;
   color: var(--ads-v2-colors-text-default);
   cursor: pointer;
   gap: var(--ads-v2-spaces-2);
+  border-top: 1px solid transparent;
+  border-top-left-radius: var(--ads-v2-border-radius);
+  border-top-right-radius: var(--ads-v2-border-radius);
+  align-items: center;
+  justify-content: center;
+  max-width: calc((${DEFAULT_SPLIT_SCREEN_WIDTH} - 54px) / 5);
+
+  // After element - the seperator in between tabs
+  &:not(&.active):not(:has(+ .active)):not(:last-child):after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 8px;
+    width: 1px;
+    height: 40%;
+    background-color: var(--ads-v2-color-border);
+  }
+
   &.active {
     background-color: var(--ads-v2-colors-control-knob-default-bg);
     color: var(--ads-v2-colors-text-default);
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
+    border-top: 1px solid var(--ads-v2-color-bg-brand);
+    box-shadow:
+      1px 0px 0px 0px var(--ads-v2-color-border) inset,
+      -1px 0px 0px 0px var(--ads-v2-color-border) inset;
   }
 `;
+
+export const TabTextContainer = styled.span`
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 6f7a3e8763..b52d22cb65 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -22,7 +22,10 @@ import isEmpty from "lodash/isEmpty";
 import pickBy from "lodash/pickBy";
 import { getFocusInfo } from "selectors/focusHistorySelectors";
 import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
-import { DEFAULT_EDITOR_PANE_WIDTH } from "constants/AppConstants";
+import {
+  DEFAULT_EDITOR_PANE_WIDTH,
+  DEFAULT_SPLIT_SCREEN_WIDTH,
+} from "constants/AppConstants";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 
@@ -118,7 +121,7 @@ export const useEditorPaneWidth = (): string => {
       segment !== EditorEntityTab.UI
     ) {
       // 1px is propertypane border width
-      setWidth("40.4vw");
+      setWidth(DEFAULT_SPLIT_SCREEN_WIDTH);
     } else {
       setWidth(DEFAULT_EDITOR_PANE_WIDTH + "px");
     }
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 02d8dcd9ce..f5f14a2f4d 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -13202,7 +13202,7 @@ __metadata:
     cypress-xpath: ^1.6.0
     dayjs: ^1.10.6
     deep-diff: ^1.0.2
-    design-system: "npm:@appsmithorg/design-system@2.1.31"
+    design-system: "npm:@appsmithorg/design-system@2.1.32"
     design-system-old: "npm:@appsmithorg/design-system-old@1.1.14"
     diff: ^5.0.0
     dotenv: ^8.1.0
@@ -17199,9 +17199,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"design-system@npm:@appsmithorg/design-system@2.1.31":
-  version: 2.1.31
-  resolution: "@appsmithorg/design-system@npm:2.1.31"
+"design-system@npm:@appsmithorg/design-system@2.1.32":
+  version: 2.1.32
+  resolution: "@appsmithorg/design-system@npm:2.1.32"
   dependencies:
     "@radix-ui/react-dialog": ^1.0.2
     "@radix-ui/react-dropdown-menu": ^2.0.4
@@ -17231,7 +17231,7 @@ __metadata:
     react-dom: ^17.0.2
     react-router-dom: ^5.0.0
     styled-components: ^5.3.6
-  checksum: 4fc89bbb7f4403a9583960dd410c722ed3469e22c3e3d3bc256b3024ce6a7288f46308ef89386d931c264e9179cf22141f673f1c0ed9675dc60e8401c3845be8
+  checksum: b7c4b8e9ce0c70bf1d53082a42f7efeac4f7e913d445aee79a310c9904351c8640b42fdf17d75cb8a1bcec3635a5fce4badd1f60085408044019cd38c9080997
   languageName: node
   linkType: hard