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

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="Spinner singleColor center"
              data-testid="edit-resource-tab-spinner"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with failure renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="notice"
              >
                Resource not found
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given change in configuration renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                />
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeChanged: some-changed-value
  someAddedProperty: some-new-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given clicking the context menu for second namespace, when clicking to edit namespace renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          Close ⌘+W
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center DockTab active"
                  data-testid="dock-tab-for-some-second-tab-id"
                  id="tab-some-second-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-other-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-second-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-second-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-second-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="Spinner singleColor center"
              data-testid="edit-resource-tab-spinner"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given clicking the context menu for second namespace, when clicking to edit namespace when second namespace resolves renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          Close ⌘+W
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center DockTab active"
                  data-testid="dock-tab-for-some-second-tab-id"
                  id="tab-some-second-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-other-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-second-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-second-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-second-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-other-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                />
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-second-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-second-tab-id"
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-second-tab-id"
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-second-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-other-uid
  name: some-other-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-other-uid

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given clicking the context menu for second namespace, when clicking to edit namespace when second namespace resolves when clicking dock tab for the first namespace renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          Close ⌘+W
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center DockTab"
                  data-testid="dock-tab-for-some-second-tab-id"
                  id="tab-some-second-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-other-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-second-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-second-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                />
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeRemoved: some-value
  somePropertyToBeChanged: some-old-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given invalid change in configuration renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="error"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="error_outline"
                      >
                        error_outline
                      </span>
                    </i>
                    <div>
                      YAMLException: end of the stream or a document separator is expected (1:1)

 1 | @some-invalid-configuration@
-----^
                    </div>
                  </div>
                </div>
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  disabled=""
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  disabled=""
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                @some-invalid-configuration@
              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given no changes in the configuration, when selecting to save renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Spinner singleColor"
                    data-testid="saving-edit-resource-from-tab-for-some-first-tab-id"
                  />
                   
                  Applying...
                </div>
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  disabled=""
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  disabled=""
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeRemoved: some-value
  somePropertyToBeChanged: some-old-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given no changes in the configuration, when selecting to save when saving resolves with failure renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                />
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeRemoved: some-value
  somePropertyToBeChanged: some-old-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace given no changes in the configuration, when selecting to save when saving resolves with success renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                />
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeRemoved: some-value
  somePropertyToBeChanged: some-old-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                />
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeRemoved: some-value
  somePropertyToBeChanged: some-old-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace when selecting to cancel renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock"
          tabindex="-1"
        >
          <div
            class="ResizingAnchor vertical leading disabled"
          />
          <div
            class="tabs-container flex align-center"
          >
            <div
              class="dockTabs"
              role="tablist"
            >
              <div
                class="Tabs tabs"
              />
            </div>
            <div
              class="toolbar flex gaps align-center box grow pl-0"
            >
              <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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace when selecting to save and close renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Spinner singleColor"
                    data-testid="saving-edit-resource-from-tab-for-some-first-tab-id"
                  />
                   
                  Applying...
                </div>
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  disabled=""
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  disabled=""
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeRemoved: some-value
  somePropertyToBeChanged: some-old-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace when selecting to save and close when saving resolves with failure renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="InfoPanel flex gaps align-center"
              >
                <div
                  class="controls"
                >
                  <div
                    class="resource-info flex gaps align-center"
                  >
                    <span>
                      Kind:
                    </span>
                    <div
                      class="badge"
                    >
                      Namespace
                    </div>
                    <span>
                      Name:
                    </span>
                    <div
                      class="badge"
                    >
                      some-name
                    </div>
                    <span>
                      Namespace:
                    </span>
                    <div
                      class="badge"
                    >
                      default
                    </div>
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                />
                <button
                  class="Button plain"
                  data-testid="cancel-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="Button active outlined"
                  data-testid="save-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save
                </button>
                <button
                  class="Button primary active"
                  data-testid="save-and-close-edit-resource-from-tab-for-some-first-tab-id"
                  type="button"
                >
                  Save & Close
                </button>
              </div>
              <textarea
                data-testid="monaco-editor-for-some-first-tab-id"
              >
                apiVersion: some-api-version
