@rancher/shell 3.0.8-rc.7 → 3.0.8-rc.9

package/rancher-components/RcIcon/RcIcon.test.ts

@@ -0,0 +1,51 @@
+import { shallowMount } from '@vue/test-utils';
+import RcIcon from './RcIcon.vue';
+
+describe('rcIcon.vue', () => {
+  it('renders with the correct type class and size classes', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('icon-search');
+    expect(wrapper.classes()).toContain('medium');
+  });
+
+  it('sets aria-hidden to true by default', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true');
+  });
+
+  it('sets aria-hidden to false when explicitly provided', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:       'medium',
+        type:       'search',
+        ariaHidden: false,
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('false');
+  });
+
+  it('sets aria-hidden to true when explicitly provided', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:       'medium',
+        type:       'search',
+        ariaHidden: true,
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true');
+  });
+});

package/rancher-components/RcIcon/RcIcon.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { RcIconProps, RcIconType, RcIconSize } from '@components/RcIcon/types';
+import { computed } from 'vue';
+import { useStatusColors } from '@components/utils/status';
+const props = withDefaults(defineProps<RcIconProps>(), { size: 'small', ariaHidden: true });
+const fontSize = computed(() => {
+  return RcIconSize[props.size];
+});
+
+const iconClass = computed(() => {
+  return RcIconType[props.type];
+});
+
+const status = computed(() => {
+  if (props.status && props.status !== 'inherit') {
+    return props.status;
+  }
+
+  return 'none';
+});
+
+const { textColor } = useStatusColors({ status: status.value }, 'outlined');
+
+const color = computed(() => {
+  if (props.status === 'inherit') {
+    return 'inherit';
+  }
+
+  return textColor.value;
+});
+</script>
+
+<template>
+  <i
+    class="rc-icon"
+    :class="{[props.size]: true, [iconClass]: true}"
+    :aria-hidden="props.ariaHidden"
+  />
+</template>
+
+<style lang="scss" scoped>
+.rc-icon {
+  font-size: v-bind(fontSize);
+  color: v-bind(color);
+}
+</style>

package/rancher-components/RcIcon/index.ts

@@ -0,0 +1 @@
+export { default as RcIcon } from './RcIcon.vue';

package/rancher-components/RcIcon/types.ts

