@rancher/shell 0.3.15 → 0.3.17

package/chart/rancher-backup/index.vue

@@ -154,6 +154,9 @@ export default {
       }
 
       return 'none';
+    },
+    updatePageValid(update) {
+      this.$emit('valid', update);
     }
   },
   get
@@ -189,6 +192,7 @@ export default {
         :value="value.s3"
         :secrets="secrets"
         :mode="mode"
+        @valid="updatePageValid($event)"
       />
       <template v-else>
         <div class="row">

package/cloud-credential/generic.vue

@@ -33,7 +33,7 @@ export default {
     for ( const k of keyOptions ) {
       const sk = simplify(k);
 
-      if ( normanSchema || likelyFields.includes(sk) || iffyFields.includes(sk) ) {
+      if ( normanSchema?.resourceFields || likelyFields.includes(sk) || iffyFields.includes(sk) ) {
         keys.push(k);
       }
     }

package/components/BannerGraphic.vue

@@ -53,6 +53,7 @@ export default {
     <div
       v-if="pref"
       class="close-button"
+      data-testid="graphic-banner-close"
       @click="hide()"
     >
       <i class="icon icon-close" />

package/components/CommunityLinks.vue

@@ -138,6 +138,7 @@ export default {
     >
       <div class="wechat-modal">
         <h1>{{ t('footer.wechat.modalText') }}</h1>
+        <h1>{{ t('footer.wechat.modalText2') }}</h1>
         <div class="qr-img" />
         <div>
           <button

package/components/CruResource.vue

@@ -288,7 +288,7 @@ export default {
     closeError(index) {
       const errors = this.errors.filter((_, i) => i !== index);
 
-      this.$emit('error', errors);
+      this.$emit('error', errors, this.errors[index]);
     },
 
     emitOrRoute() {

package/components/EmberPage.vue

@@ -252,6 +252,7 @@ export default {
       if (iframeEl === null) {
         iframeEl = document.createElement('iframe');
         iframeEl.setAttribute('id', EMBER_FRAME);
+        iframeEl.setAttribute('data-testid', EMBER_FRAME);
         iframeEl.classList.add(EMBER_FRAME_HIDE_CLASS);
 
         if (this.inline) {

package/components/FileDiff.vue

@@ -1,5 +1,6 @@
 <script>
-import { Diff2Html } from 'diff2html';
+import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';
+
 import { createPatch } from 'diff';
 
 export default {
@@ -38,36 +39,40 @@ export default {
     }
   },
 
-  computed: {
-    html() {
-      const outputFormat = this.sideBySide ? 'side-by-side' : 'line-by-line';
-      const showFiles = false;
-      const matching = 'words';
+  mounted() {
+    this.draw();
+  },
+
+  watch: {
+    sideBySide() {
+      this.draw();
+    }
+  },
 
+  methods: {
+    draw() {
+      const targetElement = document.getElementById('diffElement');
       const patch = createPatch(
         this.filename,
         this.orig,
         this.neu
       );
+      const configuration = {
+        // UI
+        synchronisedScroll: true,
 
-      const json = Diff2Html.getJsonFromDiff(patch, {
-        inputFormat: 'diff',
-        outputFormat,
-        showFiles,
-        matching
-      });
-
-      return Diff2Html.getPrettyHtml(json, {
-        inputFormat:        'json',
-        outputFormat,
-        showFiles,
-        matching,
-        synchronizedScroll: true,
-      });
-    }
-  },
+        // Base
+        outputFormat: this.sideBySide ? 'side-by-side' : 'line-by-line',
+        drawFileList: false,
+        matching:     'words',
+      };
+
+      const diff2htmlUi = new Diff2HtmlUI(targetElement, patch, configuration);
+
+      diff2htmlUi.draw();
+      this.fit();
+    },
 
-  methods: {
     fit() {
       if ( !this.autoResize ) {
         return;
@@ -97,8 +102,8 @@ export default {
   <div>
     <resize-observer @notify="fit" />
     <div
+      id="diffElement"
       ref="root"
-      v-clean-html="html"
       class="root"
     />
   </div>
@@ -112,66 +117,68 @@ export default {
 }
 </style>
 
-<style lang="scss">
-@import 'node_modules/diff2html/dist/diff2html.min.css';
-
-.d2h-file-header {
-  display: none;
-}
-
-.d2h-file-wrapper {
-  border-color: var(--diff-border);
-}
-
-.d2h-diff-table {
-  font-family: Menlo,Consolas,monospace;
-  font-size: 13px;
-}
-
-.d2h-emptyplaceholder, .d2h-code-side-emptyplaceholder {
-  border-color: var(--diff-linenum-border);
-  background-color: var(--diff-empty-placeholder);
-}
-
-.d2h-code-linenumber,
-.d2h-code-side-linenumber {
-  background-color: var(--diff-linenum-bg);
-  color: var(--diff-linenum);
-  border-color: var(--diff-linenum-border);
-  border-left: 0;
-}
-
-.d2h-code-line del,.d2h-code-side-line del {
-  background-color: var(--diff-line-del-bg);
-}
-
-.d2h-code-line ins,.d2h-code-side-line ins {
-  background-color: var(--diff-line-ins-bg);
-}
-
-.d2h-del {
-  background-color: var(--diff-del-bg);
-  border-color: var(--diff-del-border);
-  color: var(--body-text);
-}
-
-.d2h-ins {
-  background-color: var(--diff-ins-bg);
-  border-color: var(--diff-ins-border);
-  color: var(--body-text);
-}
-
-.d2h-info {
-  background-color: var(--diff-header-bg);
-  color: var(--diff-header);
-  border-color: var(--diff-header-border);
-}
-
-.d2h-file-diff .d2h-del.d2h-change {
-  background-color: var(--diff-chg-del);
-}
-
-.d2h-file-diff .d2h-ins.d2h-change {
-  background-color: var(--diff-chg-ins);
+<style scoped lang="scss">
+@import 'node_modules/diff2html/bundles/css/diff2html.min.css';
+
+::v-deep .d2h-wrapper {
+  .d2h-file-header {
+    display: none;
+  }
+
+  .d2h-file-wrapper {
+    border-color: var(--diff-border);
+  }
+
+  .d2h-diff-table {
+    font-family: Menlo,Consolas,monospace;
+    font-size: 13px;
+  }
+
+  .d2h-emptyplaceholder, .d2h-code-side-emptyplaceholder {
+    border-color: var(--diff-linenum-border);
+    background-color: var(--diff-empty-placeholder);
+  }
+
+  .d2h-code-linenumber,
+  .d2h-code-side-linenumber {
+    background-color: var(--diff-linenum-bg);
+    color: var(--diff-linenum);
+    border-color: var(--diff-linenum-border);
+    border-left: 0;
+  }
+
+  .d2h-code-line del,.d2h-code-side-line del {
+    background-color: var(--diff-line-del-bg);
+  }
+
+  .d2h-code-line ins,.d2h-code-side-line ins {
+    background-color: var(--diff-line-ins-bg);
+  }
+
+  .d2h-del {
+    background-color: var(--diff-del-bg);
+    border-color: var(--diff-del-border);
+    color: var(--body-text);
+  }
+
+  .d2h-ins {
+    background-color: var(--diff-ins-bg);
+    border-color: var(--diff-ins-border);
+    color: var(--body-text);
+  }
+
+  .d2h-info {
+    background-color: var(--diff-header-bg);
+    color: var(--diff-header);
+    border-color: var(--diff-header-border);
+  }
+
+  .d2h-file-diff .d2h-del.d2h-change {
+    background-color: var(--diff-chg-del);
+  }
+
+  .d2h-file-diff .d2h-ins.d2h-change {
+    background-color: var(--diff-chg-ins);
+  }
 }
 </style>

package/components/GrafanaDashboard.vue

@@ -259,10 +259,16 @@ export default {
       v-if="!loading && !error"
       class="external-link"
     >
+      <!-- https://github.com/harvester/harvester-installer/pull/512/files -->
+      <!-- It is necessary to include the parameter referer when accessing the Grafana page. -->
+      <!-- This parameter is required by the backend to identify the origin of the request from which cluster -->
+      <!-- The matching mechanism as follows: -->
+      <!-- ~.*/k8s/clusters/(c-m-.+)/.* -->
+      <!-- ~.*/dashboard/harvester/c/(c-m-.+)/.* -->
       <a
         :href="grafanaUrl"
         target="_blank"
-        rel="noopener noreferrer nofollow"
+        rel="noopener nofollow"
       >{{ t('grafanaDashboard.grafana') }} <i class="icon icon-external-link" /></a>
     </div>
   </div>

package/components/ResourceDetail/index.vue

@@ -193,6 +193,9 @@ export default {
           opt:  { watch: true }
         });
       } catch (e) {
+        if (e.status === 404 || e.status === 403) {
+          store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceIdNotFound', { resource, fqid }, true)));
+        }
         liveModel = {};
         notFound = fqid;
       }
@@ -367,18 +370,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else-if="notFound">
-    <IconMessage icon="icon-warning">
-      <template v-slot:message>
-        {{ t('generic.notFound') }}
-        <div>
-          <div>{{ t('generic.type') }}: {{ resource }}</div>
-          <div>{{ t('generic.id') }}: {{ notFound }}</div>
-        </div>
-      </template>
-    </IconMessage>
-  </div>
+  <Loading v-if="$fetchState.pending || notFound" />
   <div v-else>
     <Masthead
       v-if="showMasthead"

package/components/ResourceList/index.vue

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

package/components/ResourceTable.vue

@@ -4,8 +4,9 @@ import { get } from '@shell/utils/object';
 import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
-import { NAMESPACE } from '@shell/config/table-headers';
+import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
+import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -57,6 +58,12 @@ export default {
       required: false
     },
 
+    keyField: {
+      // Field that is unique for each row.
+      type:    String,
+      default: '_key',
+    },
+
     headers: {
       type:    Array,
       default: null,
@@ -216,6 +223,7 @@ export default {
     _headers() {
       let headers;
       const showNamespace = this.showNamespaceColumn;
+      const type = this.schema?.id || this.$route?.params?.resource || undefined;
 
       if ( this.headers ) {
         headers = this.headers.slice();
@@ -223,6 +231,46 @@ export default {
         headers = this.$store.getters['type-map/headersFor'](this.schema);
       }
 
+      // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
+      // gate it so that we prevent errors on older versions of dashboard
+      if (this.$store.$plugin?.getUIConfig) {
+        const extensionCols = this.$store.$plugin.getUIConfig(ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE);
+
+        // Try and insert the columns before the Age column
+        let insertPosition = headers.length;
+
+        if (headers.length > 0) {
+          const ageColIndex = headers.findIndex((h) => h.name === AGE.name);
+
+          if (ageColIndex >= 0) {
+            insertPosition = ageColIndex;
+          } else {
+            // we've found some labels with ' ', which isn't necessarily empty (explore action/button)
+            // if we are to add cols, let's push them before these so that the UI doesn't look weird
+            const lastViableColIndex = headers.findIndex((h) => (!h.label || !h.label?.trim()) && (!h.labelKey || !h.labelKey?.trim()));
+
+            if (lastViableColIndex >= 0) {
+              insertPosition = lastViableColIndex;
+            }
+          }
+        }
+
+        // adding extension defined cols to the correct header config
+        extensionCols.forEach((col) => {
+          if (col.locationConfig.resource) {
+            col.locationConfig.resource.forEach((resource) => {
+              if (resource && type === resource) {
+                // we need the 'value' prop to be populated in order for the rows to show the values
+                if (!col.value && col.getValue) {
+                  col.value = col.getValue;
+                }
+                headers.splice(insertPosition, 0, col);
+              }
+            });
+          }
+        });
+      }
+
       // If only one namespace is selected, hide the namespace column
       if ( !showNamespace ) {
         const idx = headers.findIndex((header) => header.name === NAMESPACE.name);
@@ -447,7 +495,7 @@ export default {
     :has-advanced-filtering="hasAdvancedFiltering"
     :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
     :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
-    key-field="_key"
+    :key-field="keyField"
     :sort-generation-fn="safeSortGenerationFn"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :force-update-live-and-delayed="forceUpdateLiveAndDelayed"

package/components/SimpleBox.vue

@@ -31,6 +31,7 @@ export default {
   <div
     v-if="shown"
     class="simple-box"
+    data-testid="simple-box-container"
     v-on="$listeners"
   >
     <div

package/components/SortableTable/index.vue

@@ -903,7 +903,10 @@ export default {
 </script>
 
 <template>
-  <div ref="container">
+  <div
+    ref="container"
+    data-testid="cluster-list-container"
+  >
     <div
       :class="{'titled': $slots.title && $slots.title.length}"
       class="sortable-table-header"
@@ -1001,6 +1004,7 @@ export default {
         <div
           v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || ($slots['header-right'] && $slots['header-right'].length)"
           class="search row"
+          data-testid="search-box-filter-row"
         >
           <ul
             v-if="hasAdvancedFiltering"

package/components/YamlEditor.vue

@@ -241,6 +241,7 @@ export default {
       :side-by-side="diffMode === 'split'"
       :orig="original"
       :neu="curValue"
+      :footer-space="80"
     />
   </div>
 </template>

package/components/auth/RoleDetailEdit.vue

@@ -668,6 +668,7 @@ export default {
                     :value="getRule('resources', props.row.value)"
                     :disabled="isBuiltin"
                     :options="resourceOptions"
+                    option-key="optionKey"
                     :searchable="true"
                     :taggable="true"
                     :mode="mode"

package/components/form/GitPicker.vue

@@ -357,7 +357,7 @@ export default Vue.extend<Data, any, any, any>({
       <div class="spacer">
         <LabeledInput
           v-model="selectedAccOrOrg"
-          data-testid="epinio_app-source_git-username"
+          data-testid="git_picker-username-or-org"
           :tooltip="t(`gitPicker.${ type }.username.tooltip`)"
           :label="t(`gitPicker.${ type }.username.inputLabel`)"
           :required="true"

package/components/form/NameNsDescription.vue

@@ -8,16 +8,7 @@ import { DESCRIPTION } from '@shell/config/labels-annotations';
 import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-
-export function normalizeName(str) {
-  return (str || '')
-    .trim()
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .replace(/^-+/, '')
-    .replace(/-+$/, '');
-}
+import { normalizeName } from '@shell/utils/kube';
 
 export default {
   name:       'NameNsDescription',
@@ -101,10 +92,20 @@ export default {
       type:    Boolean,
       default: false
     },
+    /**
+     * Use these objects instead of namespaces
+     */
     namespacesOverride: {
       type:    Array,
       default: null,
     },
+    /**
+     * User these namespaces instead of determining list within component
+     */
+    namespaceOptions: {
+      type:    Array,
+      default: null,
+    },
     createNamespaceOverride: {
       type:    Boolean,
       default: false,
@@ -228,8 +229,23 @@ export default {
      * Map namespaces from the store to options, adding divider and create button
      */
     options() {
-      const namespaces = this.namespacesOverride ||
-        (Object.keys(this.isCreate ? this.allowedNamespaces() : this.namespaces()));
+      let namespaces;
+
+      if (this.namespacesOverride) {
+        // Use the resources provided
+        namespaces = this.namespacesOverride;
+      } else {
+        if (this.namespaceOptions) {
+          // Use the namespaces provided
+          namespaces = (this.namespaceOptions.map((ns) => ns.name) || []).sort();
+        } else {
+          // Determine the namespaces
+          const namespaceObjs = this.isCreate ? this.allowedNamespaces() : this.namespaces();
+
+          namespaces = Object.keys(namespaceObjs);
+        }
+      }
+
       const options = namespaces
         .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
         .map(this.namespaceMapper || ((obj) => ({

package/components/form/NodeAffinity.vue

@@ -156,7 +156,7 @@ export default {
     },
 
     priorityDisplay(term) {
-      return term.weight ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
+      return 'weight' in term ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
     },
 
     updateExpressions(row, expressions) {
@@ -212,7 +212,7 @@ export default {
               />
             </div>
             <div
-              v-if="props.row.value.weight"
+              v-if="'weight' in props.row.value"
               class="col span-3"
             >
               <LabeledInput

package/components/form/PodAffinity.vue

@@ -286,7 +286,7 @@ export default {
     },
 
     priorityDisplay(term) {
-      return term.weight ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
+      return 'weight' in term ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
     },
 
     changeNamespaceMode(val, term, idx) {
@@ -340,6 +340,11 @@ export default {
       this.queueUpdate();
     },
 
+    updateLabelSelector(e, props) {
+      this.set(props.row.value, 'labelSelector.matchExpressions', e);
+      this.queueUpdate();
+    },
+
     isEmpty,
     get,
     set
@@ -431,7 +436,7 @@ export default {
             :value="get(props.row.value, 'labelSelector.matchExpressions')"
             :show-remove="false"
             :data-testid="`pod-affinity-expressions-index${props.i}`"
-            @input="e=>set(props.row.value, 'labelSelector.matchExpressions', e)"
+            @input="e=>updateLabelSelector(e, props)"
           />
           <div class="row mt-20">
             <div class="col span-9">
@@ -463,7 +468,7 @@ export default {
               />
             </div>
             <div
-              v-if="props.row.value.weight"
+              v-if="'weight' in props.row.value"
               class="col span-3"
             >
               <LabeledInput

package/components/form/ResourceTabs/index.vue

@@ -13,6 +13,7 @@ import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -60,6 +61,11 @@ export default {
     needRelated: {
       type:    Boolean,
       default: true
+    },
+
+    extensionParams: {
+      type:    Object,
+      default: null
     }
   },
 
@@ -71,7 +77,7 @@ export default {
       allEvents:     [],
       selectedTab:   this.defaultTab,
       didLoadEvents: false,
-      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route),
+      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
     };
   },
 
@@ -140,7 +146,7 @@ export default {
     },
     conditionsHaveIssues() {
       if (this.showConditions) {
-        return this.value.status?.conditions?.some((cond) => cond.error);
+        return this.value.status?.conditions?.filter((cond) => !isConditionReadyAndWaiting(cond)).some((cond) => cond.error);
       }
 
       return false;

package/components/form/Select.vue

@@ -134,11 +134,27 @@ export default {
 
       return true;
     },
+    /**
+     * Get a unique value to represent the option
+     */
     getOptionKey(opt) {
+      // Use the property from a component level key
+      if (opt && this.optionKey) {
+        return get(opt, this.optionKey);
+      }
+
+      // Use the property from an option level key
+      // This doesn't seem right, think it was meant to represent the actual option key... rather than the key to find the option key
+      // This approach also doesn't appear in LabeledSelect
       if (opt?.optionKey) {
+        // opt.optionKey should in theory be optionKeyKey
         return get(opt, opt.optionKey);
       }
 
+      // There's no configuration to help us get a sensible key. Fall back on ..
+      // - the label
+      // - something random
+
       const label = this.getOptionLabel(opt);
 
       // label may be type of object