@rancher/shell 0.3.16 → 0.3.17

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/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/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/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) {
@@ -468,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

package/components/form/__tests__/NodeAffinity.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils';
+import NodeAffinity from '@shell/components/form/NodeAffinity.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('component: NodeAffinity', () => {
+  it('should display the weight input when the priority is preferred', () => {
+    const nodeAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        preference: { matchExpressions: [] },
+        weight:     1
+      }],
+      requiredDuringSchedulingIgnoredDuringExecution: { nodeSelectorTerms: [{ matchExpressions: [] }] }
+    };
+    const wrapper = mount(NodeAffinity, { propsData: { mode: _CREATE, value: nodeAffinity } });
+
+    expect(wrapper.find('[data-testid="node-affinity-weight-index0"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-testid="node-affinity-weight-index1"]').exists()).toBeFalsy();
+  });
+
+  it('should display the weight input when the value is cleared', async() => {
+    const nodeAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        preference: { matchExpressions: [] },
+        weight:     1
+      }],
+    };
+
+    const wrapper = mount(NodeAffinity, { propsData: { mode: _CREATE, value: nodeAffinity } });
+
+    const weightInput = wrapper.find('[data-testid="node-affinity-weight-index0"]');
+
+    weightInput.setValue('');
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-testid="node-affinity-weight-index0"]').exists()).toBeTruthy();
+  });
+});

package/components/form/__tests__/PodAffinity.test.ts

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils';
+import PodAffinity from '@shell/components/form/PodAffinity.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('component: PodAffinity', () => {
+  it('should display the weight input when the priority is preferred', () => {
+    const podAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        podAffinityTerm: { topologyKey: 'test topology key 1' },
+        weight:          1
+      }],
+      requiredDuringSchedulingIgnoredDuringExecution: [{ topologyKey: 'test topology key 2' }]
+    };
+    const wrapper = mount(PodAffinity, {
+      propsData: {
+        mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
+      }
+    });
+
+    expect(wrapper.find('[data-testid="pod-affinity-weight-index0"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-testid="pod-affinity-weight-index1"]').exists()).toBeFalsy();
+  });
+
+  it('should display the weight input when the value is cleared', async() => {
+    const podAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        podAffinityTerm: { topologyKey: 'test topology key 1' },
+        weight:          1
+      }],
+    };
+
+    const wrapper = mount(PodAffinity, {
+      propsData: {
+        mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
+      }
+    });
+
+    const weightInput = wrapper.find('[data-testid="pod-affinity-weight-index0"]');
+
+    weightInput.setValue('');
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-testid="pod-affinity-weight-index0"]').exists()).toBeTruthy();
+  });
+});

package/components/formatter/ClusterLink.vue

@@ -1,5 +1,6 @@
 <script>
 import { get } from '@shell/utils/object';
+import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
   props: {
@@ -27,10 +28,10 @@ export default {
 
     statusErrorConditions() {
       if (this.row.hasError) {
-        return this.row?.status.conditions.filter((condition) => condition.error === true);
+        return this.row?.status.conditions.filter((cond) => cond.error === true && !isConditionReadyAndWaiting(cond));
       }
 
-      return false;
+      return [];
     },
 
     formattedConditions() {
@@ -46,7 +47,7 @@ export default {
         return formattedTooltip.toString().replaceAll(',', '');
       }
 
-      return false;
+      return '';
     },
   },
 
@@ -66,16 +67,19 @@ export default {
       v-if="row.unavailableMachines"
       v-clean-tooltip="row.unavailableMachines"
       class="conditions-alert-icon icon-alert icon"
+      data-testid="unavailable-machines-alert-icon"
     />
     <i
       v-if="row.rkeTemplateUpgrade"
       v-clean-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"
       class="template-upgrade-icon icon-alert icon"
+      data-testid="rke-template-upgrade-alert-icon"
     />
     <i
-      v-if="row.hasError"
+      v-if="row.hasError && statusErrorConditions.length > 0"
       v-clean-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
       class="conditions-alert-icon icon-error icon-lg"
+      data-testid="conditions-has-error-icon"
     />
   </span>
 </template>