From a5c86ea2dedc294c8e3ae7cf5925e97ea6bc02ae Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Fri, 8 Jul 2022 13:44:25 -0400
Subject: [PATCH] Update snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../order-of-sidebar-items.test.tsx.snap      |   2 +
 ...-and-tab-navigation-for-core.test.tsx.snap |   5 +
 ...ab-navigation-for-extensions.test.tsx.snap |   5 +
 .../visibility-of-sidebar-items.test.tsx.snap |   2 +
 .../workload-overview.test.tsx.snap           | 906 ++++++++++--------
 .../__snapshots__/cluster-frame.test.tsx.snap |   1 +
 6 files changed, 537 insertions(+), 384 deletions(-)

diff --git a/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap b/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
index 3dccc2e925..b9d854220c 100644
--- a/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
+++ b/src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
@@ -350,6 +350,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -987,6 +988,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
diff --git a/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap b/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
index 8928a59b25..5fb10c9de1 100644
--- a/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
+++ b/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
@@ -319,6 +319,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -867,6 +868,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -1437,6 +1439,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -2886,6 +2889,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -3434,6 +3438,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
diff --git a/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap b/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
index b9cc0addaf..4a1bc12025 100644
--- a/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
+++ b/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
@@ -319,6 +319,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -867,6 +868,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -1455,6 +1457,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -3526,6 +3529,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -4074,6 +4078,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
diff --git a/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap b/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
index bba303f5b7..21817f2a34 100644
--- a/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
+++ b/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
@@ -289,6 +289,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
@@ -851,6 +852,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"
diff --git a/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap b/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
index 1f1b142ad8..cdb5753b2a 100644
--- a/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
+++ b/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
@@ -4,429 +4,567 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
 <body>
   <div>
     <div
-      class="flex flex-col"
-      data-testid="cluster-sidebar"
+      class="Notifications flex column align-flex-end"
+    />
+    <div
+      class="mainLayout"
+      style="--sidebar-width: 200px;"
     >
       <div
-        class="SidebarCluster"
+        class="sidebar"
       >
         <div
-          class="Avatar rounded loadingAvatar"
-          style="width: 40px; height: 40px;"
+          class="flex flex-col"
+          data-testid="cluster-sidebar"
         >
