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

exports[`opening catalog entity details panel renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="home-button"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="flex justify-center Welcome align-center"
          data-testid="welcome-page"
        >
          <div
            data-testid="welcome-banner-container"
            style="width: 320px;"
          >
            <i
              class="Icon logo svg focusable"
            >
              <span
                class="icon"
              />
            </i>
            <div
              class="flex justify-center"
            >
              <div
                data-testid="welcome-text-container"
                style="width: 320px;"
              >
                <h2>
                  Welcome to some-product-name!
                </h2>
                <p>
                  To get you started we have auto-detected your clusters in your
                   
                  kubeconfig file and added them to the catalog, your centralized
                   
                  view for managing all your cloud-native resources.
                  <br />
                  <br />
                  If you have any questions or feedback, please join our 
                  <a
                    class="link"
                    href="https://forums.k8slens.dev"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Lens Forums
                  </a>
                  .
                </p>
                <ul
                  class="block"
                  data-testid="welcome-menu-container"
                  style="width: 320px;"
                >
                  <li
                    class="flex grid-12"
                  >
                    <i
                      class="Icon box col-1 material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="view_list"
                      >
                        view_list
                      </span>
                    </i>
                    <a
                      class="box col-10"
                    >
                      Browse Clusters in Catalog
                    </a>
                    <i
                      class="Icon box col-1 material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="navigate_next"
                      >
                        navigate_next
                      </span>
                    </i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
</body>
`;

exports[`opening catalog entity details panel when navigated to the catalog renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="mainLayout"
          style="--sidebar-width: 200px;"
        >
          <div
            class="sidebar"
          >
            <div
              class="flex flex-col w-full"
            >
              <div
                class="catalog"
              >
                Catalog
              </div>
              <ul
                aria-multiselectable="false"
                class="MuiTreeView-root"
                role="tree"
              >
                <li
                  aria-selected="true"
                  class="MuiTreeItem-root Mui-selected"
                  data-testid="*-tab"
                  role="treeitem"
                  tabindex="0"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    />
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      Browse
                    </div>
                  </div>
                </li>
                <li
                  aria-expanded="true"
                  class="MuiTreeItem-root bordered Mui-expanded"
                  role="treeitem"
                  tabindex="-1"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    >
                      <i
                        class="Icon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="expand_more"
                        >
                          expand_more
                        </span>
                      </i>
                    </div>
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      <div
                        class="parent"
                      >
                        Categories
                      </div>
                    </div>
                  </div>
                  <ul
                    class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
                    role="group"
                    style="min-height: 0px;"
                  >
                    <div
                      class="MuiCollapse-wrapper"
                    >
                      <div
                        class="MuiCollapse-wrapperInner"
                      >
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/General-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="settings"
                                >
                                  settings
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  General
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/KubernetesCluster-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name=""
                                />
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Clusters
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/WebLink-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="public"
                                >
                                  public
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Web Links
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </div>
                    </div>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="ResizingAnchor horizontal trailing"
            />
          </div>
          <div
            class="contents"
          >
            <div
              class="views"
            >
              <div
                class="ItemListLayout flex column Catalog"
                data-testid="catalog-list-for-browse-all"
              >
                <div
                  class="header flex gaps align-center"
                >
                  <h5
                    class="title"
                  >
                    Browse All
                  </h5>
                  <div
                    class="info-panel box grow"
                  >
                    3 items
                  </div>
                  <div
                    class="Input SearchInput focused"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Search..."
                        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 Catalog box grow dark selectable scrollable sortable autoSize virtual"
                  >
                    <div
                      class="TableHead sticky nowrap topLine"
                    >
                      <div
                        class="TableCell entityName 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 nowrap sorting"
                        id="kind"
                      >
                        <div
                          class="content"
                        >
                          Kind
                        </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 sourceCell nowrap sorting"
                        id="source"
                      >
                        <div
                          class="content"
                        >
                          Source
                        </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 labelsCell scrollable nowrap"
                        id="labels"
                      >
                        <div
                          class="content"
                        >
                          Labels
                        </div>
                      </div>
                      <div
                        class="TableCell statusCell nowrap sorting"
                        id="status"
                      >
                        <div
                          class="content"
                        >
                          Status
                        </div>
                        <i
                          class="Icon sortIcon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="arrow_drop_down"
                          >
                            arrow_drop_down
                          </span>
                        </i>
                      </div>
                      <div
                        class="TableCell menu nowrap"
                      >
                        <div
                          class="content"
                        >
                          <i
                            class="Icon material interactive focusable"
                            id="menu-actions-for-item-object-list-content"
                            tabindex="0"
                          >
                            <span
                              class="icon"
                              data-icon-name="more_vert"
                            >
                              more_vert
                            </span>
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      class="VirtualList Catalog box grow dark"
                    >
                      <div>
                        <div
                          class="list"
                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                        >
                          <div
                            style="height: 108px; width: 100%;"
                          >
                            <div
                              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(140, 4, 8);"
                                  >
                                    skc
                                  </div>
                                  <span>
                                    some-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id"
                                      id="menu-actions-for-catalog-for-some-entity-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(77, 163, 16);"
                                  >
                                    sw
                                  </div>
                                  <span>
                                    some-weblink
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  WebLink
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="available"
                                  >
                                    available
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-weblink-id"
                                      id="menu-actions-for-catalog-for-some-weblink-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(83, 137, 8);"
                                  >
                                    slk
                                  </div>
                                  <span>
                                    some-local-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  local
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id-2"
                                      id="menu-actions-for-catalog-for-some-entity-id-2"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="AddRemoveButtons flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="footer"
          />
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
</body>
`;

exports[`opening catalog entity details panel when navigated to the catalog when opening the menu 'some-kubernetes-cluster' renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="mainLayout"
          style="--sidebar-width: 200px;"
        >
          <div
            class="sidebar"
          >
            <div
              class="flex flex-col w-full"
            >
              <div
                class="catalog"
              >
                Catalog
              </div>
              <ul
                aria-multiselectable="false"
                class="MuiTreeView-root"
                role="tree"
              >
                <li
                  aria-selected="true"
                  class="MuiTreeItem-root Mui-selected"
                  data-testid="*-tab"
                  role="treeitem"
                  tabindex="0"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    />
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      Browse
                    </div>
                  </div>
                </li>
                <li
                  aria-expanded="true"
                  class="MuiTreeItem-root bordered Mui-expanded"
                  role="treeitem"
                  tabindex="-1"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    >
                      <i
                        class="Icon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="expand_more"
                        >
                          expand_more
                        </span>
                      </i>
                    </div>
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      <div
                        class="parent"
                      >
                        Categories
                      </div>
                    </div>
                  </div>
                  <ul
                    class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
                    role="group"
                    style="min-height: 0px;"
                  >
                    <div
                      class="MuiCollapse-wrapper"
                    >
                      <div
                        class="MuiCollapse-wrapperInner"
                      >
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/General-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="settings"
                                >
                                  settings
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  General
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/KubernetesCluster-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name=""
                                />
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Clusters
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/WebLink-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="public"
                                >
                                  public
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Web Links
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </div>
                    </div>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="ResizingAnchor horizontal trailing"
            />
          </div>
          <div
            class="contents"
          >
            <div
              class="views"
            >
              <div
                class="ItemListLayout flex column Catalog"
                data-testid="catalog-list-for-browse-all"
              >
                <div
                  class="header flex gaps align-center"
                >
                  <h5
                    class="title"
                  >
                    Browse All
                  </h5>
                  <div
                    class="info-panel box grow"
                  >
                    3 items
                  </div>
                  <div
                    class="Input SearchInput focused"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Search..."
                        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 Catalog box grow dark selectable scrollable sortable autoSize virtual"
                  >
                    <div
                      class="TableHead sticky nowrap topLine"
                    >
                      <div
                        class="TableCell entityName 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 nowrap sorting"
                        id="kind"
                      >
                        <div
                          class="content"
                        >
                          Kind
                        </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 sourceCell nowrap sorting"
                        id="source"
                      >
                        <div
                          class="content"
                        >
                          Source
                        </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 labelsCell scrollable nowrap"
                        id="labels"
                      >
                        <div
                          class="content"
                        >
                          Labels
                        </div>
                      </div>
                      <div
                        class="TableCell statusCell nowrap sorting"
                        id="status"
                      >
                        <div
                          class="content"
                        >
                          Status
                        </div>
                        <i
                          class="Icon sortIcon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="arrow_drop_down"
                          >
                            arrow_drop_down
                          </span>
                        </i>
                      </div>
                      <div
                        class="TableCell menu nowrap"
                      >
                        <div
                          class="content"
                        >
                          <i
                            class="Icon material interactive focusable"
                            id="menu-actions-for-item-object-list-content"
                            tabindex="0"
                          >
                            <span
                              class="icon"
                              data-icon-name="more_vert"
                            >
                              more_vert
                            </span>
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      class="VirtualList Catalog box grow dark"
                    >
                      <div>
                        <div
                          class="list"
                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                        >
                          <div
                            style="height: 108px; width: 100%;"
                          >
                            <div
                              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(140, 4, 8);"
                                  >
                                    skc
                                  </div>
                                  <span>
                                    some-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive active focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id"
                                      id="menu-actions-for-catalog-for-some-entity-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(77, 163, 16);"
                                  >
                                    sw
                                  </div>
                                  <span>
                                    some-weblink
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  WebLink
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="available"
                                  >
                                    available
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-weblink-id"
                                      id="menu-actions-for-catalog-for-some-weblink-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(83, 137, 8);"
                                  >
                                    slk
                                  </div>
                                  <span>
                                    some-local-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  local
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id-2"
                                      id="menu-actions-for-catalog-for-some-entity-id-2"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="AddRemoveButtons flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="footer"
          />
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <ul
    class="Animate opacity Menu MenuActions flex bottom right portal enter"
    data-testid="menu-actions-for-catalog-for-some-entity-id"
    id="menu-actions-for-catalog-for-some-entity-id"
    style="--enter-duration: 100ms; --leave-duration: 100ms; left: 0px; top: 8px;"
  >
    <li
      class="MenuItem"
      data-testid="open-details-menu-item-for-some-entity-id"
      tabindex="0"
    >
      View Details
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Settings
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Disconnect
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Add to Hotbar
    </li>
  </ul>
</body>
`;

exports[`opening catalog entity details panel when navigated to the catalog when opening the menu 'some-kubernetes-cluster' when clicking the 'View Details' menu item renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="mainLayout"
          style="--sidebar-width: 200px;"
        >
          <div
            class="sidebar"
          >
            <div
              class="flex flex-col w-full"
            >
              <div
                class="catalog"
              >
                Catalog
              </div>
              <ul
                aria-multiselectable="false"
                class="MuiTreeView-root"
                role="tree"
              >
                <li
                  aria-selected="true"
                  class="MuiTreeItem-root Mui-selected"
                  data-testid="*-tab"
                  role="treeitem"
                  tabindex="0"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    />
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      Browse
                    </div>
                  </div>
                </li>
                <li
                  aria-expanded="true"
                  class="MuiTreeItem-root bordered Mui-expanded"
                  role="treeitem"
                  tabindex="-1"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    >
                      <i
                        class="Icon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="expand_more"
                        >
                          expand_more
                        </span>
                      </i>
                    </div>
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      <div
                        class="parent"
                      >
                        Categories
                      </div>
                    </div>
                  </div>
                  <ul
                    class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
                    role="group"
                    style="min-height: 0px;"
                  >
                    <div
                      class="MuiCollapse-wrapper"
                    >
                      <div
                        class="MuiCollapse-wrapperInner"
                      >
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/General-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="settings"
                                >
                                  settings
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  General
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/KubernetesCluster-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name=""
                                />
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Clusters
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/WebLink-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="public"
                                >
                                  public
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Web Links
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </div>
                    </div>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="ResizingAnchor horizontal trailing"
            />
          </div>
          <div
            class="contents"
          >
            <div
              class="views"
            >
              <div
                class="ItemListLayout flex column Catalog"
                data-testid="catalog-list-for-browse-all"
              >
                <div
                  class="header flex gaps align-center"
                >
                  <h5
                    class="title"
                  >
                    Browse All
                  </h5>
                  <div
                    class="info-panel box grow"
                  >
                    3 items
                  </div>
                  <div
                    class="Input SearchInput focused"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Search..."
                        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 Catalog box grow dark selectable scrollable sortable autoSize virtual"
                  >
                    <div
                      class="TableHead sticky nowrap topLine"
                    >
                      <div
                        class="TableCell entityName 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 nowrap sorting"
                        id="kind"
                      >
                        <div
                          class="content"
                        >
                          Kind
                        </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 sourceCell nowrap sorting"
                        id="source"
                      >
                        <div
                          class="content"
                        >
                          Source
                        </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 labelsCell scrollable nowrap"
                        id="labels"
                      >
                        <div
                          class="content"
                        >
                          Labels
                        </div>
                      </div>
                      <div
                        class="TableCell statusCell nowrap sorting"
                        id="status"
                      >
                        <div
                          class="content"
                        >
                          Status
                        </div>
                        <i
                          class="Icon sortIcon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="arrow_drop_down"
                          >
                            arrow_drop_down
                          </span>
                        </i>
                      </div>
                      <div
                        class="TableCell menu nowrap"
                      >
                        <div
                          class="content"
                        >
                          <i
                            class="Icon material interactive focusable"
                            id="menu-actions-for-item-object-list-content"
                            tabindex="0"
                          >
                            <span
                              class="icon"
                              data-icon-name="more_vert"
                            >
                              more_vert
                            </span>
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      class="VirtualList Catalog box grow dark"
                    >
                      <div>
                        <div
                          class="list"
                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                        >
                          <div
                            style="height: 108px; width: 100%;"
                          >
                            <div
                              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(140, 4, 8);"
                                  >
                                    skc
                                  </div>
                                  <span>
                                    some-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id"
                                      id="menu-actions-for-catalog-for-some-entity-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(77, 163, 16);"
                                  >
                                    sw
                                  </div>
                                  <span>
                                    some-weblink
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  WebLink
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="available"
                                  >
                                    available
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-weblink-id"
                                      id="menu-actions-for-catalog-for-some-weblink-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(83, 137, 8);"
                                  >
                                    slk
                                  </div>
                                  <span>
                                    some-local-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  local
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id-2"
                                      id="menu-actions-for-catalog-for-some-entity-id-2"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="AddRemoveButtons flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="footer"
          />
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <ul
    class="Animate opacity Menu MenuActions flex bottom right portal enter"
    data-testid="menu-actions-for-catalog-for-some-entity-id"
    id="menu-actions-for-catalog-for-some-entity-id"
    style="--enter-duration: 100ms; --leave-duration: 100ms; left: 0px; top: 8px;"
  >
    <li
      class="MenuItem"
      data-testid="open-details-menu-item-for-some-entity-id"
      tabindex="0"
    >
      View Details
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Settings
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Disconnect
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Add to Hotbar
    </li>
  </ul>
</body>
`;

exports[`opening catalog entity details panel when navigated to the catalog when opening the menu 'some-kubernetes-cluster' when clicking the 'View Details' menu item when the panel opens renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="mainLayout"
          style="--sidebar-width: 200px;"
        >
          <div
            class="sidebar"
          >
            <div
              class="flex flex-col w-full"
            >
              <div
                class="catalog"
              >
                Catalog
              </div>
              <ul
                aria-multiselectable="false"
                class="MuiTreeView-root"
                role="tree"
              >
                <li
                  aria-selected="true"
                  class="MuiTreeItem-root Mui-selected"
                  data-testid="*-tab"
                  role="treeitem"
                  tabindex="0"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    />
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      Browse
                    </div>
                  </div>
                </li>
                <li
                  aria-expanded="true"
                  class="MuiTreeItem-root bordered Mui-expanded"
                  role="treeitem"
                  tabindex="-1"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    >
                      <i
                        class="Icon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="expand_more"
                        >
                          expand_more
                        </span>
                      </i>
                    </div>
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      <div
                        class="parent"
                      >
                        Categories
                      </div>
                    </div>
                  </div>
                  <ul
                    class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
                    role="group"
                    style="min-height: 0px;"
                  >
                    <div
                      class="MuiCollapse-wrapper"
                    >
                      <div
                        class="MuiCollapse-wrapperInner"
                      >
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/General-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="settings"
                                >
                                  settings
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  General
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/KubernetesCluster-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name=""
                                />
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Clusters
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/WebLink-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="public"
                                >
                                  public
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Web Links
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </div>
                    </div>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="ResizingAnchor horizontal trailing"
            />
          </div>
          <div
            class="contents"
          >
            <div
              class="views"
            >
              <div
                class="ItemListLayout flex column Catalog"
                data-testid="catalog-list-for-browse-all"
              >
                <div
                  class="header flex gaps align-center"
                >
                  <h5
                    class="title"
                  >
                    Browse All
                  </h5>
                  <div
                    class="info-panel box grow"
                  >
                    3 items
                  </div>
                  <div
                    class="Input SearchInput focused"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Search..."
                        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 Catalog box grow dark selectable scrollable sortable autoSize virtual"
                  >
                    <div
                      class="TableHead sticky nowrap topLine"
                    >
                      <div
                        class="TableCell entityName 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 nowrap sorting"
                        id="kind"
                      >
                        <div
                          class="content"
                        >
                          Kind
                        </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 sourceCell nowrap sorting"
                        id="source"
                      >
                        <div
                          class="content"
                        >
                          Source
                        </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 labelsCell scrollable nowrap"
                        id="labels"
                      >
                        <div
                          class="content"
                        >
                          Labels
                        </div>
                      </div>
                      <div
                        class="TableCell statusCell nowrap sorting"
                        id="status"
                      >
                        <div
                          class="content"
                        >
                          Status
                        </div>
                        <i
                          class="Icon sortIcon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="arrow_drop_down"
                          >
                            arrow_drop_down
                          </span>
                        </i>
                      </div>
                      <div
                        class="TableCell menu nowrap"
                      >
                        <div
                          class="content"
                        >
                          <i
                            class="Icon material interactive focusable"
                            id="menu-actions-for-item-object-list-content"
                            tabindex="0"
                          >
                            <span
                              class="icon"
                              data-icon-name="more_vert"
                            >
                              more_vert
                            </span>
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      class="VirtualList Catalog box grow dark"
                    >
                      <div>
                        <div
                          class="list"
                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                        >
                          <div
                            style="height: 108px; width: 100%;"
                          >
                            <div
                              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(140, 4, 8);"
                                  >
                                    skc
                                  </div>
                                  <span>
                                    some-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id"
                                      id="menu-actions-for-catalog-for-some-entity-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(77, 163, 16);"
                                  >
                                    sw
                                  </div>
                                  <span>
                                    some-weblink
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  WebLink
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="available"
                                  >
                                    available
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-weblink-id"
                                      id="menu-actions-for-catalog-for-some-weblink-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(83, 137, 8);"
                                  >
                                    slk
                                  </div>
                                  <span>
                                    some-local-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  local
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id-2"
                                      id="menu-actions-for-catalog-for-some-entity-id-2"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="AddRemoveButtons flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="footer"
          />
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <ul
    class="Animate opacity Menu MenuActions flex bottom right portal enter leave"
    data-testid="menu-actions-for-catalog-for-some-entity-id"
    id="menu-actions-for-catalog-for-some-entity-id"
    style="--enter-duration: 100ms; --leave-duration: 100ms; left: 0px; top: 8px;"
  >
    <li
      class="MenuItem"
      data-testid="open-details-menu-item-for-some-entity-id"
      tabindex="0"
    >
      View Details
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Settings
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Disconnect
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Add to Hotbar
    </li>
  </ul>
  <div
    class="Animate slide-right Drawer entityDetails right enter"
    data-testid="catalog-entity-details-drawer"
    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"
        >
          KubernetesCluster: some-kubernetes-cluster
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="content_copy"
            >
              content_copy
            </span>
          </i>
          <div>
            Copy
          </div>
        </div>
        <ul
          class="Menu MenuActions flex CatalogEntityDrawerMenu toolbar gaps right bottom"
          id="menu-actions-for-catalog-entity-drawer-menu-some-entity-id"
        >
          <li
            class="MenuItem"
            tabindex="0"
          >
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="settings"
              >
                settings
              </span>
            </i>
            <div>
              Settings
            </div>
          </li>
          <li
            class="MenuItem"
            tabindex="0"
          >
            <i
              class="Icon material interactive focusable"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="link_off"
              >
                link_off
              </span>
            </i>
            <div>
              Disconnect
            </div>
          </li>
          <li
            class="MenuItem"
            tabindex="0"
          >
            <i
              class="Icon material interactive focusable small"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="push_pin"
              >
                push_pin
              </span>
            </i>
            <div>
              Add to Hotbar
            </div>
          </li>
        </ul>
        <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="flex"
          data-testid="catalog-entity-details-content-for-some-entity-id"
        >
          <div
            class="entityIcon"
          >
            <div
              class="Avatar rounded avatar"
              data-testid="detail-panel-hot-bar-icon"
              style="width: 128px; height: 128px; background: rgb(140, 4, 8);"
            >
              skc
            </div>
            <div
              class="hint"
            >
              Click to open
            </div>
          </div>
          <div
            class="box grow metadata"
          >
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Name
              </span>
              <span
                class="value"
              >
                some-kubernetes-cluster
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Kind
              </span>
              <span
                class="value"
              >
                KubernetesCluster
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Source
              </span>
              <span
                class="value"
              >
                unknown
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Status
              </span>
              <span
                class="value"
              >
                connecting
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Labels
              </span>
              <span
                class="value"
              />
            </div>
          </div>
        </div>
        <div
          class="box grow"
        >
          <div
            class="DrawerTitle title"
          >
            Kubernetes Information
          </div>
          <div
            class="box grow EntityMetadata"
          >
            <div
              class="DrawerItem"
              data-testid="kubernetes-distro-for-some-entity-id"
            >
              <span
                class="name"
              >
                Distribution
              </span>
              <span
                class="value"
              >
                unknown
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Kubelet Version
              </span>
              <span
                class="value"
              >
                unknown
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening catalog entity details panel when navigated to the catalog when opening the menu 'some-weblink' renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="mainLayout"
          style="--sidebar-width: 200px;"
        >
          <div
            class="sidebar"
          >
            <div
              class="flex flex-col w-full"
            >
              <div
                class="catalog"
              >
                Catalog
              </div>
              <ul
                aria-multiselectable="false"
                class="MuiTreeView-root"
                role="tree"
              >
                <li
                  aria-selected="true"
                  class="MuiTreeItem-root Mui-selected"
                  data-testid="*-tab"
                  role="treeitem"
                  tabindex="0"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    />
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      Browse
                    </div>
                  </div>
                </li>
                <li
                  aria-expanded="true"
                  class="MuiTreeItem-root bordered Mui-expanded"
                  role="treeitem"
                  tabindex="-1"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    >
                      <i
                        class="Icon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="expand_more"
                        >
                          expand_more
                        </span>
                      </i>
                    </div>
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      <div
                        class="parent"
                      >
                        Categories
                      </div>
                    </div>
                  </div>
                  <ul
                    class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
                    role="group"
                    style="min-height: 0px;"
                  >
                    <div
                      class="MuiCollapse-wrapper"
                    >
                      <div
                        class="MuiCollapse-wrapperInner"
                      >
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/General-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="settings"
                                >
                                  settings
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  General
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/KubernetesCluster-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name=""
                                />
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Clusters
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/WebLink-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="public"
                                >
                                  public
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Web Links
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </div>
                    </div>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="ResizingAnchor horizontal trailing"
            />
          </div>
          <div
            class="contents"
          >
            <div
              class="views"
            >
              <div
                class="ItemListLayout flex column Catalog"
                data-testid="catalog-list-for-browse-all"
              >
                <div
                  class="header flex gaps align-center"
                >
                  <h5
                    class="title"
                  >
                    Browse All
                  </h5>
                  <div
                    class="info-panel box grow"
                  >
                    3 items
                  </div>
                  <div
                    class="Input SearchInput focused"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Search..."
                        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 Catalog box grow dark selectable scrollable sortable autoSize virtual"
                  >
                    <div
                      class="TableHead sticky nowrap topLine"
                    >
                      <div
                        class="TableCell entityName 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 nowrap sorting"
                        id="kind"
                      >
                        <div
                          class="content"
                        >
                          Kind
                        </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 sourceCell nowrap sorting"
                        id="source"
                      >
                        <div
                          class="content"
                        >
                          Source
                        </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 labelsCell scrollable nowrap"
                        id="labels"
                      >
                        <div
                          class="content"
                        >
                          Labels
                        </div>
                      </div>
                      <div
                        class="TableCell statusCell nowrap sorting"
                        id="status"
                      >
                        <div
                          class="content"
                        >
                          Status
                        </div>
                        <i
                          class="Icon sortIcon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="arrow_drop_down"
                          >
                            arrow_drop_down
                          </span>
                        </i>
                      </div>
                      <div
                        class="TableCell menu nowrap"
                      >
                        <div
                          class="content"
                        >
                          <i
                            class="Icon material interactive focusable"
                            id="menu-actions-for-item-object-list-content"
                            tabindex="0"
                          >
                            <span
                              class="icon"
                              data-icon-name="more_vert"
                            >
                              more_vert
                            </span>
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      class="VirtualList Catalog box grow dark"
                    >
                      <div>
                        <div
                          class="list"
                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                        >
                          <div
                            style="height: 108px; width: 100%;"
                          >
                            <div
                              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(140, 4, 8);"
                                  >
                                    skc
                                  </div>
                                  <span>
                                    some-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id"
                                      id="menu-actions-for-catalog-for-some-entity-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(77, 163, 16);"
                                  >
                                    sw
                                  </div>
                                  <span>
                                    some-weblink
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  WebLink
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="available"
                                  >
                                    available
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive active focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-weblink-id"
                                      id="menu-actions-for-catalog-for-some-weblink-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(83, 137, 8);"
                                  >
                                    slk
                                  </div>
                                  <span>
                                    some-local-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  local
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id-2"
                                      id="menu-actions-for-catalog-for-some-entity-id-2"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="AddRemoveButtons flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="footer"
          />
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <ul
    class="Animate opacity Menu MenuActions flex right bottom portal enter"
    data-testid="menu-actions-for-catalog-for-some-weblink-id"
    id="menu-actions-for-catalog-for-some-weblink-id"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <li
      class="MenuItem"
      data-testid="open-details-menu-item-for-some-weblink-id"
      tabindex="0"
    >
      View Details
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Add to Hotbar
    </li>
  </ul>
</body>
`;

exports[`opening catalog entity details panel when navigated to the catalog when opening the menu 'some-weblink' when clicking the 'View Details' menu item renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="mainLayout"
          style="--sidebar-width: 200px;"
        >
          <div
            class="sidebar"
          >
            <div
              class="flex flex-col w-full"
            >
              <div
                class="catalog"
              >
                Catalog
              </div>
              <ul
                aria-multiselectable="false"
                class="MuiTreeView-root"
                role="tree"
              >
                <li
                  aria-selected="true"
                  class="MuiTreeItem-root Mui-selected"
                  data-testid="*-tab"
                  role="treeitem"
                  tabindex="0"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    />
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      Browse
                    </div>
                  </div>
                </li>
                <li
                  aria-expanded="true"
                  class="MuiTreeItem-root bordered Mui-expanded"
                  role="treeitem"
                  tabindex="-1"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    >
                      <i
                        class="Icon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="expand_more"
                        >
                          expand_more
                        </span>
                      </i>
                    </div>
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      <div
                        class="parent"
                      >
                        Categories
                      </div>
                    </div>
                  </div>
                  <ul
                    class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
                    role="group"
                    style="min-height: 0px;"
                  >
                    <div
                      class="MuiCollapse-wrapper"
                    >
                      <div
                        class="MuiCollapse-wrapperInner"
                      >
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/General-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="settings"
                                >
                                  settings
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  General
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/KubernetesCluster-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name=""
                                />
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Clusters
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/WebLink-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="public"
                                >
                                  public
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Web Links
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </div>
                    </div>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="ResizingAnchor horizontal trailing"
            />
          </div>
          <div
            class="contents"
          >
            <div
              class="views"
            >
              <div
                class="ItemListLayout flex column Catalog"
                data-testid="catalog-list-for-browse-all"
              >
                <div
                  class="header flex gaps align-center"
                >
                  <h5
                    class="title"
                  >
                    Browse All
                  </h5>
                  <div
                    class="info-panel box grow"
                  >
                    3 items
                  </div>
                  <div
                    class="Input SearchInput focused"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Search..."
                        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 Catalog box grow dark selectable scrollable sortable autoSize virtual"
                  >
                    <div
                      class="TableHead sticky nowrap topLine"
                    >
                      <div
                        class="TableCell entityName 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 nowrap sorting"
                        id="kind"
                      >
                        <div
                          class="content"
                        >
                          Kind
                        </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 sourceCell nowrap sorting"
                        id="source"
                      >
                        <div
                          class="content"
                        >
                          Source
                        </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 labelsCell scrollable nowrap"
                        id="labels"
                      >
                        <div
                          class="content"
                        >
                          Labels
                        </div>
                      </div>
                      <div
                        class="TableCell statusCell nowrap sorting"
                        id="status"
                      >
                        <div
                          class="content"
                        >
                          Status
                        </div>
                        <i
                          class="Icon sortIcon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="arrow_drop_down"
                          >
                            arrow_drop_down
                          </span>
                        </i>
                      </div>
                      <div
                        class="TableCell menu nowrap"
                      >
                        <div
                          class="content"
                        >
                          <i
                            class="Icon material interactive focusable"
                            id="menu-actions-for-item-object-list-content"
                            tabindex="0"
                          >
                            <span
                              class="icon"
                              data-icon-name="more_vert"
                            >
                              more_vert
                            </span>
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      class="VirtualList Catalog box grow dark"
                    >
                      <div>
                        <div
                          class="list"
                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                        >
                          <div
                            style="height: 108px; width: 100%;"
                          >
                            <div
                              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(140, 4, 8);"
                                  >
                                    skc
                                  </div>
                                  <span>
                                    some-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id"
                                      id="menu-actions-for-catalog-for-some-entity-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(77, 163, 16);"
                                  >
                                    sw
                                  </div>
                                  <span>
                                    some-weblink
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  WebLink
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="available"
                                  >
                                    available
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-weblink-id"
                                      id="menu-actions-for-catalog-for-some-weblink-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(83, 137, 8);"
                                  >
                                    slk
                                  </div>
                                  <span>
                                    some-local-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  local
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id-2"
                                      id="menu-actions-for-catalog-for-some-entity-id-2"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="AddRemoveButtons flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="footer"
          />
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <ul
    class="Animate opacity Menu MenuActions flex right bottom portal enter"
    data-testid="menu-actions-for-catalog-for-some-weblink-id"
    id="menu-actions-for-catalog-for-some-weblink-id"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <li
      class="MenuItem"
      data-testid="open-details-menu-item-for-some-weblink-id"
      tabindex="0"
    >
      View Details
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Add to Hotbar
    </li>
  </ul>
</body>
`;

exports[`opening catalog entity details panel when navigated to the catalog when opening the menu 'some-weblink' when clicking the 'View Details' menu item when the panel opens renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="mainLayout"
          style="--sidebar-width: 200px;"
        >
          <div
            class="sidebar"
          >
            <div
              class="flex flex-col w-full"
            >
              <div
                class="catalog"
              >
                Catalog
              </div>
              <ul
                aria-multiselectable="false"
                class="MuiTreeView-root"
                role="tree"
              >
                <li
                  aria-selected="true"
                  class="MuiTreeItem-root Mui-selected"
                  data-testid="*-tab"
                  role="treeitem"
                  tabindex="0"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    />
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      Browse
                    </div>
                  </div>
                </li>
                <li
                  aria-expanded="true"
                  class="MuiTreeItem-root bordered Mui-expanded"
                  role="treeitem"
                  tabindex="-1"
                >
                  <div
                    class="MuiTreeItem-content"
                  >
                    <div
                      class="MuiTreeItem-iconContainer"
                    >
                      <i
                        class="Icon material focusable"
                      >
                        <span
                          class="icon"
                          data-icon-name="expand_more"
                        >
                          expand_more
                        </span>
                      </i>
                    </div>
                    <div
                      class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                    >
                      <div
                        class="parent"
                      >
                        Categories
                      </div>
                    </div>
                  </div>
                  <ul
                    class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
                    role="group"
                    style="min-height: 0px;"
                  >
                    <div
                      class="MuiCollapse-wrapper"
                    >
                      <div
                        class="MuiCollapse-wrapperInner"
                      >
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/General-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="settings"
                                >
                                  settings
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  General
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/KubernetesCluster-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name=""
                                />
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Clusters
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li
                          class="MuiTreeItem-root"
                          data-testid="entity.k8slens.dev/WebLink-tab"
                          role="treeitem"
                          tabindex="-1"
                        >
                          <div
                            class="MuiTreeItem-content"
                          >
                            <div
                              class="MuiTreeItem-iconContainer"
                            >
                              <i
                                class="Icon material focusable small"
                              >
                                <span
                                  class="icon"
                                  data-icon-name="public"
                                >
                                  public
                                </span>
                              </i>
                            </div>
                            <div
                              class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                            >
                              <div
                                class="flex"
                              >
                                <div>
                                  Web Links
                                </div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </div>
                    </div>
                  </ul>
                </li>
              </ul>
            </div>
            <div
              class="ResizingAnchor horizontal trailing"
            />
          </div>
          <div
            class="contents"
          >
            <div
              class="views"
            >
              <div
                class="ItemListLayout flex column Catalog"
                data-testid="catalog-list-for-browse-all"
              >
                <div
                  class="header flex gaps align-center"
                >
                  <h5
                    class="title"
                  >
                    Browse All
                  </h5>
                  <div
                    class="info-panel box grow"
                  >
                    3 items
                  </div>
                  <div
                    class="Input SearchInput focused"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Search..."
                        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 Catalog box grow dark selectable scrollable sortable autoSize virtual"
                  >
                    <div
                      class="TableHead sticky nowrap topLine"
                    >
                      <div
                        class="TableCell entityName 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 nowrap sorting"
                        id="kind"
                      >
                        <div
                          class="content"
                        >
                          Kind
                        </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 sourceCell nowrap sorting"
                        id="source"
                      >
                        <div
                          class="content"
                        >
                          Source
                        </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 labelsCell scrollable nowrap"
                        id="labels"
                      >
                        <div
                          class="content"
                        >
                          Labels
                        </div>
                      </div>
                      <div
                        class="TableCell statusCell nowrap sorting"
                        id="status"
                      >
                        <div
                          class="content"
                        >
                          Status
                        </div>
                        <i
                          class="Icon sortIcon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="arrow_drop_down"
                          >
                            arrow_drop_down
                          </span>
                        </i>
                      </div>
                      <div
                        class="TableCell menu nowrap"
                      >
                        <div
                          class="content"
                        >
                          <i
                            class="Icon material interactive focusable"
                            id="menu-actions-for-item-object-list-content"
                            tabindex="0"
                          >
                            <span
                              class="icon"
                              data-icon-name="more_vert"
                            >
                              more_vert
                            </span>
                          </i>
                        </div>
                      </div>
                    </div>
                    <div
                      class="VirtualList Catalog box grow dark"
                    >
                      <div>
                        <div
                          class="list"
                          style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
                        >
                          <div
                            style="height: 108px; width: 100%;"
                          >
                            <div
                              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(140, 4, 8);"
                                  >
                                    skc
                                  </div>
                                  <span>
                                    some-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id"
                                      id="menu-actions-for-catalog-for-some-entity-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 36px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(77, 163, 16);"
                                  >
                                    sw
                                  </div>
                                  <span>
                                    some-weblink
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  WebLink
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  unknown
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="available"
                                  >
                                    available
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-weblink-id"
                                      id="menu-actions-for-catalog-for-some-weblink-id"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              style="position: absolute; left: 0px; top: 72px; height: 36px; width: 100%;"
                            >
                              <div
                                class="TableRow nowrap"
                              >
                                <div
                                  class="TableCell entityName"
                                >
                                  <div
                                    class="Avatar rounded catalogAvatar"
                                    style="width: 24px; height: 24px; background: rgb(83, 137, 8);"
                                  >
                                    slk
                                  </div>
                                  <span>
                                    some-local-kubernetes-cluster
                                  </span>
                                  <i
                                    class="Icon pinIcon svg interactive focusable small"
                                    tabindex="0"
                                  >
                                    <span
                                      class="icon"
                                    />
                                  </i>
                                  <div>
                                    Add to Hotbar
                                  </div>
                                </div>
                                <div
                                  class="TableCell"
                                >
                                  KubernetesCluster
                                </div>
                                <div
                                  class="TableCell sourceCell"
                                >
                                  local
                                </div>
                                <div
                                  class="TableCell labelsCell scrollable"
                                />
                                <div
                                  class="TableCell statusCell"
                                >
                                  <span
                                    class="connecting"
                                  >
                                    connecting
                                  </span>
                                </div>
                                <div
                                  class="TableCell menu"
                                >
                                  <div>
                                    <i
                                      class="Icon material interactive focusable"
                                      data-testid="icon-for-menu-actions-for-catalog-for-some-entity-id-2"
                                      id="menu-actions-for-catalog-for-some-entity-id-2"
                                      tabindex="0"
                                    >
                                      <span
                                        class="icon"
                                        data-icon-name="more_vert"
                                      >
                                        more_vert
                                      </span>
                                    </i>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="AddRemoveButtons flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="footer"
          />
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <ul
    class="Animate opacity Menu MenuActions flex bottom right portal enter leave"
    data-testid="menu-actions-for-catalog-for-some-weblink-id"
    id="menu-actions-for-catalog-for-some-weblink-id"
    style="--enter-duration: 100ms; --leave-duration: 100ms; left: 0px; top: 8px;"
  >
    <li
      class="MenuItem"
      data-testid="open-details-menu-item-for-some-weblink-id"
      tabindex="0"
    >
      View Details
    </li>
    <li
      class="MenuItem"
      tabindex="0"
    >
      Add to Hotbar
    </li>
  </ul>
  <div
    class="Animate slide-right Drawer entityDetails right enter"
    data-testid="catalog-entity-details-drawer"
    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"
        >
          WebLink: some-weblink
          <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="flex"
          data-testid="catalog-entity-details-content-for-some-weblink-id"
        >
          <div
            class="entityIcon"
          >
            <div
              class="Avatar rounded avatar"
              data-testid="detail-panel-hot-bar-icon"
              style="width: 128px; height: 128px; background: rgb(77, 163, 16);"
            >
              sw
            </div>
            <div
              class="hint"
            >
              Click to open
            </div>
          </div>
          <div
            class="box grow metadata"
          >
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Name
              </span>
              <span
                class="value"
              >
                some-weblink
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Kind
              </span>
              <span
                class="value"
              >
                WebLink
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Source
              </span>
              <span
                class="value"
              >
                unknown
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Status
              </span>
              <span
                class="value"
              >
                available
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Labels
              </span>
              <span
                class="value"
              />
            </div>
          </div>
        </div>
        <div
          class="box grow"
        >
          <div
            class="DrawerTitle title"
          >
            More Information
          </div>
          <div
            class="DrawerItem"
            data-testid="weblink-url-for-some-weblink-id"
          >
            <span
              class="name"
            >
              URL
            </span>
            <span
              class="value"
            >
              https://my-websome.com
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;

exports[`opening catalog entity details panel when not navigated to the catalog and showEntityDetails is called from someplace renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="home-button"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="flex justify-center Welcome align-center"
          data-testid="welcome-page"
        >
          <div
            data-testid="welcome-banner-container"
            style="width: 320px;"
          >
            <i
              class="Icon logo svg focusable"
            >
              <span
                class="icon"
              />
            </i>
            <div
              class="flex justify-center"
            >
              <div
                data-testid="welcome-text-container"
                style="width: 320px;"
              >
                <h2>
                  Welcome to some-product-name!
                </h2>
                <p>
                  To get you started we have auto-detected your clusters in your
                   
                  kubeconfig file and added them to the catalog, your centralized
                   
                  view for managing all your cloud-native resources.
                  <br />
                  <br />
                  If you have any questions or feedback, please join our 
                  <a
                    class="link"
                    href="https://forums.k8slens.dev"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Lens Forums
                  </a>
                  .
                </p>
                <ul
                  class="block"
                  data-testid="welcome-menu-container"
                  style="width: 320px;"
                >
                  <li
                    class="flex grid-12"
                  >
                    <i
                      class="Icon box col-1 material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="view_list"
                      >
                        view_list
                      </span>
                    </i>
                    <a
                      class="box col-10"
                    >
                      Browse Clusters in Catalog
                    </a>
                    <i
                      class="Icon box col-1 material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="navigate_next"
                      >
                        navigate_next
                      </span>
                    </i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate slide-right Drawer entityDetails right enter"
    data-testid="catalog-entity-details-drawer"
    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"
        >
          WebLink: some-weblink
          <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="flex"
          data-testid="catalog-entity-details-content-for-some-weblink-id"
        >
          <div
            class="entityIcon"
          >
            <div
              class="Avatar rounded avatar"
              data-testid="detail-panel-hot-bar-icon"
              style="width: 128px; height: 128px; background: rgb(77, 163, 16);"
            >
              sw
            </div>
            <div
              class="hint"
            >
              Click to open
            </div>
          </div>
          <div
            class="box grow metadata"
          >
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Name
              </span>
              <span
                class="value"
              >
                some-weblink
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Kind
              </span>
              <span
                class="value"
              >
                WebLink
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Source
              </span>
              <span
                class="value"
              >
                unknown
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Status
              </span>
              <span
                class="value"
              >
                available
              </span>
            </div>
            <div
              class="DrawerItem"
            >
              <span
                class="name"
              >
                Labels
              </span>
              <span
                class="value"
              />
            </div>
          </div>
        </div>
        <div
          class="box grow"
        >
          <div
            class="DrawerTitle title"
          >
            More Information
          </div>
          <div
            class="DrawerItem"
            data-testid="weblink-url-for-some-weblink-id"
          >
            <span
              class="name"
            >
              URL
            </span>
            <span
              class="value"
            >
              https://my-websome.com
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ResizingAnchor horizontal leading"
    />
  </div>
</body>
`;
