@rancher/shell 0.1.2 → 0.1.4

package/components/LocaleSelector.vue

@@ -0,0 +1,114 @@
+<script>
+import { mapGetters } from 'vuex';
+import Select from '@shell/components/form/Select.vue';
+
+export default {
+  name: 'LocalSelector',
+
+  components: { Select },
+
+  props: {
+    mode: {
+      type:    String,
+      default: ''
+    },
+  },
+
+  computed: {
+    ...mapGetters('i18n', ['selectedLocaleLabel', 'availableLocales']),
+
+    localesOptions() {
+      return Object.keys(this.availableLocales).map((value) => {
+        return {
+          label: this.t(`locale.${ value }`),
+          value
+        };
+      });
+    },
+
+    selectedOption() {
+      return Object.keys(this.availableLocales)[Object.values(this.availableLocales).indexOf(this.selectedLocaleLabel)];
+    },
+
+    showLocale() {
+      return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.dev;
+    },
+
+    showNone() {
+      return !!process.env.dev && this.dev;
+    },
+  },
+
+  methods: {
+    switchLocale($event) {
+      this.$store.dispatch('i18n/switchTo', $event);
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="mode === 'login'">
+      <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>
+    </div>
+    <div v-else>
+      <Select
+        :value="selectedOption"
+        :options="localesOptions"
+        @input="switchLocale($event)"
+      />
+    </div>
+  </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';
@@ -117,7 +116,12 @@ export default {
     getCustomDetailLink: {
       type:    Function,
       default: null
-    }
+    },
+
+    ignoreFilter: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -133,7 +137,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster']),
+    ...mapGetters(['currentProduct']),
     isNamespaced() {
       if ( this.namespaced !== null ) {
         return this.namespaced;
@@ -196,11 +200,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) || this.ignoreFilter) {
         return this.rows || [];
       }
 
@@ -212,7 +214,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/SimpleBox.vue

@@ -29,10 +29,12 @@ export default {
 
 <template>
   <div v-if="shown" class="simple-box" v-on="$listeners">
-    <div v-if="title || canClose" class="top">
-      <h2 v-if="title">
-        {{ title }}
-      </h2>
+    <div v-if="title || canClose || $slots.title" class="top">
+      <slot name="title">
+        <h2 v-if="title">
+          {{ title }}
+        </h2>
+      </slot>
       <div v-if="canClose || pref" class="close-button" @click="closeBox($event)">
         <i class="icon icon-close" />
       </div>

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

@@ -22,16 +22,8 @@ import actions from './actions';
 
 // 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;
-});
+// NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
+export const FORMATTERS = {};
 
 export const COLUMN_BREAKPOINTS = {
   /**
@@ -334,6 +326,7 @@ export default {
     clearTimeout(this._loadingDelayTimer);
     clearTimeout(this._liveColumnsTimer);
     clearTimeout(this._delayedColumnsTimer);
+    clearTimeout(this.manualRefreshTimer);
 
     const $main = $('main');
 
@@ -348,33 +341,31 @@ export default {
     descending(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     searchQuery(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     sortFields(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     groupBy(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     namespaces(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     page(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
 
     // 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) {
@@ -382,9 +373,11 @@ export default {
 
       // setTimeout is needed so that this is pushed further back on the JS computing queue
       // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
-      setTimeout(() => {
-        this.watcherUpdateLiveAndDelayed(neu, old);
-      }, 500);
+      if (old && !neu) {
+        this.manualRefreshTimer = setTimeout(() => {
+          this.watcherUpdateLiveAndDelayed(neu, old);
+        }, 1000);
+      }
     }
   },
 
@@ -400,7 +393,7 @@ export default {
     },
 
     initalLoad() {
-      return !this.loading && !this._didinit && this.rows?.length;
+      return !!(!this.loading && !this._didinit && this.rows?.length);
     },
 
     fullColspan() {
@@ -863,7 +856,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/Tabbed/Tab.vue

@@ -36,6 +36,11 @@ export default {
       type:    Boolean,
       default: false
     },
+    badge: {
+      default:  0,
+      required: false,
+      type:     Number
+    },
   },
 
   data() {

package/components/Tabbed/index.vue

@@ -38,6 +38,11 @@ export default {
     noContent: {
       type:    Boolean,
       default: false,
+    },
+
+    tabsOnly: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -207,7 +212,7 @@ export default {
 </script>
 
 <template>
-  <div :class="{'side-tabs': !!sideTabs }">
+  <div :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }">
     <ul
       ref="tablist"
       role="tablist"
@@ -233,6 +238,7 @@ export default {
           @click.prevent="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
+          <span v-if="tab.badge" class="tab-badge">{{ tab.badge }}</span>
           <i v-if="hasIcon(tab)" v-tooltip="t('validation.tab')" class="conditions-alert-icon icon-error icon-lg" />
         </a>
       </li>
@@ -326,6 +332,15 @@ export default {
         color: var(--error);
       }
     }
+
+    .tab-badge {
+      margin-left: 5px;
+      background-color: var(--link);
+      color: #fff;
+      border-radius: 6px;
+      padding: 1px 7px;
+      font-size: 11px;
+    }
   }
 }
 
@@ -337,6 +352,19 @@ export default {
   }
 }
 
+.tabs-only {
+  margin-bottom: 20px;
+
+  .tab-container {
+    display: none;
+  }
+
+  .tabs {
+    border: 0;
+    border-bottom: 2px solid var(--border);
+  }
+}
+
 .side-tabs {
   display: flex;
   box-shadow: 0 0 20px var(--shadow);
@@ -349,7 +377,6 @@ export default {
 
   // Tabbed component within a tabbed component
   .tab-container & {
-    margin: -20px;
     box-shadow: unset;
   }
 

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 {
@@ -159,6 +159,7 @@ export default {
     .name {
       grid-area: name;
       line-height: math.div($size, 2);
+      overflow-wrap: anywhere;
     }
 
     .description {

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/FleetBundles.vue

@@ -103,9 +103,14 @@ export default {
       return out;
     },
   },
+
+  methods: {
+    displayWarning(row) {
+      return !!row.status?.summary && (row.status.summary.desiredReady !== row.status.summary.ready);
+    }
+  }
 };
 </script>
-
 <template>
   <div>
     <Loading v-if="$fetchState.pending" />
@@ -117,9 +122,9 @@ export default {
         :rows="bundles"
       >
         <template #cell:deploymentsReady="{row}">
-          <span v-if="row.status.summary.desiredReady != row.status.summary.ready" class="text-warning">
+          <span v-if="displayWarning(row)" class="text-warning">
             {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
-          <span v-else>{{ row.status.summary.desiredReady }}</span>
+          <span v-else-if="row.status">{{ row.status.summary.desiredReady }}</span>
         </template>
       </ResourceTable>
     </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/fleet/FleetSummary.vue

@@ -84,6 +84,12 @@ export default {
       const out = { ...getResourceDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
 
       resources.forEach(({ status, metadata }) => {
+        if (!status) {
+          out[STATES_ENUM.UNKNOWN].count += 1;
+
+          return;
+        }
+
         const k = status?.summary.ready > 0 && status?.summary.desiredReady === status.summary.ready;
 
         if (k) {