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

exports[`Deleting a cluster when an internal kubeconfig cluster is used when the dialog is opened 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"
                  >
                    0 items
                  </div>
                  <div
                    class="Input SearchInput"
                  >
                    <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="NoItems flex box grow"
                    >
                      <div
                        class="box center"
                      >
                        Item list is empty
                      </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>
  <div
    class="Animate opacity-scale Dialog flex center dialog modal enter"
    data-testid="delete-cluster-dialog"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="dialogContent"
      >
        <div>
          Delete the 
          <b>
            some-context
          </b>
           context from Lens's internal kubeconfig?
        </div>
        <div
          class="warning"
        >
          <i
            class="Icon warningIcon material focusable"
          >
            <span
              class="icon"
              data-icon-name="warning_amber"
            >
              warning_amber
            </span>
          </i>
          <p
            data-testid="internal-kubeconfig-warning"
          >
            Are you sure you want to delete it? It can be re-added through the copy/paste mechanism.
          </p>
        </div>
      </div>
      <div
        class="dialogButtons"
      >
        <button
          class="Button plain"
          type="button"
        >
          Cancel
        </button>
        <button
          class="Button accent"
          type="button"
        >
          Delete Context
        </button>
      </div>
    </div>
  </div>
</body>
`;

exports[`Deleting a cluster when the kubeconfig has multiple clusters when the dialog is opened for not the current 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"
                  >
                    0 items
                  </div>
                  <div
                    class="Input SearchInput"
                  >
                    <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="NoItems flex box grow"
                    >
                      <div
                        class="box center"
                      >
                        Item list is empty
                      </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>
  <div
    class="Animate opacity-scale Dialog flex center dialog modal enter"
    data-testid="delete-cluster-dialog"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="dialogContent"
      >
        <div>
          Delete the 
          <b>
            some-non-current-context
          </b>
           context from 
          <b>
            ./temp-kube-config
          </b>
          ?
        </div>
        <div
          class="warning"
        >
          <i
            class="Icon warningIcon material focusable"
          >
            <span
              class="icon"
              data-icon-name="warning_amber"
            >
              warning_amber
            </span>
          </i>
          <p
            data-testid="kubeconfig-change-warning"
          >
            The contents of kubeconfig file will be changed!
          </p>
        </div>
        <hr
          class="hr"
        />
        <div
          class="mt-4"
        >
          <label
            class="Checkbox flex align-center"
          >
            <input
              data-testid="delete-cluster-dialog-context-switch"
              type="checkbox"
            />
            <i
              class="box flex align-center"
            />
            <span
              class="label"
            >
              <span
                class="font-semibold"
              >
                Select current-context
              </span>
               
              (optional)
            </span>
          </label>
        </div>
      </div>
      <div
        class="dialogButtons"
      >
        <button
          class="Button plain"
          type="button"
        >
          Cancel
        </button>
        <button
          class="Button accent"
          type="button"
        >
          Delete Context
        </button>
      </div>
    </div>
  </div>
</body>
`;

exports[`Deleting a cluster when the kubeconfig has multiple clusters when the dialog is opened for not the current cluster when context switching checkbox is clicked 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"
                  >
                    0 items
                  </div>
                  <div
                    class="Input SearchInput"
                  >
                    <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="NoItems flex box grow"
                    >
                      <div
                        class="box center"
                      >
                        Item list is empty
                      </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>
  <div
    class="Animate opacity-scale Dialog flex center dialog modal enter"
    data-testid="delete-cluster-dialog"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="dialogContent"
      >
        <div>
          Delete the 
          <b>
            some-non-current-context
          </b>
           context from 
          <b>
            ./temp-kube-config
          </b>
          ?
        </div>
        <div
          class="warning"
        >
          <i
            class="Icon warningIcon material focusable"
          >
            <span
              class="icon"
              data-icon-name="warning_amber"
            >
              warning_amber
            </span>
          </i>
          <p
            data-testid="kubeconfig-change-warning"
          >
            The contents of kubeconfig file will be changed!
          </p>
        </div>
        <hr
          class="hr"
        />
        <div
          class="mt-4"
        >
          <label
            class="Checkbox flex align-center checked"
          >
            <input
              data-testid="delete-cluster-dialog-context-switch"
              type="checkbox"
            />
            <i
              class="box flex align-center"
            />
            <span
              class="label"
            >
              <span
                class="font-semibold"
              >
                Select current-context
              </span>
               
              (optional)
            </span>
          </label>
        </div>
        <div
          class="mt-4"
        >
          <div
            class="Select theme-light ml-[1px] mr-[1px] css-b62m3t-container"
          >
            <span
              class="css-1f43avz-a11yText-A11yText"
              id="react-select-delete-cluster-input-live-region"
            />
            <span
              aria-atomic="false"
              aria-live="polite"
              aria-relevant="additions text"
              class="css-1f43avz-a11yText-A11yText"
            />
            <div
              class="Select__control css-13cymwt-control"
            >
              <div
                class="Select__value-container css-1fdsijx-ValueContainer"
              >
                <div
                  class="Select__placeholder css-1jqq78o-placeholder"
                  id="react-select-delete-cluster-input-placeholder"
                >
                  Select new context...
                </div>
                <div
                  class="Select__input-container css-qbdosj-Input"
                  data-value=""
                >
                  <input
                    aria-autocomplete="list"
                    aria-describedby="react-select-delete-cluster-input-placeholder"
                    aria-expanded="false"
                    aria-haspopup="true"
                    autocapitalize="none"
                    autocomplete="off"
                    autocorrect="off"
                    class="Select__input"
                    id="delete-cluster-input"
                    role="combobox"
                    spellcheck="false"
                    style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                    tabindex="0"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="Select__indicators css-1hb7zxy-IndicatorsContainer"
              >
                <span
                  class="Select__indicator-separator css-1u9des2-indicatorSeparator"
                />
                <div
                  aria-hidden="true"
                  class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
                >
                  <svg
                    aria-hidden="true"
                    class="css-tj5bde-Svg"
                    focusable="false"
                    height="20"
                    viewBox="0 0 20 20"
                    width="20"
                  >
                    <path
                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="dialogButtons"
      >
        <button
          class="Button plain"
          type="button"
        >
          Cancel
        </button>
        <button
          class="Button accent"
          disabled=""
          type="button"
        >
          Delete Context
        </button>
      </div>
    </div>
  </div>
</body>
`;

exports[`Deleting a cluster when the kubeconfig has multiple clusters when the dialog is opened for the current 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"
                  >
                    0 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="NoItems flex box grow"
                    >
                      <div
                        class="box center"
                      >
                        Item list is empty
                      </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>
  <div
    class="Animate opacity-scale Dialog flex center dialog modal enter"
    data-testid="delete-cluster-dialog"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="dialogContent"
      >
        <div>
          Delete the 
          <b>
            some-current-context
          </b>
           context from 
          <b>
            ./temp-kube-config
          </b>
          ?
        </div>
        <div
          class="warning"
        >
          <i
            class="Icon warningIcon material focusable"
          >
            <span
              class="icon"
              data-icon-name="warning_amber"
            >
              warning_amber
            </span>
          </i>
          <p
            data-testid="current-context-warning"
          >
            This will remove active context in kubeconfig. Use drop down below to select a different one.
          </p>
        </div>
        <hr
          class="hr"
        />
        <div
          class="mt-4"
        >
          <label
            class="Checkbox flex align-center checked"
          >
            <input
              checked=""
              data-testid="delete-cluster-dialog-context-switch"
              type="checkbox"
            />
            <i
              class="box flex align-center"
            />
            <span
              class="label"
            >
              <span
                class="font-semibold"
              >
                Select current-context
              </span>
               
            </span>
          </label>
        </div>
        <div
          class="mt-4"
        >
          <div
            class="Select theme-light ml-[1px] mr-[1px] css-b62m3t-container"
          >
            <span
              class="css-1f43avz-a11yText-A11yText"
              id="react-select-delete-cluster-input-live-region"
            />
            <span
              aria-atomic="false"
              aria-live="polite"
              aria-relevant="additions text"
              class="css-1f43avz-a11yText-A11yText"
            />
            <div
              class="Select__control css-13cymwt-control"
            >
              <div
                class="Select__value-container css-1fdsijx-ValueContainer"
              >
                <div
                  class="Select__placeholder css-1jqq78o-placeholder"
                  id="react-select-delete-cluster-input-placeholder"
                >
                  Select new context...
                </div>
                <div
                  class="Select__input-container css-qbdosj-Input"
                  data-value=""
                >
                  <input
                    aria-autocomplete="list"
                    aria-describedby="react-select-delete-cluster-input-placeholder"
                    aria-expanded="false"
                    aria-haspopup="true"
                    autocapitalize="none"
                    autocomplete="off"
                    autocorrect="off"
                    class="Select__input"
                    id="delete-cluster-input"
                    role="combobox"
                    spellcheck="false"
                    style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                    tabindex="0"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="Select__indicators css-1hb7zxy-IndicatorsContainer"
              >
                <span
                  class="Select__indicator-separator css-1u9des2-indicatorSeparator"
                />
                <div
                  aria-hidden="true"
                  class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
                >
                  <svg
                    aria-hidden="true"
                    class="css-tj5bde-Svg"
                    focusable="false"
                    height="20"
                    viewBox="0 0 20 20"
                    width="20"
                  >
                    <path
                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="dialogButtons"
      >
        <button
          class="Button plain"
          type="button"
        >
          Cancel
        </button>
        <button
          class="Button accent"
          disabled=""
          type="button"
        >
          Delete Context
        </button>
      </div>
    </div>
  </div>
</body>
`;

exports[`Deleting a cluster when the kubeconfig has only one cluster when the dialog is opened 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"
                  >
                    0 items
                  </div>
                  <div
                    class="Input SearchInput"
                  >
                    <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="NoItems flex box grow"
                    >
                      <div
                        class="box center"
                      >
                        Item list is empty
                      </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>
  <div
    class="Animate opacity-scale Dialog flex center dialog modal enter"
    data-testid="delete-cluster-dialog"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="dialogContent"
      >
        <div>
          Delete the 
          <b>
            some-context
          </b>
           context from 
          <b>
            ./temp-kube-config
          </b>
          ?
        </div>
        <div
          class="warning"
        >
          <i
            class="Icon warningIcon material focusable"
          >
            <span
              class="icon"
              data-icon-name="warning_amber"
            >
              warning_amber
            </span>
          </i>
          <p
            data-testid="no-more-contexts-warning"
          >
            This will remove the last context in kubeconfig. There will be no active context.
          </p>
        </div>
      </div>
      <div
        class="dialogButtons"
      >
        <button
          class="Button plain"
          type="button"
        >
          Cancel
        </button>
        <button
          class="Button accent"
          type="button"
        >
          Delete Context
        </button>
      </div>
    </div>
  </div>
</body>
`;
