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

exports[`<NamespaceSelectFilter /> once the subscribe resolves renders 1`] = `
<body>
  <div>
    <div
      class="NamespaceSelectFilterParent"
      data-testid="namespace-select-filter"
    >
      <div
        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
      >
        <span
          class="css-1f43avz-a11yText-A11yText"
          id="react-select-namespace-select-filter-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--is-multi css-1fdsijx-ValueContainer"
          >
            <div
              class="Select__placeholder css-1jqq78o-placeholder"
              id="react-select-namespace-select-filter-placeholder"
            >
              All namespaces
            </div>
            <div
              class="Select__input-container css-qbdosj-Input"
              data-value=""
            >
              <input
                aria-autocomplete="list"
                aria-describedby="react-select-namespace-select-filter-placeholder"
                aria-expanded="false"
                aria-haspopup="true"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                class="Select__input"
                id="namespace-select-filter"
                role="combobox"
                spellcheck="false"
                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                tabindex="0"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
          >
            <span
              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
            />
            <div
              aria-hidden="true"
              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked renders 1`] = `
<body>
  <div>
    <div
      class="NamespaceSelectFilterParent"
      data-testid="namespace-select-filter"
    >
      <div
        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
      >
        <span
          class="css-1f43avz-a11yText-A11yText"
          id="react-select-namespace-select-filter-live-region"
        />
        <span
          aria-atomic="false"
          aria-live="polite"
          aria-relevant="additions text"
          class="css-1f43avz-a11yText-A11yText"
        />
        <div
          class="Select__control Select__control--menu-is-open css-13cymwt-control"
        >
          <div
            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
          >
            <div
              class="Select__placeholder css-1jqq78o-placeholder"
              id="react-select-namespace-select-filter-placeholder"
            >
              All namespaces
            </div>
            <div
              class="Select__input-container css-qbdosj-Input"
              data-value=""
            >
              <input
                aria-autocomplete="list"
                aria-controls="react-select-namespace-select-filter-listbox"
                aria-describedby="react-select-namespace-select-filter-placeholder"
                aria-expanded="true"
                aria-haspopup="true"
                aria-owns="react-select-namespace-select-filter-listbox"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                class="Select__input"
                id="namespace-select-filter"
                role="combobox"
                spellcheck="false"
                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                tabindex="0"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
          >
            <span
              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
            />
            <div
              aria-hidden="true"
              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Select__menu-portal css-1no2yl0-MenuPortal"
  >
    <div
      class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-1nmdiq5-menu"
      id="react-select-namespace-select-filter-listbox"
    >
      <div
        class="Select__menu-list Select__menu-list--is-multi css-1n6sfyn-MenuList"
      >
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-focused css-d7l1ni-option"
          id="react-select-namespace-select-filter-option-0"
          tabindex="-1"
        >
          All Namespaces
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-1"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-1
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-1-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-2"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-10
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-10-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-3"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-11
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-11-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-4"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-12
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-12-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-5"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-13
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-13-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-6"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-2
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-2-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-7"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-3
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-3-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-8"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-4
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-4-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-9"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-5
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-5-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-10"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-6
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-6-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-11"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-7
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-7-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-12"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-8
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-8-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-13"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-9
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-9-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked renders 1`] = `
<body>
  <div>
    <div
      class="NamespaceSelectFilterParent"
      data-testid="namespace-select-filter"
    >
      <div
        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
      >
        <span
          class="css-1f43avz-a11yText-A11yText"
          id="react-select-namespace-select-filter-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--is-multi css-1fdsijx-ValueContainer"
          >
            <div
              class="Select__placeholder css-1jqq78o-placeholder"
              id="react-select-namespace-select-filter-placeholder"
            >
              Namespace: test-2
            </div>
            <div
              class="Select__input-container css-qbdosj-Input"
              data-value=""
            >
              <input
                aria-autocomplete="list"
                aria-describedby="react-select-namespace-select-filter-placeholder"
                aria-expanded="false"
                aria-haspopup="true"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                class="Select__input"
                id="namespace-select-filter"
                role="combobox"
                spellcheck="false"
                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                tabindex="0"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
          >
            <span
              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
            />
            <div
              aria-hidden="true"
              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again renders 1`] = `
<body>
  <div>
    <div
      class="NamespaceSelectFilterParent"
      data-testid="namespace-select-filter"
    >
      <div
        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
      >
        <span
          class="css-1f43avz-a11yText-A11yText"
          id="react-select-namespace-select-filter-live-region"
        />
        <span
          aria-atomic="false"
          aria-live="polite"
          aria-relevant="additions text"
          class="css-1f43avz-a11yText-A11yText"
        />
        <div
          class="Select__control Select__control--menu-is-open css-13cymwt-control"
        >
          <div
            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
          >
            <div
              class="Select__placeholder css-1jqq78o-placeholder"
              id="react-select-namespace-select-filter-placeholder"
            >
              Namespace: test-2
            </div>
            <div
              class="Select__input-container css-qbdosj-Input"
              data-value=""
            >
              <input
                aria-autocomplete="list"
                aria-controls="react-select-namespace-select-filter-listbox"
                aria-describedby="react-select-namespace-select-filter-placeholder"
                aria-expanded="true"
                aria-haspopup="true"
                aria-owns="react-select-namespace-select-filter-listbox"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                class="Select__input"
                id="namespace-select-filter"
                role="combobox"
                spellcheck="false"
                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                tabindex="0"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
          >
            <span
              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
            />
            <div
              aria-hidden="true"
              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Select__menu-portal css-1no2yl0-MenuPortal"
  >
    <div
      class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-1nmdiq5-menu"
      id="react-select-namespace-select-filter-listbox"
    >
      <div
        class="Select__menu-list Select__menu-list--is-multi css-1n6sfyn-MenuList"
      >
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-focused css-d7l1ni-option"
          id="react-select-namespace-select-filter-option-0"
          tabindex="-1"
        >
          All Namespaces
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-1"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-2
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-2-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-2"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-1
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-3"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-10
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-4"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-11
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-5"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-12
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-6"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-13
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-7"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-3
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-8"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-4
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-9"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-5
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-10"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-6
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-11"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-7
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-12"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-8
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-13"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-9
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again when 'test-1' is clicked renders 1`] = `
<body>
  <div>
    <div
      class="NamespaceSelectFilterParent"
      data-testid="namespace-select-filter"
    >
      <div
        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
      >
        <span
          class="css-1f43avz-a11yText-A11yText"
          id="react-select-namespace-select-filter-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--is-multi css-1fdsijx-ValueContainer"
          >
            <div
              class="Select__placeholder css-1jqq78o-placeholder"
              id="react-select-namespace-select-filter-placeholder"
            >
              Namespace: test-1
            </div>
            <div
              class="Select__input-container css-qbdosj-Input"
              data-value=""
            >
              <input
                aria-autocomplete="list"
                aria-describedby="react-select-namespace-select-filter-placeholder"
                aria-expanded="false"
                aria-haspopup="true"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                class="Select__input"
                id="namespace-select-filter"
                role="combobox"
                spellcheck="false"
                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                tabindex="0"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
          >
            <span
              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
            />
            <div
              aria-hidden="true"
              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;

exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again when 'test-1' is clicked when clicked again, then holding down multi select key when 'test-3' is clicked renders 1`] = `
<body>
  <div>
    <div
      class="NamespaceSelectFilterParent"
      data-testid="namespace-select-filter"
    >
      <div
        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
      >
        <span
          class="css-1f43avz-a11yText-A11yText"
          id="react-select-namespace-select-filter-live-region"
        />
        <span
          aria-atomic="false"
          aria-live="polite"
          aria-relevant="additions text"
          class="css-1f43avz-a11yText-A11yText"
        />
        <div
          class="Select__control Select__control--menu-is-open css-13cymwt-control"
        >
          <div
            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
          >
            <div
              class="Select__placeholder css-1jqq78o-placeholder"
              id="react-select-namespace-select-filter-placeholder"
            >
              Namespaces: test-1, test-3
            </div>
            <div
              class="Select__input-container css-qbdosj-Input"
              data-value=""
            >
              <input
                aria-autocomplete="list"
                aria-controls="react-select-namespace-select-filter-listbox"
                aria-describedby="react-select-namespace-select-filter-placeholder"
                aria-expanded="true"
                aria-haspopup="true"
                aria-owns="react-select-namespace-select-filter-listbox"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                class="Select__input"
                id="namespace-select-filter"
                role="combobox"
                spellcheck="false"
                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                tabindex="0"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
          >
            <span
              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
            />
            <div
              aria-hidden="true"
              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Select__menu-portal css-1no2yl0-MenuPortal"
  >
    <div
      class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-1nmdiq5-menu"
      id="react-select-namespace-select-filter-listbox"
    >
      <div
        class="Select__menu-list Select__menu-list--is-multi css-1n6sfyn-MenuList"
      >
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-focused css-d7l1ni-option"
          id="react-select-namespace-select-filter-option-0"
          tabindex="-1"
        >
          All Namespaces
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-1"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-1
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-1-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-2"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-2
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-3"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-10
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-4"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-11
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-5"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-12
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-6"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-13
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option Select__option--is-selected css-tr4s17-option"
          id="react-select-namespace-select-filter-option-7"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-3
            </span>
            <i
              class="Icon box right material focusable small"
              data-testid="namespace-select-filter-option-test-3-selected"
            >
              <span
                class="icon"
                data-icon-name="check"
              >
                check
              </span>
            </i>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-8"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-4
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-9"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-5
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-10"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-6
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-11"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-7
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-12"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-8
            </span>
          </div>
        </div>
        <div
          aria-disabled="false"
          class="Select__option css-10wo9uf-option"
          id="react-select-namespace-select-filter-option-13"
          tabindex="-1"
        >
          <div
            class="flex gaps align-center"
          >
            <i
              class="Icon material focusable small"
            >
              <span
                class="icon"
                data-icon-name="layers"
              >
                layers
              </span>
            </i>
            <span>
              test-9
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
`;
