299cc42aeb
## Description Adds editable tab behavior for queries and JS objects. Fixes #32440 /ok-to-test tags="@tag.All" ### 🔍 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/11288430138> > Commit: dc89acbd51afc6b238283836c6305ab68337575d > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11288430138&attempt=3" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 11 Oct 2024 09:55:27 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced a new dependency for improved React hooks functionality. - Added new constants for data source operations and user interactions, enhancing feedback and clarity. - **Improvements** - Enhanced messaging related to data source actions, providing clearer user prompts and error handling messages. - Renamed constants for better readability and consistency across the application. - **Bug Fixes** - Corrected naming conventions for constants to improve consistency across the application. - **Chores** - Removed deprecated `FileTabs` component and related tests to streamline the codebase. - Added unit tests for the `FileTab` component to ensure expected functionality. - Updated the `Text` component to improve ref handling and styling options. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import styled from "styled-components";
|
|
|
|
import { Text as ADSText } from "@appsmith/ads";
|
|
|
|
export const Tab = styled.div`
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
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;
|
|
padding: var(--ads-v2-spaces-3);
|
|
padding-top: 6px; // to accommodate border and make icons align correctly
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
border-top: 2px solid transparent;
|
|
|
|
&.active {
|
|
background: var(--ads-v2-colors-control-field-default-bg);
|
|
border-top-color: var(--ads-v2-color-bg-brand);
|
|
border-left-color: var(--ads-v2-color-border-muted);
|
|
border-right-color: var(--ads-v2-color-border-muted);
|
|
}
|
|
|
|
& > .tab-close {
|
|
position: relative;
|
|
right: -2px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:hover > .tab-close,
|
|
&.active > .tab-close {
|
|
visibility: visible;
|
|
}
|
|
`;
|
|
|
|
export const IconContainer = styled.div`
|
|
height: 12px;
|
|
width: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
img {
|
|
width: 12px;
|
|
}
|
|
`;
|
|
|
|
export const Text = styled(ADSText)`
|
|
min-width: 3ch;
|
|
padding: 0 var(--ads-v2-spaces-1);
|
|
`;
|
|
|
|
export const CloseButton = styled.button`
|
|
border-radius: var(--ads-v2-border-radius);
|
|
cursor: pointer;
|
|
padding: var(--ads-v2-spaces-1);
|
|
|
|
&:hover {
|
|
background: var(--ads-v2-colors-action-tertiary-surface-hover-bg);
|
|
}
|
|
`;
|