chore: entity tabs replacement

app/client/cypress/e2e/Regression/ClientSide/IDE/Focus_retentions_inputs_spec.js

@@ -110,7 +110,7 @@ describe("Focus Retention of Inputs", { tags: ["@tag.IDE"] }, function () {
     cy.setQueryTimeout(10000);
 
     EditorNavigation.SelectEntityByName("SQL_Query", EntityType.Query);
-    cy.get(locators._queryName).should("contain.text", "SQL_Query");
+    cy.get(locators._activeEntityTab).should("contain.text", "SQL_Query");
     pluginActionForm.toolbar.toggleSettings();
     agHelper.GetElement(dataSources._usePreparedStatement).should("be.focused");
     EditorNavigation.SelectEntityByName("S3_Query", EntityType.Query);

app/client/cypress/e2e/Regression/ClientSide/IDE/Tabs_Navigation_spec.ts

@@ -53,13 +53,13 @@ describe("Tabs Navigation", { tags: ["@tag.IDE"] }, () => {
     agHelper.GetNClick(editorTabSelector("page1_query1"));
 
     agHelper
-      .GetElement(locators._queryName)
+      .GetElement(locators._activeEntityTab)
       .should("have.text", "Page1_Query1");
 
     agHelper.GetNClick(editorTabSelector("page1_query2"));
 
     agHelper
-      .GetElement(locators._queryName)
+      .GetElement(locators._activeEntityTab)
       .should("have.text", "Page1_Query2");
   });
 
@@ -93,13 +93,13 @@ describe("Tabs Navigation", { tags: ["@tag.IDE"] }, () => {
     agHelper.GetNClick(editorTabSelector("page2_query1"));
 
     agHelper
-      .GetElement(locators._queryName)
+      .GetElement(locators._activeEntityTab)
       .should("have.text", "Page2_Query1");
 
     agHelper.GetNClick(editorTabSelector("page2_query2"));
 
     agHelper
-      .GetElement(locators._queryName)
+      .GetElement(locators._activeEntityTab)
       .should("have.text", "Page2_Query2");
   });
 
@@ -108,13 +108,13 @@ describe("Tabs Navigation", { tags: ["@tag.IDE"] }, () => {
     agHelper.GetNClick(editorTabSelector("page1_query1"));
 
     agHelper
-      .GetElement(locators._queryName)
+      .GetElement(locators._activeEntityTab)
       .should("have.text", "Page1_Query1");
 
     agHelper.GetNClick(editorTabSelector("page1_query2"));
 
     agHelper
-      .GetElement(locators._queryName)
+      .GetElement(locators._activeEntityTab)
       .should("have.text", "Page1_Query2");
 
     PageLeftPane.switchSegment(PagePaneSegment.JS);

app/client/cypress/e2e/Regression/ClientSide/JSObject/RenameJSObjectBug38207_spec.ts

@@ -12,7 +12,7 @@ describe(
       jsEditor.RenameJSObjectFromContextMenu("ChangedName1");
 
       // Validate the new name of the JS Object
-      cy.get(jsEditor.listOfJsObjects).eq(0).contains("ChangedName1");
+      cy.get(jsEditor.listOfJsDismissibleTabs).eq(0).contains("ChangedName1");
 
       // Create second JS file
       jsEditor.CreateJSObject("", { prettify: false, toRun: false });
@@ -24,7 +24,7 @@ describe(
       jsEditor.RenameJSObjectFromContextMenu("ChangedName3");
 
       // Validate the new name of the 3rd JS Objcte
-      cy.get(jsEditor.listOfJsObjects).eq(2).contains("ChangedName3");
+      cy.get(jsEditor.listOfJsDismissibleTabs).eq(2).contains("ChangedName3");
     });
   },
 );

app/client/cypress/e2e/Regression/ServerSide/Datasources/Oracle_Spec.ts

@@ -446,7 +446,7 @@ describe(
         subAction: "Page1",
         toastToValidate: "copied to page",
       });
-      agHelper.GetNAssertContains(locators._queryName, "Query1Copy");
+      agHelper.GetNAssertContains(locators._activeEntityTab, "Query1Copy");
       dataSources.runQueryAndVerifyResponseViews({ count: 2 });
       PageList.AddNewPage();
       EditorNavigation.SelectEntityByName("Page1", EntityType.Page);
@@ -456,7 +456,7 @@ describe(
         toastToValidate: "moved to page",
       });
       agHelper.WaitUntilAllToastsDisappear();
