// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given empty state for expanded sidebar items already exists, when rendered renders without errors 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >
          
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </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="navItem active"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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-some-extension-name-some-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
            </a>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <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"
          >
            <div
              class="label"
            >
              Overview
            </div>
          </div>
        </div>
        <main
          class="scrollable"
        >
          <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
                class="NamespaceSelectFilterParent"
                data-testid="namespace-select-filter"
              >
                <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-13cymwt-control"
                  >
                    <div
                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
                    >
                      <div
                        class="Select__placeholder css-1jqq78o-placeholder"
                        id="react-select-overview-namespace-select-filter-input-placeholder"
                      >
                        All namespaces
                      </div>
                      <div
                        class="Select__input-container css-qbdosj-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-1u9des2-indicatorSeparator"
                      />
                      <div
                        aria-hidden="true"
                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-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>
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered renders 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >
          
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </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="navItem active"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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-some-extension-name-some-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
            </a>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <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"
          >
            <div
              class="label"
            >
              Overview
            </div>
          </div>
        </div>
        <main
          class="scrollable"
        >
          <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
                class="NamespaceSelectFilterParent"
                data-testid="namespace-select-filter"
              >
                <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-13cymwt-control"
                  >
                    <div
                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
                    >
                      <div
                        class="Select__placeholder css-1jqq78o-placeholder"
                        id="react-select-overview-namespace-select-filter-input-placeholder"
                      >
                        All namespaces
                      </div>
                      <div
                        class="Select__input-container css-qbdosj-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-1u9des2-indicatorSeparator"
                      />
                      <div
                        aria-hidden="true"
                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-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>
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded renders 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >
          
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </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="navItem active"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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-some-extension-name-some-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_up"
                >
                  keyboard_arrow_up
                </span>
              </i>
            </a>
            <ul
              class="subMenu"
            >
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-extension-name-some-child-id"
                  href="/"
                >
                  <span>
                    Child 1
                  </span>
                </a>
              </div>
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-other-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-extension-name-some-other-child-id"
                  href="/"
                >
                  <span>
                    Child 2
                  </span>
                </a>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <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"
          >
            <div
              class="label"
            >
              Overview
            </div>
          </div>
        </div>
        <main
          class="scrollable"
        >
          <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
                class="NamespaceSelectFilterParent"
                data-testid="namespace-select-filter"
              >
                <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-13cymwt-control"
                  >
                    <div
                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
                    >
                      <div
                        class="Select__placeholder css-1jqq78o-placeholder"
                        id="react-select-overview-namespace-select-filter-input-placeholder"
                      >
                        All namespaces
                      </div>
                      <div
                        class="Select__input-container css-qbdosj-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-1u9des2-indicatorSeparator"
                      />
                      <div
                        aria-hidden="true"
                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-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>
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded when a child of the parent is selected renders 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >
          
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </div>
        <div
          class="sidebarNav sidebar-active-status"
        >
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-workloads"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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="true"
            data-testid="sidebar-item-some-extension-name-some-parent-id"
          >
            <a
              aria-current="page"
              class="navItem active"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_up"
                >
                  keyboard_arrow_up
                </span>
              </i>
            </a>
            <ul
              class="subMenu active"
            >
              <div
                class="SidebarItem"
                data-is-active-test="true"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-child-id"
              >
                <a
                  aria-current="page"
                  class="navItem active"
                  data-testid="sidebar-item-link-for-some-extension-name-some-child-id"
                  href="/"
                >
                  <span>
                    Child 1
                  </span>
                </a>
              </div>
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-other-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-extension-name-some-other-child-id"
                  href="/"
                >
                  <span>
                    Child 2
                  </span>
                </a>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <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-some-extension-name-some-child-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Child 1
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-is-active-test="false"
            data-testid="tab-link-for-some-extension-name-some-other-child-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Child 2
            </div>
          </div>
        </div>
        <main
          class=""
        >
          <div
            data-testid="some-child-page"
          >
            Some child page
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded when a child of the parent is selected when selecting sibling tab renders 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >
          
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </div>
        <div
          class="sidebarNav sidebar-active-status"
        >
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-workloads"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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="true"
            data-testid="sidebar-item-some-extension-name-some-parent-id"
          >
            <a
              aria-current="page"
              class="navItem active"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_up"
                >
                  keyboard_arrow_up
                </span>
              </i>
            </a>
            <ul
              class="subMenu active"
            >
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-extension-name-some-child-id"
                  href="/"
                >
                  <span>
                    Child 1
                  </span>
                </a>
              </div>
              <div
                class="SidebarItem"
                data-is-active-test="true"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-other-child-id"
              >
                <a
                  aria-current="page"
                  class="navItem active"
                  data-testid="sidebar-item-link-for-some-extension-name-some-other-child-id"
                  href="/"
                >
                  <span>
                    Child 2
                  </span>
                </a>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <div
        class="TabLayout"
        data-testid="tab-layout"
      >
        <div
          class="Tabs center scrollable"
        >
          <div
            class="Tab flex gaps align-center"
            data-is-active-test="false"
            data-testid="tab-link-for-some-extension-name-some-child-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Child 1
            </div>
          </div>
          <div
            class="Tab flex gaps align-center active"
            data-is-active-test="true"
            data-testid="tab-link-for-some-extension-name-some-other-child-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Child 2
            </div>
          </div>
        </div>
        <main
          class=""
        >
          <div
            data-testid="some-other-child-page"
          >
            Some other child page
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no state for expanded sidebar items exists, and navigated to child sidebar item, when rendered renders 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >

        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </div>
        <div
          class="sidebarNav sidebar-active-status"
        >
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-workloads"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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="true"
            data-testid="sidebar-item-some-extension-name-some-parent-id"
          >
            <a
              aria-current="page"
              class="navItem active"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
            </a>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <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-some-extension-name-some-child-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Child 1
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-is-active-test="false"
            data-testid="tab-link-for-some-extension-name-some-other-child-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Child 2
            </div>
          </div>
        </div>
        <main
          class=""
        >
          <div
            data-testid="some-child-page"
          >
            Some child page
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given state for expanded sidebar items already exists, when rendered renders 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >
          
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </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="navItem active"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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-some-extension-name-some-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_up"
                >
                  keyboard_arrow_up
                </span>
              </i>
            </a>
            <ul
              class="subMenu"
            >
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-extension-name-some-child-id"
                  href="/"
                >
                  <span>
                    Child 1
                  </span>
                </a>
              </div>
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-extension-name-some-parent-id"
                data-testid="sidebar-item-some-extension-name-some-other-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-extension-name-some-other-child-id"
                  href="/"
                >
                  <span>
                    Child 2
                  </span>
                </a>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <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"
          >
            <div
              class="label"
            >
              Overview
            </div>
          </div>
        </div>
        <main
          class="scrollable"
        >
          <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
                class="NamespaceSelectFilterParent"
                data-testid="namespace-select-filter"
              >
                <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-13cymwt-control"
                  >
                    <div
                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
                    >
                      <div
                        class="Select__placeholder css-1jqq78o-placeholder"
                        id="react-select-overview-namespace-select-filter-input-placeholder"
                      >
                        All namespaces
                      </div>
                      <div
                        class="Select__input-container css-qbdosj-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-1u9des2-indicatorSeparator"
                      />
                      <div
                        aria-hidden="true"
                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-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>
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given state for expanded unknown sidebar items already exists, when rendered renders without errors 1`] = `
<div>
  <div
    id="terminal-init"
  />
  <div
    class="Animate slide-right Drawer KubeObjectDetails flex column right leave"
    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="drawer-wrapper flex column"
    >
      <div
        class="drawer-title flex align-center"
      >
        <div
          class="drawer-title-text flex gaps align-center"
        >
          
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="close"
          >
            close
          </span>
        </i>
        <div>
          Close
        </div>
      </div>
      <div
        class="drawer-content flex column box grow"
      />
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
  <div
    class="mainLayout"
    style="--sidebar-width: 200px;"
  >
    <div
      class="sidebar"
    >
      <div
        class="flex flex-col"
        data-testid="cluster-sidebar"
      >
        <div
          class="SidebarCluster"
          data-testid="sidebar-cluster-dropdown"
          id="cluster-some-cluster-id"
          role="menubar"
          tabindex="0"
        >
          <div
            class="Avatar rounded avatar"
            style="width: 40px; height: 40px; background: rgb(198, 167, 9);"
          >
            scn
          </div>
          <div
            class="clusterName"
            id="tooltip-cluster-some-cluster-id"
          >
            some-context-name
          </div>
          <i
            class="Icon dropdown material focusable"
          >
            <span
              class="icon"
              data-icon-name="arrow_drop_down"
            >
              arrow_drop_down
            </span>
          </i>
        </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="navItem active"
              data-testid="sidebar-item-link-for-workloads"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Workloads
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-config"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="list"
                >
                  list
                </span>
              </i>
              <span>
                Config
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-network"
          >
            <a
              class="navItem"
              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>
                Network
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              data-testid="sidebar-item-link-for-storage"
              href="/"
            >
              <i
                class="Icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="storage"
                >
                  storage
                </span>
              </i>
              <span>
                Storage
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-helm"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-helm"
              href="/"
            >
              <i
                class="Icon svg focusable"
              >
                <span
                  class="icon"
                />
              </i>
              <span>
                Helm
              </span>
              <i
                class="Icon expandIcon 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="navItem"
              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>
                Access Control
              </span>
            </a>
          </div>
          <div
            class="SidebarItem"
            data-is-active-test="false"
            data-testid="sidebar-item-custom-resources"
          >
            <a
              class="navItem"
              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>
                Custom Resources
              </span>
              <i
                class="Icon expandIcon 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-some-extension-name-some-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-extension-name-some-parent-id"
              href="/"
            >
              <div>
                Some icon
              </div>
              <span>
                Parent
              </span>
              <i
                class="Icon expandIcon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="keyboard_arrow_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
            </a>
          </div>
        </div>
      </div>
      <div
        class="ResizingAnchor horizontal trailing"
      />
    </div>
    <div
      class="contents"
    >
      <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"
          >
            <div
              class="label"
            >
              Overview
            </div>
          </div>
        </div>
        <main
          class="scrollable"
        >
          <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
                class="NamespaceSelectFilterParent"
                data-testid="namespace-select-filter"
              >
                <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-13cymwt-control"
                  >
                    <div
                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
                    >
                      <div
                        class="Select__placeholder css-1jqq78o-placeholder"
                        id="react-select-overview-namespace-select-filter-input-placeholder"
                      >
                        All namespaces
                      </div>
                      <div
                        class="Select__input-container css-qbdosj-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-1u9des2-indicatorSeparator"
                      />
                      <div
                        aria-hidden="true"
                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-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>
          </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"
                data-testid="dock-tab-for-terminal"
                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"
                        data-testid="dock-tab-close-for-terminal"
                        tabindex="0"
                      >
                        <span
                          class="icon"
                          data-icon-name="close"
                        >
                          close
                        </span>
                      </i>
                      <div
                        data-testid="tooltip-content-for-dock-tab-close-for-terminal"
                      >
                        Close ⌘+W
                      </div>
                    </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>
              </i>
              <div>
                New tab
              </div>
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="fullscreen"
              >
                fullscreen
              </span>
            </i>
            <div>
              Fit to window
            </div>
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="keyboard_arrow_up"
              >
                keyboard_arrow_up
              </span>
            </i>
            <div>
              Open
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;