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

exports[`preferences: URLs of legacy extensions given extension with both custom preference tabs and content for the default tab when navigating to specific custom preference tab using magic string URL 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="extension-some-extension-some-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some title
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="extension-some-extension-some-other-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some other title
                    </div>
                  </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"
                    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
                  class="TabSeparator"
                >
                  <div
                    class="HorizontalLine size-sm"
                  />
                </div>
                <div
                  data-preference-tab-group-test="extensions-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    <i
                      class="Icon mr-3 material focusable smallest"
                    >
                      <span
                        class="icon"
                        data-icon-name="extension"
                      >
                        extension
                      </span>
                    </i>
                    Extensions
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="some-extension"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      some-extension
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="preference-item-for-extension-some-extension-additional-page-some-preference-tab-id"
                id="preference-item-for-extension-some-extension-additional-page-some-preference-tab-id"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Some title
                </h2>
                <div
                  data-preference-item-test="preference-item-for-extension-some-extension-item-some-preference-item-id"
                >
                  <section
                    class="small"
                    id="some-preference-item-id"
                  >
                    <div
                      class="SubTitle"
                    >
                      some-title
                       
                    </div>
                    <div
                      data-some-preference-test="some-preference-in-custom-tab"
                    />
                    <div
                      class="hint"
                    >
                      <div />
                    </div>
                  </section>
                  <hr
                    class="small"
                  />
                </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[`preferences: URLs of legacy extensions given extension with both custom preference tabs and content for the default tab when navigating to unspecified custom preferences tab using magic string URL 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="extension-some-extension-some-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some title
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="extension-some-extension-some-other-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some other title
                    </div>
                  </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"
                    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
                  class="TabSeparator"
                >
                  <div
                    class="HorizontalLine size-sm"
                  />
                </div>
                <div
                  data-preference-tab-group-test="extensions-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    <i
                      class="Icon mr-3 material focusable smallest"
                    >
                      <span
                        class="icon"
                        data-icon-name="extension"
                      >
                        extension
                      </span>
                    </i>
                    Extensions
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="some-extension"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      some-extension
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="preference-item-for-extension-some-extension-page"
                id="preference-item-for-extension-some-extension-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  some-extension preferences
                </h2>
                <div
                  data-preference-item-test="preference-item-for-extension-some-extension-item-some-preference-item-id-in-default-tab"
                >
                  <section
                    class="small"
                    id="some-preference-item-id-in-default-tab"
                  >
                    <div
                      class="SubTitle"
                    >
                      some-title-in-default-tab
                       
                    </div>
                    <div
                      data-some-preference-test="some-preference-in-default-tab"
                    />
                    <div
                      class="hint"
                    >
                      <div />
                    </div>
                  </section>
                  <hr
                    class="small"
                  />
                </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[`preferences: URLs of legacy extensions given extension with custom preferences and a custom preference tab when navigating to specific custom preference tab using magic string URL 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="extension-some-extension-some-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some title
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="extension-some-extension-some-other-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some other title
                    </div>
                  </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"
                    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="preference-item-for-extension-some-extension-additional-page-some-preference-tab-id"
                id="preference-item-for-extension-some-extension-additional-page-some-preference-tab-id"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Some title
                </h2>
                <div
                  data-preference-item-test="preference-item-for-extension-some-extension-item-some-preference-item-id"
                >
                  <section
                    class="small"
                    id="some-preference-item-id"
                  >
                    <div
                      class="SubTitle"
                    >
                      some-title
                       
                    </div>
                    <div
                      data-some-preference-test="some-preference"
                    />
                    <div
                      class="hint"
                    >
                      <div />
                    </div>
                  </section>
                  <hr
                    class="small"
                  />
                </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[`preferences: URLs of legacy extensions given extension with custom preferences and a custom preference tab when navigating to unspecified custom preferences tab using magic string URL 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="extension-some-extension-some-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some title
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="extension-some-extension-some-other-preference-tab-id"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Some other title
                    </div>
                  </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"
                    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="preference-item-for-extension-some-extension-page"
                id="preference-item-for-extension-some-extension-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  some-extension preferences
                </h2>
              </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[`preferences: URLs of legacy extensions given extension with custom preferences but without a custom preference tab when navigating to the default preference tab using magic string URL 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"
                    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
                  class="TabSeparator"
                >
                  <div
                    class="HorizontalLine size-sm"
                  />
                </div>
                <div
                  data-preference-tab-group-test="extensions-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    <i
                      class="Icon mr-3 material focusable smallest"
                    >
                      <span
                        class="icon"
                        data-icon-name="extension"
                      >
                        extension
                      </span>
                    </i>
                    Extensions
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="some-extension"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      some-extension
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="preference-item-for-extension-some-extension-page"
                id="preference-item-for-extension-some-extension-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  some-extension preferences
                </h2>
                <div
                  data-preference-item-test="preference-item-for-extension-some-extension-item-some-preference-item-id"
                >
                  <section
                    class="small"
                    id="some-preference-item-id"
                  >
                    <div
                      class="SubTitle"
                    >
                      some-title
                       
                    </div>
                    <div
                      data-some-preference-test="true"
                    />
                    <div
                      class="hint"
                    >
                      <div />
                    </div>
                  </section>
                  <hr
                    class="small"
                  />
                </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>
`;
