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

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) =>

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}
     >
       <EditableEntityName
+        canEdit={canEdit}
         icon={icon}
         isEditing={isEditing}
         isLoading={isLoading}

app/client/packages/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;
 }

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;

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,15 +44,21 @@ export const EditableEntityName = (props: EditableEntityNameProps) => {
       return <Spinner size={size === "small" ? "sm" : "md"} />;
     }
 
-    return props.icon;
-  }, [isLoading, props.icon]);
+    return icon;
+  }, [isLoading, icon]);
 
   const inputProps = useMemo(
     () => ({
       ["data-testid"]: inputTestId,
       onKeyUp: handleKeyUp,
       onChange: handleTitleChange,
       autoFocus: true,
+      style: {
+        backgroundColor: "var(--ads-v2-color-bg)",
+        paddingTop: "4px",
+        paddingBottom: "4px",
+        top: "-5px",
+      },
     }),
     [handleKeyUp, handleTitleChange, inputTestId],
   );