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

exports[`opening dock tab for installing helm chart given application is started, when navigating to helm charts 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput focused"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="Spinner singleColor center"
                  />
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput focused"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve when opening details of a chart 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput focused"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow selected nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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>
  <div
    class="Animate slide-right Drawer HelmChartDetails right enter"
    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"
        >
          Chart: some-repository/some-name
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="content_copy"
            >
              content_copy
            </span>
          </i>
          <div>
            Copy
          </div>
        </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
          class="Spinner singleColor center"
          data-testid="spinner-for-chart-details"
        />
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve when opening details of a chart when chart versions resolve 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput focused"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow selected nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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>
  <div
    class="Animate slide-right Drawer HelmChartDetails right enter"
    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"
        >
          Chart: some-repository/some-name
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="content_copy"
            >
              content_copy
            </span>
          </i>
          <div>
            Copy
          </div>
        </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
          class="box grow"
        >
          <div
            class="introduction flex align-flex-start"
          >
            <div
              class="chartIcon intro-logo imageNotLoaded"
              data-testid="image-container"
              style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
            />
            <div
              class="intro-contents box grow"
            >
              <div
                class="description flex align-center justify-space-between"
                data-testid="selected-chart-description"
              >
                some-description
                <button
                  class="Button primary"
                  data-testid="install-chart-for-some-repository-some-name"
                  type="button"
                >
                  Install
                </button>
              </div>
              <div
                class="DrawerItem version"
              >
                <span
                  class="name"
                >
                  Version
                </span>
                <span
                  class="value"
                >
                  <div
                    class="Select theme-outlined css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-helm-chart-version-selector-some-repository-some-name-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-13cymwt-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-1fdsijx-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-1dimb5e-singleValue"
                        >
                          some-version
                        </div>
                        <div
                          class="Select__input-container css-qbdosj-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="helm-chart-version-selector-some-repository-some-name"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            focusable="false"
                            height="20"
                            viewBox="0 0 20 20"
                            width="20"
                          >
                            <path
                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="DrawerItem"
              >
                <span
                  class="name"
                >
                  Home
                </span>
                <span
                  class="value"
                >
                  <a
                    rel="noreferrer"
                    target="_blank"
                  />
                </span>
              </div>
              <div
                class="DrawerItem maintainers"
              >
                <span
                  class="name"
                >
                  Maintainers
                </span>
                <span
                  class="value"
                >
                  <li>
                    Some Foo&lt;some@foo.com&gt;
                  </li>
                </span>
              </div>
            </div>
          </div>
          <div
            class="Spinner singleColor center"
            data-testid="spinner-for-chart-readme"
          />
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve when opening details of a chart when chart versions resolve when readme 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput focused"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow selected nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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>
  <div
    class="Animate slide-right Drawer HelmChartDetails right enter"
    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"
        >
          Chart: some-repository/some-name
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="content_copy"
            >
              content_copy
            </span>
          </i>
          <div>
            Copy
          </div>
        </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
          class="box grow"
        >
          <div
            class="introduction flex align-flex-start"
          >
            <div
              class="chartIcon intro-logo imageNotLoaded"
              data-testid="image-container"
              style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
            />
            <div
              class="intro-contents box grow"
            >
              <div
                class="description flex align-center justify-space-between"
                data-testid="selected-chart-description"
              >
                some-description
                <button
                  class="Button primary"
                  data-testid="install-chart-for-some-repository-some-name"
                  type="button"
                >
                  Install
                </button>
              </div>
              <div
                class="DrawerItem version"
              >
                <span
                  class="name"
                >
                  Version
                </span>
                <span
                  class="value"
                >
                  <div
                    class="Select theme-outlined css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-helm-chart-version-selector-some-repository-some-name-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-13cymwt-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-1fdsijx-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-1dimb5e-singleValue"
                        >
                          some-version
                        </div>
                        <div
                          class="Select__input-container css-qbdosj-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="helm-chart-version-selector-some-repository-some-name"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            focusable="false"
                            height="20"
                            viewBox="0 0 20 20"
                            width="20"
                          >
                            <path
                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="DrawerItem"
              >
                <span
                  class="name"
                >
                  Home
                </span>
                <span
                  class="value"
                >
                  <a
                    rel="noreferrer"
                    target="_blank"
                  />
                </span>
              </div>
              <div
                class="DrawerItem maintainers"
              >
                <span
                  class="name"
                >
                  Maintainers
                </span>
                <span
                  class="value"
                >
                  <li>
                    Some Foo&lt;some@foo.com&gt;
                  </li>
                </span>
              </div>
            </div>
          </div>
          <div
            class="chart-description"
            data-testid="helmchart-readme"
          >
            <div
              class="MarkDownViewer"
            >
              <p>
                some-readme
              </p>
              

            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve when opening details of a chart when chart versions resolve when readme resolves when selecting different version 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow selected nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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>
  <div
    class="Animate slide-right Drawer HelmChartDetails right enter"
    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"
        >
          Chart: some-repository/some-name
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="content_copy"
            >
              content_copy
            </span>
          </i>
          <div>
            Copy
          </div>
        </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
          class="box grow"
        >
          <div
            class="introduction flex align-flex-start"
          >
            <div
              class="chartIcon intro-logo imageNotLoaded"
              data-testid="image-container"
              style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
            />
            <div
              class="intro-contents box grow"
            >
              <div
                class="description flex align-center justify-space-between"
                data-testid="selected-chart-description"
              >
                some-description
                <button
                  class="Button primary"
                  data-testid="install-chart-for-some-repository-some-name"
                  type="button"
                >
                  Install
                </button>
              </div>
              <div
                class="DrawerItem version"
              >
                <span
                  class="name"
                >
                  Version
                </span>
                <span
                  class="value"
                >
                  <div
                    class="Select theme-outlined css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-helm-chart-version-selector-some-repository-some-name-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-13cymwt-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-1fdsijx-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-1dimb5e-singleValue"
                        >
                          some-other-version
                        </div>
                        <div
                          class="Select__input-container css-qbdosj-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="helm-chart-version-selector-some-repository-some-name"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 0; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            focusable="false"
                            height="20"
                            viewBox="0 0 20 20"
                            width="20"
                          >
                            <path
                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="DrawerItem"
              >
                <span
                  class="name"
                >
                  Home
                </span>
                <span
                  class="value"
                >
                  <a
                    rel="noreferrer"
                    target="_blank"
                  />
                </span>
              </div>
              <div
                class="DrawerItem maintainers"
              >
                <span
                  class="name"
                >
                  Maintainers
                </span>
                <span
                  class="value"
                >
                  <li>
                    Some Foo&lt;some@foo.com&gt;
                  </li>
                </span>
              </div>
            </div>
          </div>
          <div
            class="Spinner singleColor center"
            data-testid="spinner-for-chart-readme"
          />
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve when opening details of a chart when chart versions resolve when readme resolves when selecting different version when readme rejects 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow selected nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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>
  <div
    class="Animate slide-right Drawer HelmChartDetails right enter"
    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"
        >
          Chart: some-repository/some-name
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="content_copy"
            >
              content_copy
            </span>
          </i>
          <div>
            Copy
          </div>
        </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
          class="box grow"
        >
          <div
            class="introduction flex align-flex-start"
          >
            <div
              class="chartIcon intro-logo imageNotLoaded"
              data-testid="image-container"
              style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
            />
            <div
              class="intro-contents box grow"
            >
              <div
                class="description flex align-center justify-space-between"
                data-testid="selected-chart-description"
              >
                some-description
                <button
                  class="Button primary"
                  data-testid="install-chart-for-some-repository-some-name"
                  type="button"
                >
                  Install
                </button>
              </div>
              <div
                class="DrawerItem version"
              >
                <span
                  class="name"
                >
                  Version
                </span>
                <span
                  class="value"
                >
                  <div
                    class="Select theme-outlined css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-helm-chart-version-selector-some-repository-some-name-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-13cymwt-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-1fdsijx-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-1dimb5e-singleValue"
                        >
                          some-other-version
                        </div>
                        <div
                          class="Select__input-container css-qbdosj-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="helm-chart-version-selector-some-repository-some-name"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 0; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            focusable="false"
                            height="20"
                            viewBox="0 0 20 20"
                            width="20"
                          >
                            <path
                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="DrawerItem"
              >
                <span
                  class="name"
                >
                  Home
                </span>
                <span
                  class="value"
                >
                  <a
                    rel="noreferrer"
                    target="_blank"
                  />
                </span>
              </div>
              <div
                class="DrawerItem maintainers"
              >
                <span
                  class="name"
                >
                  Maintainers
                </span>
                <span
                  class="value"
                >
                  <li>
                    Some Foo&lt;some@foo.com&gt;
                  </li>
                </span>
              </div>
            </div>
          </div>
          <div
            class="chart-description"
            data-testid="helmchart-readme"
          >
            <div
              class="MarkDownViewer"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve when opening details of a chart when chart versions resolve when readme resolves when selecting different version when readme 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow selected nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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>
  <div
    class="Animate slide-right Drawer HelmChartDetails right enter"
    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"
        >
          Chart: some-repository/some-name
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="content_copy"
            >
              content_copy
            </span>
          </i>
          <div>
            Copy
          </div>
        </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
          class="box grow"
        >
          <div
            class="introduction flex align-flex-start"
          >
            <div
              class="chartIcon intro-logo imageNotLoaded"
              data-testid="image-container"
              style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
            />
            <div
              class="intro-contents box grow"
            >
              <div
                class="description flex align-center justify-space-between"
                data-testid="selected-chart-description"
              >
                some-description
                <button
                  class="Button primary"
                  data-testid="install-chart-for-some-repository-some-name"
                  type="button"
                >
                  Install
                </button>
              </div>
              <div
                class="DrawerItem version"
              >
                <span
                  class="name"
                >
                  Version
                </span>
                <span
                  class="value"
                >
                  <div
                    class="Select theme-outlined css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-helm-chart-version-selector-some-repository-some-name-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-13cymwt-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-1fdsijx-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-1dimb5e-singleValue"
                        >
                          some-other-version
                        </div>
                        <div
                          class="Select__input-container css-qbdosj-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="helm-chart-version-selector-some-repository-some-name"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 0; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            focusable="false"
                            height="20"
                            viewBox="0 0 20 20"
                            width="20"
                          >
                            <path
                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="DrawerItem"
              >
                <span
                  class="name"
                >
                  Home
                </span>
                <span
                  class="value"
                >
                  <a
                    rel="noreferrer"
                    target="_blank"
                  />
                </span>
              </div>
              <div
                class="DrawerItem maintainers"
              >
                <span
                  class="name"
                >
                  Maintainers
                </span>
                <span
                  class="value"
                >
                  <li>
                    Some Foo&lt;some@foo.com&gt;
                  </li>
                </span>
              </div>
            </div>
          </div>
          <div
            class="chart-description"
            data-testid="helmchart-readme"
          >
            <div
              class="MarkDownViewer"
            >
              <p>
                some-readme
              </p>
              

            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening dock tab for installing helm chart given application is started, when navigating to helm charts when charts resolve when opening details of a chart when chart versions resolve when readme resolves when selecting to install the chart 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-helm"
            >
              <a
                aria-current="page"
                class="navItem active"
                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"
        >
          <div
            class="Tabs center scrollable"
          >
            <div
              class="Tab flex gaps align-center active"
              data-is-active-test="true"
              data-testid="tab-link-for-charts"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Charts
              </div>
            </div>
            <div
              class="Tab flex gaps align-center"
              data-is-active-test="false"
              data-testid="tab-link-for-releases"
              role="tab"
              tabindex="0"
            >
              <div
                class="label"
              >
                Releases
              </div>
            </div>
          </div>
          <main
            class=""
          >
            <div
              data-testid="page-for-helm-charts"
              style="display: none;"
            />
            <div
              class="ItemListLayout flex column HelmCharts"
            >
              <div
                class="header flex gaps align-center"
              >
                <div
                  class="Input SearchInput"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      placeholder="Search Helm Charts..."
                      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 HelmCharts box grow dark selectable scrollable sortable autoSize virtual"
                >
                  <div
                    class="TableHead sticky nowrap topLine"
                  >
                    <div
                      class="TableCell icon nowrap"
                    >
                      <div
                        class="content"
                      />
                    </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 description nowrap"
                      id="description"
                    >
                      <div
                        class="content"
                      >
                        Description
                      </div>
                    </div>
                    <div
                      class="TableCell version nowrap"
                      id="version"
                    >
                      <div
                        class="content"
                      >
                        Version
                      </div>
                    </div>
                    <div
                      class="TableCell app-version nowrap"
                      id="app-version"
                    >
                      <div
                        class="content"
                      >
                        App Version
                      </div>
                    </div>
                    <div
                      class="TableCell repository nowrap sorting"
                      id="repo"
                    >
                      <div
                        class="content"
                      >
                        Repository
                      </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="VirtualList HelmCharts box grow dark"
                  >
                    <div>
                      <div
                        class="list"
                        style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                      >
                        <div
                          style="height: 66px; width: 100%;"
                        >
                          <div
                            style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                          <div
                            style="position: absolute; left: 0px; top: 33px; height: 33px; width: 100%;"
                          >
                            <div
                              class="TableRow nowrap"
                              data-testid="helm-chart-row-for-some-repository-some-other-name"
                            >
                              <div
                                class="TableCell icon"
                              >
                                <figure>
                                  <div
                                    class="chartIcon imageNotLoaded"
                                    data-testid="image-container"
                                    style="background-image: url(data:image/svg+xml;base64,[encoded data, 5168 characters]);"
                                  />
                                </figure>
                              </div>
                              <div
                                class="TableCell name"
                              >
                                some-other-name
                              </div>
                              <div
                                class="TableCell description"
                              >
                                some-description
                              </div>
                              <div
                                class="TableCell version"
                              >
                                some-version
                              </div>
                              <div
                                class="TableCell app-version"
                              />
                              <div
                                class="TableCell some-repository repository"
                              >
                                some-repository
                              </div>
                              <div
                                class="TableCell menu"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="AddRemoveButtons flex gaps"
                />
              </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-tab-id"
                  id="tab-some-tab-id"
                  role="tab"
                  tabindex="0"
                >
                  <i
                    class="Icon material focusable small"
                  >
                    <span
                      class="icon"
                      data-icon-name="install_desktop"
                    >
                      install_desktop
                    </span>
                  </i>
                  <div
                    class="label"
                  >
                    <div
                      class="flex align-center"
                    >
                      <span
                        class="title"
                      >
                        Helm Install: some-repository/some-name
                      </span>
                      <div
                        class="close"
                      >
                        <i
                          class="Icon material interactive focusable small"
                          data-testid="dock-tab-close-for-some-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-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 install-chart"
            data-testid="dock-tab-content-for-some-tab-id"
            style="flex-basis: 300px;"
          >
            <div
              class="Spinner singleColor center"
              data-testid="install-chart-tab-spinner"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;
