order-of-sidebar-items.test.tsx.snap

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

exports[`cluster - order of sidebar items when rendered renders 1`] = `
<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"
        >
          <div
            class="Avatar rounded loadingAvatar"
            style="width: 40px; height: 40px;"
          >
            ??
          </div>
          <div
            class="loadingClusterName"
          />
        </div>
        <div
          class="sidebarNav sidebar-active-status"
        >
          <div
            class="SidebarItem"
            data-is-active-test="true"
            data-testid="sidebar-item-workloads"
          >
            <a
              aria-current="page"
              class="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-some-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-parent-id"
              href="/"
            >
              <span>
                Some 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
            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-some-another-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-another-parent-id"
              href="/"
            >
              <span>
                Some another parent
              </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-other-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-other-parent-id"
              href="/"
            >
              <span>
                Some other parent
              </span>
            </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-1s2u09g-control"
                  >
                    <div
                      class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
                    >
                      <div
                        class="Select__placeholder css-14el2xx-placeholder"
                        id="react-select-overview-namespace-select-filter-input-placeholder"
                      >
                        All namespaces
                      </div>
                      <div
                        class="Select__input-container css-6j8wv5-Input"
                        data-value=""
                      >
                        <input
                          aria-autocomplete="list"
                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
                          aria-expanded="false"
                          aria-haspopup="true"
                          autocapitalize="none"
                          autocomplete="off"
                          autocorrect="off"
                          class="Select__input"
                          id="overview-namespace-select-filter-input"
                          role="combobox"
                          spellcheck="false"
                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                          tabindex="0"
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                    <div
                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                    >
                      <span
                        class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                      />
                      <div
                        aria-hidden="true"
                        class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                      >
                        <svg
                          aria-hidden="true"
                          class="css-tj5bde-Svg"
                          focusable="false"
                          height="20"
                          viewBox="0 0 20 20"
                          width="20"
                        >
                          <path
                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="OverviewStatuses"
            >
              <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 - order of sidebar items when rendered when parent is expanded renders 1`] = `
<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"
        >
          <div
            class="Avatar rounded loadingAvatar"
            style="width: 40px; height: 40px;"
          >
            ??
          </div>
          <div
            class="loadingClusterName"
          />
        </div>
        <div
          class="sidebarNav sidebar-active-status"
        >
          <div
            class="SidebarItem"
            data-is-active-test="true"
            data-testid="sidebar-item-workloads"
          >
            <a
              aria-current="page"
              class="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-some-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-parent-id"
              href="/"
            >
              <span>
                Some 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-parent-id"
                data-testid="sidebar-item-some-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-child-id"
                  href="/"
                >
                  <span>
                    Some child
                  </span>
                </a>
              </div>
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-parent-id"
                data-testid="sidebar-item-some-another-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-another-child-id"
                  href="/"
                >
                  <span>
                    Some another child
                  </span>
                </a>
              </div>
              <div
                class="SidebarItem"
                data-is-active-test="false"
                data-parent-id-test="some-parent-id"
                data-testid="sidebar-item-some-other-child-id"
              >
                <a
                  class="navItem"
                  data-testid="sidebar-item-link-for-some-other-child-id"
                  href="/"
                >
                  <span>
                    Some other child
                  </span>
                </a>
              </div>
            </ul>
          </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-some-another-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-another-parent-id"
              href="/"
            >
              <span>
                Some another parent
              </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-other-parent-id"
          >
            <a
              class="navItem"
              data-testid="sidebar-item-link-for-some-other-parent-id"
              href="/"
            >
              <span>
                Some other parent
              </span>
            </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-1s2u09g-control"
                  >
                    <div
                      class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
                    >
                      <div
                        class="Select__placeholder css-14el2xx-placeholder"
                        id="react-select-overview-namespace-select-filter-input-placeholder"
                      >
                        All namespaces
                      </div>
                      <div
                        class="Select__input-container css-6j8wv5-Input"
                        data-value=""
                      >
                        <input
                          aria-autocomplete="list"
                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
                          aria-expanded="false"
                          aria-haspopup="true"
                          autocapitalize="none"
                          autocomplete="off"
                          autocorrect="off"
                          class="Select__input"
                          id="overview-namespace-select-filter-input"
                          role="combobox"
                          spellcheck="false"
                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                          tabindex="0"
                          type="text"
                          value=""
                        />
                      </div>
                    </div>
                    <div
                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                    >
                      <span
                        class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                      />
                      <div
                        aria-hidden="true"
                        class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                      >
                        <svg
                          aria-hidden="true"
                          class="css-tj5bde-Svg"
                          focusable="false"
                          height="20"
                          viewBox="0 0 20 20"
                          width="20"
                        >
                          <path
                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="OverviewStatuses"
            >
              <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>
`;