DEVPROD-13581 bump @leafygreen-ui/tabs from 11.2.0 to 13.1.1 and refactor tab logic

apps/parsley/package.json

@@ -62,7 +62,7 @@
     "@leafygreen-ui/segmented-control": "^8.2.13",
     "@leafygreen-ui/select": "^12.0.0",
     "@leafygreen-ui/side-nav": "^14.1.3",
-    "@leafygreen-ui/tabs": "^11.1.13",
+    "@leafygreen-ui/tabs": "^13.1.1",
     "@leafygreen-ui/text-input": "^13.0.2",
     "@leafygreen-ui/toast": "^6.1.27",
     "@leafygreen-ui/toggle": "^10.0.4",

apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_Default.storyshot

@@ -7,8 +7,8 @@
       data-lgid="lg-select"
     >
       <button
-        aria-controls="select-243-menu"
-        aria-describedby="select-243-description"
+        aria-controls="select-205-menu"
+        aria-describedby="select-205-description"
         aria-disabled="false"
         aria-expanded="false"
         aria-invalid="false"
@@ -17,7 +17,7 @@
         data-cy="searchbar-select"
         data-lgid="lg-button"
         data-testid="leafygreen-ui-select-menubutton"
-        id="select-244"
+        id="select-206"
         type="button"
         value="filter"
       >
@@ -133,14 +133,14 @@
               class="leafygreen-ui-1ago99h"
             >
               <input
-                aria-describedby="lg-form_field-feedback-247"
+                aria-describedby="lg-form_field-feedback-209"
                 aria-disabled="false"
                 aria-invalid="true"
                 aria-labelledby="searchbar-input"
                 autocomplete="on"
                 class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                 data-cy="searchbar-input"
-                id="lg-form_field-input-248"
+                id="lg-form_field-input-210"
                 placeholder="optional, regexp to search"
                 required=""
                 spellcheck="false"
@@ -155,7 +155,7 @@
             class="leafygreen-ui-wsgs9n"
             data-lgid="lg-form_field-feedback"
             data-testid="lg-form_field-feedback"
-            id="lg-form_field-feedback-247"
+            id="lg-form_field-feedback-209"
           >
             <div
               class="leafygreen-ui-1nmw6il"

apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_WithSearchSuggestions.storyshot

@@ -7,8 +7,8 @@
       data-lgid="lg-select"
     >
       <button
-        aria-controls="select-250-menu"
-        aria-describedby="select-250-description"
+        aria-controls="select-212-menu"
+        aria-describedby="select-212-description"
         aria-disabled="false"
         aria-expanded="false"
         aria-invalid="false"
@@ -17,7 +17,7 @@
         data-cy="searchbar-select"
         data-lgid="lg-button"
         data-testid="leafygreen-ui-select-menubutton"
-        id="select-251"
+        id="select-213"
         type="button"
         value="filter"
       >
@@ -140,7 +140,7 @@
                 autocomplete="on"
                 class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                 data-cy="searchbar-input"
-                id="lg-form_field-input-255"
+                id="lg-form_field-input-217"
                 placeholder="optional, regexp to search"
                 required=""
                 spellcheck="false"
@@ -155,7 +155,7 @@
             class="leafygreen-ui-11ydt2g"
             data-lgid="lg-form_field-feedback"
             data-testid="lg-form_field-feedback"
-            id="lg-form_field-feedback-254"
+            id="lg-form_field-feedback-216"
           />
         </div>
         <div

apps/parsley/src/components/SidePanel/NavGroup/FilterNavGroup/FilterGroup/__snapshots__/FilterGroup_Default.storyshot

@@ -142,8 +142,8 @@
               Case
             </div>
             <div
-              aria-label="segmented-control-258"
-              aria-owns="segmented-control-258-0 segmented-control-258-1"
+              aria-label="segmented-control-220"
+              aria-owns="segmented-control-220-0 segmented-control-220-1"
               class="leafygreen-ui-18en4yf"
               role="tablist"
             >
@@ -159,7 +159,7 @@
                     aria-controls="Toggle case sensitivity"
                     aria-selected="false"
                     class="leafygreen-ui-ypz97o"
-                    id="segmented-control-258-0"
+                    id="segmented-control-220-0"
                     role="tab"
                     tabindex="-1"
                     type="button"
@@ -188,7 +188,7 @@
                     aria-controls="Toggle case sensitivity"
                     aria-selected="true"
                     class="leafygreen-ui-ypz97o"
-                    id="segmented-control-258-1"
+                    id="segmented-control-220-1"
                     role="tab"
                     tabindex="0"
                     type="button"
@@ -222,8 +222,8 @@
               Match
             </div>
             <div
-              aria-label="segmented-control-259"
-              aria-owns="segmented-control-259-0 segmented-control-259-1"
+              aria-label="segmented-control-221"
+              aria-owns="segmented-control-221-0 segmented-control-221-1"
               class="leafygreen-ui-18en4yf"
               role="tablist"
             >
