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

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div
                      class="loading-spinner"
                    >
                      <div
                        class="Spinner singleColor"
                      />
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow Select--is-disabled css-3iigni-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-live-region"
                            />
                            <span
                              aria-atomic="false"
                              aria-live="polite"
                              aria-relevant="additions text"
                              class="css-1f43avz-a11yText-A11yText"
                            />
                            <div
                              class="Select__control Select__control--is-disabled css-16xfy0z-control"
                            >
                              <div
                                class="Select__value-container css-1fdsijx-ValueContainer"
                              >
                                <div
                                  class="Select__placeholder css-1jqq78o-placeholder"
                                  id="react-select-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-1h01tm3-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    disabled=""
                                    id="selection-of-active-public-helm-repository"
                                    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"
                              >
                                <div
                                  aria-hidden="true"
                                  class="Select__indicator Select__loading-indicator css-pogzpp-loadingIndicator"
                                >
                                  <span
                                    class="css-1xtdfmb-LoadingDot"
                                  />
                                  <span
                                    class="css-zoievk-LoadingDot"
                                  />
                                  <span
                                    class="css-x748d8-LoadingDot"
                                  />
                                </div>
                                <span
                                  class="Select__indicator-separator css-894a34-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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="pt-5 relative"
                          >
                            <div
                              class="Spinner singleColor center"
                              data-testid="helm-repositories-are-loading"
                            />
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="Wizard"
      >
        <div
          class="header"
        >
          <h5>
            Add custom Helm Repo
          </h5>
        </div>
        <form
          class="WizardStep step1"
        >
          <div
            class="step-content scrollable flow column"
          >
            <div
              class="flex column gaps"
              data-testid="add-custom-helm-repository-dialog"
            >
              <div
                class="Input focused invalid"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-name-input"
                    placeholder="Helm repo name"
                    required=""
                    spellcheck="false"
                    value=""
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <div
                class="Input invalid"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-url-input"
                    placeholder="URL"
                    required=""
                    spellcheck="false"
                    value=""
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <button
                class="Button accordion plain"
                data-testid="toggle-maximal-options-for-custom-helm-repository-button"
                type="button"
              >
                More
                <i
                  class="Icon material focusable small"
                >
                  <span
                    class="icon"
                    data-icon-name="add"
                  >
                    add
                  </span>
                </i>
                <div>
                  More
                </div>
              </button>
            </div>
          </div>
          <div
            class="buttons flex gaps align-center"
          >
            <button
              class="Button back-btn plain"
              data-testid="custom-helm-repository-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="Button primary"
              data-testid="custom-helm-repository-submit-button"
              type="submit"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when closing the dialog by clicking cancel 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter leave"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    />
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="Wizard"
      >
        <div
          class="header"
        >
          <h5>
            Add custom Helm Repo
          </h5>
        </div>
        <form
          class="WizardStep step1"
        >
          <div
            class="step-content scrollable flow column"
          >
            <div
              class="flex column gaps"
              data-testid="add-custom-helm-repository-dialog"
            >
              <div
                class="Input focused"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-name-input"
                    placeholder="Helm repo name"
                    required=""
                    spellcheck="false"
                    value="some-custom-repository"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <div
                class="Input"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-url-input"
                    placeholder="URL"
                    required=""
                    spellcheck="false"
                    value="http://some.url"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <button
                class="Button accordion plain"
                data-testid="toggle-maximal-options-for-custom-helm-repository-button"
                type="button"
              >
                More
                <i
                  class="Icon material focusable small"
                >
                  <span
                    class="icon"
                    data-icon-name="add"
                  >
                    add
                  </span>
                </i>
                <div>
                  More
                </div>
              </button>
            </div>
          </div>
          <div
            class="buttons flex gaps align-center"
          >
            <button
              class="Button back-btn plain"
              data-testid="custom-helm-repository-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="Button primary"
              data-testid="custom-helm-repository-submit-button"
              type="submit"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository when showing the maximal options 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="Wizard"
      >
        <div
          class="header"
        >
          <h5>
            Add custom Helm Repo
          </h5>
        </div>
        <form
          class="WizardStep step1"
        >
          <div
            class="step-content scrollable flow column"
          >
            <div
              class="flex column gaps"
              data-testid="add-custom-helm-repository-dialog"
            >
              <div
                class="Input focused"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-name-input"
                    placeholder="Helm repo name"
                    required=""
                    spellcheck="false"
                    value="some-custom-repository"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <div
                class="Input"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-url-input"
                    placeholder="URL"
                    required=""
                    spellcheck="false"
                    value="http://some.url"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <button
                class="Button accordion plain"
                data-testid="toggle-maximal-options-for-custom-helm-repository-button"
                type="button"
              >
                More
                <i
                  class="Icon material focusable small"
                >
                  <span
                    class="icon"
                    data-icon-name="remove"
                  >
                    remove
                  </span>
                </i>
                <div>
                  More
                </div>
              </button>
              <div
                data-testid="maximal-options-for-custom-helm-repository-dialog"
              >
                <div
                  class="SubTitle"
                >
                  Security settings
                   
                </div>
                <label
                  class="Checkbox flex align-center"
                >
                  <input
                    data-testid="custom-helm-repository-verify-tls-input"
                    type="checkbox"
                  />
                  <i
                    class="box flex align-center"
                  />
                  <span
                    class="label"
                  >
                    Skip TLS certificate checks for the repository
                  </span>
                </label>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Input box grow invalid validating validatingLine"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        data-testid="custom-helm-repository-key-file-input"
                        placeholder="Key file"
                        spellcheck="false"
                        value=""
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                  <i
                    class="Icon material interactive focusable"
                    tabindex="0"
                  >
                    <span
                      class="icon"
                      data-icon-name="folder"
                    >
                      folder
                    </span>
                  </i>
                  <div>
                    Browse
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Input box grow invalid validating validatingLine"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        data-testid="custom-helm-repository-ca-cert-file-input"
                        placeholder="Ca file"
                        spellcheck="false"
                        value=""
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                  <i
                    class="Icon material interactive focusable"
                    tabindex="0"
                  >
                    <span
                      class="icon"
                      data-icon-name="folder"
                    >
                      folder
                    </span>
                  </i>
                  <div>
                    Browse
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Input box grow invalid validating validatingLine"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        data-testid="custom-helm-repository-cert-file-input"
                        placeholder="Certificate file"
                        spellcheck="false"
                        value=""
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                  <i
                    class="Icon material interactive focusable"
                    tabindex="0"
                  >
                    <span
                      class="icon"
                      data-icon-name="folder"
                    >
                      folder
                    </span>
                  </i>
                  <div>
                    Browse
                  </div>
                </div>
                <div
                  class="SubTitle"
                >
                  Chart Repository Credentials
                   
                </div>
                <div
                  class="Input"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      data-testid="custom-helm-repository-username-input"
                      placeholder="Username"
                      spellcheck="false"
                      value=""
                    />
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
                <div
                  class="Input"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      data-testid="custom-helm-repository-password-input"
                      placeholder="Password"
                      spellcheck="false"
                      type="password"
                      value=""
                    />
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="buttons flex gaps align-center"
          >
            <button
              class="Button back-btn plain"
              data-testid="custom-helm-repository-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="Button primary"
              data-testid="custom-helm-repository-submit-button"
              type="submit"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository when showing the maximal options when hiding maximal options 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="Wizard"
      >
        <div
          class="header"
        >
          <h5>
            Add custom Helm Repo
          </h5>
        </div>
        <form
          class="WizardStep step1"
        >
          <div
            class="step-content scrollable flow column"
          >
            <div
              class="flex column gaps"
              data-testid="add-custom-helm-repository-dialog"
            >
              <div
                class="Input focused"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-name-input"
                    placeholder="Helm repo name"
                    required=""
                    spellcheck="false"
                    value="some-custom-repository"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <div
                class="Input"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-url-input"
                    placeholder="URL"
                    required=""
                    spellcheck="false"
                    value="http://some.url"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <button
                class="Button accordion plain"
                data-testid="toggle-maximal-options-for-custom-helm-repository-button"
                type="button"
              >
                More
                <i
                  class="Icon material focusable small"
                >
                  <span
                    class="icon"
                    data-icon-name="add"
                  >
                    add
                  </span>
                </i>
                <div>
                  More
                </div>
              </button>
            </div>
          </div>
          <div
            class="buttons flex gaps align-center"
          >
            <button
              class="Button back-btn plain"
              data-testid="custom-helm-repository-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="Button primary"
              data-testid="custom-helm-repository-submit-button"
              type="submit"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository when showing the maximal options when inputted maximal options 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="Wizard"
      >
        <div
          class="header"
        >
          <h5>
            Add custom Helm Repo
          </h5>
        </div>
        <form
          class="WizardStep step1"
        >
          <div
            class="step-content scrollable flow column"
          >
            <div
              class="flex column gaps"
              data-testid="add-custom-helm-repository-dialog"
            >
              <div
                class="Input focused dirty"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-name-input"
                    placeholder="Helm repo name"
                    required=""
                    spellcheck="false"
                    value="some-custom-repository"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <div
                class="Input dirty"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-url-input"
                    placeholder="URL"
                    required=""
                    spellcheck="false"
                    value="http://some.url"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <button
                class="Button accordion plain"
                data-testid="toggle-maximal-options-for-custom-helm-repository-button"
                type="button"
              >
                More
                <i
                  class="Icon material focusable small"
                >
                  <span
                    class="icon"
                    data-icon-name="remove"
                  >
                    remove
                  </span>
                </i>
                <div>
                  More
                </div>
              </button>
              <div
                data-testid="maximal-options-for-custom-helm-repository-dialog"
              >
                <div
                  class="SubTitle"
                >
                  Security settings
                   
                </div>
                <label
                  class="Checkbox flex align-center checked"
                >
                  <input
                    data-testid="custom-helm-repository-verify-tls-input"
                    type="checkbox"
                  />
                  <i
                    class="box flex align-center"
                  />
                  <span
                    class="label"
                  >
                    Skip TLS certificate checks for the repository
                  </span>
                </label>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Input box grow dirty"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        data-testid="custom-helm-repository-key-file-input"
                        placeholder="Key file"
                        spellcheck="false"
                        value="some-key-file"
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                  <i
                    class="Icon material interactive focusable"
                    tabindex="0"
                  >
                    <span
                      class="icon"
                      data-icon-name="folder"
                    >
                      folder
                    </span>
                  </i>
                  <div>
                    Browse
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Input box grow invalid dirty validating validatingLine"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        data-testid="custom-helm-repository-ca-cert-file-input"
                        placeholder="Ca file"
                        spellcheck="false"
                        value="some-ca-cert-file"
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                  <i
                    class="Icon material interactive focusable"
                    tabindex="0"
                  >
                    <span
                      class="icon"
                      data-icon-name="folder"
                    >
                      folder
                    </span>
                  </i>
                  <div>
                    Browse
                  </div>
                </div>
                <div
                  class="flex gaps align-center"
                >
                  <div
                    class="Input box grow invalid dirty validating validatingLine"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        data-testid="custom-helm-repository-cert-file-input"
                        placeholder="Certificate file"
                        spellcheck="false"
                        value="some-cert-file"
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                  <i
                    class="Icon material interactive focusable"
                    tabindex="0"
                  >
                    <span
                      class="icon"
                      data-icon-name="folder"
                    >
                      folder
                    </span>
                  </i>
                  <div>
                    Browse
                  </div>
                </div>
                <div
                  class="SubTitle"
                >
                  Chart Repository Credentials
                   
                </div>
                <div
                  class="Input dirty"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      data-testid="custom-helm-repository-username-input"
                      placeholder="Username"
                      spellcheck="false"
                      value="some-username"
                    />
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
                <div
                  class="Input dirty"
                >
                  <label
                    class="input-area flex gaps align-center"
                    id=""
                  >
                    <input
                      class="input box grow"
                      data-testid="custom-helm-repository-password-input"
                      placeholder="Password"
                      spellcheck="false"
                      type="password"
                      value="some-password"
                    />
                  </label>
                  <div
                    class="input-info flex gaps"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="buttons flex gaps align-center"
          >
            <button
              class="Button back-btn plain"
              data-testid="custom-helm-repository-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="Button primary"
              data-testid="custom-helm-repository-submit-button"
              type="submit"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository when submitted and some time passes 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="Wizard"
      >
        <div
          class="header"
        >
          <h5>
            Add custom Helm Repo
          </h5>
        </div>
        <form
          class="WizardStep step1"
        >
          <div
            class="step-content scrollable flow column"
          >
            <div
              class="flex column gaps"
              data-testid="add-custom-helm-repository-dialog"
            >
              <div
                class="Input focused dirty"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-name-input"
                    placeholder="Helm repo name"
                    required=""
                    spellcheck="false"
                    value="some-custom-repository"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <div
                class="Input dirty"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-url-input"
                    placeholder="URL"
                    required=""
                    spellcheck="false"
                    value="http://some.url"
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <button
                class="Button accordion plain"
                data-testid="toggle-maximal-options-for-custom-helm-repository-button"
                type="button"
              >
                More
                <i
                  class="Icon material focusable small"
                >
                  <span
                    class="icon"
                    data-icon-name="add"
                  >
                    add
                  </span>
                </i>
                <div>
                  More
                </div>
              </button>
            </div>
          </div>
          <div
            class="buttons flex gaps align-center"
          >
            <button
              class="Button back-btn plain"
              data-testid="custom-helm-repository-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="Button waiting primary"
              data-testid="custom-helm-repository-submit-button"
              data-waiting="true"
              type="submit"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository when submitted and some time passes when activation rejects 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow css-b62m3t-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-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-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-qbdosj-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    id="selection-of-active-public-helm-repository"
                                    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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="item flex gaps align-center justify-space-between repo"
                          >
                            <div>
                              <div
                                class="repoName"
                                data-testid="helm-repository-Some active repository"
                              >
                                Some active repository
                              </div>
                              <div
                                class="repoUrl"
                              >
                                some-url
                              </div>
                            </div>
                            <i
                              class="Icon material interactive focusable"
                              data-testid="remove-helm-repository-Some active repository"
                              tabindex="0"
                            >
                              <span
                                class="icon"
                                data-icon-name="delete"
                              >
                                delete
                              </span>
                            </i>
                            <div
                              data-testid="tooltip-content-for-remove-helm-repository-Some active repository"
                            >
                              Remove
                            </div>
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    />
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository when submitted and some time passes when activation resolves with success 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow Select--is-disabled css-3iigni-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-live-region"
                            />
                            <span
                              aria-atomic="false"
                              aria-live="polite"
                              aria-relevant="additions text"
                              class="css-1f43avz-a11yText-A11yText"
                            />
                            <div
                              class="Select__control Select__control--is-disabled css-16xfy0z-control"
                            >
                              <div
                                class="Select__value-container css-1fdsijx-ValueContainer"
                              >
                                <div
                                  class="Select__placeholder css-1jqq78o-placeholder"
                                  id="react-select-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-1h01tm3-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    disabled=""
                                    id="selection-of-active-public-helm-repository"
                                    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"
                              >
                                <div
                                  aria-hidden="true"
                                  class="Select__indicator Select__loading-indicator css-pogzpp-loadingIndicator"
                                >
                                  <span
                                    class="css-1xtdfmb-LoadingDot"
                                  />
                                  <span
                                    class="css-zoievk-LoadingDot"
                                  />
                                  <span
                                    class="css-x748d8-LoadingDot"
                                  />
                                </div>
                                <span
                                  class="Select__indicator-separator css-894a34-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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="pt-5 relative"
                          >
                            <div
                              class="Spinner singleColor center"
                              data-testid="helm-repositories-are-loading"
                            />
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    />
  </div>
