@rancher/shell 3.0.2-rc.5 → 3.0.2

package/components/Tabbed/index.vue

@@ -224,7 +224,7 @@ export default {
 
         if (nxt >= tabsLength) {
           return 0;
-        } else if (nxt <= 0) {
+        } else if (nxt < 0) {
           return tabsLength - 1;
         } else {
           return nxt;
@@ -259,11 +259,13 @@ export default {
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
       data-testid="tabbed-block"
+      tabindex="0"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
       @keydown.down.prevent="selectNext(1)"
       @keydown.up.prevent="selectNext(-1)"
     >
+      <!-- This is the tabs link... tabs appear here because they are injected from the "Tab" component -->
       <li
         v-for="tab in sortedTabs"
         :id="tab.name"
@@ -278,7 +280,6 @@ export default {
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
           role="tab"
-          tabindex="0"
           @click.prevent="select(tab.name, $event)"
           @keyup.enter.space="select(tab.name, $event)"
         >
@@ -336,8 +337,9 @@ export default {
         'tab-container--flat': !!flat,
       }"
     >
+      <!-- This is where "normal" tab content goes... -->
       <slot />
-      <!-- Extension tabs -->
+      <!-- Extension tabs content goes here... -->
       <Tab
         v-for="tab, i in extensionTabs"
         :key="`${tab.name}${i}`"
@@ -365,6 +367,15 @@ export default {
   margin: 0;
   padding: 0;
 
+  &:focus-visible {
+    outline: none;
+
+    .tab.active {
+      @include focus-outline;
+      outline-offset: -2px;
+    }
+  }
+
   &.horizontal {
     border: solid thin var(--border);
     border-bottom: 0;
@@ -380,12 +391,8 @@ export default {
     }
   }
 
-  &:focus {
-    outline: none;
-
-    & .tab.active a span {
-      text-decoration: underline;
-    }
+  &:focus .tab.active a span {
+    text-decoration: underline;
   }
 
   .tab {
@@ -405,12 +412,6 @@ export default {
           text-decoration: underline;
         }
       }
-
-      &:focus-visible {
-        @include focus-outline;
-        outline-offset: -4px;
-        text-decoration: none;
-      }
     }
 
     .conditions-alert-icon {

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/__tests__/FixedBanner.test.ts

@@ -40,7 +40,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showHeader).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -60,7 +60,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showFooter).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -84,7 +84,7 @@ describe('component: FixedBanner', () => {
     const bannerDialogElem = wrapper.find('.banner-dialog');
     const bannerDialogFrameElem = wrapper.find('.banner-dialog-frame');
     const buttonDialog = wrapper.find('.banner-dialog button');
-    const noArrayTextElem = wrapper.find('.banner > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerDialogGlassElem.exists()).toBe(true);

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 }
       ];
     },
   }