-          ??
+          <div
+            class="SidebarCluster"
+          >
+            <div
+              class="Avatar rounded loadingAvatar"
+              style="width: 40px; height: 40px;"
+            >
+              ??
+            </div>
+            <div
+              class="loadingClusterName"
+            />
+          </div>
+          <div
+            class="sidebarNav sidebar-active-status"
+          >
+            <div
+              class="SidebarItem"
+              data-is-active-test="true"
+              data-testid="sidebar-item-workloads"
+            >
+              <a
+                aria-current="page"
+                class="nav-item flex gaps align-center expandable active"
+                data-testid="sidebar-item-link-for-workloads"
+                href="/"
+              >
+                <i
+                  class="Icon svg focusable"
+                >
+                  <span
+                    class="icon"
+                  />
+                </i>
+                <span
+                  class="link-text box grow"
+                >
+                  Workloads
+                </span>
+                <i
+                  class="Icon expand-icon box right material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="keyboard_arrow_down"
+                  >
+                    keyboard_arrow_down
+                  </span>
+                </i>
+              </a>
+            </div>
+            <div
+              class="SidebarItem"
+              data-is-active-test="false"
+              data-testid="sidebar-item-config"
+            >
+              <a
+                class="nav-item flex gaps align-center"
+                data-testid="sidebar-item-link-for-config"
+                href="/"
+              >
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="list"
+                  >
+                    list
+                  </span>
+                </i>
+                <span
+                  class="link-text box grow"
+                >
+                  Config
+                </span>
+              </a>
+            </div>
+            <div
+              class="SidebarItem"
+              data-is-active-test="false"
+              data-testid="sidebar-item-network"
+            >
+              <a
+                class="nav-item flex gaps align-center expandable"
+                data-testid="sidebar-item-link-for-network"
+                href="/"
+              >
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="device_hub"
+                  >
+                    device_hub
+                  </span>
+                </i>
+                <span
+                  class="link-text box grow"
+                >
+                  Network
+                </span>
+                <i
+                  class="Icon expand-icon box right material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="keyboard_arrow_down"
+                  >
+                    keyboard_arrow_down
+                  </span>
+                </i>
+              </a>
+            </div>
+            <div
+              class="SidebarItem"
+              data-is-active-test="false"
+              data-testid="sidebar-item-storage"
+            >
+              <a
+                class="nav-item flex gaps align-center"
+                data-testid="sidebar-item-link-for-storage"
+                href="/"
+              >
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="storage"
+                  >
+                    storage
+                  </span>
+                </i>
+                <span
+                  class="link-text box grow"
+                >
+                  Storage
+                </span>
+              </a>
+            </div>
+            <div
+              class="SidebarItem"
+              data-is-active-test="false"
+              data-testid="sidebar-item-helm"
+            >
+              <a
+                class="nav-item flex gaps align-center expandable"
+                data-testid="sidebar-item-link-for-helm"
+                href="/"
+              >
+                <i
+                  class="Icon svg focusable"
+                >
+                  <span
+                    class="icon"
+                  />
+                </i>
+                <span
+                  class="link-text box grow"
+                >
+                  Helm
+                </span>
+                <i
+                  class="Icon expand-icon box right material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="keyboard_arrow_down"
+                  >
+                    keyboard_arrow_down
+                  </span>
+                </i>
+              </a>
+            </div>
+            <div
+              class="SidebarItem"
+              data-is-active-test="false"
+              data-testid="sidebar-item-user-management"
+            >
+              <a
+                class="nav-item flex gaps align-center"
+                data-testid="sidebar-item-link-for-user-management"
+                href="/"
+              >
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="security"
+                  >
+                    security
+                  </span>
+                </i>
+                <span
+                  class="link-text box grow"
+                >
+                  Access Control
+                </span>
+              </a>
+            </div>
+            <div
+              class="SidebarItem"
+              data-is-active-test="false"
+              data-testid="sidebar-item-custom-resources"
+            >
+              <a
+                class="nav-item flex gaps align-center expandable"
+                data-testid="sidebar-item-link-for-custom-resources"
+                href="/"
+              >
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="extension"
+                  >
+                    extension
+                  </span>
+                </i>
+                <span
+                  class="link-text box grow"
+                >
+                  Custom Resources
+                </span>
+                <i
+                  class="Icon expand-icon box right material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="keyboard_arrow_down"
+                  >
+                    keyboard_arrow_down
+                  </span>
+                </i>
+              </a>
+            </div>
+          </div>
         </div>
         <div
-          class="loadingClusterName"
+          class="ResizingAnchor horizontal trailing"
         />
       </div>
       <div
-        class="sidebarNav sidebar-active-status"
+        class="contents"
       >
         <div