@@ -0,0 +1,160 @@
+import { Status } from '../utils/status';
+
+export const RcIconType = {
+  actions:                 'icon-actions',
+  ai:                      'icon-ai',
+  'alert-alt':             'icon-alert-alt',
+  alert:                   'icon-alert',
+  anchor:                  'icon-anchor',
+  apple:                   'icon-apple',
+  application:             'icon-application',
+  apps:                    'icon-apps',
+  archive:                 'icon-archive',
+  'backup-restore':        'icon-backup-restore',
+  backup:                  'icon-backup',
+  'brush-icon':            'icon-brush-icon',
+  'category-alt':          'icon-category-alt',
+  checkmark:               'icon-checkmark',
+  'chevron-beginning':     'icon-chevron-beginning',
+  'chevron-down':          'icon-chevron-down',
+  'chevron-end':           'icon-chevron-end',
+  'chevron-left':          'icon-chevron-left',
+  'chevron-right':         'icon-chevron-right',
+  'chevron-up':            'icon-chevron-up',
+  'circle-plus':           'icon-circle-plus',
+  cis:                     'icon-cis',
+  close:                   'icon-close',
+  'cluster-management':    'icon-cluster-management',
+  cluster:                 'icon-cluster',
+  code:                    'icon-code',
+  comment:                 'icon-comment',
+  commit:                  'icon-commit',
+  compass:                 'icon-compass',
+  'confirmation-alt':      'icon-confirmation-alt',
+  copy:                    'icon-copy',
+  dashboard:               'icon-dashboard',
+  dock:                    'icon-dock',
+  docker:                  'icon-docker',
+  document:                'icon-document',
+  'dot-half':              'icon-dot-half',
+  'dot-open':              'icon-dot-open',
+  dot:                     'icon-dot',
+  'downgrade-alt':         'icon-downgrade-alt',
+  download:                'icon-download',
+  edit:                    'icon-edit',
+  elemental:               'icon-elemental',
+  endpoints_connected:     'icon-endpoints_connected',
+  endpoints_disconnected:  'icon-endpoints_disconnected',
+  epinio:                  'icon-epinio',
+  error:                   'icon-error',
+  explore:                 'icon-explore',
+  extension:               'icon-extension',
+  'external-link':         'icon-external-link',
+  file:                    'icon-file',
+  filter_alt:              'icon-filter_alt',
+  flask:                   'icon-flask',
+  fleet:                   'icon-fleet',
+  folder:                  'icon-folder',
+  fork:                    'icon-fork',
+  gatekeeper:              'icon-gatekeeper',
+  gear:                    'icon-gear',
+  gemini:                  'icon-gemini',
+  git:                     'icon-git',
+  github:                  'icon-github',
+  gitlab:                  'icon-gitlab',
+  globe:                   'icon-globe',
+  groups:                  'icon-groups',
+  harvester:               'icon-harvester',
+  helm:                    'icon-helm',
+  hide:                    'icon-hide',
+  history:                 'icon-history',
+  home:                    'icon-home',
+  'info-circle':           'icon-info-circle',
+  info:                    'icon-info',
+  init_container:          'icon-init_container',
+  istio:                   'icon-istio',
+  keyboard:                'icon-keyboard',
+  keyboard_tab:            'icon-keyboard_tab',
+  linux:                   'icon-linux',
+  'list-flat':             'icon-list-flat',
+  'list-grouped':          'icon-list-grouped',
+  lock:                    'icon-lock',
+  logging:                 'icon-logging',
+  longhorn:                'icon-longhorn',
+  marketplace:             'icon-marketplace',
+  menu:                    'icon-menu',
+  minus:                   'icon-minus',
+  monitoring:              'icon-monitoring',
+  more:                    'icon-more',
+  namespace:               'icon-namespace',
+  notifier:                'icon-notifier',
+  'notify-announcement':   'icon-notify-announcement',
+  'notify-bell':           'icon-notify-bell',
+  'notify-busy':           'icon-notify-busy',
+  'notify-error':          'icon-notify-error',
+  'notify-info':           'icon-notify-info',
+  'notify-tick':           'icon-notify-tick',
+  'notify-warning':        'icon-notify-warning',
+  ollama:                  'icon-ollama',
+  openai:                  'icon-openai',
+  'os-management':         'icon-os-management',
+  pause:                   'icon-pause',
+  'pin-outlined':          'icon-pin-outlined',
+  pin:                     'icon-pin',
+  pipeline:                'icon-pipeline',
+  play:                    'icon-play',
+  plus:                    'icon-plus',
+  pod_security:            'icon-pod_security',
+  print:                   'icon-print',
+  'question-mark':         'icon-question-mark',
+  'quick-action':          'icon-quick-action',
+  'rancher-desktop':       'icon-rancher-desktop',
+  'rancher-observability': 'icon-rancher-observability',
+  'refresh-alt':           'icon-refresh-alt',
+  refresh:                 'icon-refresh',
+  'repository-alt':        'icon-repository-alt',
+  repository:              'icon-repository',
+  rio:                     'icon-rio',
+  'role-binding':          'icon-role-binding',
+  search:                  'icon-search',
+  send:                    'icon-send',
+  service:                 'icon-service',
+  show:                    'icon-show',
+  snapshot:                'icon-snapshot',
+  'sort-down':             'icon-sort-down',
+  'sort-up':               'icon-sort-up',
+  sort:                    'icon-sort',
+  sources:                 'icon-sources',
+  spinner:                 'icon-spinner',
+  stackstate:              'icon-stackstate',
+  'star-open':             'icon-star-open',
+  star:                    'icon-star',
+  storage:                 'icon-storage',
+  'tag-alt':               'icon-tag-alt',
+  terminal:                'icon-terminal',
+  'thinking-process':      'icon-thinking-process',
+  trash:                   'icon-trash',
+  unlock:                  'icon-unlock',
+  'upgrade-alt':           'icon-upgrade-alt',
+  upload:                  'icon-upload',
+  'user-check':            'icon-user-check',
+  'user-xmark':            'icon-user-xmark',
+  user:                    'icon-user',
+  'version-alt':           'icon-version-alt',
+  warning:                 'icon-warning',
+  windows:                 'icon-windows',
+};
+
+export const RcIconSize = {
+  large:  '25px',
+  medium: '18px',
+  small:  '14px',
+  none:   undefined
+};
+
+export interface RcIconProps {
+  size: keyof typeof RcIconSize;
+  type: keyof typeof RcIconType;
+  ariaHidden?: boolean;
+  status?: Status | 'inherit';
+}

