From 7cdfe797ff3f8c5e3918cf1643b52ebbc80f99b9 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 29 Jan 2025 10:54:36 +0530 Subject: [PATCH 1/6] extracting out common logic between to ADS components to move it to one --- .../EditableDismissibleTab.stories.tsx | 25 +----- .../EditableDismissibleTab.tsx | 6 +- .../EditableDismissibleTab.types.ts | 2 +- .../EditableEntityName.stories.tsx | 28 ++----- .../EditableEntityName.styles.ts | 35 ++++---- .../EditableEntityName/EditableEntityName.tsx | 70 ++++++++++------ .../EditableEntityName.types.ts | 9 +- .../EntityExplorer/EntityItem/EntityItem.tsx | 82 ++++++------------- 8 files changed, 110 insertions(+), 147 deletions(-) diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx index 7dfe5b8289e3..da136ce15afc 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx @@ -3,8 +3,6 @@ import React from "react"; import type { Meta, StoryObj } from "@storybook/react"; import { EditableDismissibleTab } from "."; -import styled from "styled-components"; - import { Icon } from "../.."; const meta: Meta = { @@ -12,27 +10,8 @@ const meta: Meta = { component: EditableDismissibleTab, }; -const EntityIcon = styled.div` - height: 18px; - width: 18px; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - - svg, - img { - height: 100%; - width: 100%; - } -`; - const JSIcon = () => { - return ( - - - - ); + return ; }; export default meta; @@ -43,7 +22,7 @@ export const Basic: Story = { args: { isActive: true, dataTestId: "t--dismissible-tab", - icon: JSIcon(), + startIcon: JSIcon(), name: "Hello", onNameSave: console.log, diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx index 9ed6cc20e50e..388655a9ee9c 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx @@ -10,7 +10,6 @@ import type { EditableDismissibleTabProps } from "./EditableDismissibleTab.types export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { const { dataTestId, - icon, isActive, isEditable = true, isLoading, @@ -18,6 +17,7 @@ export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { onClick, onClose, onNameSave, + startIcon, validateName, } = props; @@ -38,12 +38,12 @@ export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { onDoubleClick={handleDoubleClick} > diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts index 2ee09e171053..8f76aa3b06ee 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts @@ -2,7 +2,7 @@ import type React from "react"; export interface EditableDismissibleTabProps { dataTestId?: string; - icon: React.ReactNode; + startIcon: React.ReactNode; isActive: boolean; isEditable?: boolean; isLoading: boolean; diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx index 48c9a769c093..f86ab229e544 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx @@ -1,32 +1,12 @@ /* eslint-disable no-console */ import React from "react"; import type { Meta, StoryObj } from "@storybook/react"; -import styled from "styled-components"; import { Icon } from "../.."; import { EditableEntityName } from "."; -const EntityIcon = styled.div` - height: 18px; - width: 18px; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - - svg, - img { - height: 100%; - width: 100%; - } -`; - const JSIcon = () => { - return ( - - - - ); + return ; }; const meta: Meta = { @@ -42,12 +22,14 @@ export const Basic: Story = { args: { name: "Hello", onNameSave: console.log, - onExitEditing: console.log, - icon: JSIcon(), + onEditComplete: console.log, + startIcon: JSIcon(), + canEdit: true, inputTestId: "t--editable-name", isEditing: true, isLoading: false, validateName: (name: string) => name.length < 3 ? "Name must be at least 3 characters" : null, + textKind: "body-s", }, }; diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts index 171b508e6b8b..080286eaff66 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts @@ -1,29 +1,36 @@ import styled from "styled-components"; import { Text as ADSText } from "../../Text"; -export const Root = styled.div` +export const Root = styled.div<{ gap: string }>` display: flex; flex-direction: row; flex-wrap: nowrap; - justify-content: start; + justify-content: center; align-items: center; - gap: var(--ads-v2-spaces-2); + gap: ${({ gap }) => gap}; + flex: 1; + min-width: 0; `; export const Text = styled(ADSText)` min-width: 3ch; - bottom: -0.5px; -`; -export const IconContainer = styled.div` - height: 12px; - width: 12px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; + & input { + background-color: var(--ads-v2-color-bg); + padding-top: 4px; + padding-bottom: 4px; + top: -5px; + } + + &[data-isfixedwidth="true"] { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; - img { - width: 12px; + &[data-isediting="true"] { + text-overflow: unset; + overflow: visible; + } } `; diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx index fa26160d2a37..24855f558dbd 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx @@ -7,23 +7,45 @@ import * as Styled from "./EditableEntityName.styles"; import type { EditableEntityNameProps } from "./EditableEntityName.types"; -export const EditableEntityName = ({ - icon, - inputTestId, - isEditing, - isLoading = false, - name, - onExitEditing, - onNameSave, - validateName, -}: EditableEntityNameProps) => { +export const EditableEntityName = (props: EditableEntityNameProps) => { + const { + canEdit, + gap = "var(--ads-v2-spaces-2)", + inputTestId, + isEditing, + isFixedWidth, + isLoading, + name, + onEditComplete, + onNameSave, + textKind, + validateName, + } = props; + + const inEditMode = canEdit ? isEditing : false; + const [ inputRef, editableName, validationError, handleKeyUp, handleTitleChange, - ] = useEditableText(isEditing, name, onExitEditing, validateName, onNameSave); + ] = useEditableText( + inEditMode, + name, + onEditComplete, + validateName, + onNameSave, + ); + + // When in loading state, start icon becomes the loading icon + const startIcon = useMemo(() => { + if (isLoading) { + return ; + } + + return props.startIcon; + }, [isLoading, props.startIcon]); const inputProps = useMemo( () => ({ @@ -31,30 +53,26 @@ export const EditableEntityName = ({ onKeyUp: handleKeyUp, onChange: handleTitleChange, autoFocus: true, - style: { - paddingTop: 4, - paddingBottom: 4, - left: -1, - top: -5, - }, }), [handleKeyUp, handleTitleChange, inputTestId], ); return ( - - {isLoading ? ( - - ) : ( - {icon} - )} - + + {startIcon} + {editableName} diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts index b092f01b41be..2b07806c3d7b 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts @@ -1,12 +1,17 @@ import type React from "react"; +import type { TextKind } from "../../Text"; export interface EditableEntityNameProps { - icon: React.ReactNode; + startIcon: React.ReactNode; inputTestId?: string; isEditing: boolean; isLoading?: boolean; name: string; - onExitEditing: () => void; + onEditComplete: () => void; onNameSave: (name: string) => void; validateName: (name: string) => string | null; + canEdit?: boolean; + isFixedWidth?: boolean; + textKind?: Extract; + gap?: string; } diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx index 066ff8cf0599..015f53222d71 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx @@ -1,12 +1,8 @@ import React, { useMemo } from "react"; import { ListItem } from "../../../List"; -import { Spinner } from "../../../Spinner"; -import { Tooltip } from "../../../Tooltip"; - import type { EntityItemProps } from "./EntityItem.types"; -import { EntityEditableName } from "./EntityItem.styles"; -import { useEditableText } from "../../../__hooks__/useEditableText"; import clx from "classnames"; +import { EditableEntityName } from "../../EditableEntityName"; export const EntityItem = (props: EntityItemProps) => { const { @@ -18,60 +14,37 @@ export const EntityItem = (props: EntityItemProps) => { validateName, } = props.nameEditorConfig; - const inEditMode = canEdit ? isEditing : false; - - const [ - inputRef, - editableName, - validationError, - handleKeyUp, - handleTitleChange, - ] = useEditableText( - inEditMode, - props.title, - onEditComplete, - validateName, - onNameSave, - ); - - // When in loading state, start icon becomes the loading icon - const startIcon = useMemo(() => { - if (isLoading) { - return ; - } - - return props.startIcon; - }, [isLoading, props.startIcon]); + const { startIcon, ...rest } = props; - const inputProps = useMemo( - () => ({ - onChange: handleTitleChange, - onKeyUp: handleKeyUp, - }), - [handleKeyUp, handleTitleChange], - ); + const inEditMode = canEdit ? isEditing : false; // Use List Item custom title prop to show the editable name const customTitle = useMemo(() => { return ( - - - {editableName} - - + ); - }, [editableName, inputProps, inputRef, inEditMode, validationError]); + }, [ + canEdit, + isEditing, + isLoading, + onEditComplete, + onNameSave, + props.title, + startIcon, + validateName, + ]); // Do not show right control if the visibility is hover and the item is in edit mode const rightControl = useMemo(() => { @@ -84,13 +57,12 @@ export const EntityItem = (props: EntityItemProps) => { return ( ); }; From 6e33381e60c132b84d32bd0a8c6e9ab8f849b27b Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 29 Jan 2025 13:04:59 +0530 Subject: [PATCH 2/6] updating error message in storybook and updating overflow style for data side pane --- .../EditableDismissibleTab/EditableDismissibleTab.stories.tsx | 2 +- app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx index da136ce15afc..e11d2e95d89a 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx @@ -27,6 +27,6 @@ export const Basic: Story = { onNameSave: console.log, validateName: (name: string) => - name.length < 3 ? "Name must be at least 3 characters" : null, + name.length < 1 ? "Please enter a valid name" : null, }, }; diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx index d0a65be5da8a..fe1fd09a857f 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx @@ -35,7 +35,7 @@ import { getIDETypeByUrl } from "ee/entities/IDE/utils"; const PaneBody = styled.div` padding: var(--ads-v2-spaces-3) 0; height: calc(100vh - 120px); - overflow-y: scroll; + overflow-y: auto; `; const DatasourceIcon = styled.img` From 84b0ab030fbf13f89c767bbfa8199286a093c846 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 29 Jan 2025 16:17:25 +0530 Subject: [PATCH 3/6] addressing review comments --- .../EditableDismissibleTab.stories.tsx | 2 +- .../EditableDismissibleTab.tsx | 6 +++--- .../EditableDismissibleTab.types.ts | 2 +- .../EditableEntityName.stories.tsx | 7 +++---- .../EditableEntityName.styles.ts | 11 +++++++++-- .../EditableEntityName/EditableEntityName.tsx | 17 ++++++++--------- .../EditableEntityName.types.ts | 8 +++----- .../EntityExplorer/EntityItem/EntityItem.tsx | 7 +++---- 8 files changed, 31 insertions(+), 29 deletions(-) diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx index e11d2e95d89a..a9f3db43a80f 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx @@ -22,7 +22,7 @@ export const Basic: Story = { args: { isActive: true, dataTestId: "t--dismissible-tab", - startIcon: JSIcon(), + icon: JSIcon(), name: "Hello", onNameSave: console.log, diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx index 388655a9ee9c..9ed6cc20e50e 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx @@ -10,6 +10,7 @@ import type { EditableDismissibleTabProps } from "./EditableDismissibleTab.types export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { const { dataTestId, + icon, isActive, isEditable = true, isLoading, @@ -17,7 +18,6 @@ export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { onClick, onClose, onNameSave, - startIcon, validateName, } = props; @@ -38,12 +38,12 @@ export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { onDoubleClick={handleDoubleClick} > diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts index 8f76aa3b06ee..2ee09e171053 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts @@ -2,7 +2,7 @@ import type React from "react"; export interface EditableDismissibleTabProps { dataTestId?: string; - startIcon: React.ReactNode; + icon: React.ReactNode; isActive: boolean; isEditable?: boolean; isLoading: boolean; diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx index f86ab229e544..6f13128594ed 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx @@ -22,14 +22,13 @@ export const Basic: Story = { args: { name: "Hello", onNameSave: console.log, - onEditComplete: console.log, - startIcon: JSIcon(), + onExitEditing: console.log, + icon: JSIcon(), canEdit: true, inputTestId: "t--editable-name", isEditing: true, isLoading: false, validateName: (name: string) => - name.length < 3 ? "Name must be at least 3 characters" : null, - textKind: "body-s", + name.length < 1 ? "Please enter a valid name" : null, }, }; diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts index 080286eaff66..b97f2e96f22c 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts @@ -1,15 +1,22 @@ import styled from "styled-components"; import { Text as ADSText } from "../../Text"; -export const Root = styled.div<{ gap: string }>` +export const Root = styled.div` display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; - gap: ${({ gap }) => gap}; flex: 1; min-width: 0; + + &[data-size="small"] { + gap: var(--ads-v2-spaces-2); + } + + &[data-size="medium"] { + gap: var(--ads-v2-spaces-3); + } `; export const Text = styled(ADSText)` diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx index 24855f558dbd..468749b264f9 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx @@ -10,15 +10,14 @@ import type { EditableEntityNameProps } from "./EditableEntityName.types"; export const EditableEntityName = (props: EditableEntityNameProps) => { const { canEdit, - gap = "var(--ads-v2-spaces-2)", inputTestId, isEditing, isFixedWidth, isLoading, name, - onEditComplete, + onExitEditing, onNameSave, - textKind, + size = "small", validateName, } = props; @@ -33,7 +32,7 @@ export const EditableEntityName = (props: EditableEntityNameProps) => { ] = useEditableText( inEditMode, name, - onEditComplete, + onExitEditing, validateName, onNameSave, ); @@ -41,11 +40,11 @@ export const EditableEntityName = (props: EditableEntityNameProps) => { // When in loading state, start icon becomes the loading icon const startIcon = useMemo(() => { if (isLoading) { - return ; + return ; } - return props.startIcon; - }, [isLoading, props.startIcon]); + return props.icon; + }, [isLoading, props.icon]); const inputProps = useMemo( () => ({ @@ -58,7 +57,7 @@ export const EditableEntityName = (props: EditableEntityNameProps) => { ); return ( - + {startIcon} { inputProps={inputProps} inputRef={inputRef} isEditable={inEditMode} - kind={textKind || "body-s"} + kind={size === "small" ? "body-s" : "body-m"} > {editableName} diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts index 2b07806c3d7b..9c7f4522ac83 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts @@ -1,17 +1,15 @@ import type React from "react"; -import type { TextKind } from "../../Text"; export interface EditableEntityNameProps { - startIcon: React.ReactNode; + icon: React.ReactNode; inputTestId?: string; isEditing: boolean; isLoading?: boolean; name: string; - onEditComplete: () => void; + onExitEditing: () => void; onNameSave: (name: string) => void; validateName: (name: string) => string | null; canEdit?: boolean; isFixedWidth?: boolean; - textKind?: Extract; - gap?: string; + size?: "small" | "medium"; } diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx index 015f53222d71..36654cdd3664 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx @@ -23,15 +23,14 @@ export const EntityItem = (props: EntityItemProps) => { return ( ); From 36b0a75076ef89e4f3feb7cc14bb43fe460189f7 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Fri, 31 Jan 2025 10:11:02 +0530 Subject: [PATCH 4/6] addressing review comments --- .../EditableDismissibleTab.stories.tsx | 1 + .../EditableDismissibleTab/EditableDismissibleTab.tsx | 2 ++ .../EditableDismissibleTab.types.ts | 1 + .../EditableEntityName/EditableEntityName.styles.ts | 8 +------- .../EditableEntityName/EditableEntityName.tsx | 11 +++++++++-- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx index a9f3db43a80f..7fbcf68792ca 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx @@ -24,6 +24,7 @@ export const Basic: Story = { dataTestId: "t--dismissible-tab", icon: JSIcon(), name: "Hello", + canEdit: true, onNameSave: console.log, validateName: (name: string) => diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx index 9ed6cc20e50e..6ba119f092b3 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx @@ -9,6 +9,7 @@ import type { EditableDismissibleTabProps } from "./EditableDismissibleTab.types export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { const { + canEdit, dataTestId, icon, isActive, @@ -38,6 +39,7 @@ export const EditableDismissibleTab = (props: EditableDismissibleTabProps) => { onDoubleClick={handleDoubleClick} > void; onNameSave: (name: string) => void; validateName: (name: string) => string | null; + canEdit?: boolean; } diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts index b97f2e96f22c..abf1fe8b4d18 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts @@ -21,13 +21,7 @@ export const Root = styled.div` export const Text = styled(ADSText)` min-width: 3ch; - - & input { - background-color: var(--ads-v2-color-bg); - padding-top: 4px; - padding-bottom: 4px; - top: -5px; - } + line-height: normal; &[data-isfixedwidth="true"] { white-space: nowrap; diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx index 468749b264f9..576503b71edb 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx @@ -10,6 +10,7 @@ import type { EditableEntityNameProps } from "./EditableEntityName.types"; export const EditableEntityName = (props: EditableEntityNameProps) => { const { canEdit, + icon, inputTestId, isEditing, isFixedWidth, @@ -43,8 +44,8 @@ export const EditableEntityName = (props: EditableEntityNameProps) => { return ; } - return props.icon; - }, [isLoading, props.icon]); + return icon; + }, [isLoading, icon]); const inputProps = useMemo( () => ({ @@ -52,6 +53,12 @@ export const EditableEntityName = (props: EditableEntityNameProps) => { onKeyUp: handleKeyUp, onChange: handleTitleChange, autoFocus: true, + style: { + backgroundColor: "var(--ads-v2-color-bg)", + paddingTop: "4px", + paddingBottom: "4px", + top: "-5px", + }, }), [handleKeyUp, handleTitleChange, inputTestId], ); From 3a154b1bd24d70e96dce69637f60660b52569b96 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Fri, 31 Jan 2025 10:15:52 +0530 Subject: [PATCH 5/6] removing unused file --- .../EntityItem/EntityItem.styles.ts | 24 ------------------- 1 file changed, 24 deletions(-) delete mode 100644 app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts deleted file mode 100644 index 05cf52ead59e..000000000000 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts +++ /dev/null @@ -1,24 +0,0 @@ -import styled from "styled-components"; -import { Text } from "../../../Text"; - -export const EntityEditableName = styled(Text)` - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - flex: 1; - - &[data-isediting="true"] { - height: 32px; - line-height: 32px; - min-width: 3ch; - text-overflow: unset; - } - - & input { - background-color: var(--ads-v2-color-bg); - padding-top: 0; - padding-bottom: 0; - height: 32px; - top: 0; - } -`; From dd17cf163a80d51fb2858686620a699ebcbd7325 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Fri, 31 Jan 2025 12:26:24 +0530 Subject: [PATCH 6/6] minor change --- .../EditableDismissibleTab/EditableDismissibleTab.types.ts | 2 +- .../Templates/EditableEntityName/EditableEntityName.types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts index 5024f80d4c21..37cd5a808119 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts @@ -11,5 +11,5 @@ export interface EditableDismissibleTabProps { onClose: () => void; onNameSave: (name: string) => void; validateName: (name: string) => string | null; - canEdit?: boolean; + canEdit: boolean; } diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts index 9c7f4522ac83..6f8ac33ab47a 100644 --- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts @@ -9,7 +9,7 @@ export interface EditableEntityNameProps { onExitEditing: () => void; onNameSave: (name: string) => void; validateName: (name: string) => string | null; - canEdit?: boolean; + canEdit: boolean; isFixedWidth?: boolean; size?: "small" | "medium"; }