-          class="SidebarItem"
-          data-is-active-test="true"
-          data-testid="sidebar-item-workloads"
-        >
-          <a
-            aria-current="page"
-            class="nav-item flex gaps align-center expandable active"
-            data-testid="sidebar-item-link-for-workloads"
-            href="/"
-          >
-            <i
-              class="Icon svg focusable"
-            >
-              <span
-                class="icon"
-              />
-            </i>
-            <span
-              class="link-text box grow"
-            >
-              Workloads
-            </span>
-            <i
-              class="Icon expand-icon box right material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="keyboard_arrow_down"
-              >
-                keyboard_arrow_down
-              </span>
-            </i>
-          </a>
-        </div>
-        <div
-          class="SidebarItem"
-          data-is-active-test="false"
-          data-testid="sidebar-item-config"
-        >
-          <a
-            class="nav-item flex gaps align-center"
-            data-testid="sidebar-item-link-for-config"
-            href="/"
-          >
-            <i
-              class="Icon material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="list"
-              >
-                list
-              </span>
-            </i>
-            <span
-              class="link-text box grow"
-            >
-              Config
-            </span>
-          </a>
-        </div>
-        <div
-          class="SidebarItem"
-          data-is-active-test="false"
-          data-testid="sidebar-item-network"
-        >
-          <a
-            class="nav-item flex gaps align-center expandable"
-            data-testid="sidebar-item-link-for-network"
-            href="/"
-          >
-            <i
-              class="Icon material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="device_hub"
-              >
-                device_hub
-              </span>
-            </i>
-            <span
-              class="link-text box grow"
-            >
-              Network
-            </span>
-            <i
-              class="Icon expand-icon box right material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="keyboard_arrow_down"
-              >
-                keyboard_arrow_down
-              </span>
-            </i>
-          </a>
-        </div>
-        <div
-          class="SidebarItem"
-          data-is-active-test="false"
-          data-testid="sidebar-item-storage"
-        >
-          <a
-            class="nav-item flex gaps align-center"
-            data-testid="sidebar-item-link-for-storage"
-            href="/"
-          >
-            <i
-              class="Icon material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="storage"
-              >
-                storage
-              </span>
-            </i>
-            <span
-              class="link-text box grow"
-            >
-              Storage
-            </span>
-          </a>
-        </div>
-        <div
-          class="SidebarItem"
-          data-is-active-test="false"
-          data-testid="sidebar-item-helm"
-        >
-          <a
-            class="nav-item flex gaps align-center expandable"
-            data-testid="sidebar-item-link-for-helm"
-            href="/"
-          >
-            <i
-              class="Icon svg focusable"
-            >
-              <span
-                class="icon"
-              />
-            </i>
-            <span
-              class="link-text box grow"
-            >
-              Helm
-            </span>
-            <i
-              class="Icon expand-icon box right material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="keyboard_arrow_down"
-              >
-                keyboard_arrow_down
-              </span>
-            </i>
-          </a>
-        </div>
-        <div
-          class="SidebarItem"
-          data-is-active-test="false"
-          data-testid="sidebar-item-user-management"
-        >
-          <a
-            class="nav-item flex gaps align-center"
-            data-testid="sidebar-item-link-for-user-management"
-            href="/"
-          >
-            <i
-              class="Icon material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="security"
-              >
-                security
-              </span>
-            </i>
-            <span
-              class="link-text box grow"
-            >
-              Access Control
-            </span>
-          </a>
-        </div>
-        <div
-          class="SidebarItem"
-          data-is-active-test="false"
-          data-testid="sidebar-item-custom-resources"
-        >
-          <a
-            class="nav-item flex gaps align-center expandable"
-            data-testid="sidebar-item-link-for-custom-resources"
-            href="/"
-          >
-            <i
-              class="Icon material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="extension"
-              >
-                extension
-              </span>
-            </i>
-            <span
-              class="link-text box grow"
-            >
-              Custom Resources
-            </span>
-            <i
-              class="Icon expand-icon box right material focusable"
-            >
-              <span
-                class="icon"
-                data-icon-name="keyboard_arrow_down"
-              >
-                keyboard_arrow_down
-              </span>
-            </i>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TabLayout"
-      data-testid="tab-layout"
-    >
-      <div
-        class="Tabs center scrollable"
-      >
-        <div
-          class="Tab flex gaps align-center active"
-          data-is-active-test="true"
-          data-testid="tab-link-for-overview"
-          role="tab"
-          tabindex="0"
+          class="TabLayout"
+          data-testid="tab-layout"
         >
           <div
