feat: editable ide tabs

app/client/package.json

@@ -226,6 +226,7 @@
     "typescript": "^5.5.4",
     "unescape-js": "^1.1.4",
     "url-search-params-polyfill": "^8.0.0",
+    "usehooks-ts": "^3.1.0",
     "uuid": "^9.0.0",
     "validate-color": "^2.2.4",
     "web-vitals": "3.5.2",

app/client/packages/design-system/ads/src/Text/Text.styles.tsx

@@ -191,11 +191,8 @@ export const StyledEditableInput = styled.input`
   border: 1px solid transparent;
   border-radius: var(--ads-v2-border-radius);
   outline: none;
-  padding: 0;
   margin: 0;
   position: absolute;
-  left: -3px;
-  top: -3px;
   width: 100%;
   padding: var(--ads-v2-spaces-1);
 
@@ -205,6 +202,6 @@ export const StyledEditableInput = styled.input`
 
   &:focus,
   &:active {
-    border-color: var(--ads-v2-colors-control-field-default-border);
+    border-color: var(--ads-v2-colors-control-field-active-border);
   }
 `;

app/client/packages/design-system/ads/src/Text/Text.tsx

@@ -14,9 +14,9 @@ function Text({
   className,
   color,
   inputProps,
+  inputRef,
   isEditable,
   kind,
-  onChange,
   renderAs,
   ...rest
 }: TextProps) {
@@ -35,11 +35,7 @@ function Text({
       {...rest}
     >
       {isEditable && typeof children === "string" ? (
-        <StyledEditableInput
-          onChange={onChange}
-          value={children}
-          {...inputProps}
-        />
+        <StyledEditableInput ref={inputRef} value={children} {...inputProps} />
       ) : (
         children
       )}

app/client/packages/design-system/ads/src/Text/Text.types.ts

@@ -36,13 +36,13 @@ export type TextProps = {
   isStriked?: boolean;
   /** whether the text is editable or not */
   isEditable?: boolean;
-  /** onChange event for editable text */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** input component props while isEditable is true */
   inputProps?: Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
     "value" | "onChange"
   >;
+  /** ref for input component */
+  inputRef?: React.RefObject<HTMLInputElement>;
 } & React.HTMLAttributes<HTMLLabelElement> &
   React.HTMLAttributes<HTMLHeadingElement> &
   React.HTMLAttributes<HTMLParagraphElement> &

app/client/src/IDE/Components/FileTab/FileTab.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import clsx from "classnames";
+import { noop } from "lodash";
+
+import { Icon, Spinner, Tooltip } from "@appsmith/ads";
+import { sanitizeString } from "utils/URLUtils";
+import { useBoolean, useEventCallback, useOnClickOutside } from "usehooks-ts";
+import { usePrevious } from "@mantine/hooks";
+
+import * as Styled from "./styles";
+
+interface FileTabProps {
+  isActive: boolean;
+  isLoading?: boolean;
+  title: string;
+  onClick: () => void;
+  onClose: (e: React.MouseEvent) => void;
+  icon?: React.ReactNode;
+  editorConfig?: {
+    /** Triggered on enter or click outside */
+    onTitleSave: (name: string) => void;
+    /** Used to normalize title (remove white spaces etc.) */
+    titleTransformer: (name: string) => string;
+    /** Validates title and returns an error message or null */
+    validateTitle: (name: string) => string | null;
+  };
+}
+
+export const FileTab = ({
+  editorConfig,
+  icon,
+  isActive,
+  isLoading = false,
+  onClick,
+  onClose,
+  title,
+}: FileTabProps) => {
+  const {
+    setFalse: exitEditMode,
+    setTrue: enterEditMode,
+    value: isEditing,
+  } = useBoolean(false);
+
+  const previousTitle = usePrevious(title);
+  const [editableTitle, setEditableTitle] = useState(title);
+  const currentTitle =
+    isEditing || isLoading || title !== editableTitle ? editableTitle : title;
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const attemptToSave = () => {
+    if (editorConfig) {
+      const { onTitleSave, validateTitle } = editorConfig;
+      const nameError = validateTitle(editableTitle);
+
+      if (nameError !== null) {
+        setValidationError(nameError);
+      } else {
+        exitEditMode();
+        onTitleSave(editableTitle);
+      }
+    }
+  };
+
+  const handleKeyUp = useEventCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        attemptToSave();
+      } else if (e.key === "Escape") {
+        exitEditMode();
+        setEditableTitle(title);
+      } else {
+        setValidationError(null);
+      }
+    },
+  );
+
+  useOnClickOutside(inputRef, () => {
+    attemptToSave();
+  });
+
+  const handleTitleChange = useEventCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setEditableTitle(
+        editorConfig
+          ? editorConfig.titleTransformer(e.target.value)
+          : e.target.value,
+      );
+    },
+  );
+
+  const handleEnterEditMode = useEventCallback(() => {
+    setEditableTitle(title);
+    enterEditMode();
+  });
+
+  const handleDoubleClick = editorConfig ? handleEnterEditMode : noop;
+
+  const inputProps = useMemo(
+    () => ({
+      onKeyUp: handleKeyUp,
+      onChange: handleTitleChange,
+      autofocus: true,
+      style: {
+        padding: "0 var(--ads-v2-spaces-1)",
+      },
+    }),
+    [handleKeyUp, handleTitleChange],
+  );
+
+  useEffect(() => {
+    if (!isEditing && previousTitle !== title) {
+      setEditableTitle(title);
+    }
+  }, [title, previousTitle, isEditing]);
+
+  // this is a nasty hack to re-focus the input after context retention applies the focus
+  // it will be addressed soon, likely by a focus retention modification
+  useEffect(() => {
+    const input = inputRef.current;
+
+    if (isEditing && input) {
+      setTimeout(() => {
+        input.focus();
+      }, 200);
+    }
+  }, [isEditing]);
+
+  return (
+    <Styled.Tab
+      className={clsx("editor-tab", isActive && "active")}
+      data-testid={`t--ide-tab-${sanitizeString(title)}`}
+      onClick={onClick}
+      onDoubleClick={handleDoubleClick}
+    >
+      {icon && !isLoading ? (
+        <Styled.IconContainer>{icon}</Styled.IconContainer>
+      ) : null}
+      {isLoading && <Spinner size="sm" />}
+
+      <Tooltip content={validationError} visible={Boolean(validationError)}>
+        <Styled.Text
+          inputProps={inputProps}
+          inputRef={inputRef}
+          isEditable={isEditing}
+          kind="body-s"
+        >
+          {currentTitle}
+        </Styled.Text>
+      </Tooltip>
+
+      {/* not using button component because of the size not matching design */}
+      <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={onClose}
+      />
+    </Styled.Tab>
+  );
+};

app/client/src/IDE/Components/FileTab/index.ts

@@ -0,0 +1 @@
+export { FileTab } from "./FileTab";

app/client/src/IDE/Components/FileTab/styles.tsx

@@ -0,0 +1,61 @@
+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 {
+    visibility: visible;
+  }
+
+  &.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);
+`;