</body>
`;

exports[`add custom helm repository in preferences when navigating to preferences containing helm repositories when active repositories resolve when selecting to add custom repository when inputted minimal options for the repository when submitted and some time passes when activation resolves with success when adding custom repository again 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="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="kubernetes-page"
                id="kubernetes-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Kubernetes
                </h2>
                <div
                  data-preference-item-test="kubectl"
                >
                  <section
                    id="kubectl"
                  >
                    <div
                      data-preference-item-test="kubectl-binary-download"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Kubectl binary download
                           
                        </div>
                        <label
                          class="Switch"
                          data-testid="switch"
                        >
                          Download kubectl binaries matching the Kubernetes cluster version
                          <input
                            checked=""
                            role="switch"
                            type="checkbox"
                          />
                        </label>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-download-mirror"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Download mirror
                           
                        </div>
                        <div
                          class="Select theme-lens css-b62m3t-container"
                        >
                          <span
                            class="css-1f43avz-a11yText-A11yText"
                            id="react-select-download-mirror-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 Select__value-container--has-value css-1fdsijx-ValueContainer"
                            >
                              <div
                                class="Select__single-value css-1dimb5e-singleValue"
                              >
                                Default (Google)
                              </div>
                              <div
                                class="Select__input-container css-qbdosj-Input"
                                data-value=""
                              >
                                <input
                                  aria-autocomplete="list"
                                  aria-expanded="false"
                                  aria-haspopup="true"
                                  autocapitalize="none"
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="Select__input"
                                  id="download-mirror-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>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-directory-for-binaries"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Directory for binaries
                           
                        </div>
                        <div
                          class="Input theme round black"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              placeholder="/some-directory-for-app-data/some-product-name/binaries"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                        <div
                          class="hint"
                        >
                          The directory to download binaries into.
                        </div>
                      </section>
                    </div>
                    <div
                      class="size-xl"
                    />
                    <div
                      data-preference-item-test="kubectl-path-to-binary"
                    >
                      <section>
                        <div
                          class="SubTitle"
                        >
                          Path to kubectl binary
                           
                        </div>
                        <div
                          class="Input theme round black disabled"
                        >
                          <label
                            class="input-area flex gaps align-center"
                            id=""
                          >
                            <input
                              class="input box grow"
                              disabled=""
                              placeholder="/some-directory-for-app-data/some-product-name/binaries/kubectl"
                              spellcheck="false"
                              value=""
                            />
                          </label>
                          <div
                            class="input-info flex gaps"
                          />
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="kubeconfig-sync"
                >
                  <section
                    id="kube-sync"
                  >
                    <h2
                      data-testid="kubernetes-sync-header"
                    >
                      Kubeconfig Syncs
                    </h2>
                    <div
                      class="self-start mb-5"
                    >
                      <button
                        class="Button PathPicker primary"
                        type="button"
                      >
                        Sync Files and Folders
                      </button>
                    </div>
                    <div
                      class="SubTitle pt-5"
                    >
                      Synced Items
                       
                    </div>
                    <div>
                      <div
                        class="item flex gaps align-center justify-space-between mt-3"
                      >
                        <i
                          class="Icon material focusable"
                        >
                          <span
                            class="icon"
                            data-icon-name="folder"
                          >
                            folder
                          </span>
                        </i>
                        <div
                          class="flex-grow break-all"
                        >
                          /some-home-dir/.kube
                        </div>
                        <i
                          class="Icon material interactive focusable"
                          tabindex="0"
                        >
                          <span
                            class="icon"
                            data-icon-name="delete"
                          >
                            delete
                          </span>
                        </i>
                        <div>
                          Remove
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="helm-charts"
                >
                  <section
                    id="helm"
                  >
                    <h2>
                      Helm Charts
                    </h2>
                    <div>
                      <div
                        data-testid="helm-controls"
                      >
                        <div
                          class="flex gaps"
                        >
                          <div
                            class="Select theme-lens box grow Select--is-disabled css-3iigni-container"
                          >
                            <span
                              class="css-1f43avz-a11yText-A11yText"
                              id="react-select-selection-of-active-public-helm-repository-live-region"
                            />
                            <span
                              aria-atomic="false"
                              aria-live="polite"
                              aria-relevant="additions text"
                              class="css-1f43avz-a11yText-A11yText"
                            />
                            <div
                              class="Select__control Select__control--is-disabled css-16xfy0z-control"
                            >
                              <div
                                class="Select__value-container css-1fdsijx-ValueContainer"
                              >
                                <div
                                  class="Select__placeholder css-1jqq78o-placeholder"
                                  id="react-select-selection-of-active-public-helm-repository-placeholder"
                                >
                                  Repositories
                                </div>
                                <div
                                  class="Select__input-container css-1h01tm3-Input"
                                  data-value=""
                                >
                                  <input
                                    aria-autocomplete="list"
                                    aria-describedby="react-select-selection-of-active-public-helm-repository-placeholder"
                                    aria-expanded="false"
                                    aria-haspopup="true"
                                    autocapitalize="none"
                                    autocomplete="off"
                                    autocorrect="off"
                                    class="Select__input"
                                    disabled=""
                                    id="selection-of-active-public-helm-repository"
                                    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"
                              >
                                <div
                                  aria-hidden="true"
                                  class="Select__indicator Select__loading-indicator css-pogzpp-loadingIndicator"
                                >
                                  <span
                                    class="css-1xtdfmb-LoadingDot"
                                  />
                                  <span
                                    class="css-zoievk-LoadingDot"
                                  />
                                  <span
                                    class="css-x748d8-LoadingDot"
                                  />
                                </div>
                                <span
                                  class="Select__indicator-separator css-894a34-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>
                          <button
                            class="Button primary"
                            data-testid="add-custom-helm-repo-button"
                            type="button"
                          >
                            Add Custom Helm Repo
                          </button>
                        </div>
                        <div
                          class="repos"
                        >
                          <div
                            class="pt-5 relative"
                          >
                            <div
                              class="Spinner singleColor center"
                              data-testid="helm-repositories-are-loading"
                            />
                          </div>
                        </div>
                        <div />
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        >
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="0"
          >
            <div
              style="z-index: 12; position: absolute;"
            >
              <div
                class="HotbarIcon contextMenuAvailable"
              >
                <div
                  class="Avatar rounded disabled avatar"
                  id="hotbarIcon-hotbar-icon-catalog-entity"
                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
                >
                  Ca
                </div>
              </div>
            </div>
          </div>
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="1"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="2"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="3"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="4"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="5"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="6"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="7"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="8"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="9"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="10"
          />
          <div
            class="HotbarCell isDraggingOwner animateDown"
            index="11"
          />
        </div>
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              1
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
  <div
    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter leave"
    style="--enter-duration: 100ms; --leave-duration: 100ms;"
  >
    <div
      class="box"
    >
      <div
        class="Wizard"
      >
        <div
          class="header"
        >
          <h5>
            Add custom Helm Repo
          </h5>
        </div>
        <form
          class="WizardStep step1"
        >
          <div
            class="step-content scrollable flow column"
          >
            <div
              class="flex column gaps"
              data-testid="add-custom-helm-repository-dialog"
            >
              <div
                class="Input focused invalid"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-name-input"
                    placeholder="Helm repo name"
                    required=""
                    spellcheck="false"
                    value=""
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <div
                class="Input invalid"
              >
                <label
                  class="input-area flex gaps align-center"
                  id=""
                >
                  <input
                    class="input box grow"
                    data-testid="custom-helm-repository-url-input"
                    placeholder="URL"
                    required=""
                    spellcheck="false"
                    value=""
                  />
                </label>
                <div
                  class="input-info flex gaps"
                />
              </div>
              <button
                class="Button accordion plain"
                data-testid="toggle-maximal-options-for-custom-helm-repository-button"
                type="button"
              >
                More
                <i
                  class="Icon material focusable small"
                >
                  <span
                    class="icon"
                    data-icon-name="add"
                  >
                    add
                  </span>
                </i>
                <div>
                  More
                </div>
              </button>
            </div>
          </div>
          <div
            class="buttons flex gaps align-center"
          >
            <button
              class="Button back-btn plain"
              data-testid="custom-helm-repository-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="Button primary"
              data-testid="custom-helm-repository-submit-button"
              type="submit"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
`;
