chore: Optimisations

appsmithorg · Jun 19, 2024 · 22b2dfb · 22b2dfb
1 parent f98571d
commit 22b2dfb
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 194 deletions.
diff --git a/app/client/src/IDE/Components/FileTab.tsx b/app/client/src/IDE/Components/FileTab.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import styled from "styled-components";
+import clsx from "classnames";
+
+import { Flex, Icon } from "design-system";
+
+interface FileTabProps {
+  isActive: boolean;
+  title: string;
+  onClick: () => void;
+  onClose: (e: React.MouseEvent) => void;
+  icon?: React.ReactNode;
+}
+
+export const StyledTab = styled(Flex)`
+  position: relative;
+  height: 100%;
+  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);
+  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 TabTextContainer = styled.span`
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export const TabIconContainer = styled.div`
+  height: 12px;
+  width: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  img {
+    width: 12px;
+  }
+`;
+
+export const FileTab = ({
+  icon,
+  isActive,
+  onClick,
+  onClose,
+  title,
+}: FileTabProps) => {
+  return (
+    <StyledTab
+      className={clsx("editor-tab", isActive && "active")}
+      data-testid={`t--ide-tab-${title}`}
+      onClick={onClick}
+    >
+      {icon ? <TabIconContainer>{icon}</TabIconContainer> : null}
+      <TabTextContainer>{title}</TabTextContainer>
+      {/* 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}
+      />
+    </StyledTab>
+  );
+};
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx b/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
@@ -29,7 +29,6 @@ const EditorPaneSegments = () => {
     <Flex
       className="relative"
       flexDirection="column"
-      gap="spaces-2"
       height="100%"
       overflow="hidden"
     >

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/AddButton.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/AddButton.tsx
@@ -1,36 +1,67 @@
-import React from "react";
+import type { Ref } from "react";
+import React, { forwardRef } from "react";
 import { Flex, Spinner, Button } from "design-system";
 import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
 import { useIsJSAddLoading } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
-import { EditorEntityTabState } from "@appsmith/entities/IDE/constants";
+import {
+  EditorEntityTab,
+  EditorEntityTabState,
+} from "@appsmith/entities/IDE/constants";
+import { FileTab } from "IDE/Components/FileTab";
 
-const AddButton = () => {
-  const { addClickHandler } = useIDETabClickHandlers();
-  const isJSLoading = useIsJSAddLoading();
-  const { segmentMode } = useCurrentEditorState();
+const AddButton = forwardRef(
+  (
+    {
+      newTabClickCallback,
+      onClose,
+    }: {
+      newTabClickCallback: () => void;
+      onClose: (actionId?: string) => void;
+    },
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    const { addClickHandler } = useIDETabClickHandlers();
+    const isJSLoading = useIsJSAddLoading();
+    const { segment, segmentMode } = useCurrentEditorState();
 
-  if (segmentMode === EditorEntityTabState.Add) {
-    return null;
-  }
-  if (isJSLoading) {
-    return (
-      <Flex px="spaces-2">
-        <Spinner size="md" />
-      </Flex>
+    if (isJSLoading) {
+      return (
+        <Flex px="spaces-2">
+          <Spinner size="md" />
+        </Flex>
+      );
+    }
+
+    const onCloseClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onClose();
+    };
+
+    return segmentMode === EditorEntityTabState.Add ? (
+      <FileTab
+        isActive={segmentMode === EditorEntityTabState.Add}
+        onClick={newTabClickCallback}
+        onClose={(e) => onCloseClick(e)}
+        title={`New ${segment === EditorEntityTab.JS ? "JS" : "Query"}`}
+      />
+    ) : (
+      <div
+        className="bg-white sticky right-0 flex items-center h-[32px] border-b border-b-[var(--ads-v2-color-border-muted)] pl-[var(--ads-v2-spaces-2)]"
+        ref={ref}
+      >
+        <Button
+          className="!min-w-[24px]"
+          data-testid="t--ide-tabs-add-button"
+          id="tabs-add-toggle"
+          isIconButton
+          kind="tertiary"
+          onClick={addClickHandler}
+          size="sm"
+          startIcon="add-line"
+        />
+      </div>
     );
-  }
-  return (
-    <Button
-      className="!min-w-[24px]"
-      data-testid="t--ide-tabs-add-button"
-      id="tabs-add-toggle"
-      isIconButton
-      kind="tertiary"
-      onClick={addClickHandler}
-      size="sm"
-      startIcon="add-line"
-    />
-  );
-};
+  },
+);
 
 export { AddButton };
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/Container.tsx
@@ -9,6 +9,7 @@ const Container = (props: { children: ReactNode }) => {
       backgroundColor="#FFFFFF"
       borderBottom="1px solid var(--ads-v2-color-border-muted)"
       gap="spaces-2"
+      id="ide-tabs-container"
       maxHeight="32px"
       minHeight="32px"
       px="spaces-2"

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
@@ -1,33 +1,19 @@
 import React, { useEffect } from "react";
-import clsx from "classnames";
-import { Flex, Icon, ScrollArea } from "design-system";
 
-import {
-  EditorEntityTab,
-  EditorEntityTabState,
-  type EntityItem,
-} from "@appsmith/entities/IDE/constants";
-import {
-  StyledTab,
-  TabIconContainer,
-  TabTextContainer,
-} from "./StyledComponents";
+import type { EntityItem } from "@appsmith/entities/IDE/constants";
 import { useCurrentEditorState } from "../hooks";
+import { FileTab } from "IDE/Components/FileTab";
 
 interface Props {
   tabs: EntityItem[];
   navigateToTab: (tab: EntityItem) => void;
   onClose: (actionId?: string) => void;
   currentTab: string;
-  newTabClickCallback?: () => void;
 }
 
-const FILE_TABS_CONTAINER_ID = "file-tabs-container";
-
 const FileTabs = (props: Props) => {
-  const { currentTab, navigateToTab, newTabClickCallback, onClose, tabs } =
-    props;
-  const { segment, segmentMode } = useCurrentEditorState();
+  const { currentTab, navigateToTab, onClose, tabs } = props;
+  const { segmentMode } = useCurrentEditorState();
 
   useEffect(() => {
     const activetab = document.querySelector(".editor-tab.active");
@@ -38,72 +24,24 @@ const FileTabs = (props: Props) => {
     }
   }, [tabs, segmentMode]);
 
-  useEffect(() => {
-    const ele = document.getElementById(FILE_TABS_CONTAINER_ID)?.parentElement;
-    if (ele && ele.scrollWidth > ele.clientWidth) {
-      ele.style.borderRight = "1px solid var(--ads-v2-color-border)";
-    } else if (ele) {
-      ele.style.borderRight = "unset";
-    }
-  }, [tabs]);
-
   const onCloseClick = (e: React.MouseEvent, id?: string) => {
     e.stopPropagation();
     onClose(id);
   };
 
   return (
-    <ScrollArea
-      className="h-[32px] top-[0.5px]"
-      data-testid="t--editor-tabs"
-      options={{
-        overflow: {
-          x: "scroll",
-          y: "hidden",
-        },
-      }}
-      size={"sm"}
-    >
-      <Flex gap="spaces-2" height="100%" id={FILE_TABS_CONTAINER_ID}>
-        {tabs.map((tab: EntityItem) => (
-          <StyledTab
-            className={clsx("editor-tab", currentTab === tab.key && "active")}
-            data-testid={`t--ide-tab-${tab.title}`}
-            key={tab.key}
-            onClick={() => navigateToTab(tab)}
-          >
-            <TabIconContainer>{tab.icon}</TabIconContainer>
-            <TabTextContainer>{tab.title}</TabTextContainer>
-            {/* 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={(e) => onCloseClick(e, tab.key)}
-            />
-          </StyledTab>
-        ))}
-        {/* New Tab */}
-        {segmentMode === EditorEntityTabState.Add ? (
-          <StyledTab
-            className={clsx("editor-tab", currentTab === "add" && "active")}
-            data-testid={`t--ide-tab-new`}
-            onClick={newTabClickCallback}
-          >
-            <TabTextContainer>
-              New {segment === EditorEntityTab.JS ? "JS" : "Query"}
-            </TabTextContainer>
-            {/* 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={(e) => onCloseClick(e)}
-            />
-          </StyledTab>
-        ) : null}
-      </Flex>
-    </ScrollArea>
+    <>
+      {tabs.map((tab: EntityItem) => (
+        <FileTab
+          icon={tab.icon}
+          isActive={currentTab === tab.key}
+          key={tab.key}
+          onClick={() => navigateToTab(tab)}
+          onClose={(e) => onCloseClick(e, tab.key)}
+          title={tab.title}
+        />
+      ))}
+    </>
   );
 };
 

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ListButton.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ListButton.tsx
@@ -9,7 +9,7 @@ import {
   MenuTrigger,
   Text,
 } from "design-system";
-import { ListIconContainer, TabTextContainer } from "./StyledComponents";
+import { ListIconContainer, ListTitle } from "./StyledComponents";
 
 interface Props {
   items: EntityItem[];
@@ -50,7 +50,7 @@ const ListButton = (props: Props) => {
               gap="spaces-2"
             >
               <ListIconContainer>{item.icon}</ListIconContainer>
-              <TabTextContainer>{item.title}</TabTextContainer>
+              <ListTitle>{item.title}</ListTitle>
             </Flex>
           </MenuItem>
         ))}

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SearchableFilesList.tsx
@@ -13,7 +13,7 @@ import {
   MenuTrigger,
   SearchInput,
 } from "design-system";
-import { ListIconContainer, TabTextContainer } from "./StyledComponents";
+import { ListIconContainer, ListTitle } from "./StyledComponents";
 
 interface Props {
   allItems: EntityItem[];
@@ -64,7 +64,7 @@ const SearchableFilesList = (props: Props) => {
           gap="spaces-2"
         >
           <ListIconContainer>{file.icon}</ListIconContainer>
-          <TabTextContainer>{file.title}</TabTextContainer>
+          <ListTitle>{file.title}</ListTitle>
         </Flex>
       </MenuItem>
     ));