From 292ab6347a895993bf5264724d8003300e571100 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Thu, 25 Apr 2024 12:22:02 +0530 Subject: [PATCH] feat: IDE tabs scrollbar changes (#32929) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This PR changes the system scrollbar of IDE tabs to custom scroll. Fixes #32864 ## Automation /ok-to-test tags="@tag.Sanity, @tag.IDE" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: ece8003b8966f72f3a99ba8152d8441773566490 > Cypress dashboard url: Click here! ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - Enhanced the tab management in the IDE with a dynamic overflow setting for better layout and usability. - **Refactor** - Improved naming and consistency in the split screen tabs component for clearer code readability. --- app/client/package.json | 2 +- .../pages/Editor/IDE/EditorTabs/FileTabs.tsx | 84 +++++++++++-------- .../Editor/IDE/EditorTabs/SplitScreenTabs.tsx | 8 +- app/client/yarn.lock | 29 +++++-- 4 files changed, 75 insertions(+), 48 deletions(-) diff --git a/app/client/package.json b/app/client/package.json index 229aae43cf..b307b2cfff 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -111,7 +111,7 @@ "d3-geo": "^3.1.0", "dayjs": "^1.10.6", "deep-diff": "^1.0.2", - "design-system": "npm:@appsmithorg/design-system@2.1.38", + "design-system": "npm:@appsmithorg/design-system@2.1.39", "design-system-old": "npm:@appsmithorg/design-system-old@1.1.16", "downloadjs": "^1.4.7", "echarts": "^5.4.2", diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx index 9f9ec6be36..6e09d4d615 100644 --- a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx +++ b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx @@ -2,8 +2,7 @@ import React, { useEffect } from "react"; import { useLocation } from "react-router"; import { useSelector } from "react-redux"; import clsx from "classnames"; -import type { FlexProps } from "design-system"; -import { Flex, Icon, Tooltip } from "design-system"; +import { Flex, Icon, ScrollArea, Tooltip } from "design-system"; import type { EntityItem } from "@appsmith/entities/IDE/constants"; import { @@ -23,9 +22,6 @@ interface Props { const FileTabs = (props: Props) => { const { navigateToTab, onClose, tabs } = props; const isTabsRevampEnabled = useSelector(getIsTabsRevampEnabled); - const containerProps: FlexProps = isTabsRevampEnabled - ? { overflowX: "auto", overflowY: "hidden" } - : {}; const location = useLocation(); @@ -46,39 +42,55 @@ const FileTabs = (props: Props) => { }; return ( - - {tabs.map((tab: EntityItem) => ( - navigateToTab(tab)} - showOverflow={isTabsRevampEnabled} - > - {tab.icon} - - {tab.title} - - {/* not using button component because of the size not matching design */} - {isTabsRevampEnabled ? ( - onCloseClick(e, tab.key)} - /> - ) : null} - - ))} - + + {tabs.map((tab: EntityItem) => ( + navigateToTab(tab)} + showOverflow={isTabsRevampEnabled} + > + {tab.icon} + + {tab.title} + + {/* not using button component because of the size not matching design */} + {isTabsRevampEnabled ? ( + onCloseClick(e, tab.key)} + /> + ) : null} + + ))} + + ); }; diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx index cf1a399d80..9bcce400f0 100644 --- a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx +++ b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx @@ -63,7 +63,7 @@ const SplitScreenTabs = () => { }; // TODO: Remove this once release_ide_tabs_revamp_enabled is lifted - const Content = () => { + const renderContent = () => { if (isTabsRevampEnabled) { return ( <> @@ -96,11 +96,7 @@ const SplitScreenTabs = () => { return ( <> - {files.length > 0 ? ( - - - - ) : null} + {files.length > 0 ? {renderContent()} : null} ); diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 6e71e8ae28..a63605e1d4 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -13108,7 +13108,7 @@ __metadata: d3-geo: ^3.1.0 dayjs: ^1.10.6 deep-diff: ^1.0.2 - design-system: "npm:@appsmithorg/design-system@2.1.38" + design-system: "npm:@appsmithorg/design-system@2.1.39" design-system-old: "npm:@appsmithorg/design-system-old@1.1.16" diff: ^5.0.0 dotenv: ^8.1.0 @@ -17148,9 +17148,9 @@ __metadata: languageName: node linkType: hard -"design-system@npm:@appsmithorg/design-system@2.1.38": - version: 2.1.38 - resolution: "@appsmithorg/design-system@npm:2.1.38" +"design-system@npm:@appsmithorg/design-system@2.1.39": + version: 2.1.39 + resolution: "@appsmithorg/design-system@npm:2.1.39" dependencies: "@radix-ui/react-dialog": ^1.0.2 "@radix-ui/react-dropdown-menu": ^2.0.4 @@ -17170,6 +17170,8 @@ __metadata: csstype: ^3.1.2 date-fns: ^2.29.3 loglevel: ^1.8.1 + overlayscrollbars: ^2.7.2 + overlayscrollbars-react: ^0.5.6 rc-select: ^14.4.3 rc-table: ^7.35.2 rc-tooltip: ^5.3.1 @@ -17180,7 +17182,7 @@ __metadata: react-dom: ^17.0.2 react-router-dom: ^5.0.0 styled-components: ^5.3.6 - checksum: 382f7f2c05ab4daf7f200dabfa3da8e06a9e551b87f24bc43c50e84824fde99b25ed505632ad82650246ebaafd53d51cd50082769a9112282938355ceaa2f667 + checksum: 7b9ed99c41a8fc0b45db101b18bd87a5dde5ef54291843196d1e26bb60d217c7e552be01c914a859717a294caf2637aef7149afd07b6e224d81cb92f2c3b91b4 languageName: node linkType: hard @@ -25734,6 +25736,23 @@ __metadata: languageName: node linkType: hard +"overlayscrollbars-react@npm:^0.5.6": + version: 0.5.6 + resolution: "overlayscrollbars-react@npm:0.5.6" + peerDependencies: + overlayscrollbars: ^2.0.0 + react: ">=16.8.0" + checksum: 4a07dda99543522763c5182b1a1344b35a13534ea3213fb8638604e813ec92ff8f9e63d72e11ded596ab5dbe5829d4f50f6b2d0ffc76ce18e6e67a662c7bdb6a + languageName: node + linkType: hard + +"overlayscrollbars@npm:^2.7.2": + version: 2.7.2 + resolution: "overlayscrollbars@npm:2.7.2" + checksum: 32b57ea3a33f72e98cd33c2c1f7d4ef864216656286eef0f7cb71639aa6eb92e9ce32c7db6407fa3f2c053fb13052b7c37507a60785a08b7a3c0684cd474d751 + languageName: node + linkType: hard + "p-cancelable@npm:^2.0.0": version: 2.1.1 resolution: "p-cancelable@npm:2.1.1"