@@ -239,7 +239,7 @@
                     aria-controls="Toggle match type"
                     aria-selected="true"
                     class="leafygreen-ui-ypz97o"
-                    id="segmented-control-259-0"
+                    id="segmented-control-221-0"
                     role="tab"
                     tabindex="0"
                     type="button"
@@ -268,7 +268,7 @@
                     aria-controls="Toggle match type"
                     aria-selected="false"
                     class="leafygreen-ui-ypz97o"
-                    id="segmented-control-259-1"
+                    id="segmented-control-221-1"
                     role="tab"
                     tabindex="-1"
                     type="button"

apps/parsley/src/components/SidePanel/__snapshots__/SidePanel_Default.storyshot

@@ -12,7 +12,7 @@
         <nav
           aria-label="Side panel"
           class="leafygreen-ui-fw8ayd"
-          id="side-nav-266"
+          id="side-nav-228"
         >
           <div
             class="leafygreen-ui-1nmawjt"
@@ -29,7 +29,7 @@
                   <div
                     class="leafygreen-ui-g6ml2m"
                     data-testid="side-nav-group-header-label"
-                    id="menu-group-label-id-262"
+                    id="menu-group-label-id-224"
                   >
                     <div
                       class="leafygreen-ui-1rnl6t5"
@@ -86,7 +86,7 @@
                     </div>
                   </div>
                   <ul
-                    aria-labelledby="menu-group-label-id-262"
+                    aria-labelledby="menu-group-label-id-224"
                     class="leafygreen-ui-bdnco"
                   >
                     <div
@@ -236,8 +236,8 @@
                                   Case
                                 </div>
                                 <div
-                                  aria-label="segmented-control-267"
-                                  aria-owns="segmented-control-267-0 segmented-control-267-1"
+                                  aria-label="segmented-control-229"
+                                  aria-owns="segmented-control-229-0 segmented-control-229-1"
                                   class="leafygreen-ui-18en4yf"
                                   role="tablist"
                                 >
@@ -253,7 +253,7 @@
                                         aria-controls="Toggle case sensitivity"
                                         aria-selected="true"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-267-0"
+                                        id="segmented-control-229-0"
                                         role="tab"
                                         tabindex="0"
                                         type="button"
@@ -282,7 +282,7 @@
                                         aria-controls="Toggle case sensitivity"
                                         aria-selected="false"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-267-1"
+                                        id="segmented-control-229-1"
                                         role="tab"
                                         tabindex="-1"
                                         type="button"
@@ -316,8 +316,8 @@
                                   Match
                                 </div>
                                 <div
-                                  aria-label="segmented-control-268"
-                                  aria-owns="segmented-control-268-0 segmented-control-268-1"
+                                  aria-label="segmented-control-230"
+                                  aria-owns="segmented-control-230-0 segmented-control-230-1"
                                   class="leafygreen-ui-18en4yf"
                                   role="tablist"
                                 >
@@ -333,7 +333,7 @@
                                         aria-controls="Toggle match type"
                                         aria-selected="true"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-268-0"
+                                        id="segmented-control-230-0"
                                         role="tab"
                                         tabindex="0"
                                         type="button"
@@ -362,7 +362,7 @@
                                         aria-controls="Toggle match type"
                                         aria-selected="false"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-268-1"
+                                        id="segmented-control-230-1"
                                         role="tab"
                                         tabindex="-1"
                                         type="button"
@@ -400,7 +400,7 @@
                   <div
                     class="leafygreen-ui-g6ml2m"
                     data-testid="side-nav-group-header-label"
-                    id="menu-group-label-id-263"
+                    id="menu-group-label-id-225"
                   >
                     <div
                       class="leafygreen-ui-1rnl6t5"
@@ -455,7 +455,7 @@
                     </div>
                   </div>
                   <ul
-                    aria-labelledby="menu-group-label-id-263"
+                    aria-labelledby="menu-group-label-id-225"
                     class="leafygreen-ui-bdnco"
                   >
                     <div
@@ -507,7 +507,7 @@
                   <div
                     class="leafygreen-ui-g6ml2m"
                     data-testid="side-nav-group-header-label"
-                    id="menu-group-label-id-264"
+                    id="menu-group-label-id-226"
                   >
                     <div
                       class="leafygreen-ui-1rnl6t5"
@@ -555,7 +555,7 @@
                     </div>
                   </div>
                   <ul
-                    aria-labelledby="menu-group-label-id-264"
+                    aria-labelledby="menu-group-label-id-226"
                     class="leafygreen-ui-bdnco"
                   >
                     <div
@@ -726,7 +726,7 @@
           </div>
         </nav>
         <button
-          aria-controls="side-nav-266"
+          aria-controls="side-nav-228"
           aria-expanded="true"
           aria-label="Collapse navigation"
           class="leafygreen-ui-v87gj9"

apps/parsley/src/gql/generated/types.ts

