dashboard-shell-shell 1.0.113 → 1.0.115

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

@@ -6,20 +6,18 @@ import { DefaultProps } from 'vue/types/options';
 
 describe('component: Probe', () => {
   describe.each([
-    [{ httpGet: { scheme: 'https' } }, ['port', 'path']],
-    [{ tcpSocket: {} }, ['socket']],
-    [{ exec: {} }, ['command']],
-  ])('given kind %p', (value, extraFields) => {
+    ['HTTPS', ['port', 'path']],
+    ['tcp', ['socket']],
+    ['exec', ['command']],
+  ])('given kind %p', (kind, extraFields) => {
     it.each([
       ...extraFields,
       'successThreshold',
       'failureThreshold',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        props: {
-          mode: _EDIT,
-          value,
-        },
+        props: { mode: _EDIT },
+        data:  () => ({ kind })
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;
@@ -35,10 +33,8 @@ describe('component: Probe', () => {
       'timeoutSeconds',
     ])('should emit an update on %p input and blur', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        props: {
-          mode: _EDIT,
-          value
-        },
+        props: { mode: _EDIT },
+        data:  () => ({ kind })
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;

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

@@ -2,17 +2,6 @@ import { mount } from '@vue/test-utils';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
 
-jest.mock('focus-trap', () => {
-  return {
-    createFocusTrap: jest.fn().mockImplementation(() => {
-      return {
-        activate:   jest.fn(),
-        deactivate: jest.fn(),
-      };
-    }),
-  };
-});
-
 describe('component: SSHKnownHosts', () => {
   it.each([
     ['0 entities', '', 0],

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

@@ -27,41 +27,4 @@ describe('select.vue', () => {
     // eslint-disable-next-line no-console
     expect(console.warn).not.toHaveBeenCalled();
   });
-
-  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
-    const label = 'Foo';
-    const value = 'foo';
-    const ariaDescribedById = 'some-described-by-id';
-    const ariaLabelText = 'some-aria-label';
-
-    const wrapper = shallowMount(SelectComponent, {
-      props: {
-        value,
-        options: [
-          { label, value },
-        ],
-      },
-      attrs: {
-        'aria-describedby': ariaDescribedById,
-        'aria-label':       ariaLabelText,
-      }
-    });
-
-    const labeledSelectContainer = wrapper.find('.unlabeled-select');
-    const ariaExpanded = labeledSelectContainer.attributes('aria-expanded');
-    const ariaDescribedBy = labeledSelectContainer.attributes('aria-describedby');
-    const ariaLabel = labeledSelectContainer.attributes('aria-label');
-
-    const vSelectInput = wrapper.find('.inline');
-
-    expect(ariaExpanded).toBe('false');
-    expect(ariaDescribedBy).toBe(ariaDescribedById);
-    expect(ariaLabel).toBe(ariaLabelText);
-
-    // make sure it's hardcoded to a "neutral" value so that
-    // in the current architecture of the component
-    // screen readers won't pick up the default "Select option" aria-label
-    // from the library
-    expect(vSelectInput.attributes('aria-label')).toBe('-');
-  });
 });

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

@@ -11,7 +11,7 @@ describe('component: UnitInput', () => {
     expect(wrapper.isVisible()).toBe(true);
   });
 
-  it.each(['blur', 'update:value'])('should emit input event when "%p" is fired', async(event) => {
+  it.each(['blur', 'change'])('should emit input event when "%p" is fired', async(event) => {
     const wrapper = mount(UnitInput, { props: { value: 1, delay: 0 } });
     const input = wrapper.find('input');
 
@@ -20,7 +20,7 @@ describe('component: UnitInput', () => {
     input.trigger(event);
 
     expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[1]).toStrictEqual([4]);
+    expect(wrapper.emitted('update:value')[2]).toStrictEqual([4]);
   });
 
   it.each([
@@ -184,7 +184,7 @@ describe('component: UnitInput', () => {
     input.trigger('blur');
 
     expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[0][0]).toBe(value);
+    expect(wrapper.emitted('update:value')[3][0]).toBe(value);
   });
 
   describe.each([
@@ -207,7 +207,7 @@ describe('component: UnitInput', () => {
       expect(inputElement.value).toBe('123');
     });
 
-    it.each(['update:value', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
+    it.each(['input', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
       const wrapper = mount(UnitInput, {
         props: {
           value: '0',
@@ -248,6 +248,7 @@ describe('component: UnitInput', () => {
       const input = wrapper.find('input');
 
       await input.trigger('update:value');
+      await input.trigger('input');
 
       expect(input.element.value).toBe('123');
     });

package/components/formatter/BadgeStateFormatter.vue

@@ -1,9 +1,8 @@
 <script>
 import { BadgeState } from '@components/BadgeState';
-import DotState from '@shell/components/DotState'
 import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 export default {
-  components: { BadgeState, DotState },
+  components: { BadgeState },
   props:      {
     value: {
       type:    String,
@@ -50,17 +49,15 @@ export default {
 <template>
   <div>
     <div v-if="arbitrary">
-      <!-- <BadgeState
+      <BadgeState
         v-if="value"
         :color="stateBackground"
         :label="stateDisplay"
-      /> -->
-      <DotState  v-if="value" :color="stateBackground" :label="stateDisplay" />
+      />
     </div>
-    <!-- <BadgeState
+    <BadgeState
       v-else
       :value="row"
-    /> -->
-    <DotState v-else :value="row" />
+    />
   </div>
 </template>

package/components/formatter/ExtensionCache.vue

@@ -0,0 +1,74 @@
+<script>
+import { BadgeState } from '@components/BadgeState';
+import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+
+export default {
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  components: { BadgeState },
+
+  data() {
+    const STATES = {
+      cached: {
+        color: 'info', icon: 'dot-open', label: 'Cached', compoundIcon: 'checkmark'
+      },
+      pending: {
+        color: 'warning', icon: 'tag', label: 'In Progress', compoundIcon: 'info'
+      },
+      disabled: {
+        color: 'error', icon: 'dot-half', label: 'Cache Disabled', compoundIcon: 'info'
+      },
+    };
+
+    return {
+      STATES,
+      stateDisplay:    '',
+      stateBackground: ''
+    };
+  },
+
+  watch: {
+    value: {
+      handler() {
+        const out = this.value || 'pending';
+        const color = this.colorForState(out);
+
+        this.stateDisplay = stateDisplay(out);
+        this.stateBackground = color.replace('text-', 'bg-');
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    colorForState(state) {
+      const key = (state).toLowerCase();
+      let color;
+
+      if ( this.STATES[key] && this.STATES[key].color ) {
+        color = this.STATES[key].color;
+      }
+
+      if ( !color ) {
+        color = 'info';
+      }
+
+      return `text-${ color }`;
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <BadgeState
+      :color="stateBackground"
+      :label="stateDisplay"
+    />
+  </div>
+</template>

package/components/formatter/InternalExternalIP.vue

@@ -28,7 +28,6 @@ export default {
   <span>
     <template v-if="isIp(row.externalIp)">
       {{ row.externalIp }} <CopyToClipboard
-        :aria-label="t('internalExternalIP.copyExternalIp')"
         label-as="tooltip"
         :text="row.externalIp"
         class="icon-btn"
@@ -44,7 +43,6 @@ export default {
     </template>
     <template v-else-if="isIp(row.internalIp)">
       {{ row.internalIp }}<CopyToClipboard
-        :aria-label="t('internalExternalIP.copyInternalIp')"
         label-as="tooltip"
         :text="row.internalIp"
         class="icon-btn"

package/components/formatter/Port.vue

@@ -0,0 +1,24 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:    Array,
+      default: () => []
+    }
+  },
+  data() {
+    const { hostPort = '', protocol = '' } = this.value[0] || {};
+
+    return { hostPort, protocol };
+  }
+};
+</script>
+
+<template>
+  <div v-if="hostPort">
+    {{ hostPort+'/'+protocol }}
+  </div>
+  <div v-else>
+    —
+  </div>
+</template>

package/components/formatter/SecretData.vue

@@ -13,25 +13,17 @@ export default {
     },
   },
 
-  beforeMount() {
+  data() {
     if (this.value.issuer) {
       const { cn, notAfter, sans = [] } = this.value;
 
-      this.expiration = notAfter;
-      this.sans = sans;
-      this.cn = cn;
-      this.isTLS = true;
+      return {
+        cn, expiration: notAfter, sans, isTLS: true
+      };
+    } else {
+      return { isTLS: false };
     }
   },
-
-  data() {
-    return {
-      isTLS:      false,
-      cn:         null,
-      sans:       [],
-      expiration: null,
-    };
-  },
   computed: {
     // use 'text-warning' or 'text-error' classes if the cert is <8 days from expiring or expired respectively
     dateClass() {
@@ -51,12 +43,7 @@ export default {
 
 <template>
   <div v-if="isTLS">
-    <t k="secret.certificate.cn" />
-    {{ cn }}
-    <span v-if="row.unrepeatedSans && row.unrepeatedSans.length">
-      {{ t('secret.certificate.plusMore', {n:row.unrepeatedSans.length}) }}
-    </span>
-    <br>
+    <t k="secret.certificate.cn" /> {{ cn }} <span v-if="row.unrepeatedSans && row.unrepeatedSans.length">{{ t('secret.certificate.plusMore', {n:row.unrepeatedSans.length}) }}</span><br>
     <t k="secret.certificate.expires" />: <DateComponent
       :class="dateClass"
       :value="expiration"

package/components/formatter/SecretType.vue

@@ -0,0 +1,41 @@
+<script>
+import { SERVICE_ACCOUNT } from '@shell/config/types';
+export default {
+  props: {
+    value: {
+      type:    [String, Object],
+      default: 'Opaque'
+    }
+  },
+  data() {
+    if (this.value.typeDisplay) {
+      this.findServiceAccount();
+
+      return { typeDisplay: this.value.typeDisplay, serviceAccountLink: null };
+    }
+
+    return { typeDisplay: this.value, serviceAccountLink: null };
+  },
+  methods: {
+    async findServiceAccount() {
+      const serviceAccount = await this.$store.dispatch('cluster/find', { type: SERVICE_ACCOUNT, id: this.value.serviceAccountID });
+
+      if (serviceAccount) {
+        this.serviceAccountLink = serviceAccount.detailLocation;
+      }
+    }
+  }
+};
+</script>>
+
+<template>
+  <router-link
+    v-if="serviceAccountLink"
+    :to="serviceAccountLink"
+  >
+    {{ typeDisplay }}
+  </router-link>
+  <div v-else>
+    {{ typeDisplay }}
+  </div>
+</template>

package/components/nav/Favorite.vue

@@ -10,9 +10,6 @@ export default {
   computed: {
     isFavorite() {
       return this.$store.getters['type-map/isFavorite'](this.resource);
-    },
-    ariaLabel() {
-      return this.t(`resourceDetail.masthead.ariaLabel.${ this.isFavorite ? 'unfavoriteAction' : 'favoriteAction' }`, { resource: this.resource });
     }
   },
 
@@ -31,11 +28,10 @@ export default {
 <template>
   <i
     :tabindex="0"
-    :aria-pressed="!!isFavorite"
+    :aria-checked="!!isFavorite"
     class="favorite icon"
     :class="{'icon-star-open': !isFavorite, 'icon-star': isFavorite}"
     aria-role="button"
-    :aria-label="ariaLabel"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"
     @keydown.space.prevent="toggle"

package/components/nav/Group.vue

@@ -158,17 +158,6 @@ export default {
         items = this.group;
       }
 
-      let parentPath = '';
-      const cluster = this.$route.params?.cluster;
-
-      // Where we use nested route configuration, consider the parent route when trying to identify the nav location
-      if (this.$route.matched.length > 1) {
-        const parentRoute = this.$route.matched[this.$route.matched.length - 2];
-
-        parentPath = parentRoute.path.replace(':cluster', cluster);
-        parentPath = parentPath === '/' ? undefined : parentPath;
-      }
-
       for (const item of items.children) {
         if (item.children && this.hasActiveRoute(item)) {
           return true;
@@ -177,11 +166,8 @@ export default {
           const matchesNavLevel = navLevels.filter((param) => !this.$route.params[param] || this.$route.params[param] !== item.route.params[param]).length === 0;
           const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
           const withoutQuery = withoutHash.split('?')[0];
-          const itemFullPath = this.$router.resolve(item.route).fullPath;
 
-          if (matchesNavLevel || itemFullPath === withoutQuery) {
-            return true;
-          } else if (parentPath && itemFullPath === parentPath) {
+          if (matchesNavLevel || this.$router.resolve(item.route).fullPath === withoutQuery) {
             return true;
           }
         }
@@ -277,7 +263,7 @@ export default {
           v-if="child.divider"
           :key="idx"
         >
-          <hr role="none">
+          <hr>
         </li>
         <!-- <div v-else-if="child[childrenKey] && hideGroup(child[childrenKey])" :key="child.name">
           HIDDEN
@@ -493,3 +479,4 @@ export default {
     color: #a8abb2;
   }
 </style>
+

package/components/nav/Header.vue

@@ -81,8 +81,7 @@ export default {
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
       ctx:                    this,
       showImportModal:        false,
-      showSearchModal:        false,
-      userIcon:               require('~shell/assets/images/logo.png'),
+      showSearchModal:        false
     };
   },
 
@@ -405,7 +404,7 @@ export default {
       <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
 
-    <!-- <div
+    <div
       class="menu-spacer"
       :class="{'isSingleProduct': isSingleProduct }"
     >
@@ -524,20 +523,8 @@ export default {
           :alt="t('branding.logos.label')"
         />
       </div>
-    </div> -->
-
-      <!-- logo -->
-      <div class="menu-spacer">
-      <router-link
-        v-if="isSingleProduct && !isRancherInHarvester"
-        :to="singleProductLogoRoute"
-      >
-        <img
-          :src="userIcon"
-        >
-      </router-link>
     </div>
-    <!-- 中间 -->
+
     <div class="spacer" />
 
     <div class="rd-header-right">
@@ -709,23 +696,20 @@ export default {
             data-testid="nav_header_showUserMenu"
             :aria-label="t('nav.userMenu.button.label')"
           >
-            <!-- <img
+            <img
               v-if="principal && principal.avatarSrc"
               :src="principal.avatarSrc"
               :class="{'avatar-round': principal.roundAvatar}"
               width="36"
               height="36"
-              :alt="t('nav.alt.userAvatar')"
             >
             <i
               v-else
               class="icon icon-user icon-3x avatar"
-            /> -->
-            <i class="icon icon-usericon" />
-            <span class="login-name">{{ principal.loginName }}</span>
+            />
           </rc-dropdown-trigger>
           <template #dropdownCollection>
-            <!-- <template v-if="authEnabled">
+            <template v-if="authEnabled">
               <div class="user-info">
                 <div class="user-name">
                   <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
@@ -737,13 +721,13 @@ export default {
                 </div>
               </div>
               <rc-dropdown-separator />
-            </template> -->
-            <!-- <rc-dropdown-item
+            </template>
+            <rc-dropdown-item
               v-if="showPreferencesLink"
               @click="$router.push({ name: 'prefs'})"
             >
               {{ t('nav.userMenu.preferences') }}
-            </rc-dropdown-item> -->
+            </rc-dropdown-item>
             <rc-dropdown-item
               v-if="showAccountAndApiKeyLink"
               @click="$router.push({ name: 'account'})"
@@ -776,7 +760,6 @@ export default {
   HEADER {
     display: flex;
     z-index: z-index('mainHeader');
-    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.12);
 
     > .spacer {
       flex: 1;
@@ -894,7 +877,7 @@ export default {
 
     > * {
       background-color: var(--header-bg);
-      /* border-bottom: var(--header-border-size) solid var(--header-border); */
+      border-bottom: var(--header-border-size) solid var(--header-border);
     }
 
     .rd-header-right {
@@ -907,7 +890,7 @@ export default {
       }
 
       > .top {
-        padding-top: 10px;
+        padding-top: 6px;
 
         INPUT[type='search']::placeholder,
         .vs__open-indicator,
@@ -1027,7 +1010,7 @@ export default {
 
       > .user {
         outline: none;
-        /* width: var(--header-height); */
+        width: var(--header-height);
 
         .v-popper {
           display: flex;
@@ -1041,10 +1024,6 @@ export default {
         .user-image {
           display: flex;
           align-items: center;
-          &:hover{
-            color: var(--primary);
-          }
-
         }
 
         &:focus {
@@ -1173,10 +1152,5 @@ export default {
       }
     }
   }
-  .login-name{
-    font-size: 14px;
-    margin-left: 5px;
-    margin-top: 5px;
-    line-height: 20px;
-  }
+
 </style>

package/components/nav/Jump.vue

@@ -71,12 +71,6 @@ export default {
 
 <template>
   <div>
-    <p
-      id="describe-filter-resource-search"
-      hidden
-    >
-      {{ t('nav.resourceSearch.filteringDescription') }}
-    </p>
     <input
       ref="input"
       v-model="value"
@@ -84,7 +78,6 @@ export default {
       class="search"
       role="textbox"
       :aria-label="t('nav.resourceSearch.label')"
-      aria-describedby="describe-filter-resource-search"
       @keyup.esc="$emit('closeSearch')"
     >
     <div class="results">