@rancher/shell 3.0.2-rc.5 → 3.0.2-rc.6

package/components/Wizard.vue

@@ -154,7 +154,9 @@ export default {
     },
 
     canNext() {
-      return (this.activeStepIndex < this.visibleSteps.length - 1) && this.activeStep.ready;
+      const activeStep = this.visibleSteps[this.activeStepIndex];
+
+      return (this.activeStepIndex < this.visibleSteps.length - 1) && activeStep.ready;
     },
 
     readySteps() {
@@ -277,124 +279,126 @@ export default {
       class="outer-container"
       :class="{'hide': !stepsLoaded}"
     >
-      <div class="header">
-        <div class="title">
-          <div
-            v-if="showBanner"
-            class="top choice-banner"
-          >
-            <slot
-              v-if="!!bannerImage || !!bannerTitle"
-              name="bannerTitle"
+      <div>
+        <div class="header">
+          <div class="title">
+            <div
+              v-if="showBanner"
+              class="top choice-banner"
             >
-              <div
-                v-show="initialTitle || activeStepIndex > 0"
-                class="title"
+              <slot
+                v-if="!!bannerImage || !!bannerTitle"
+                name="bannerTitle"
               >
-                <!-- Logo -->
-                <slot name="bannerTitleImage">
-                  <div
-                    v-if="bannerImage"
-                    class="round-image"
-                  >
-                    <LazyImage
-                      :src="bannerImage"
-                      class="logo"
-                    />
+                <div
+                  v-show="initialTitle || activeStepIndex > 0"
+                  class="title"
+                >
+                  <!-- Logo -->
+                  <slot name="bannerTitleImage">
+                    <div
+                      v-if="bannerImage"
+                      class="round-image"
+                    >
+                      <LazyImage
+                        :src="bannerImage"
+                        class="logo"
+                      />
+                    </div>
+                  </slot>
+                  <!-- Title with subtext -->
+                  <div class="subtitle">
+                    <h2 v-if="bannerTitle">
+                      {{ bannerTitle }}
+                    </h2>
+                    <span
+                      v-if="bannerTitleSubtext"
+                      class="subtext"
+                    >{{ bannerTitleSubtext }}</span>
                   </div>
-                </slot>
-                <!-- Title with subtext -->
-                <div class="subtitle">
-                  <h2 v-if="bannerTitle">
-                    {{ bannerTitle }}
-                  </h2>
+                </div>
+              </slot>
+              <!-- Step number with subtext -->
+              <div
+                v-if="activeStep && showSteps"
+                class="subtitle"
+              >
+                <h2>{{ !!headerMode ? t(`wizard.${headerMode}`) : t(`asyncButton.${finishMode}.action`) }}: {{ t('wizard.step', {number:activeStepIndex+1}) }}</h2>
+                <slot name="bannerSubtext">
                   <span
-                    v-if="bannerTitleSubtext"
+                    v-if="activeStep.subtext !== null"
                     class="subtext"
-                  >{{ bannerTitleSubtext }}</span>
-                </div>
+                  >{{ activeStep.subtext || activeStep.label }}</span>
+                </slot>
               </div>
-            </slot>
-            <!-- Step number with subtext -->
-            <div
-              v-if="activeStep && showSteps"
-              class="subtitle"
-            >
-              <h2>{{ !!headerMode ? t(`wizard.${headerMode}`) : t(`asyncButton.${finishMode}.action`) }}: {{ t('wizard.step', {number:activeStepIndex+1}) }}</h2>
-              <slot name="bannerSubtext">
-                <span
-                  v-if="activeStep.subtext !== null"
-                  class="subtext"
-                >{{ activeStep.subtext || activeStep.label }}</span>
-              </slot>
             </div>
-          </div>
-          <div class="step-sequence">
-            <ul
-              v-if="showSteps"
-              class="steps"
-              tabindex="0"
-              @keyup.right.stop="selectNext(1)"
-              @keyup.left.stop="selectNext(-1)"
-            >
-              <template
-                v-for="(step, idx ) in visibleSteps"
-                :key="idx"
+            <div class="step-sequence">
+              <ul
+                v-if="showSteps"
+                class="steps"
+                tabindex="0"
+                @keyup.right.stop="selectNext(1)"
+                @keyup.left.stop="selectNext(-1)"
               >
-                <li
-
-                  :id="step.name"
-                  :class="{step: true, active: step.name === activeStep.name, disabled: !isAvailable(step)}"
-                  role="presentation"
+                <template
+                  v-for="(step, idx ) in visibleSteps"
+                  :key="idx"
                 >
-                  <span
-                    :aria-controls="'step' + idx+1"
-                    :aria-selected="step.name === activeStep.name"
-                    role="tab"
-                    class="controls"
-                    @click.prevent="goToStep(idx+1, true)"
+                  <li
+
+                    :id="step.name"
+                    :class="{step: true, active: step.name === activeStep.name, disabled: !isAvailable(step)}"
+                    role="presentation"
                   >
                     <span
-                      class="icon icon-lg"
-                      :class="{'icon-dot': step.name === activeStep.name, 'icon-dot-open':step.name !== activeStep.name}"
-                    />
-                    <span>
-                      {{ step.label }}
+                      :aria-controls="'step' + idx+1"
+                      :aria-selected="step.name === activeStep.name"
+                      role="tab"
+                      class="controls"
+                      @click.prevent="goToStep(idx+1, true)"
+                    >
+                      <span
+                        class="icon icon-lg"
+                        :class="{'icon-dot': step.name === activeStep.name, 'icon-dot-open':step.name !== activeStep.name}"
+                      />
+                      <span>
+                        {{ step.label }}
+                      </span>
                     </span>
-                  </span>
-                </li>
-                <div
-                  v-if="idx!==visibleSteps.length-1"
-                  :key="step.name"
-                  class="divider"
-                />
-              </template>
-            </ul>
+                  </li>
+                  <div
+                    v-if="idx!==visibleSteps.length-1"
+                    :key="step.name"
+                    class="divider"
+                  />
+                </template>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
-      <slot
-        class="step-container"
-        name="stepContainer"
-        :activeStep="activeStep"
-      >
-        <template
-          v-for="(step, i) in steps"
-          :key="i"
+        <slot
+          class="step-container"
+          name="stepContainer"
+          :activeStep="activeStep"
         >
-          <div
-            v-if="step.name === activeStep.name || step.hidden"
-            :key="step.name"
-            class="step-container__step"
-            :class="{'hide': step.name !== activeStep.name && step.hidden}"
+          <template
+            v-for="(step, i) in steps"
+            :key="i"
           >
-            <slot
-              :step="step"
-              :name="step.name"
-            />
-          </div>
-        </template>
-      </slot>
+            <div
+              v-if="step.name === activeStep.name || step.hidden"
+              :key="step.name"
+              class="step-container__step"
+              :class="{'hide': step.name !== activeStep.name && step.hidden}"
+            >
+              <slot
+                :step="step"
+                :name="step.name"
+              />
+            </div>
+          </template>
+        </slot>
+      </div>
       <slot
         name="controlsContainer"
         :showPrevious="showPrevious"
@@ -491,7 +495,7 @@ $spacer: 10px;
   flex-direction: column;
   flex: 1;
   padding: 0;
-  justify-content: flex-start;
+  justify-content: space-between;
 }
 
 .header {

package/components/YamlEditor.vue

@@ -28,6 +28,11 @@ export default {
       }
     },
 
+    mode: {
+      type:    String,
+      default: '',
+    },
+
     asObject: {
       type:    Boolean,
       default: false,
@@ -213,17 +218,21 @@ export default {
         class="btn-group btn-sm diff-mode"
       >
         <button
+          role="button"
+          :aria-label="t('generic.unified')"
           type="button"
           class="btn btn-sm bg-default"
           :class="{'active': diffMode !== 'split'}"
           @click="diffMode='unified'"
-        >Unified</button>
+        >{{ t('generic.unified') }}</button>
         <button
+          role="button"
+          :aria-label="t('generic.split')"
           type="button"
           class="btn btn-sm bg-default"
           :class="{'active': diffMode === 'split'}"
           @click="diffMode='split'"
-        >Split</button>
+        >{{ t('generic.split') }}</button>
       </span>
     </div>
     <CodeMirror
@@ -234,6 +243,7 @@ export default {
       :options="codeMirrorOptions"
       :showKeyMapBox="true"
       :data-testid="componentTestid + '-code-mirror'"
+      :mode="mode"
       @onInput="onInput"
       @onReady="onReady"
       @onChanges="onChanges"

package/components/__tests__/Collapse.test.ts

@@ -21,13 +21,13 @@ describe('component: Collapse.vue', () => {
   describe('collapsed', () => {
     const wrapper = mount(Collapse, { props: { open: true } });
 
-    it('is collapse', () => {
+    it('is collapsed', () => {
       const content = wrapper.find(`[data-testid="collapse-content"]`);
 
       expect(content.element).toBeDefined();
     });
 
-    it('icon should is chevron down', () => {
+    it('icon is chevron down', () => {
       const icon = wrapper.find(`[data-testid="collapse-icon-down"]`);
 
       expect(icon.element).toBeDefined();

package/components/auth/Principal.vue

@@ -20,23 +20,7 @@ export default {
   },
 
   async fetch() {
-    this.principal = this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.value);
-
-    if ( this.principal ) {
-      return;
-    }
-
-    const principalId = escape(this.value).replace(/\//g, '%2F');
-
-    try {
-      this.principal = await this.$store.dispatch('rancher/find', {
-        type: NORMAN.PRINCIPAL,
-        id:   this.value,
-        opt:  { url: `/v3/principals/${ principalId }` }
-      });
-    } catch (e) {
-      console.error('Failed to fetch principal', this.value, principalId); // eslint-disable-line no-console
-    }
+    this.loadData();
   },
 
   data() {
@@ -51,6 +35,34 @@ export default {
       return p.name && p.loginName && p.name.trim().toLowerCase() !== p.loginName.trim().toLowerCase();
     }
   },
+
+  methods: {
+    async loadData() {
+      this.principal = this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.value);
+
+      if ( this.principal ) {
+        return;
+      }
+
+      const principalId = escape(this.value).replace(/\//g, '%2F');
+
+      try {
+        this.principal = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.PRINCIPAL,
+          id:   this.value,
+          opt:  { url: `/v3/principals/${ principalId }` }
+        });
+      } catch (e) {
+        console.error('Failed to fetch principal', this.value, principalId); // eslint-disable-line no-console
+      }
+    }
+  },
+
+  watch: {
+    value() {
+      this.loadData();
+    }
+  },
 };
 </script>
 

package/components/auth/__tests__/Principal.test.ts

@@ -0,0 +1,40 @@
+import { mount, type VueWrapper } from '@vue/test-utils';
+import Principal from '@shell/components/auth/Principal.vue';
+
+describe('component: Principal', () => {
+  it('should render the component', () => {
+    const wrapper = mount(Principal, {
+      props:  { value: 'whatever' },
+      global: { mocks: { $fetchState: { pending: false } } },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('should update principal displayed properties on value change', async() => {
+    const wrapper: VueWrapper<any, any> = mount(Principal, {
+      props:  { value: 'whatever' },
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $store:      {
+            getters: {
+              'rancher/byId': (_: any, id: 'first' | 'second') => {
+                const options = {
+                  first:  { name: 'first name' },
+                  second: { name: 'second name' }
+                };
+
+                return options[id];
+              }
+            }
+          },
+        },
+      },
+    });
+
+    await wrapper.setProps({ value: 'second' });
+
+    expect(wrapper.vm.principal.name).toStrictEqual('second name');
+  });
+});

package/components/auth/login/ldap.vue

@@ -2,6 +2,7 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import AsyncButton from '@shell/components/AsyncButton';
 import Login from '@shell/mixins/login';
+import loadPlugins from '@shell/plugins/plugin';
 
 export default {
   emits: ['error', 'showInputs'],
@@ -32,6 +33,12 @@ export default {
           }
         });
 
+        await loadPlugins({
+          app:     this.$store.app,
+          store:   this.$store,
+          $plugin: this.$store.$plugin
+        });
+
         buttonCb(true);
         this.$router.replace('/');
       } catch (err) {

package/components/fleet/FleetBundles.vue

@@ -126,7 +126,7 @@ export default {
             v-if="displayWarning(row)"
             class="text-warning"
           >
-            {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
+            {{ row.status.summary.ready || 0 }}/{{ row.status.summary.desiredReady }}</span>
           <span v-else-if="row.status && row.status.summary">{{ row.status.summary.desiredReady }}</span>
           <span v-else>-</span>
         </template>

package/components/fleet/FleetRepos.vue

@@ -120,7 +120,7 @@ export default {
       <template #cell:repo="{ row }">
         <Link
           :row="row"
-          :value="row.spec.repo"
+          :value="row.spec.repo || ''"
           label-key="repoDisplay"
           before-icon-key="repoIcon"
           url-key="spec.repo"

package/components/fleet/FleetResources.vue

@@ -1,6 +1,5 @@
 <script>
 import SortableTable from '@shell/components/SortableTable';
-import { AGE } from '@shell/config/table-headers';
 
 export default {
   name: 'FleetResources',
@@ -65,7 +64,6 @@ export default {
           sort:  'namespace',
           label: 'Namespace',
         },
-        { ...AGE }
       ];
     },
   }

package/components/fleet/FleetSummary.vue

@@ -2,57 +2,47 @@
 import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
 
-const getResourceDefaultState = (labelGetter, stateKey) => {
-  return {
-    ready: {
+const getResourcesDefaultState = (labelGetter, stateKey) => {
+  return [
+    STATES_ENUM.READY,
+    STATES_ENUM.NOT_READY,
+    STATES_ENUM.WAIT_APPLIED,
+    STATES_ENUM.MODIFIED,
+    STATES_ENUM.MISSING,
+    STATES_ENUM.ORPHANED,
+    STATES_ENUM.UNKNOWN,
+  ].reduce((acc, state) => {
+    acc[state] = {
       count:  0,
-      color:  STATES[STATES_ENUM.READY].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label ),
-      status: STATES_ENUM.READY
-    },
-    info: {
-      count:  0,
-      color:  STATES[STATES_ENUM.INFO].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label ),
-      status: STATES_ENUM.INFO
-    },
-    warning: {
-      count:  0,
-      color:  STATES[STATES_ENUM.WARNING].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label ),
-      status: STATES_ENUM.WARNING
-    },
-    notready: {
-      count:  0,
-      color:  STATES[STATES_ENUM.NOT_READY].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label ),
-      status: STATES_ENUM.NOT_READY
-    },
-    error: {
-      count:  0,
-      color:  STATES[STATES_ENUM.ERROR].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label ),
-      status: STATES_ENUM.ERROR
-    },
-    errapplied: {
-      count:  0,
-      color:  STATES[STATES_ENUM.ERR_APPLIED].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label ),
-      status: STATES_ENUM.ERR_APPLIED,
-    },
-    waitapplied: {
-      count:  0,
-      color:  STATES[STATES_ENUM.WAIT_APPLIED].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label ),
-      status: STATES_ENUM.WAIT_APPLIED
-    },
-    unknown: {
+      color:  STATES[state].color,
+      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
+      status: state
+    };
+
+    return acc;
+  }, {});
+};
+
+const getBundlesDefaultState = (labelGetter, stateKey) => {
+  return [
+    STATES_ENUM.READY,
+    STATES_ENUM.INFO,
+    STATES_ENUM.WARNING,
+    STATES_ENUM.NOT_READY,
+    STATES_ENUM.ERROR,
+    STATES_ENUM.ERR_APPLIED,
+    STATES_ENUM.WAIT_APPLIED,
+    STATES_ENUM.UNKNOWN,
+  ].reduce((acc, state) => {
+    acc[state] = {
       count:  0,
-      color:  STATES[STATES_ENUM.UNKNOWN].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label ),
-      status: STATES_ENUM.UNKNOWN
-    }
-  };
+      color:  STATES[state].color,
+      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
+      status: state
+    };
+
+    return acc;
+  }, {});
 };
 
 export default {
@@ -83,14 +73,18 @@ export default {
       return this.value.metadata.name;
     },
 
+    repoNamespace() {
+      return this.value.metadata.namespace;
+    },
+
     bundleCounts() {
-      const resources = this.bundles.filter((item) => item.repoName === this.repoName);
+      const resources = this.bundles.filter((item) => item.namespace === this.repoNamespace && item.repoName === this.repoName);
 
       if (!resources.length) {
         return [];
       }
 
-      const out = { ...getResourceDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const out = { ...getBundlesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
 
       resources.forEach(({ status, metadata }) => {
         if (!status) {
@@ -99,7 +93,7 @@ export default {
           return;
         }
 
-        const k = status?.summary.ready > 0 && status?.summary.desiredReady === status.summary.ready;
+        const k = status?.summary?.ready > 0 && status?.summary.desiredReady === status?.summary?.ready;
 
         if (k) {
           out.ready.count += 1;
@@ -155,19 +149,20 @@ export default {
     },
 
     resourceCounts() {
-      const resources = this.value.status.resources || [];
-      const out = { ...getResourceDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
-
-      resources.forEach(({ state }) => {
-        const k = state?.toLowerCase();
-
-        if (out[k]) {
-          out[k].count += 1;
-
-          return;
-        }
-        out.unknown.count += 1;
-      });
+      const out = { ...getResourcesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const resourceStatuses = this.value.allResourceStatuses;
+
+      Object.entries(resourceStatuses.states)
+        .filter(([_, count]) => count > 0)
+        .forEach(([state, count]) => {
+          const k = state?.toLowerCase();
+
+          if (out[k]) {
+            out[k].count += count;
+          } else {
+            out.unknown.count += count;
+          }
+        });
 
       return Object.values(out).map((item) => {
         item.value = item.count;

package/components/fleet/ForceDirectedTreeChart/index.vue

@@ -238,8 +238,12 @@ export default {
     },
     zoomFit() {
       const rootNode = d3.select('.root-node');
-      const paddingBuffer = 30;
 
+      if (!rootNode?.node()) {
+        return;
+      }
+
+      const paddingBuffer = 30;
       const chartDimentions = rootNode.node().getBoundingClientRect();
       const chartCoordinates = rootNode.node().getBBox();
       const parent = rootNode.node().parentElement;