-            class="label"
-          >
-            Overview
-          </div>
-        </div>
-        <div
-          class="Tab flex gaps align-center"
-          data-is-active-test="false"
-          data-testid="tab-link-for-pods"
-          role="tab"
-          tabindex="0"
-        >
-          <div
-            class="label"
-          >
-            Pods
-          </div>
-        </div>
-      </div>
-      <main>
-        <div
-          class="WorkloadsOverview flex column gaps"
-          data-testid="page-for-workloads-overview"
-        >
-          <div
-            class="header flex gaps align-center"
-          >
-            <h5
-              class="box grow"
-            >
-              Overview
-            </h5>
-            <div>
-              <div
-                class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
-              >
-                <span
-                  class="css-1f43avz-a11yText-A11yText"
-                  id="react-select-overview-namespace-select-filter-input-live-region"
-                />
-                <span
-                  aria-atomic="false"
-                  aria-live="polite"
-                  aria-relevant="additions text"
-                  class="css-1f43avz-a11yText-A11yText"
-                />
-                <div
-                  class="Select__control css-1s2u09g-control"
-                >
-                  <div
-                    class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
-                  >
-                    <div
-                      class="Select__placeholder css-14el2xx-placeholder"
-                      id="react-select-overview-namespace-select-filter-input-placeholder"
-                    >
-                      All namespaces
-                    </div>
-                    <div
-                      class="Select__input-container css-6j8wv5-Input"
-                      data-value=""
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                        aria-expanded="false"
-                        aria-haspopup="true"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        class="Select__input"
-                        id="overview-namespace-select-filter-input"
-                        role="combobox"
-                        spellcheck="false"
-                        style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                  >
-                    <span
-                      class="Select__indicator-separator css-1okebmr-indicatorSeparator"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="css-tj5bde-Svg"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                      >
-                        <path
-                          d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="OverviewStatuses"
+            class="Tabs center scrollable"
           >
             <div
-              class="workloads"
+              class="Tab flex gaps align-center active"
+              data-is-active-test="true"
+              data-testid="tab-link-for-overview"
+              role="tab"
+              tabindex="0"
             >
               <div
-                class="workload"
+                class="label"
               >
-                <div
-                  class="title"
+                Overview
+              </div>
+            </div>
+            <div
+              class="Tab flex gaps align-center"
+              data-is-active-test="false"
+              data-testid="tab-link-for-pods"
+              role="tab"
+              tabindex="0"
+            >
+              <div
+                class="label"
+              >
+                Pods
+              </div>
+            </div>
+          </div>
+          <main>
+            <div
+              class="WorkloadsOverview flex column gaps"
+              data-testid="page-for-workloads-overview"
+            >
+              <div
+                class="header flex gaps align-center"
+              >
+                <h5
+                  class="box grow"
                 >
-                  <a>
-                    Pods (0)
-                  </a>
-                </div>
+                  Overview
+                </h5>
                 <div
-                  class="OverviewWorkloadStatus"
+                  class="NamespaceSelectFilterParent"
+                  data-testid="namespace-select-filter"
                 >
                   <div
-                    class="flex column align-center box grow"
+                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
                   >
+                    <span
+                      class="css-1f43avz-a11yText-A11yText"
+                      id="react-select-overview-namespace-select-filter-input-live-region"
+                    />
+                    <span
+                      aria-atomic="false"
+                      aria-live="polite"
+                      aria-relevant="additions text"
+                      class="css-1f43avz-a11yText-A11yText"
+                    />
                     <div
-                      class="Chart PieChart flex column align-center"
-                      data-testid="workload-overview-status-chart-pods"
+                      class="Select__control css-1s2u09g-control"
                     >
                       <div
-                        class="chart-container"
+                        class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
                       >
-                        <canvas
-                          class="chartjs-render-monitor"
-                          height="0"
-                          style="display: block;"
-                          width="0"
-                        />
                         <div
