feat: IDE tabs scrollbar changes (#32929)
## Description This PR changes the system scrollbar of IDE tabs to custom scroll. Fixes #32864 ## Automation /ok-to-test tags="@tag.Sanity, @tag.IDE" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8827982150> > Commit: ece8003b8966f72f3a99ba8152d8441773566490 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8827982150&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## 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. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
albinAppsmith
GitHub
parent
b69de462b9
commit
292ab6347a
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Flex
|
||||
<ScrollArea
|
||||
className="h-[32px]"
|
||||
data-testid="t--editor-tabs"
|
||||
gap="spaces-2"
|
||||
height="100%"
|
||||
{...containerProps}
|
||||
options={
|
||||
isTabsRevampEnabled
|
||||
? {
|
||||
overflow: {
|
||||
x: "scroll",
|
||||
y: "hidden",
|
||||
},
|
||||
}
|
||||
: {
|
||||
overflow: {
|
||||
x: "hidden",
|
||||
y: "hidden",
|
||||
},
|
||||
}
|
||||
}
|
||||
size={"sm"}
|
||||
>
|
||||
{tabs.map((tab: EntityItem) => (
|
||||
<StyledTab
|
||||
className={clsx(
|
||||
"editor-tab",
|
||||
currentEntity.id === tab.key && "active",
|
||||
)}
|
||||
data-testid={`t--ide-tab-${tab.title}`}
|
||||
key={tab.key}
|
||||
onClick={() => navigateToTab(tab)}
|
||||
showOverflow={isTabsRevampEnabled}
|
||||
>
|
||||
<TabIconContainer>{tab.icon}</TabIconContainer>
|
||||
<Tooltip content={tab.title} mouseEnterDelay={1}>
|
||||
<TabTextContainer>{tab.title}</TabTextContainer>
|
||||
</Tooltip>
|
||||
{/* not using button component because of the size not matching design */}
|
||||
{isTabsRevampEnabled ? (
|
||||
<Icon
|
||||
className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
|
||||
data-testid="t--tab-close-btn"
|
||||
name="close-line"
|
||||
onClick={(e) => onCloseClick(e, tab.key)}
|
||||
/>
|
||||
) : null}
|
||||
</StyledTab>
|
||||
))}
|
||||
</Flex>
|
||||
<Flex gap="spaces-2" height="100%">
|
||||
{tabs.map((tab: EntityItem) => (
|
||||
<StyledTab
|
||||
className={clsx(
|
||||
"editor-tab",
|
||||
currentEntity.id === tab.key && "active",
|
||||
)}
|
||||
data-testid={`t--ide-tab-${tab.title}`}
|
||||
key={tab.key}
|
||||
onClick={() => navigateToTab(tab)}
|
||||
showOverflow={isTabsRevampEnabled}
|
||||
>
|
||||
<TabIconContainer>{tab.icon}</TabIconContainer>
|
||||
<Tooltip content={tab.title} mouseEnterDelay={1}>
|
||||
<TabTextContainer>{tab.title}</TabTextContainer>
|
||||
</Tooltip>
|
||||
{/* not using button component because of the size not matching design */}
|
||||
{isTabsRevampEnabled ? (
|
||||
<Icon
|
||||
className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
|
||||
data-testid="t--tab-close-btn"
|
||||
name="close-line"
|
||||
onClick={(e) => onCloseClick(e, tab.key)}
|
||||
/>
|
||||
) : null}
|
||||
</StyledTab>
|
||||
))}
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
<Container>
|
||||
<Content />
|
||||
</Container>
|
||||
) : null}
|
||||
{files.length > 0 ? <Container>{renderContent()}</Container> : null}
|
||||
<Announcement />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user