@rancher/shell 0.3.24 → 0.3.25

package/pages/c/_cluster/uiplugins/UninstallDialog.vue

@@ -2,9 +2,8 @@
 import { mapGetters } from 'vuex';
 
 import AsyncButton from '@shell/components/AsyncButton';
-import { CATALOG, SERVICE, WORKLOAD_TYPES } from '@shell/config/types';
-import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
-import { allHash } from '@shell/utils/promise';
+import { CATALOG } from '@shell/config/types';
+import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 
 export default {
   components: { AsyncButton },
@@ -33,7 +32,7 @@ export default {
       this.$emit('update', plugin.name, 'uninstall');
 
       // Delete the CR if this is a developer plugin (there is no Helm App, so need to remove the CRD ourselves)
-      if (plugin.uiplugin?.isDeveloper || (plugin.catalog && plugin.uiplugin)) {
+      if (plugin.uiplugin?.isDeveloper) {
         // Delete the custom resource
         await plugin.uiplugin.remove();
       }
@@ -41,28 +40,13 @@ export default {
       // Find the app for this plugin
       const apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
 
-      const pluginApps = apps.filter((app) => {
-        if (plugin.catalog && app.namespace === UI_PLUGIN_NAMESPACE) {
-          // Find the related apps from the deployed helm repository
-          const charts = this.allCharts.filter((chart) => chart.repoName === plugin.repo?.metadata?.name);
-
-          return charts.some((chart) => chart.chartName === app.metadata.name);
-        }
-
-        if (app.namespace === UI_PLUGIN_NAMESPACE && app.name === plugin.name) {
-          return app;
-        }
-
-        return false;
+      const pluginApp = apps.find((app) => {
+        return app.namespace === UI_PLUGIN_NAMESPACE && app.name === plugin.name;
       });
 
-      if (plugin.catalog) {
-        await this.removePluginImageResources(plugin.uiplugin);
-      }
-
-      if (pluginApps.length) {
+      if (pluginApp) {
         try {
-          pluginApps.forEach((app) => app.remove());
+          await pluginApp.remove();
         } catch (e) {
           this.$store.dispatch('growl/error', {
             title:   this.t('plugins.error.generic'),
@@ -75,28 +59,6 @@ export default {
       }
 
       this.closeDialog(plugin);
-    },
-    async removePluginImageResources(plugin) {
-      const selector = `${ UI_PLUGIN_LABELS.CATALOG_IMAGE }=${ plugin.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE] }`;
-      const namespace = UI_PLUGIN_NAMESPACE;
-
-      if (selector) {
-        const hash = await allHash({
-          deployment: this.$store.dispatch('management/findMatching', {
-            type: WORKLOAD_TYPES.DEPLOYMENT, selector, namespace
-          }),
-          service: this.$store.dispatch('management/findMatching', {
-            type: SERVICE, selector, namespace
-          }),
-          repo: this.$store.dispatch('management/findMatching', { type: CATALOG.CLUSTER_REPO, selector })
-        });
-
-        for (const resource of Object.keys(hash)) {
-          if (hash[resource]) {
-            hash[resource].forEach((r) => r.remove());
-          }
-        }
-      }
     }
   }
 };
@@ -118,7 +80,7 @@ export default {
       <div class="mt-10 dialog-panel">
         <div class="dialog-info">
           <p>
-            {{ plugin.catalog ? t('plugins.uninstall.custom') : t('plugins.uninstall.prompt') }}
+            {{ t('plugins.uninstall.prompt') }}
           </p>
         </div>
         <div class="dialog-buttons">

package/pages/c/_cluster/uiplugins/index.vue

@@ -19,6 +19,7 @@ import { BadgeState } from '@components/BadgeState';
 import UninstallDialog from './UninstallDialog.vue';
 import InstallDialog from './InstallDialog.vue';
 import CatalogLoadDialog from './CatalogList/CatalogLoadDialog.vue';
+import CatalogUninstallDialog from './CatalogList/CatalogUninstallDialog.vue';
 import DeveloperInstallDialog from './DeveloperInstallDialog.vue';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins';
@@ -35,7 +36,6 @@ import {
   isChartVersionHigher,
   UI_PLUGIN_NAMESPACE,
   UI_PLUGIN_CHART_ANNOTATIONS,
-  UI_PLUGIN_LABELS,
   UI_PLUGINS_REPO_URL,
   UI_PLUGINS_PARTNERS_REPO_URL
 } from '@shell/config/uiplugins';
@@ -58,6 +58,7 @@ export default {
     CatalogList,
     Banner,
     CatalogLoadDialog,
+    CatalogUninstallDialog,
     InstallDialog,
     LazyImage,
     PluginInfoPanel,
@@ -318,7 +319,11 @@ export default {
             builtin:        !!p.builtin,
           };
 
-          all.push(item);
+          // Built-in plugins can chose to be hidden - used where we implement as extensions
+          // but don't want to shows them individually on the extensions page
+          if (!(item.builtin && rancher[UI_PLUGIN_CHART_ANNOTATIONS.HIDDEN_BUILTIN])) {
+            all.push(item);
+          }
         }
       });
 
@@ -326,11 +331,6 @@ export default {
       this.plugins.forEach((p) => {
         const chart = all.find((c) => c.name === p.name);
 
-        // Plugin is a container image, do not add to charts
-        if (p.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE]) {
-          return;
-        }
-
         if (chart) {
           chart.installed = true;
           chart.uiplugin = p;
@@ -409,10 +409,6 @@ export default {
 
       // Sort by name
       return sortBy(all, 'name', false);
-    },
-
-    pluginsFromCatalogImage() {
-      return this.plugins.filter((p) => p.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE]);
     }
   },
 
@@ -464,15 +460,11 @@ export default {
 
       neu.forEach((plugin) => {
         const existing = installed.find((p) => !p.removed && p.name === plugin.name && p.version === plugin.version);
-        const isCustomImage = plugin.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE];
 
         if (!existing && plugin.isCached) {
-          if (!this.uiErrors[plugin.name] && !isCustomImage) {
+          if (!this.uiErrors[plugin.name]) {
             changes++;
           }
-          if (isCustomImage) {
-            this.refreshCharts(true);
-          }
 
           this.updatePluginInstallStatus(plugin.name, false);
         }
@@ -481,7 +473,7 @@ export default {
       if (changes > 0) {
         Vue.set(this, 'reloadRequired', true);
       }
-    },
+    }
   },
 
   // Forget the types when we leave the page
@@ -550,6 +542,10 @@ export default {
       this.$refs.catalogLoadDialog.showDialog();
     },
 
+    showCatalogUninstallDialog(ev) {
+      this.$refs.catalogUninstallDialog.showDialog(ev);
+    },
+
     showInstallDialog(plugin, mode, ev) {
       ev.target?.blur();
       ev.preventDefault();
@@ -667,50 +663,49 @@ export default {
           {{ t('plugins.title') }}
         </h2>
       </template>
-      <div
-        v-if="reloadRequired"
-        class="plugin-reload-banner mr-20"
-        data-testid="extension-reload-banner"
-      >
-        <i class="icon icon-checkmark mr-10" />
-        <span>
-          {{ t('plugins.reload') }}
-        </span>
-        <button
-          class="ml-10 btn btn-sm role-primary"
-          data-testid="extension-reload-banner-reload-btn"
-          @click="reload()"
-        >
-          {{ t('generic.reload') }}
-        </button>
-      </div>
-      <div
-        v-if="hasService && hasMenuActions"
-        class="actions-container"
-      >
-        <button
-          ref="actions"
-          aria-haspopup="true"
-          type="button"
-          class="btn role-multi-action actions"
-          data-testid="extensions-page-menu"
-          @click="setMenu"
+      <div class="actions-container">
+        <div
+          v-if="reloadRequired"
+          class="plugin-reload-banner mr-20"
+          data-testid="extension-reload-banner"
         >
-          <i class="icon icon-actions" />
-        </button>
-        <ActionMenu
-          :custom-actions="menuActions"
-          :open="menuOpen"
-          :use-custom-target-element="true"
-          :custom-target-element="menuTargetElement"
-          :custom-target-event="menuTargetEvent"
-          @close="setMenu(false)"
-          @devLoad="showDeveloperLoadDialog"
-          @removePluginSupport="removePluginSupport"
-          @manageRepos="manageRepos"
-          @addRancherRepos="showAddExtensionReposDialog"
-          @manageExtensionView="manageExtensionView"
-        />
+          <i class="icon icon-checkmark mr-10" />
+          <span>
+            {{ t('plugins.reload') }}
+          </span>
+          <button
+            class="ml-10 btn btn-sm role-primary"
+            data-testid="extension-reload-banner-reload-btn"
+            @click="reload()"
+          >
+            {{ t('generic.reload') }}
+          </button>
+        </div>
+        <div v-if="hasService && hasMenuActions">
+          <button
+            ref="actions"
+            aria-haspopup="true"
+            type="button"
+            class="btn role-multi-action actions"
+            data-testid="extensions-page-menu"
+            @click="setMenu"
+          >
+            <i class="icon icon-actions" />
+          </button>
+          <ActionMenu
+            :custom-actions="menuActions"
+            :open="menuOpen"
+            :use-custom-target-element="true"
+            :custom-target-element="menuTargetElement"
+            :custom-target-event="menuTargetEvent"
+            @close="setMenu(false)"
+            @devLoad="showDeveloperLoadDialog"
+            @removePluginSupport="removePluginSupport"
+            @manageRepos="manageRepos"
+            @addRancherRepos="showAddExtensionReposDialog"
+            @manageExtensionView="manageExtensionView"
+          />
+        </div>
       </div>
     </div>
 
@@ -737,9 +732,8 @@ export default {
     <div v-else>
       <template v-if="showCatalogList">
         <CatalogList
-          :plugins="pluginsFromCatalogImage"
           @showCatalogLoadDialog="showCatalogLoadDialog"
-          @showUninstallDialog="showUninstallDialog"
+          @showCatalogUninstallDialog="showCatalogUninstallDialog($event)"
         />
       </template>
       <template v-else>
@@ -814,8 +808,8 @@ export default {
             />
             <template v-else>
               <div
-                v-for="plugin in list"
-                :key="plugin.name"
+                v-for="(plugin, i) in list"
+                :key="plugin.name + i"
                 class="plugin"
                 :data-testid="`extension-card-${plugin.name}`"
                 @click="showPluginDetail(plugin)"
@@ -999,6 +993,12 @@ export default {
     <CatalogLoadDialog
       ref="catalogLoadDialog"
       @closed="didInstall"
+      @refresh="() => reloadRequired = true"
+    />
+    <CatalogUninstallDialog
+      ref="catalogUninstallDialog"
+      @closed="didUninstall"
+      @refresh="() => reloadRequired = true"
     />
     <DeveloperInstallDialog
       ref="developerInstallDialog"

package/pages/diagnostic.vue

@@ -120,9 +120,6 @@ export default {
       systemInformation.jsMemory.value += `, ${ this.t('about.diagnostic.systemInformation.memUsedJsHeapSize', { usedJSHeapSize: window?.performance?.memory?.usedJSHeapSize }) }`;
     }
 
-    // scroll logs container to the bottom
-    this.scrollLogsToBottom();
-
     return {
       systemInformation,
       topFifteenForResponseTime: null,
@@ -130,16 +127,9 @@ export default {
       finalCounts:               null,
       includeResponseTimes:      true,
       storeMapping:              this.$store?._modules?.root?.state,
-      latestLogs:                console.logs // eslint-disable-line no-console
     };
   },
 
-  watch: {
-    latestLogs() {
-      this.scrollLogsToBottom();
-    }
-  },
-
   computed: {
     clusterCount() {
       return this.finalCounts?.length;
@@ -147,14 +137,6 @@ export default {
   },
 
   methods: {
-    scrollLogsToBottom() {
-      this.$nextTick(() => {
-        const logsContainer = document.querySelector('.logs-container');
-
-        logsContainer.scrollTop = logsContainer.scrollHeight;
-      });
-    },
-
     generateKey(data) {
       const randomize = Math.random() * 10000;
 
@@ -166,7 +148,6 @@ export default {
       const fileName = 'rancher-diagnostic-data.json';
       const data = {
         systemInformation: this.systemInformation,
-        logs:              this.latestLogs,
         storeMapping:      this.parseStoreData(this.storeMapping),
         resourceCounts:    this.finalCounts,
         responseTimes:     this.responseTimes
@@ -411,26 +392,6 @@ export default {
       </div>
     </div>
 
-    <!-- Logs -->
-    <div class="mb-40">
-      <h2 class="mb-20">
-        {{ t('about.diagnostic.logs.subtitle') }}
-      </h2>
-      <ul class="logs-container">
-        <li
-          v-for="logEntry in latestLogs"
-          :key="generateKey(logEntry.timestamp)"
-          :class="logEntry.type"
-        >
-          <span class="log-entry-type">{{ logEntry.type }} :: </span>
-          <span
-            v-for="(arg, i) in logEntry.data"
-            :key="i"
-          >{{ arg }}</span>
-        </li>
-      </ul>
-    </div>
-
     <PromptModal />
   </div>
 </template>

package/pages/home.vue

@@ -192,7 +192,7 @@ export default {
           label:        this.t('tableHeaders.pods'),
           name:         'pods',
           value:        '',
-          sort:         ['status.allocatable.pods', 'status.available.pods'],
+          sort:         ['status.allocatable.pods', 'status.requested.pods'],
           formatter:    'PodsUsage',
           delayLoading: true
         },

package/plugins/dashboard-store/normalize.js

@@ -20,10 +20,10 @@ export function normalizeType(type) {
 // Detect and resolve conflicts from a 409 response.
 // If they are resolved, return a false-y value
 // Else they can't be resolved, return an array of errors to show to the user.
-export function handleConflict(initialValueJSON, value, liveValue, rootGetters, store) {
-  const orig = store.dispatch(`cleanForDiff`, initialValueJSON);
-  const user = store.dispatch(`cleanForDiff`, value.toJSON());
-  const cur = store.dispatch(`cleanForDiff`, liveValue.toJSON());
+export async function handleConflict(initialValueJSON, value, liveValue, rootGetters, store, storeNamespace) {
+  const orig = await store.dispatch(`${ storeNamespace }/cleanForDiff`, initialValueJSON, { root: true });
+  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, value.toJSON(), { root: true });
+  const cur = await store.dispatch(`${ storeNamespace }/cleanForDiff`, liveValue.toJSON(), { root: true });
 
   const bgChange = changeset(orig, cur);
   const userChange = changeset(orig, user);

package/plugins/int-number.js

@@ -5,9 +5,12 @@ export default Vue.directive('intNumber', {
     el.addEventListener('keypress', (e) => {
       e = e || window.event;
       const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
-      const re = /\d/;
+      const inputChar = String.fromCharCode(charcode);
 
-      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+      // Allow digits, minus sign at the beginning, and Ctrl key combinations
+      const re = /^-?\d*$/;
+
+      if (!re.test(inputChar) && charcode > 9 && !e.ctrlKey) {
         if (e.preventDefault) {
           e.preventDefault();
         } else {

package/plugins/positive-int-number.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+
+export default Vue.directive('positiveIntNumber', {
+  inserted(el) {
+    el.addEventListener('keypress', (e) => {
+      e = e || window.event;
+      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
+      const re = /^\d+$/; // Use regex to match positive numbers
+
+      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+        if (e.preventDefault) {
+          e.preventDefault();
+        } else {
+          e.returnValue = false;
+        }
+      }
+    });
+  }
+});

package/plugins/steve/__tests__/getters.spec.ts

@@ -68,9 +68,15 @@ describe('steve: getters', () => {
     it('returns a string with a single filter statement applied if a single filter statement is applied', () => {
       expect(urlOptionsGetter('foo', { filter: { bar: 'baz' } })).toBe('foo?bar=baz');
     });
+    it('returns a string with a single filter statement applied and formatted for steve if a single filter statement is applied and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz' } })).toBe('/v1/foo?filter=bar=baz&exclude=metadata.managedFields');
+    });
     it('returns a string with a multiple filter statements applied if a single filter statement is applied', () => {
       expect(urlOptionsGetter('foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('foo?bar=baz&far=faz');
     });
+    it('returns a string with a multiple filter statements applied and formatted for steve if a single filter statement is applied and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('/v1/foo?filter=bar=baz&far=faz&exclude=metadata.managedFields');
+    });
     it('returns a string with an exclude statement for "bar" and "metadata.managedFields" if excludeFields is a single element array with the string "bar" and the url starts with "/v1/"', () => {
       expect(urlOptionsGetter('/v1/foo', { excludeFields: ['bar'] })).toBe('/v1/foo?exclude=bar&exclude=metadata.managedFields');
     });
@@ -86,8 +92,17 @@ describe('steve: getters', () => {
     it('returns a string with a sorting criteria if the sort option is provided', () => {
       expect(urlOptionsGetter('foo', { sortBy: 'bar' })).toBe('foo?sort=bar');
     });
+    it('returns a string with a sorting criteria formatted for steve if the sort option is provided and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=bar');
+    });
     it('returns a string with a sorting criteria if the sort option is provided and an order if sortOrder is provided', () => {
       expect(urlOptionsGetter('foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('foo?sort=bar&order=baz');
     });
+    it('returns a string with a sorting criteria formatted for steve if the sort option is provided and an order if sortOrder is provided and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=bar');
+    });
+    it('returns a string with a sorting criteria formatted for steve if the sort option is provided and an order if sortOrder is "desc" and the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'desc' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=-bar');
+    });
   });
 });

package/plugins/steve/getters.js

@@ -31,8 +31,8 @@ export default {
     const isSteve = parsedUrl.path.startsWith('/v1');
 
     // Filter
-    // Steve's filter options work differently nowadays (https://github.com/rancher/steve#filter) #9341
     if ( opt.filter ) {
+      url += `${ (url.includes('?') ? '&' : '?') }`;
       const keys = Object.keys(opt.filter);
 
       keys.forEach((key) => {
@@ -42,9 +42,18 @@ export default {
           vals = [vals];
         }
 
-        vals.forEach((val) => {
-          url += `${ (url.includes('?') ? '&' : '?') + encodeURIComponent(key) }=${ encodeURIComponent(val) }`;
+        // Steve's filter options now support more complex filtering not yet implemented here #9341
+        if (isSteve) {
+          url += `${ (url.includes('filter=') ? '&' : 'filter=') }`;
+        }
+
+        const filterStrings = vals.map((val) => {
+          return `${ encodeURI(key) }=${ encodeURI(val) }`;
         });
+        const urlEnding = url.charAt(url.length - 1);
+        const nextStringConnector = ['&', '?', '='].includes(urlEnding) ? '' : '&';
+
+        url += `${ nextStringConnector }${ filterStrings.join('&') }`;
       });
     }
 
@@ -82,18 +91,21 @@ export default {
     // End: Limit
 
     // Sort
-    // Steve's sort options work differently nowadays (https://github.com/rancher/steve#sort) #9341
+    // Steve's sort options supports multi-column sorting and column specific sort orders, not implemented yet #9341
     const sortBy = opt.sortBy;
+    const orderBy = opt.sortOrder;
 
     if ( sortBy ) {
-      url += `${ url.includes('?') ? '&' : '?' }sort=${ encodeURIComponent(sortBy) }`;
+      if (isSteve) {
+        url += `${ url.includes('?') ? '&' : '?' }sort=${ (orderBy === 'desc' ? '-' : '') + encodeURI(sortBy) }`;
+      } else {
+        url += `${ url.includes('?') ? '&' : '?' }sort=${ encodeURI(sortBy) }`;
+        if ( orderBy ) {
+          url += `${ url.includes('?') ? '&' : '?' }order=${ encodeURI(orderBy) }`;
+        }
+      }
     }
 
-    const orderBy = opt.sortOrder;
-
-    if ( orderBy ) {
-      url += `${ url.includes('?') ? '&' : '?' }order=${ encodeURIComponent(orderBy) }`;
-    }
     // End: Sort
 
     return url;

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -206,13 +206,6 @@ export default (
       }
     },
 
-    /**
-     * Emit on input change
-     */
-    onChange(event: Event): void {
-      this.$emit('change', event);
-    },
-
     /**
      * Emit on input with delay. Note: Arrow function is avoided due context
      * binding.
@@ -306,7 +299,6 @@ export default (
         @input="onInput($event.target.value)"
         @focus="onFocus"
         @blur="onBlur"
-        @change="onChange"
       >
     </slot>
 

package/rancher-components/Form/Radio/RadioButton.test.ts

@@ -4,7 +4,7 @@ import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('radioButton.vue', () => {
   it('renders label slot contents', () => {
-    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' }, propsData: { val: {}, value: {} } });
+    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' } });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
   });
@@ -14,9 +14,7 @@ describe('radioButton.vue', () => {
       RadioButton,
       {
         directives: { cleanHtmlDirective },
-        propsData:  {
-          label: 'Test Label', val: {}, value: {}
-        }
+        propsData:  { label: 'Test Label' }
       });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
@@ -25,9 +23,7 @@ describe('radioButton.vue', () => {
   it('renders slot contents when both slot and label prop are provided', () => {
     const wrapper = shallowMount(RadioButton, {
       slots:     { label: 'Test Label - Slot' },
-      propsData: {
-        label: 'Test Label - Props', val: {}, value: {}
-      },
+      propsData: { label: 'Test Label - Props' },
     });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');

package/store/index.js

@@ -568,6 +568,10 @@ export const getters = {
     return getters['isSingleProduct'] && cluster.isHarvester && !getters['isRancherInHarvester'];
   },
 
+  showTopLevelMenu(getters) {
+    return getters['isRancherInHarvester'] || getters['isMultiCluster'] || !getters['isSingleProduct'];
+  },
+
   targetRoute(state) {
     return state.targetRoute;
   },

package/store/prefs.js

@@ -54,6 +54,7 @@ export const NAMESPACE_FILTERS = create('ns-by-cluster', {}, { parseJSON });
 export const WORKSPACE = create('workspace', '');
 export const EXPANDED_GROUPS = create('open-groups', ['cluster', 'policy', 'rbac', 'serviceDiscovery', 'storage', 'workload'], { parseJSON });
 export const FAVORITE_TYPES = create('fav-type', [], { parseJSON });
+export const PINNED_CLUSTERS = create('pinned-clusters', [], { parseJSON });
 export const GROUP_RESOURCES = create('group-by', 'namespace');
 export const DIFF = create('diff', 'unified', { options: ['unified', 'split'] });
 export const THEME = create('theme', 'auto', {