-                          class="chartjs-tooltip flex column"
-                        />
+                          class="Select__placeholder css-14el2xx-placeholder"
+                          id="react-select-overview-namespace-select-filter-input-placeholder"
+                        >
+                          All namespaces
+                        </div>
+                        <div
+                          class="Select__input-container css-6j8wv5-Input"
+                          data-value=""
+                        >
+                          <input
+                            aria-autocomplete="list"
+                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
+                            aria-expanded="false"
+                            aria-haspopup="true"
+                            autocapitalize="none"
+                            autocomplete="off"
+                            autocorrect="off"
+                            class="Select__input"
+                            id="overview-namespace-select-filter-input"
+                            role="combobox"
+                            spellcheck="false"
+                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                            tabindex="0"
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                       <div
-                        class="legend flex wrap"
-                      />
+                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
+                      >
+                        <span
+                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
+                        />
+                        <div
+                          aria-hidden="true"
+                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="css-tj5bde-Svg"
+                            focusable="false"
+                            height="20"
+                            viewBox="0 0 20 20"
+                            width="20"
+                          >
+                            <path
+                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="OverviewStatuses"
+              >
+                <div
+                  class="workloads"
+                >
+                  <div
+                    class="workload"
+                  >
+                    <div
+                      class="title"
+                    >
+                      <a>
+                        Pods (0)
+                      </a>
+                    </div>
+                    <div
+                      class="OverviewWorkloadStatus"
+                    >
+                      <div
+                        class="flex column align-center box grow"
+                      >
+                        <div
+                          class="Chart PieChart flex column align-center"
+                          data-testid="workload-overview-status-chart-pods"
+                        >
+                          <div
+                            class="chart-container"
+                          >
+                            <canvas
+                              class="chartjs-render-monitor"
+                              height="0"
+                              style="display: block;"
+                              width="0"
+                            />
+                            <div
+                              class="chartjs-tooltip flex column"
+                            />
+                          </div>
+                          <div
+                            class="legend flex wrap"
+                          />
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
+          </main>
+        </div>
+      </div>
+      <div
+        class="footer"
+      >
+        <div
+          class="Dock"
+          tabindex="-1"
+        >
+          <div
+            class="ResizingAnchor vertical leading"
+          />
+          <div
+            class="tabs-container flex align-center"
+          >
+            <div
+              class="dockTabs"
+              role="tablist"
+            >
+              <div
+                class="Tabs tabs"
+              >
+                <div
+                  class="Tab flex gaps align-center DockTab TerminalTab active"
+                  id="tab-terminal"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="terminal"
+                    >
+                      terminal
+                    </span>
+                  </i>
+                  <div
+                    class="label"
+                  >
+                    <div
+                      class="flex align-center"
+                    >
+                      <span
+                        class="title"
+                      >
+                        Terminal
+                      </span>
+                      <div
+                        class="close"
+                      >
+                        <i
+                          class="Icon material interactive focusable small"
+                          id="tooltip_target_13"
+                          tabindex="0"
+                        >
+                          <span
+                            class="icon"
+                            data-icon-name="close"
+                          >
+                            close
+                          </span>
+                          <div />
+                        </i>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="toolbar flex gaps align-center box grow"
+            >
+              <div
+                class="dock-menu box grow"
+              >
+                <i
+                  class="Icon new-dock-tab material interactive focusable"
+                  id="menu-actions-for-dock"
+                  tabindex="0"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="add"
+                  >
+                    add
+                  </span>
+                  <div />
+                </i>
+              </div>
+              <i
+                class="Icon material interactive focusable"
+                id="tooltip_target_15"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="fullscreen"
+                >
+                  fullscreen
+                </span>
+                <div />
+              </i>
+              <i
+                class="Icon material interactive focusable"
+                id="tooltip_target_16"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="keyboard_arrow_up"
+                >
+                  keyboard_arrow_up
+                </span>
+                <div />
+              </i>
+            </div>
           </div>
         </div>
-      </main>
+      </div>
     </div>
-    <div
-      class="Notifications flex column align-flex-end"
-    />
   </div>
 </body>
 `;
diff --git a/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap b/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
index d9f951355a..c79157ba0e 100644
--- a/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
+++ b/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
@@ -1281,6 +1281,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
         <main>
           <div
             class="WorkloadsOverview flex column gaps"
+            data-testid="page-for-workloads-overview"
           >
             <div
               class="header flex gaps align-center"