kind: Namespace
metadata:
  uid: some-uid
  name: some-name
  resourceVersion: some-resource-version
  selfLink: /apis/some-api-version/namespaces/some-uid
  somePropertyToBeRemoved: some-value
  somePropertyToBeChanged: some-old-value

              </textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves with namespace when selecting to save and close when saving resolves with success renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock"
          tabindex="-1"
        >
          <div
            class="ResizingAnchor vertical leading disabled"
          />
          <div
            class="tabs-container flex align-center"
          >
            <div
              class="dockTabs"
              role="tablist"
            >
              <div
                class="Tabs tabs"
              />
            </div>
            <div
              class="toolbar flex gaps align-center box grow pl-0"
            >
              <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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`cluster/namespaces - edit namespace from new tab when navigating to namespaces when namespaces resolve when clicking the context menu for a namespace when clicking to edit namespace when call for namespace resolves without namespace renders 1`] = `
<body>
  <div>
    <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"
          >
            <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="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="true"
              data-testid="sidebar-item-namespaces"
            >
              <a
                aria-current="page"
                class="navItem active"
                data-testid="sidebar-item-link-for-namespaces"
                href="/"
              >
                <i
                  class="Icon material focusable"
                >
                  <span
                    class="icon"
                    data-icon-name="layers"
                  >
                    layers
                  </span>
                </i>
                <span>
                  Namespaces
                </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>
        </div>
        <div
          class="ResizingAnchor horizontal trailing"
        />
      </div>
      <div
        class="contents"
      >
        <div
          class="TabLayout"
          data-testid="tab-layout"
        >
          <main
            class=""
          >
            <div
              class="ItemListLayout flex column KubeObjectListLayout Namespaces"
            >
              <div
                class="header flex gaps align-center"
              >
                <h5
                  class="title"
                >
                  Namespaces
                </h5>
                <div
                  class="info-panel box grow"
                >
                  0 items
                </div>
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Namespaces..."
                      spellcheck="false"
                      value=""
                    />
                    <i
                      class="Icon material focusable small"
                    >
                      <span
                        class="icon"
                        data-icon-name="search"
                      >
                        search
                      </span>
                    </i>
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
              <div
                class="items box grow flex column"
              >
                <div
                  class="Table flex column KubeObjectListLayout Namespaces box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell checkbox"
                    >
                      <label
                        class="Checkbox flex align-center"
                      >
                        <input
                          type="checkbox"
                        />
                        <i
                          class="box flex align-center"
                        />
                      </label>
                    </div>
                    <div
                      class="TableCell name nowrap sorting"
                      id="name"
                    >
                      <div
                        class="content"
                      >
                        Name
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell warning nowrap"
                    >
                      <div
                        class="content"
                      />
                    </div>
                    <div
                      class="TableCell labels scrollable nowrap sorting"
                      id="labels"
                    >
                      <div
                        class="content"
                      >
                        Labels
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell age nowrap sorting"
                      id="age"
                    >
                      <div
                        class="content"
                      >
                        Age
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell status nowrap sorting"
                      id="status"
                    >
                      <div
                        class="content"
                      >
                        Status
                      </div>
                      <i
                        class="Icon sortIcon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="arrow_drop_down"
                        >
                          arrow_drop_down
                        </span>
                      </i>
                    </div>
                    <div
                      class="TableCell menu nowrap"
                    >
                      <div
                        class="content"
                      >
                        <i
                          class="Icon material interactive focusable"
                          id="menu-actions-for-item-object-list-content"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="more_vert"
                          >
                            more_vert
                          </span>
                        </i>
                      </div>
                    </div>
                  </div>
                  <div
                    class="NoItems flex box grow"
                  >
                    <div
                      class="box center"
                    >
                      Item list is empty
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                >
                  <button
                    class="Button add-button primary big round"
                    type="button"
                  >
                    <i
                      class="Icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="add"
                      >
                        add
                      </span>
                    </i>
                  </button>
                  <div>
                    Add Namespace
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div
        class="footer"
      >
        <div
          class="Dock isOpen"
          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 active"
                  data-testid="dock-tab-for-some-first-tab-id"
                  id="tab-some-first-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="edit"
                    >
                      edit
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Namespace: some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-first-tab-id"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="close"
                          >
                            close
                          </span>
                        </i>
                        <div
                          data-testid="tooltip-content-for-dock-tab-close-for-some-first-tab-id"
                        >
                          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_down"
                >
                  keyboard_arrow_down
                </span>
              </i>
              <div>
                Minimize
              </div>
            </div>
          </div>
          <div
            class="tab-content edit-resource"
            data-testid="dock-tab-content-for-some-first-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="EditResource flex column"
            >
              <div
                class="notice"
              >
                Resource not found
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;