package/rancher-components/utils/status.test.ts

@@ -0,0 +1,67 @@
+
+import { reactive } from 'vue';
+import { wrapIfVar, useStatusColors, Status } from './status';
+
+describe('utils: status', () => {
+  describe('wrapIfVar', () => {
+    it('should wrap a CSS variable', () => {
+      const result = wrapIfVar('--rc-info');
+
+      expect(result).toBe('var(--rc-info)');
+    });
+
+    it('should not wrap a normal color', () => {
+      const result = wrapIfVar('red');
+
+      expect(result).toBe('red');
+    });
+  });
+
+  describe('useStatusColors', () => {
+    it.each([
+      'info',
+      'success',
+      'warning',
+      'error',
+      'unknown',
+      'none'
+    ])('solid: should return the correct colors for status: %p', (status: Status) => {
+      const props = reactive({ status });
+      const {
+        borderColor,
+        backgroundColor,
+        textColor
+      } = useStatusColors(props, 'solid');
+
+      expect(borderColor.value).toBe(`var(--rc-${ status })`);
+      if (status !== 'none') {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(backgroundColor.value).toBe(`var(--rc-${ status })`);
+      }
+      expect(textColor.value).toBe(`var(--rc-${ status }-secondary)`);
+    });
+
+    it.each([
+      'info',
+      'success',
+      'warning',
+      'error',
+      'unknown',
+      'none'
+    ])('outlined: should return the correct colors for status: %p', (status: Status) => {
+      const props = reactive({ status });
+      const {
+        borderColor,
+        backgroundColor,
+        textColor
+      } = useStatusColors(props, 'outlined');
+
+      expect(borderColor.value).toBe(`var(--rc-${ status }-secondary)`);
+      if (status !== 'none') {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(backgroundColor.value).toBe(`var(--rc-${ status }-secondary)`);
+      }
+      expect(textColor.value).toBe(`var(--rc-${ status })`);
+    });
+  });
+});

package/rancher-components/utils/status.ts

@@ -0,0 +1,77 @@
+import { computed } from 'vue';
+
+export const StatusDefinitions = {
+  info: {
+    primary:   '--rc-info',
+    secondary: '--rc-info-secondary'
+  },
+  success: {
+    primary:   '--rc-success',
+    secondary: '--rc-success-secondary'
+  },
+  warning: {
+    primary:   '--rc-warning',
+    secondary: '--rc-warning-secondary'
+  },
+  error: {
+    primary:   '--rc-error',
+    secondary: '--rc-error-secondary'
+  },
+  unknown: {
+    primary:   '--rc-unknown',
+    secondary: '--rc-unknown-secondary'
+  },
+  none: {
+    primary:   '--rc-none',
+    secondary: '--rc-none-secondary'
+  },
+};
+
+export type Status = keyof typeof StatusDefinitions;
+export type StatusObject = { status: Status };
+export type Style = 'solid' | 'outlined';
+
+export function wrapIfVar(colorVar: string) {
+  return colorVar.startsWith('--') ? `var(${ colorVar })` : colorVar;
+}
+
+/**
+ * A composable to make it easier to use status colors in multiple components
+ *
+ * @param propsWithStatus The props which contain a `status: Status` property. Ideally I'd prefer to just pass status but doing so either forces the consumer to wrap the values in a Ref or this code is no longer reactive.
+ * @param style {@link Style} Will the block of code being using the solid or outlined styling
+ * @returns An object containing the relevant style colors
+ */
+export function useStatusColors(propsWithStatus: StatusObject, style: Style) {
+  const statusColors = computed(() => {
+    return StatusDefinitions[propsWithStatus.status];
+  });
+  const isOutlined = style === 'outlined';
+
+  const borderColor = computed(() => {
+    const colorVar = isOutlined ? statusColors.value.secondary : statusColors.value.primary;
+
+    return wrapIfVar(colorVar);
+  });
+
+  const backgroundColor = computed(() => {
+    if (propsWithStatus.status === 'none') {
+      return 'none';
+    }
+    const colorVar = isOutlined ? statusColors.value.secondary : statusColors.value.primary;
+
+    return wrapIfVar(colorVar);
+  });
+
+  const textColor = computed(() => {
+    const colorVar = isOutlined ? statusColors.value.primary : statusColors.value.secondary;
+
+    return wrapIfVar(colorVar);
+  });
+
+  return {
+    borderColor,
+    backgroundColor,
+    textColor
+  };
+}

package/scripts/typegen.sh

@@ -29,6 +29,7 @@ ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/prefs.js --declaration --al
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/store/plugins.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
 
 # # plugins
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/i18n.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/ > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/normalize.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/resource-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/classify.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null

package/store/action-menu.js

@@ -111,6 +111,14 @@ export const mutations = {
     state.modalData = data;
   },
 
+  updateModalData(state, data) {
+    state.modalData = state.modalData || {};
+
+    data.forEach(({ key, value }) => {
+      state.modalData[key] = value;
+    });
+  },
+
   clearCallbackData(state) {
     state.performCallbackData = undefined;
   },

package/store/auth.js

@@ -404,18 +404,18 @@ export const actions = {
     // Unload plugins - we will load again on login
     await rootState.$plugin.logout();
 
-    let logoutAction = 'logout';
+    let logoutAction = '';
     const data = {};
 
     // SLO - Single-sign logout - will logout auth provider from all places where it's logged in
     if (options.slo) {
-      logoutAction = 'logoutAll';
+      logoutAction = '?logoutAll';
       data.finalRedirectUrl = returnTo({ isSlo: true }, this);
     }
 
     try {
       const res = await dispatch('rancher/request', {
-        url:                  `/v3/tokens?action=${ logoutAction }`,
+        url:                  `/v1/logout${ logoutAction }`,
         method:               'post',
         data,
         headers:              { 'Content-Type': 'application/json' },

package/store/catalog.js

@@ -504,11 +504,16 @@ function addChart(ctx, map, chart, repo) {
 
   if ( !obj ) {
     if ( ctx ) { }
+
+    const primeOnly = chart.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true';
     const experimental = !!chart.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL];
     const windowsIncompatible = !(chart.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || '').includes('windows');
     const deploysOnWindows = (chart.annotations?.[CATALOG_ANNOTATIONS.DEPLOYED_OS] || '').includes('windows');
     const tags = [];
 
+    if (primeOnly) {
+      tags.push(ctx.rootGetters['i18n/withFallback']('generic.primeOnly'));
+    }
     if (experimental) {
       tags.push(ctx.rootGetters['i18n/withFallback']('generic.experimental'));
     }
@@ -542,6 +547,7 @@ function addChart(ctx, map, chart, repo) {
       keywords:         chart.keywords || [],
       categories:       filterCategories(chart.keywords),
       deprecated:       !!chart.deprecated,
+      primeOnly,
       experimental,
       hidden:           !!chart.annotations?.[CATALOG_ANNOTATIONS.HIDDEN],
       targetNamespace:  chart.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE],

package/store/index.js

@@ -263,7 +263,7 @@ export const state = () => {
     $route:                  markRaw({}),
     $plugin:                 markRaw({}),
     showWorkspaceSwitcher:   true,
-
+    localCluster:            null,
   };
 };
 
@@ -272,10 +272,20 @@ export const getters = {
     return state.clusterReady === true;
   },
 
+  /**
+   * Cache of the mgmt cluster fetched at start up
+   *
+   * We cannot rely on the store to cache this as the store may contain a page without the local cluster
+   */
+  localCluster(state) {
+    return state.localCluster;
+  },
+
   isMultiCluster(state, getters) {
-    const clusters = getters['management/all'](MANAGEMENT.CLUSTER);
+    const clusterCount = getters['management/all'](COUNT)?.[0]?.counts?.[MANAGEMENT.CLUSTER]?.summary?.count || 0;
+    const localCluster = getters['localCluster'];
 
-    if (clusters.length === 1 && clusters[0].metadata?.name === 'local') {
+    if (clusterCount === 1 && !!localCluster) {
       return false;
     } else {
       return true;
@@ -592,10 +602,9 @@ export const getters = {
   },
 
   isStandaloneHarvester(state, getters) {
-    const clusters = getters['management/all'](MANAGEMENT.CLUSTER);
-    const cluster = clusters.find((c) => c.id === 'local') || {};
+    const localCluster = getters['localCluster'];
 
-    return getters['isSingleProduct'] && cluster.isHarvester && !getters['isRancherInHarvester'];
+    return getters['isSingleProduct'] && localCluster?.isHarvester && !getters['isRancherInHarvester'];
   },
 
   showTopLevelMenu(getters) {
@@ -640,9 +649,10 @@ export const mutations = {
   clearPageActionHandler(state) {
     state.pageActionHandler = null;
   },
-  managementChanged(state, { ready, isRancher }) {
+  managementChanged(state, { ready, isRancher, localCluster }) {
     state.managementReady = ready;
     state.isRancher = isRancher;
+    state.localCluster = localCluster;
   },
   clusterReady(state, ready) {
     state.clusterReady = ready;
@@ -846,11 +856,21 @@ export const actions = {
 
     res = await allHash(promises);
 
+    let localCluster = null;
+
     if (!res[MANAGEMENT.SETTING] || !paginateClusters({ rootGetters, state })) {
       // This introduces a synchronous request, however we need settings to determine if SSP is enabled
-      // Eventually it will be removed when SSP is always on
-      res[MANAGEMENT.CLUSTER] = await dispatch('management/findAll', { type: MANAGEMENT.CLUSTER, opt: { watch: false } });
+      await dispatch('management/findAll', { type: MANAGEMENT.CLUSTER, opt: { watch: false } });
       toWatch.push(MANAGEMENT.CLUSTER);
+
+      localCluster = getters['management/byId'](MANAGEMENT.CLUSTER, 'local');
+    } else {
+      try {
+        localCluster = await dispatch('management/find', {
+          type: MANAGEMENT.CLUSTER, id: 'local', opt: { watch: false }
+        });
+      } catch (e) { // we don't care about errors, specifically 404s
+      }
     }
 
     // See comment above. Now that we have feature flags we can watch resources
@@ -858,11 +878,7 @@ export const actions = {
       dispatch('management/watch', { type });
     });
 
-    const isMultiCluster = getters['isMultiCluster'];
-
     // If the local cluster is a Harvester cluster and 'rancher-manager-support' is true, it means that the embedded Rancher is being used.
-    const localCluster = res[MANAGEMENT.CLUSTER]?.find((c) => c.id === 'local');
-
     if (localCluster?.isHarvester) {
       const harvesterSetting = await dispatch('cluster/findAll', { type: HCI.SETTING, opt: { url: `/v1/harvester/${ HCI.SETTING }s` } });
       const rancherManagerSupport = harvesterSetting.find((setting) => setting.id === 'rancher-manager-support');
@@ -904,6 +920,7 @@ export const actions = {
     commit('managementChanged', {
       ready: true,
       isRancher,
+      localCluster
     });
 
     if ( res[FLEET.WORKSPACE] ) {
@@ -914,6 +931,8 @@ export const actions = {
       });
     }
 
+    const isMultiCluster = getters['isMultiCluster'];
+
     console.log(`Done loading management; isRancher=${ isRancher }; isMultiCluster=${ isMultiCluster }`); // eslint-disable-line no-console
   },
 
@@ -1232,10 +1251,10 @@ export const actions = {
     }
   },
 
-  nuxtClientInit({ dispatch, commit, rootState }, nuxt) {
-    commit('setRouter', nuxt.app.router);
-    commit('setRoute', nuxt.route);
-    commit('setPlugin', nuxt.app.$plugin);
+  dashboardClientInit({ dispatch, commit, rootState }, context) {
+    commit('setRouter', context.app.router);
+    commit('setRoute', context.route);
+    commit('setPlugin', context.app.$plugin);
 
     dispatch('management/rehydrateSubscribe');
     dispatch('cluster/rehydrateSubscribe');

package/store/prefs.js

@@ -523,15 +523,14 @@ export const actions = {
   setBrandStyle({ rootState, rootGetters }, dark = false) {
     if (rootState.managementReady) {
       try {
-        const brandSetting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+        const brandSetting = rootGetters['management/brand'];
 
-        if (brandSetting && brandSetting.value && brandSetting.value !== '') {
-          const brand = brandSetting.value;
-          const brandMeta = getBrandMeta(brand);
+        if (brandSetting !== '') {
+          const brandMeta = getBrandMeta(brandSetting);
           const hasStylesheet = brandMeta.hasStylesheet === 'true';
 
           if (hasStylesheet) {
-            document.body.classList.add(brand);
+            document.body.classList.add(brandMeta);
           } else {
             // TODO option apply color at runtime
           }

package/store/type-map.js

@@ -1895,7 +1895,7 @@ function ifHave(getters, option) {
   case IF_HAVE.NOT_V1_ISTIO: {
     return !isV1Istio(getters);
   }
-  case IF_HAVE.MULTI_CLUSTER: {
+  case IF_HAVE.MULTI_CLUSTER: { // Used by harvester extension
     return getters.isMultiCluster;
   }
   case IF_HAVE.NEUVECTOR_NAMESPACE: {
@@ -1904,10 +1904,10 @@ function ifHave(getters, option) {
   case IF_HAVE.ADMIN: {
     return isAdminUser(getters);
   }
-  case IF_HAVE.MCM_DISABLED: {
+  case IF_HAVE.MCM_DISABLED: { // There's a general MCM ff, this is conflating it with a harvester concept
     return !getters['isRancherInHarvester'];
   }
-  case IF_HAVE.NOT_STANDALONE_HARVESTER: {
+  case IF_HAVE.NOT_STANDALONE_HARVESTER: { // Not used by harvester extension...
     return !getters['isStandaloneHarvester'];
   }
   default:

package/store/wm.ts

@@ -80,11 +80,11 @@ export const mutations = {
   addTab(state: State, tab: Tab) {
     const existing = state.tabs.find((x) => x.id === tab.id);
 
-    if (!existing) {
-      if (tab.position === undefined) {
-        tab.position = (window.localStorage.getItem(STORAGE_KEY['pin']) || BOTTOM) as Position;
-      }
+    if (tab.position === undefined || tab.position as string === 'undefined') {
+      tab.position = (window.localStorage.getItem(STORAGE_KEY['pin']) || BOTTOM) as Position;
+    }
 
+    if (!existing) {
       if (state.lockedPositions.includes(BOTTOM)) {
         tab.position = BOTTOM;
       }