@rancher/shell 0.1.3 → 0.1.21

package/components/Tabbed/index.vue

@@ -38,6 +38,17 @@ export default {
     noContent: {
       type:    Boolean,
       default: false,
+    },
+
+    // Remove padding and box-shadow
+    flat: {
+      type:    Boolean,
+      default: false,
+    },
+
+    tabsOnly: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -207,7 +218,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 +244,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>
@@ -251,7 +263,13 @@ export default {
       </ul>
       <slot name="tab-row-extras" />
     </ul>
-    <div :class="{ 'tab-container': !!tabs.length || !!sideTabs, 'no-content': noContent }">
+    <div
+      :class="{
+        'tab-container': !!tabs.length || !!sideTabs,
+        'no-content': noContent,
+        'tab-container--flat': !!flat,
+      }"
+    >
       <slot />
     </div>
   </div>
@@ -326,6 +344,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;
+    }
   }
 }
 
@@ -335,6 +362,28 @@ export default {
   &.no-content {
     padding: 0 0 3px 0;
   }
+
+  // Example case: Tabbed component within a tabbed component
+  &--flat {
+    padding: 0;
+
+    .side-tabs {
+      box-shadow: unset;
+    }
+  }
+}
+
+.tabs-only {
+  margin-bottom: 20px;
+
+  .tab-container {
+    display: none;
+  }
+
+  .tabs {
+    border: 0;
+    border-bottom: 2px solid var(--border);
+  }
 }
 
 .side-tabs {
@@ -347,12 +396,6 @@ export default {
     padding: 20px;
   }
 
-  // Tabbed component within a tabbed component
-  .tab-container & {
-    margin: -20px;
-    box-shadow: unset;
-  }
-
   & .tabs {
     width: $sideways-tabs-width;
     min-width: $sideways-tabs-width;
@@ -424,7 +467,9 @@ export default {
     }
   }
 
-  & .tab-container {
+  &
+
+  .tab-container {
     width: calc(100% - #{$sideways-tabs-width});
     flex-grow: 1;
     background-color: var(--body-bg);

package/components/TypeDescription.vue

@@ -1,7 +1,9 @@
 <script>
+import { mapGetters } from 'vuex';
 import { Banner } from '@components/Banner';
 import { HIDE_DESC, mapPref } from '@shell/store/prefs';
 import { addObject } from '@shell/utils/array';
+import { CATALOG } from '@shell/config/types';
 
 export default {
   components: { Banner },
@@ -14,10 +16,17 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     hideDescriptions: mapPref(HIDE_DESC),
 
     typeDescriptionKey() {
-      const key = `typeDescription."${ this.resource }"`;
+      let key;
+
+      if (this.resource === CATALOG.CLUSTER_REPO) {
+        key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
+      } else {
+        key = `typeDescription."${ this.resource }"`;
+      }
 
       if ( this.hideDescriptions.includes(this.resource) || this.hideDescriptions.includes('ALL') ) {
         return false;

package/components/auth/Principal.vue

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

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

@@ -16,6 +16,11 @@ export default {
       type:    Object,
       default: null,
     },
+
+    loading: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -80,6 +85,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :loading="loading"
     key-field="_key"
     v-on="$listeners"
   >

package/components/fleet/FleetRepos.vue

@@ -28,6 +28,11 @@ export default {
       type:     Object,
       required: true,
     },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -89,13 +94,14 @@ export default {
 
 <template>
   <div>
-    <FleetIntro v-if="noRows" />
+    <FleetIntro v-if="noRows && !loading" />
     <ResourceTable
       v-if="!noRows"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
       :rows="rows"
+      :loading="loading"
       key-field="_key"
       v-on="$listeners"
     >

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) {

package/components/form/Command.vue

@@ -36,6 +36,10 @@ export default {
         return {};
       },
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -200,6 +204,7 @@ export default {
       :config-maps="configMaps"
       :secrets="secrets"
       :value="value"
+      :loading="loading"
     />
   </div>
 </template>

package/components/form/EnvVars.vue

@@ -23,6 +23,10 @@ export default {
       type:     Array,
       required: true
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
     /**
      * Container spec
      */
@@ -107,6 +111,7 @@ export default {
         :all-secrets="secrets"
         :all-config-maps="configMaps"
         :mode="mode"
+        :loading="loading"
         @remove="removeRow(i)"
         @input="updateRow"
       />

package/components/form/KeyValue.vue

@@ -12,6 +12,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
 
 export default {
+  name: 'KeyValue',
+
   components: {
     Select,
     TextAreaAutoGrow,
@@ -22,6 +24,10 @@ export default {
       type:     [Array, Object],
       default: null,
     },
+    defaultValue: {
+      type:     [Array, Object],
+      default: null,
+    },
     // If the user supplies this array, then it indicates which keys should be shown as binary
     binaryValueKeys: {
       type:    [Array, Object],
@@ -223,68 +229,13 @@ export default {
     }
   },
   data() {
-    const rows = [];
-
-    if ( this.asMap ) {
-      const input = this.value || {};
-
-      Object.keys(input).forEach((key) => {
-        let value = input[key];
-        const decodedValue = base64Decode(input[key]);
-        const asciiValue = asciiLike(decodedValue);
-
-        if ( this.handleBase64 && asciiValue) {
-          value = base64Decode(value);
-        }
-
-        rows.push({
-          key,
-          value,
-          binary:    this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
-          canEncode: this.handleBase64 && asciiValue,
-          supported: true,
-        });
-      });
-    } else {
-      const input = this.value || [];
-
-      for ( const row of input ) {
-        let value = row[this.valueName] || '';
-        const decodedValue = base64Decode(row[this.valueName]);
-        const asciiValue = asciiLike(decodedValue);
-
-        if ( this.handleBase64 && asciiValue) {
-          value = base64Decode(value);
-        }
-        const entry = {
-          [this.keyName]:   row[this.keyName] || '',
-          [this.valueName]: value,
-          binary:           this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
-          canEncode:        this.handleBase64 && asciiValue,
-          supported:        this.supported(row),
-        };
-
-        this.preserveKeys?.map((k) => {
-          if ( typeof row[k] !== 'undefined' ) {
-            entry[k] = row[k];
-          }
-        });
-        rows.push(entry);
-      }
-    }
-    if ( !rows.length && this.initialEmptyRow ) {
-      rows.push({
-        [this.keyName]:   '',
-        [this.valueName]: '',
-        binary:           false,
-        canEncode:        this.handleBase64,
-        supported:        true
-      });
-    }
+    const rows = this.getRows(this.value);
 
     return { rows };
   },
+
   computed: {
+
     isView() {
       return this.mode === _VIEW;
     },
@@ -315,7 +266,78 @@ export default {
   created() {
     this.queueUpdate = debounce(this.update, 500);
   },
+  watch: {
+    defaultValue(neu) {
+      if (Array.isArray(neu)) {
+        this.rows = this.getRows(neu);
+        this.$emit('input', neu);
+      }
+    }
+  },
   methods: {
+    getRows(value) {
+      const rows = [];
+
+      if ( this.asMap ) {
+        const input = value || {};
+
+        Object.keys(input).forEach((key) => {
+          let value = input[key];
+          const decodedValue = base64Decode(input[key]);
+          const asciiValue = asciiLike(decodedValue);
+
+          if ( this.handleBase64 && asciiValue) {
+            value = base64Decode(value);
+          }
+
+          rows.push({
+            key,
+            value,
+            binary:    this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
+            canEncode: this.handleBase64 && asciiValue,
+            supported: true,
+          });
+        });
+      } else {
+        const input = value || [];
+
+        for ( const row of input ) {
+          let value = row[this.valueName] || '';
+          const decodedValue = base64Decode(row[this.valueName]);
+          const asciiValue = asciiLike(decodedValue);
+
+          if ( this.handleBase64 && asciiValue) {
+            value = base64Decode(value);
+          }
+          const entry = {
+            [this.keyName]:   row[this.keyName] || '',
+            [this.valueName]: value,
+            binary:           this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
+            canEncode:        this.handleBase64 && asciiValue,
+            supported:        this.supported(row),
+          };
+
+          this.preserveKeys?.map((k) => {
+            if ( typeof row[k] !== 'undefined' ) {
+              entry[k] = row[k];
+            }
+          });
+          rows.push(entry);
+        }
+      }
+      if ( !rows.length && this.initialEmptyRow ) {
+        rows.push({
+          [this.keyName]:   '',
+          [this.valueName]: '',
+          binary:           false,
+          canEncode:        this.handleBase64,
+          supported:        true
+        });
+      }
+
+      return rows;
+    },
+
     add(key = '', value = '') {
       const obj = {
         ...this.defaultAddData,

package/components/form/NameNsDescription.vue

@@ -5,7 +5,7 @@ import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { NAMESPACE } from '@shell/config/types';
 import { DESCRIPTION } from '@shell/config/labels-annotations';
-import { _VIEW, _EDIT } from '@shell/config/query-params';
+import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
@@ -224,15 +224,21 @@ export default {
       const namespaces = this.namespacesOverride || this.$store.getters[`${ currentStore }/all`](this.namespaceType);
 
       const filtered = namespaces.filter( this.namespaceFilter || ((namespace) => {
+        // By default, include the namespace in the dropdown.
+        let out = true;
+
         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;
+          out = !namespace.isSystem && !namespace.isFleetManaged;
         }
 
-        // By default, include the namespace in the dropdown.
-        return true;
+        if (this.mode === _CREATE) {
+          out = out && !!namespace.links.update;
+        }
+
+        return out;
       }));
 
       const withLabels = filtered.map(this.namespaceMapper || ((obj) => {
@@ -336,7 +342,7 @@ export default {
       }
 
       if (this.namespaced) {
-        this.$emit('isNamespaceNew', this.namespaces && !this.namespaces.find(n => n.value === val));
+        this.$emit('isNamespaceNew', !val || (this.namespaces && !this.namespaces.find(n => n.value === val)));
       }
 
       if (this.namespaceKey) {
@@ -355,10 +361,12 @@ export default {
       if (!e || e.value === '') { // The blank value in the dropdown is labeled "Create a New Namespace"
         this.createNamespace = true;
         this.$parent.$emit('createNamespace', true);
+        this.$emit('isNamespaceNew', true);
         Vue.nextTick(() => this.$refs.namespace.focus());
       } else {
         this.createNamespace = false;
         this.$parent.$emit('createNamespace', false);
+        this.$emit('isNamespaceNew', false);
       }
     }
   },

package/components/form/NodeScheduling.vue

@@ -31,7 +31,11 @@ export default {
     mode: {
       type:    String,
       default: 'create'
-    }
+    },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -177,6 +181,7 @@ export default {
             :options="nodes || []"
             :mode="mode"
             :multiple="false"
+            :loading="loading"
             @input="update"
           />
         </div>

package/components/form/PodAffinity.vue

@@ -40,6 +40,10 @@ export default {
       type:    Array,
       default: null
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -305,6 +309,7 @@ export default {
                 :placeholder="t('workload.scheduling.affinity.topologyKey.placeholder')"
                 :options="existingNodeLabels"
                 :disabled="mode==='view'"
+                :loading="loading"
                 @input="update"
               />
               <LabeledInput

package/components/form/ResourceTabs/index.vue

@@ -85,7 +85,11 @@ export default {
     showConditions() {
       const inStore = this.$store.getters['currentStore'](this.value.type);
 
-      return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
+      if ( this.$store.getters[`${ inStore }/schemaFor`](this.value.type) ) {
+        return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
+      }
+
+      return false;
     },
     showEvents() {
       return this.isView && this.needEvents && this.hasEvents && (this.events.length || this.alwaysShowEvents);

package/components/form/ServiceNameSelect.vue

@@ -60,6 +60,10 @@ export default {
       type:    Boolean,
       default: true,
     },
+    loading: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -134,6 +138,7 @@ export default {
         :option-label="optionLabel"
         :placement="$attrs.placement ? $attrs.placement : null"
         :v-bind="$attrs"
+        :loading="loading"
         @input="changeSelected"
       />
       <button

package/components/form/ValueFromResource.vue

@@ -34,7 +34,11 @@ export default {
     namespaced: {
       type:    Boolean,
       default: true
-    }
+    },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -300,6 +304,7 @@ export default {
           :get-option-key="opt=>opt.id|| opt"
           :mode="mode"
           :label="sourceLabel"
+          :loading="loading"
         />
       </div>
       <div v-if="type!=='secretRef' && type!== 'configMapRef'">
@@ -310,6 +315,7 @@ export default {
           :mode="mode"
           option-label="label"
           :label="t('workload.container.command.fromResource.key.label')"
+          :loading="loading"
           @input="updateRow"
         />
       </div>

package/components/formatter/ClusterLink.vue

@@ -25,12 +25,8 @@ export default {
       return this.row?.detailLocation;
     },
 
-    clusterHasIssues() {
-      return this.row.status?.conditions?.some(condition => condition.error === true);
-    },
-
     statusErrorConditions() {
-      if (this.clusterHasIssues) {
+      if (this.row.hasError) {
         return this.row?.status.conditions.filter(condition => condition.error === true);
       }
 
@@ -38,7 +34,7 @@ export default {
     },
 
     formattedConditions() {
-      if (this.clusterHasIssues) {
+      if (this.row.hasError) {
         const filteredConditions = this.statusErrorConditions;
         const formattedTooltip = [];
 
@@ -69,7 +65,7 @@ export default {
       class="template-upgrade-icon icon-alert icon"
     />
     <i
-      v-if="clusterHasIssues"
+      v-if="row.hasError"
       v-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
       class="conditions-alert-icon icon-error icon-lg"
     />

package/components/nav/NamespaceFilter.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import { NAMESPACE_FILTERS, DEV } from '@shell/store/prefs';
+import { NAMESPACE_FILTERS, ALL_NAMESPACES } 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';
@@ -322,8 +322,8 @@ export default {
 
   methods: {
     filterNamespaces(namespaces) {
-      if (this.$store.getters['prefs/get'](DEV)) {
-        // If developer tools are turned on in the user preferences,
+      if (this.$store.getters['prefs/get'](ALL_NAMESPACES)) {
+        // If all namespaces options are turned on in the user preferences,
         // return all namespaces including system namespaces and RBAC
         // management namespaces.
         return namespaces;