chore: Extracting out common logic between two ADS components to move…

… it to one (#38885) ## Description Extracting out common logic between two ADS components to move it to one. Fixes [#38853](#38853) ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/13067939918> > Commit: dd17cf1 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13067939918&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 31 Jan 2025 08:26:34 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No  ## Summary by CodeRabbit - **New Features** - Enhanced `EditableEntityName` component with new properties: - Added `canEdit` to control editability - Added `isFixedWidth` for width behavior - Added `size` option for component sizing - Introduced `canEdit` property in `EditableDismissibleTab` for better editing control - Simplified icon rendering logic across components - **Bug Fixes** - Updated name validation to require a minimum of 1 character - Improved scrolling behavior in `DataSidePane` - **Style** - Refined layout and styling for editable components - Updated component alignment and spacing - Removed unnecessary styled components for cleaner design
appsmithorg · Jan 31, 2025 · 3559589 · 3559589
1 parent 904a9f0
commit 3559589
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 162 deletions.
diff --git a/...design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx b/...design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx
@@ -3,36 +3,15 @@ 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<typeof EditableDismissibleTab> = {
   title: "ADS/Templates/Editable Dismissible Tab",
   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 (
-    <EntityIcon>
-      <Icon name="js-yellow" size="md" />
-    </EntityIcon>
-  );
+  return <Icon name="js-yellow" size="sm" />;
 };
 
 export default meta;
@@ -45,9 +24,10 @@ export const Basic: Story = {
     dataTestId: "t--dismissible-tab",
     icon: JSIcon(),
     name: "Hello",
+    canEdit: true,
 
     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/...ackages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.tsx b/...ackages/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}
     >
       <EditableEntityName
+        canEdit={canEdit}
         icon={icon}
         isEditing={isEditing}
         isLoading={isLoading}

diff --git a/...es/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts b/...es/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.types.ts
@@ -11,4 +11,5 @@ export interface EditableDismissibleTabProps {
   onClose: () => void;
   onNameSave: (name: string) => void;
   validateName: (name: string) => string | null;
+  canEdit: boolean;
 }
diff --git a/...ackages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.stories.tsx b/...ackages/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 (
-    <EntityIcon>
-      <Icon name="js-yellow" size="md" />
-    </EntityIcon>
-  );
+  return <Icon name="js-yellow" size="sm" />;
 };
 
 const meta: Meta<typeof EditableEntityName> = {
@@ -44,10 +24,11 @@ export const Basic: Story = {
     onNameSave: console.log,
     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,
+      name.length < 1 ? "Please enter a valid name" : null,
   },
 };
diff --git a/.../packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts b/.../packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.styles.ts
@@ -5,25 +5,33 @@ export const Root = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: start;
+  justify-content: center;
   align-items: center;
-  gap: var(--ads-v2-spaces-2);
+  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)`
   min-width: 3ch;
-  bottom: -0.5px;
-`;
+  line-height: normal;
 
-export const IconContainer = styled.div`
-  height: 12px;
-  width: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  &[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/...client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx b/...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,
+    icon,
+    inputTestId,
+    isEditing,
+    isFixedWidth,
+    isLoading,
+    name,
+    onExitEditing,
+    onNameSave,
+    size = "small",
+    validateName,
+  } = props;
+
+  const inEditMode = canEdit ? isEditing : false;
+
   const [
     inputRef,
     editableName,
     validationError,
     handleKeyUp,
     handleTitleChange,
-  ] = useEditableText(isEditing, name, onExitEditing, validateName, onNameSave);
+  ] = useEditableText(
+    inEditMode,
+    name,
+    onExitEditing,
+    validateName,
+    onNameSave,
+  );
+
+  // When in loading state, start icon becomes the loading icon
+  const startIcon = useMemo(() => {
+    if (isLoading) {
+      return <Spinner size={size === "small" ? "sm" : "md"} />;
+    }
+
+    return icon;
+  }, [isLoading, icon]);
 
   const inputProps = useMemo(
     () => ({
@@ -32,29 +54,31 @@ export const EditableEntityName = ({
       onChange: handleTitleChange,
       autoFocus: true,
       style: {
-        paddingTop: 4,
-        paddingBottom: 4,
-        left: -1,
-        top: -5,
+        backgroundColor: "var(--ads-v2-color-bg)",
+        paddingTop: "4px",
+        paddingBottom: "4px",
+        top: "-5px",
       },
     }),
     [handleKeyUp, handleTitleChange, inputTestId],
   );
 
   return (
-    <Styled.Root>
-      {isLoading ? (
-        <Spinner size="sm" />
-      ) : (
-        <Styled.IconContainer>{icon}</Styled.IconContainer>
-      )}
-      <Tooltip content={validationError} visible={Boolean(validationError)}>
+    <Styled.Root data-size={size}>
+      {startIcon}
+      <Tooltip
+        content={validationError}
+        placement="bottom"
+        visible={Boolean(validationError)}
+      >
         <Styled.Text
           aria-invalid={Boolean(validationError)}
+          data-isediting={inEditMode}
+          data-isfixedwidth={isFixedWidth}
           inputProps={inputProps}
           inputRef={inputRef}
-          isEditable={isEditing}
-          kind="body-s"
+          isEditable={inEditMode}
+          kind={size === "small" ? "body-s" : "body-m"}
         >
           {editableName}
         </Styled.Text>

diff --git a/...t/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts b/...t/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts
@@ -9,4 +9,7 @@ export interface EditableEntityNameProps {
   onExitEditing: () => void;
   onNameSave: (name: string) => void;
   validateName: (name: string) => string | null;
+  canEdit: boolean;
+  isFixedWidth?: boolean;
+  size?: "small" | "medium";
 }
diff --git a/...t/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts b/...t/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts