@rancher/shell 0.1.2 → 0.1.3

package/components/LocaleSelector.vue

@@ -0,0 +1,81 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'LocalSelector',
+
+  computed: {
+    ...mapGetters('i18n', ['selectedLocaleLabel', 'availableLocales']),
+
+    showLocale() {
+      return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.dev;
+    },
+
+    showNone() {
+      return !!process.env.dev && this.dev;
+    },
+  },
+
+  methods: {
+    switchLocale(locale) {
+      this.$store.dispatch('i18n/switchTo', locale);
+    },
+  }
+};
+</script>
+
+<template>
+  <div v-if="showLocale">
+    <v-popover
+      popover-class="localeSelector"
+      placement="top"
+      trigger="click"
+    >
+      <a
+        data-testid="locale-selector"
+        class="locale-chooser"
+      >
+        {{ selectedLocaleLabel }}
+        <i class="icon icon-fw icon-sort-down" />
+      </a>
+
+      <template slot="popover">
+        <ul class="list-unstyled dropdown" style="margin: -1px;">
+          <li v-if="showNone" v-t="'locale.none'" class="hand" @click="switchLocale('none')" />
+          <li
+            v-for="(label, name) in availableLocales"
+            :key="name"
+            class="hand"
+            @click="switchLocale(name)"
+          >
+            {{ label }}
+          </li>
+        </ul>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.advanced {
+  user-select: none;
+  padding: 0 5px;
+  line-height: 40px;
+  font-size: 15px;
+  font-weight: 500;
+}
+.content {
+  background: var(--nav-active);
+  padding: 10px;
+  margin-top: 6px;
+  border-radius: 4px;
+}
+
+.locale-chooser {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>

package/components/PromptModal.vue

@@ -1,7 +1,6 @@
 <script>
 import { mapState } from 'vuex';
 import { isArray } from '@shell/utils/array';
-import { importDialog } from '@shell/utils/dynamic-importer';
 
 /**
  * @name PromptModal
@@ -32,8 +31,8 @@ export default {
       return this.modalData?.modalWidth || '600px';
     },
     component() {
-      // Looks for a dialog component by looking up @shell/components/dialog/${name}.
-      return importDialog(this.modalData?.component);
+      // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
+      return this.$store.getters['type-map/importDialog'](this.modalData?.component);
     },
     cssProps() {
       // this computed property lets us generate a scss var that we can use in the style

package/components/ResourceList/index.vue

@@ -50,7 +50,7 @@ export default {
 
     if ( !hasFetch ) {
       if ( !schema ) {
-        store.dispatch('loadingError', `Type ${ resource } not found`);
+        store.dispatch('loadingError', new Error(`Type ${ resource } not found, unable to display list`));
 
         return;
       }

package/components/ResourceTable.vue

@@ -6,7 +6,6 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
 import { NAMESPACE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -133,7 +132,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster']),
+    ...mapGetters(['currentProduct']),
     isNamespaced() {
       if ( this.namespaced !== null ) {
         return this.namespaced;
@@ -196,11 +195,9 @@ export default {
 
     filteredRows() {
       const isAll = this.$store.getters['isAllNamespaces'];
-      const isVirtualProduct = this.$store.getters['currentProduct'].name === HARVESTER;
 
       // If the resources isn't namespaced or we want ALL of them, there's nothing to do.
-      // If this is a harvester list, 'all' must still be filtered
-      if ( !this.isNamespaced || (isAll && !isVirtualProduct)) {
+      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources)) {
         return this.rows || [];
       }
 
@@ -212,7 +209,7 @@ export default {
       }
 
       return this.rows.filter((row) => {
-        if (this.isVirtualCluster && this.isNamespaced) {
+        if (this.currentProduct?.hideSystemResources && this.isNamespaced) {
           return !!includedNamespaces[row.metadata.namespace] && !row.isSystemResource;
         } else if (!this.isNamespaced) {
           return true;

package/components/SingleClusterInfo.vue

@@ -87,7 +87,7 @@ export default {
 <template>
   <div v-if="clusterDetail">
     <div class="single-cluster-header">
-      <ClusterProviderIcon class="rancher-icon" width="32" />
+      <ClusterProviderIcon :cluster="clusterDetail" class="rancher-icon" width="32" />
       <h1>{{ t('glance.clusterInfo') }}</h1>
     </div>
 

package/components/SortableTable/index.vue

@@ -20,19 +20,6 @@ import actions from './actions';
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
 
-// Its quicker to render if we directly supply the components for the formatters
-// rather than just the name of a global component - so create a map of the formatter comoponents
-const FORMATTERS = {};
-
-const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
-
-components.keys().forEach((fileName) => {
-  const componentConfig = components(fileName);
-  const componentName = fileName.split('/').pop().split('.')[0];
-
-  FORMATTERS[componentName] = componentConfig.default || componentConfig;
-});
-
 export const COLUMN_BREAKPOINTS = {
   /**
    * Only show column if at tablet width or wider
@@ -48,6 +35,19 @@ export const COLUMN_BREAKPOINTS = {
   DESKTOP: 'desktop'
 };
 
+// Its quicker to render if we directly supply the components for the formatters
+// rather than just the name of a global component - so create a map of the formatter comoponents
+const FORMATTERS = {};
+
+const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
+
+components.keys().forEach((fileName) => {
+  const componentConfig = components(fileName);
+  const componentName = fileName.split('/').pop().split('.')[0];
+
+  FORMATTERS[componentName] = componentConfig.default || componentConfig;
+});
+
 // @TODO:
 // Fixed header/scrolling
 
@@ -370,11 +370,14 @@ export default {
     },
 
     // Ensure we update live and delayed columns on first load
-    initalLoad(neu, old) {
-      if (neu && !old) {
-        this._didinit = true;
-        this.$nextTick(() => this.updateLiveAndDelayed());
-      }
+    initalLoad: {
+      handler(neu) {
+        if (neu) {
+          this._didinit = true;
+          this.$nextTick(() => this.updateLiveAndDelayed());
+        }
+      },
+      immediate: true
     },
 
     isManualRefreshLoading(neu, old) {
@@ -400,7 +403,7 @@ export default {
     },
 
     initalLoad() {
-      return !this.loading && !this._didinit && this.rows?.length;
+      return !!(!this.loading && !this._didinit && this.rows?.length);
     },
 
     fullColspan() {
@@ -863,7 +866,7 @@ export default {
                 <template #button-content>
                   <button ref="actionDropDown" class="btn bg-primary mr-0" :disabled="!selectedRows.length">
                     <i class="icon icon-gear" />
-                    <span>{{ t('harvester.tableHeaders.actions') }}</span>
+                    <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
                     <i class="ml-10 icon icon-chevron-down" />
                   </button>
                 </template>

package/components/SortableTable/selection.js

@@ -270,6 +270,7 @@ export default {
         this.$store.commit(`action-menu/show`, {
           resources,
           event: e.originalEvent || e, // Handle jQuery event and raw event
+          elem:  actionElement
         });
 
         return;

package/components/auth/AzureWarning.vue

@@ -3,6 +3,7 @@
 import { NORMAN, MANAGEMENT } from '@shell/config/types';
 import { get } from '@shell/utils/object';
 import { AZURE_MIGRATED } from '@shell/config/labels-annotations';
+import { BLANK_CLUSTER } from '@shell/store';
 
 export default {
   async fetch() {
@@ -24,7 +25,10 @@ export default {
       authConfig:      null,
       authConfigRoute: {
         name:   'c-cluster-auth-config-id',
-        params: { id: 'azuread' }
+        params: {
+          cluster: this.$route.params.cluster || BLANK_CLUSTER,
+          id:      'azuread'
+        }
       }
     };
   },

package/components/auth/Principal.vue

@@ -119,7 +119,7 @@ export default {
       "avatar name"
       "avatar description";
     grid-template-columns: $size auto;
-    grid-template-rows: math.div($size, 2) math.div($size, 2);
+    grid-template-rows: auto math.div($size, 2);
     column-gap: 10px;
 
     &.showLabels {

package/components/auth/RoleDetailEdit.vue

@@ -80,11 +80,14 @@ export default {
     // users to freely type in resources that are not shown in the list.
 
     if (this.value.subtype === CLUSTER || this.value.subtype === NAMESPACE) {
-      this.templateOptions = (await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }))
-        .map(option => ({
-          label: option.nameDisplay,
-          value: option.id
-        }));
+      (await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE })).forEach((template) => {
+        // Ensure we have quick access to a specific template. This allows unselected drop downs to show the correct value
+        this.keyedTemplateOptions[template.id] = {
+          label: template.nameDisplay,
+          value: template.id
+        };
+      });
+      this.templateOptions = Object.values(this.keyedTemplateOptions);
     }
   },
 
@@ -97,11 +100,13 @@ export default {
         resources:       [],
         verbs:           []
       },
-      verbOptions:       VERBS,
-      templateOptions:   [],
-      resources:         this.value.resources,
-      scopedResources:   SCOPED_RESOURCES,
-      defaultValue:      false,
+      verbOptions:          VERBS,
+      templateOptions:      [],
+      keyedTemplateOptions: {},
+      resources:            this.value.resources,
+      scopedResources:      SCOPED_RESOURCES,
+      defaultValue:         false,
+      selectFocused:        null,
     };
   },
 
@@ -682,10 +687,12 @@ export default {
                     :taggable="false"
                     :disabled="isBuiltin"
                     :searchable="true"
-                    :options="templateOptions"
+                    :options="selectFocused === props.i ? templateOptions : [keyedTemplateOptions[props.row.value]]"
                     option-key="value"
                     option-label="label"
                     :mode="mode"
+                    @on-focus="selectFocused = props.i"
+                    @on-blur="selectFocused = null"
                   />
                 </div>
               </div>

package/components/fleet/FleetRepos.vue

@@ -1,5 +1,4 @@
 <script>
-import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
 import Link from '@shell/components/formatter/Link';
 import Shortened from '@shell/components/formatter/Shortened';
@@ -32,7 +31,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster']),
     filteredRows() {
       if (!this.rows) {
         return [];

package/components/form/NameNsDescription.vue

@@ -208,7 +208,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster', 'currentCluster']),
+    ...mapGetters(['currentProduct', 'currentCluster']),
     namespaceReallyDisabled() {
       return (
         !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
@@ -224,13 +224,11 @@ export default {
       const namespaces = this.namespacesOverride || this.$store.getters[`${ currentStore }/all`](this.namespaceType);
 
       const filtered = namespaces.filter( this.namespaceFilter || ((namespace) => {
-        const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(namespace.metadata.name);
-
-        if (this.isVirtualCluster) {
-          // For virtual clusters, filter out the namespace
+        if (this.currentProduct?.hideSystemResources) {
+          // Filter out the namespace
           // if it is a system namespace or if it is managed by
           // Fleet.
-          return !namespace.isSystem && !namespace.isFleetManaged && !isSettingSystemNamespace;
+          return !namespace.isSystem && !namespace.isFleetManaged;
         }
 
         // By default, include the namespace in the dropdown.

package/components/form/NodeScheduling.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import NodeAffinity from '@shell/components/form/NodeAffinity';
-import { NAME as VIRTUAL } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
 import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 import { HOSTNAME } from '@shell/config/labels-annotations';

package/components/form/WorkloadPorts.vue

@@ -8,7 +8,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
 import { CAPI, SERVICE } from '@shell/config/types';
 
 export default {

package/components/formatter/WorkloadHealthScale.vue

@@ -2,7 +2,7 @@
 import Vue from 'vue';
 import ProgressBarMulti from '@shell/components/ProgressBarMulti';
 import PlusMinus from '@shell/components/form/PlusMinus';
-import { SCALABLE_WORKLOAD_TYPES } from '~shell/config/types';
+import { SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
 import { ucFirst } from '@shell/utils/string';
 
 const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);

package/components/nav/Header.vue

@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';
 import debounce from 'lodash/debounce';
 import { NORMAN, STEVE } from '@shell/config/types';
-import { NAME as VIRTUAL } from '@shell/config/product/harvester';
 import { ucFirst } from '@shell/utils/string';
 import { isMac } from '@shell/utils/platform';
 import Import from '@shell/components/Import';
@@ -13,7 +12,6 @@ import ClusterBadge from '@shell/components/ClusterBadge';
 import { LOGGED_OUT } from '@shell/config/query-params';
 import NamespaceFilter from './NamespaceFilter';
 import WorkspaceSwitcher from './WorkspaceSwitcher';
-import HarvesterUpgrade from './HarvesterUpgrade.vue';
 import TopLevelMenu from './TopLevelMenu';
 import Jump from './Jump';
 import { allHash } from '@shell/utils/promise';
@@ -31,7 +29,6 @@ export default {
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
-    HarvesterUpgrade
   },
 
   props: {
@@ -51,14 +48,14 @@ export default {
       kubeConfigCopying: false,
       searchShortcut,
       shellShortcut,
-      VIRTUAL,
       LOGGED_OUT,
+      navHeaderRight:         null
     };
   },
 
   computed: {
     ...mapGetters(['clusterReady', 'isExplorer', 'isMultiCluster', 'isRancher', 'currentCluster',
-      'currentProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isVirtualCluster']),
+      'currentProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct']),
     ...mapGetters('type-map', ['activeProducts']),
 
     appName() {
@@ -94,12 +91,12 @@ export default {
     },
 
     showPreferencesLink() {
-      return (this.$store.getters['management/schemaFor'](STEVE.PREFERENCE)?.resourceMethods || []).includes('PUT');
+      return (this.$store.getters['management/schemaFor'](STEVE.PREFERENCE, false, false)?.resourceMethods || []).includes('PUT');
     },
 
     showAccountAndApiKeyLink() {
       // Keep this simple for the moment and only check if the user can see tokens... plus the usual isRancher/isSingleProduct
-      const canSeeTokens = this.$store.getters['rancher/schemaFor'](NORMAN.TOKEN);
+      const canSeeTokens = this.$store.getters['rancher/schemaFor'](NORMAN.TOKEN, false, false);
 
       return canSeeTokens && (this.isRancher || this.isSingleProduct);
     },
@@ -152,6 +149,7 @@ export default {
         }
       };
     },
+
   },
 
   watch: {
@@ -168,6 +166,8 @@ export default {
     window.addEventListener('resize', this.debouncedLayoutHeader);
 
     this.$nextTick(() => this.layoutHeader(null, true));
+
+    this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
   },
 
   beforeDestroy() {
@@ -329,7 +329,8 @@ export default {
     <div class="spacer"></div>
 
     <div class="rd-header-right">
-      <HarvesterUpgrade v-if="isVirtualCluster && currentProduct.name === VIRTUAL" />
+      <component :is="navHeaderRight" />
+
       <div
         v-if="(currentCluster || (currentProduct && currentProduct.customNamespaceFilter)) && !simple && (currentProduct.showNamespaceFilter || currentProduct.showWorkspaceSwitcher)"
         class="top"
@@ -457,7 +458,6 @@ export default {
       </div>
 
       <div class="header-spacer"></div>
-
       <div
         v-if="showUserMenu"
         class="user user-menu"

package/components/nav/NamespaceFilter.vue

@@ -4,7 +4,6 @@ import { NAMESPACE_FILTERS, DEV } from '@shell/store/prefs';
 import { NAMESPACE, MANAGEMENT } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import { isArray, addObjects, findBy, filterBy } from '@shell/utils/array';
-
 import {
   NAMESPACE_FILTER_SPECIAL as SPECIAL,
   NAMESPACE_FILTER_ALL_USER as ALL_USER,
@@ -29,7 +28,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster', 'isMultiVirtualCluster', 'currentProduct']),
+    ...mapGetters(['currentProduct']),
 
     hasFilter() {
       return this.filter.length > 0;
@@ -97,7 +96,7 @@ export default {
         });
       }
 
-      if (!this.isVirtualCluster) {
+      if (!this.currentProduct?.hideSystemResources) {
         out = [
           {
             id:    ALL,
@@ -137,12 +136,16 @@ export default {
 
       namespaces = this.filterNamespaces(namespaces);
 
-      if (this.$store.getters['isRancher'] || this.isMultiVirtualCluster) {
+      // isRancher = mgmt schemas are loaded and there's a project schema
+      if (this.$store.getters['isRancher']) {
         const cluster = this.$store.getters['currentCluster'];
         let projects = this.$store.getters['management/all'](
           MANAGEMENT.PROJECT
         );
 
+        projects = projects.filter((p) => {
+          return this.currentProduct?.hideSystemResources ? !p.isSystem && p.spec.clusterName === cluster.id : p.spec.clusterName === cluster.id;
+        });
         projects = sortBy(filterBy(projects, 'spec.clusterName', cluster.id), [
           'nameDisplay',
         ]);

package/components/nav/TopLevelMenu.vue

@@ -1,6 +1,7 @@
 <script>
 import BrandImage from '@shell/components/BrandImage';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
+import LocaleSelector from '@shell/components/LocaleSelector';
 import { mapGetters } from 'vuex';
 import $ from 'jquery';
 import { CAPI, MANAGEMENT } from '@shell/config/types';
@@ -19,7 +20,9 @@ const UI_COMMIT = process.env.COMMIT || UNKNOWN;
 
 export default {
 
-  components: { BrandImage, ClusterProviderIcon },
+  components: {
+    BrandImage, ClusterProviderIcon, LocaleSelector
+  },
 
   data() {
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
@@ -46,7 +49,6 @@ export default {
     ...mapGetters(['clusterId']),
     ...mapGetters(['clusterReady', 'isRancher', 'currentCluster', 'currentProduct']),
     ...mapGetters('type-map', ['activeProducts']),
-    ...mapGetters('i18n', ['selectedLocaleLabel', 'availableLocales']),
     ...mapGetters({ features: 'features/get' }),
 
     value: {
@@ -108,14 +110,6 @@ export default {
 
     maxClustersToShow: mapPref(MENU_MAX_CLUSTERS),
 
-    showLocale() {
-      return Object.keys(this.availableLocales).length > 1 || this.dev;
-    },
-
-    showNone() {
-      return !!process.env.dev && this.dev;
-    },
-
     multiClusterApps() {
       const options = this.options;
 
@@ -151,7 +145,7 @@ export default {
 
     options() {
       const cluster = this.clusterId || this.$store.getters['defaultClusterId'];
-
+      // TODO plugin routes
       const entries = this.activeProducts.map((p) => {
         // Try product-specific index first
         const to = p.to || {
@@ -232,10 +226,6 @@ export default {
         this.setClusterListHeight(this.maxClustersToShow);
       });
     },
-
-    switchLocale(locale) {
-      this.$store.dispatch('i18n/switchTo', locale);
-    },
   }
 };
 </script>
@@ -359,34 +349,7 @@ export default {
               v-html="displayVersion"
             />
           </div>
-          <div v-if="showLocale">
-            <v-popover
-              popover-class="localeSelector"
-              placement="top"
-              trigger="click"
-            >
-              <a
-                data-testid="locale-selector"
-                class="locale-chooser"
-              >
-                {{ selectedLocaleLabel }}
-              </a>
-
-              <template slot="popover">
-                <ul class="list-unstyled dropdown" style="margin: -1px;">
-                  <li v-if="showNone" v-t="'locale.none'" class="hand" @click="switchLocale('none')" />
-                  <li
-                    v-for="(label, name) in availableLocales"
-                    :key="name"
-                    class="hand"
-                    @click="switchLocale(name)"
-                  >
-                    {{ label }}
-                  </li>
-                </ul>
-              </template>
-            </v-popover>
-          </div>
+          <LocaleSelector></LocaleSelector>
         </div>
       </div>
     </transition>

package/components/nav/WindowManager/ContainerLogs.vue

@@ -13,7 +13,7 @@ import Select from '@shell/components/form/Select';
 import day from 'dayjs';
 
 import { escapeHtml, escapeRegex } from '@shell/utils/string';
-import { NAME as VIRTUAL } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
 
 import Socket, {
   EVENT_CONNECTED,