@@ -864,6 +864,7 @@ export enum HostEventType {
   HostTaskFinished = "HOST_TASK_FINISHED",
   HostTemporaryExemptionExpirationWarningSent = "HOST_TEMPORARY_EXEMPTION_EXPIRATION_WARNING_SENT",
   HostTerminatedExternally = "HOST_TERMINATED_EXTERNALLY",
+  SpawnHostCreatedError = "SPAWN_HOST_CREATED_ERROR",
   VolumeExpirationWarningSent = "VOLUME_EXPIRATION_WARNING_SENT",
   VolumeMigrationFailed = "VOLUME_MIGRATION_FAILED",
 }
@@ -2805,6 +2806,7 @@ export type Task = {
   dispatchTime?: Maybe<Scalars["Time"]["output"]>;
   displayName: Scalars["String"]["output"];
   displayOnly?: Maybe<Scalars["Boolean"]["output"]>;
+  displayStatus: Scalars["String"]["output"];
   displayTask?: Maybe<Task>;
   distroId: Scalars["String"]["output"];
   estimatedStart?: Maybe<Scalars["Duration"]["output"]>;
@@ -2841,6 +2843,11 @@ export type Task = {
   scheduledTime?: Maybe<Scalars["Time"]["output"]>;
   spawnHostLink?: Maybe<Scalars["String"]["output"]>;
   startTime?: Maybe<Scalars["Time"]["output"]>;
+  /**
+   * This is a task's display status and is what is commonly used on the UI.
+   * In future releases this will be migrated to represent the original status of the task
+   * @deprecated use displayStatus instead. Status will be migrated to reflect the original status
+   */
   status: Scalars["String"]["output"];
   stepbackInfo?: Maybe<StepbackInfo>;
   tags: Array<Scalars["String"]["output"]>;

apps/spruce/package.json

@@ -93,7 +93,7 @@
     "@leafygreen-ui/side-nav": "^14.1.3",
     "@leafygreen-ui/skeleton-loader": "^1.2.0",
     "@leafygreen-ui/table": "^12.7.0",
-    "@leafygreen-ui/tabs": "^11.0.4",
+    "@leafygreen-ui/tabs": "^13.1.1",
     "@leafygreen-ui/text-area": "^9.1.2",
     "@leafygreen-ui/text-input": "^13.0.2",
     "@leafygreen-ui/toast": "^6.1.27",

apps/spruce/src/components/styles/StyledTabs.tsx

@@ -1,10 +1,10 @@
+import { ComponentType } from "react";
 import styled from "@emotion/styled";
 import { Tabs, TabsProps } from "@leafygreen-ui/tabs";
 import { size } from "@evg-ui/lib/constants/tokens";
 
-// @ts-expect-error
 export const StyledTabs = styled(Tabs)<TabsProps>`
-  > div > [role="tablist"] {
-    margin-bottom: ${size.s};
+  [role="tabpanel"] {
+    margin-top: ${size.s};
   }
-`;
+` as ComponentType<TabsProps>;

apps/spruce/src/constants/routes.test.ts

@@ -1,4 +1,4 @@
-import { PatchTab } from "types/patch";
+import { ConfigurePatchPageTabs, VersionPageTabs } from "types/patch";
 import { TaskTab } from "types/task";
 import {
   getTaskRoute,
@@ -56,7 +56,7 @@ describe("getVersionRoute", () => {
     expect(getVersionRoute("SomeId")).toBe("/version/SomeId/tasks");
   });
   it("generates a version route with only an id and a tab", () => {
-    expect(getVersionRoute("SomeId", { tab: "tasks" as PatchTab })).toBe(
+    expect(getVersionRoute("SomeId", { tab: "tasks" as VersionPageTabs })).toBe(
       "/version/SomeId/tasks",
     );
   });
@@ -67,7 +67,10 @@ describe("getVersionRoute", () => {
   });
   it("generates a version route with only an id, tab and some params", () => {
     expect(
-      getVersionRoute("SomeId", { tab: "tasks" as PatchTab, variant: "b" }),
+      getVersionRoute("SomeId", {
+        tab: "tasks" as VersionPageTabs,
+        variant: "b",
+      }),
     ).toBe("/version/SomeId/tasks?variant=b");
   });
 });
@@ -105,11 +108,17 @@ describe("getPatchRoute", () => {
   });
   it("generates a link with a provided tab", () => {
     expect(
-      getPatchRoute("somePatchId", { configure: true, tab: "parameters" }),
+      getPatchRoute("somePatchId", {
+        configure: true,
+        tab: ConfigurePatchPageTabs.Parameters,
+      }),
     ).toBe("/patch/somePatchId/configure/parameters");
     expect(
-      getPatchRoute("somePatchId", { configure: true, tab: "someTab" }),
-    ).toBe("/patch/somePatchId/configure/someTab");
+      getPatchRoute("somePatchId", {
+        configure: true,
+        tab: ConfigurePatchPageTabs.Changes,
+      }),
+    ).toBe("/patch/somePatchId/configure/changes");
   });
 });