-      agHelper.GetNAssertContains(locators._queryName, "Query1Copy");
+      agHelper.GetNAssertContains(locators._activeEntityTab, "Query1Copy");
       dataSources.runQueryAndVerifyResponseViews({ count: 2 });
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",

app/client/cypress/support/ApiCommands.js

@@ -181,9 +181,9 @@ Cypress.Commands.add("createAndFillApi", (url, parameters) => {
   dataSources.NavigateToDSCreateNew();
   cy.testCreateApiButton();
   cy.get("@createNewApi").then((response) => {
-    cy.get(locator._queryName).should("be.visible");
+    cy.get(locator._activeEntityTab).should("be.visible");
     expect(response.response.body.responseMeta.success).to.eq(true);
-    cy.get(locator._queryName)
+    cy.get(locator._activeEntityTab)
       .invoke("text")
       .then((text) => {
         const someText = text;

app/client/cypress/support/Objects/CommonLocators.ts

@@ -10,8 +10,8 @@ export class CommonLocators {
   _link = ".ads-v2-link";
   _btnSpinner = ".ads-v2-spinner";
   _sidebar = ".t--sidebar";
-  _queryName = ".editor-tab.active > .ads-v2-text";
-  _queryNameTxt = ".editor-tab.active > .ads-v2-text input";
+  _activeEntityTab = ".editor-tab.active .ads-v2-text";
+  _activeEntityTabInput = ".editor-tab.active .ads-v2-text input";
   _editIcon = ".t--action-name-edit-icon";
   _emptyCanvasCta = "[data-testid='canvas-ctas']";
   _dsName = ".t--edit-datasource-name span";

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -270,8 +270,8 @@ export class AggregateHelper {
 
   public RenameQuery(renameVal: string, willFailError?: string) {
     this.rename({
-      nameLocator: this.locator._queryName,
-      textInputLocator: this.locator._queryNameTxt,
+      nameLocator: this.locator._activeEntityTab,
+      textInputLocator: this.locator._activeEntityTabInput,
       renameVal,
       dblClick: true,
       willFailError,
@@ -1160,7 +1160,7 @@ export class AggregateHelper {
 
   public GetObjectName() {
     //cy.get(this.locator._queryName).invoke("text").then((text) => cy.wrap(text).as("queryName")); or below syntax
-    return cy.get(this.locator._queryName).invoke("text");
+    return cy.get(this.locator._activeEntityTab).invoke("text");
   }
 
   public GetElementLength(selector: string) {

app/client/cypress/support/Pages/ApiPage.ts

@@ -105,7 +105,7 @@ export class ApiPage {
   public settingsTriggerLocator = "[data-testid='t--js-settings-trigger']";
   public splitPaneContextMenuTrigger = ".entity-context-menu";
   public moreActionsTrigger = "[data-testid='t--more-action-trigger']";
-  private apiNameInput = ".editor-tab.active > .ads-v2-text input";
+  private apiNameInput = this.locator._activeEntityTabInput;
   public pageList = ".ads-v2-sub-menu > .ads-v2-menu__menu-item";
 
   CreateApi(

app/client/cypress/support/Pages/JSEditor.ts

@@ -36,7 +36,8 @@ export class JSEditor {
   public settingsTriggerLocator = "[data-testid='t--js-settings-trigger']";
   public contextMenuTriggerLocator = "[data-testid='t--more-action-trigger']";
   public runFunctionSelectLocator = "[data-testid='t--js-function-run']";
-  public listOfJsObjects = "[data-testid='t--tabs-container']>div>span";
+  public listOfJsDismissibleTabs =
+    "[data-testid='t--tabs-container'] .editor-tab";
 
   public toolbar = new PluginEditorToolbar(
     this.runButtonLocator,
@@ -55,8 +56,8 @@ export class JSEditor {
   private _onPageLoadSwitchStatus = (functionName: string) =>
     `//div[contains(@class, '${functionName}-on-page-load-setting')]//label/input`;
 
-  private _jsObjName = ".editor-tab.active > .ads-v2-text";
-  public _jsObjTxt = ".editor-tab.active > .ads-v2-text input";
+  private _jsObjName = this.locator._activeEntityTab;
+  public _jsObjTxt = this.locator._activeEntityTabInput;
   public _newJSobj = "span:contains('New JS object')";
   private _bindingsClose = ".t--entity-property-close";
   public _propertyList = ".binding";

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTab.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { DismissibleTab } from ".";
+import { DismissibleTab } from "./DismissibleTab";
 
 const meta: Meta<typeof DismissibleTab> = {
   title: "ADS/Components/Dismissible Tab",

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTab.styles.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { Button as ADSButton } from "..";
+import { Button as ADSButton } from "../Button";
 
 export const Tab = styled.div`
   position: relative;
@@ -20,8 +20,7 @@ export const Tab = styled.div`
   border-right: 1px solid transparent;
   border-top: 3px solid transparent;
 
-  padding: var(--ads-v2-spaces-3);
-  padding-top: 6px;
+  padding: 0 var(--ads-v2-spaces-3) 2px var(--ads-v2-spaces-3);
 
   &.active {
     background: var(--ads-v2-colors-control-field-default-bg);

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

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 
 import clsx from "classnames";
 
-import { Icon } from "..";
+import { Icon } from "../Icon";
 
 import * as Styled from "./DismissibleTab.styles";
 import { DATA_TEST_ID } from "./constants";

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

@@ -1,10 +1,18 @@
 import type React from "react";
 
 export interface DismissibleTabProps {
+  /** The content of the tab. */
   children: React.ReactNode;
+  /** Used for custom styling, necessary for styled-components. */
+  className?: string;
+  /** Used for passing data-testid. */
   dataTestId?: string;
+  /** Applies active styling. */
   isActive?: boolean;
+  /** Callback when the tab is clicked. */
   onClick: () => void;
+  /** Callback when tab is closed. */
   onClose: (e: React.MouseEvent) => void;
+  /** Callback when tab is double clicked. */
   onDoubleClick?: () => void;
 }

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTabBar.stories.tsx

@@ -2,11 +2,9 @@
 import React, { useRef, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import {
-  DismissibleTab,
-  DismissibleTabBar,
-  type DismissibleTabBarProps,
-} from ".";
+import { DismissibleTab } from "./DismissibleTab";
+import { DismissibleTabBar } from "./DismissibleTabBar";
+import { type DismissibleTabBarProps } from "./DismissibleTabBar.types";
 
 const meta: Meta<typeof DismissibleTabBar> = {
   title: "ADS/Components/Dismissible Tab Bar",

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTabBar.styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 
-import { Button } from "..";
+import { Button } from "../Button";
 
 export const animatedLeftBorder = (showLeftBorder: boolean) => css`
   transition: border-color 0.5s ease;
@@ -16,10 +16,11 @@ export const Root = styled.div<{
 }>`
   display: flex;
   align-items: center;
-  overflow: hidden;
+  overflow-x: hidden;
   white-space: nowrap;
   position: relative;
-  height: 32px;
+  max-height: 32px;
+  min-height: 32px;
 
   ${({ $showLeftBorder }) => animatedLeftBorder($showLeftBorder ?? false)};
 `;
@@ -28,7 +29,6 @@ export const TabsContainer = styled.div`
   display: flex;
   flex: 1 0 auto;
   align-items: center;
-  gap: var(--ads-v2-spaces-2);
   height: 100%;
 `;
 
@@ -41,11 +41,11 @@ export const PlusButtonContainer = styled.div<{ $showLeftBorder?: boolean }>`
   position: sticky;
   right: 0;
   border: none;
-  min-width: 32px;
-  height: 100%;
+  min-width: 28px;
+  min-height: 32px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: end;
 
   ${({ $showLeftBorder }) => animatedLeftBorder($showLeftBorder ?? false)};
 `;

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTabBar.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { noop } from "lodash";
+import clsx from "clsx";
 
+import { Spinner } from "../Spinner";
 import { ScrollArea } from "../ScrollArea";
 
 import * as Styled from "./DismissibleTabBar.styles";
@@ -14,13 +16,15 @@ export const SCROLL_AREA_OPTIONS = {
 } as const;
 
 const SCROLL_AREA_STYLE = {
-  height: 34,
-  top: 1,
+  height: 32,
 };
 
 export const DismissibleTabBar = ({
   children,
+  className,
   disableAdd = false,
+  hideAdd = false,
+  isAddingNewTab,
   onTabAdd,
 }: DismissibleTabBarProps) => {
   const [isLeftIntersecting, setIsLeftIntersecting] = useState(false);
@@ -85,7 +89,10 @@ export const DismissibleTabBar = ({
   );
 
   return (
-    <Styled.Root $showLeftBorder={isLeftIntersecting}>
+    <Styled.Root
+      $showLeftBorder={isLeftIntersecting}
+      className={clsx(className)}
+    >
       <ScrollArea
         data-testid="t--editor-tabs"
         options={SCROLL_AREA_OPTIONS}
@@ -99,16 +106,23 @@ export const DismissibleTabBar = ({
           <Styled.StickySentinel ref={sentinelRightRef} />
         </Styled.TabsContainer>
       </ScrollArea>
-      <Styled.PlusButtonContainer $showLeftBorder={isRightIntersecting}>
-        <Styled.PlusButton
-          isDisabled={disableAdd}
-          isIconButton
-          kind="tertiary"
-          onClick={handleAdd}
-          startIcon="add-line"
-          title="Add new tab"
-        />
-      </Styled.PlusButtonContainer>
+      {!hideAdd && (
+        <Styled.PlusButtonContainer $showLeftBorder={isRightIntersecting}>
+          {isAddingNewTab ? (
+            <Spinner size="md" />
+          ) : (
+            <Styled.PlusButton
+              data-testid="t--ide-tabs-add-button"
+              isDisabled={disableAdd}
+              isIconButton
+              kind="tertiary"
+              onClick={handleAdd}
+              startIcon="add-line"
+              title="Add new tab"
+            />
+          )}
+        </Styled.PlusButtonContainer>
+      )}
     </Styled.Root>
   );
 };

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

@@ -2,9 +2,19 @@ import type React from "react";
 import type { DismissibleTabProps } from "./DismissibleTab.types";
 
 export interface DismissibleTabBarProps {
+  /** The content of the tab bar. */
   children:
     | React.ReactElement<DismissibleTabProps>
-    | React.ReactElement<DismissibleTabProps>[];
-  onTabAdd: () => void;
+    | React.ReactElement<DismissibleTabProps>[]
+    | React.ReactNode;
+  /** Used for custom styling, necessary for styled-components. */
+  className?: string;
+  /** Button is visible, but disabled & not clickable. */
   disableAdd?: boolean;
+  /** Hides add button completely. */
+  hideAdd?: boolean;
+  /** Will display a loader in place of add button. */
+  isAddingNewTab?: boolean;
+  /** Callback tab is added.  */
+  onTabAdd: () => void;
 }

app/client/packages/design-system/ads/src/Templates/EditableDismissibleTab/EditableDismissibleTab.stories.tsx

@@ -2,8 +2,8 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { EditableDismissibleTab } from ".";
-import { Icon } from "../..";
+import { EditableDismissibleTab } from "./EditableDismissibleTab";
+import { Icon } from "../../Icon";
 
 const meta: Meta<typeof EditableDismissibleTab> = {
   title: "ADS/Templates/Editable Dismissible Tab",
@@ -24,7 +24,7 @@ export const Basic: Story = {
     dataTestId: "t--dismissible-tab",
     icon: JSIcon(),
     name: "Hello",
-    canEdit: true,
+    isEditable: true,
 
     onNameSave: console.log,
     validateName: (name: string) =>