@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.4

package/components/form/SelectOrCreateAuthSecret.vue

@@ -3,6 +3,7 @@ import { _EDIT } from '@shell/config/query-params';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import SSHKnownHosts from '@shell/components/form/SSHKnownHosts';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
 import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
@@ -23,6 +24,7 @@ export default {
     Banner,
     LabeledInput,
     LabeledSelect,
+    SSHKnownHosts,
   },
 
   props: {
@@ -142,6 +144,11 @@ export default {
       type:    Boolean,
       default: false,
     },
+
+    showSshKnownHosts: {
+      type:    Boolean,
+      default: true,
+    },
   },
 
   async fetch() {
@@ -172,6 +179,7 @@ export default {
     if ( !this.value ) {
       this.publicKey = this.preSelect?.publicKey || '';
       this.privateKey = this.preSelect?.privateKey || '';
+      this.sshKnownHosts = this.preSelect?.sshKnownHosts || '';
     }
 
     this.updateSelectedFromValue();
@@ -189,9 +197,10 @@ export default {
 
       filterByNamespace: this.namespace && this.limitToNamespace,
 
-      publicKey:  '',
-      privateKey: '',
-      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
+      publicKey:     '',
+      privateKey:    '',
+      sshKnownHosts: '',
+      uniqueId:      new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
 
       SSH:   AUTH_TYPE._SSH,
       BASIC: AUTH_TYPE._BASIC,
@@ -372,15 +381,16 @@ export default {
         return 'mt-20';
       }
 
-      return 'col span-4';
+      return (this.selected === AUTH_TYPE._SSH) && this.showSshKnownHosts ? 'col span-3' : 'col span-4';
     }
   },
 
   watch: {
-    selected:   'update',
-    publicKey:  'updateKeyVal',
-    privateKey: 'updateKeyVal',
-    value:      'updateSelectedFromValue',
+    selected:      'update',
+    publicKey:     'updateKeyVal',
+    privateKey:    'updateKeyVal',
+    sshKnownHosts: 'updateKeyVal',
+    value:         'updateSelectedFromValue',
 
     async namespace(ns) {
       if (ns && !this.selected.startsWith(`${ ns }/`)) {
@@ -463,13 +473,20 @@ export default {
       if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE].includes(this.selected) ) {
         this.privateKey = '';
         this.publicKey = '';
+        this.sshKnownHosts = '';
       }
 
-      this.$emit('inputauthval', {
+      const value = {
         selected:   this.selected,
         privateKey: this.privateKey,
-        publicKey:  this.publicKey
-      });
+        publicKey:  this.publicKey,
+      };
+
+      if (this.sshKnownHosts) {
+        value.sshKnownHosts = this.sshKnownHosts;
+      }
+
+      this.$emit('inputauthval', value);
     },
 
     update() {
@@ -550,6 +567,12 @@ export default {
             [publicField]:  base64Encode(this.publicKey),
             [privateField]: base64Encode(this.privateKey),
           };
+
+          // Add ssh known hosts data key - we will add a key with an empty value if the inout field was left blank
+          // This ensures on edit of the secret, we allow the user to edit the known_hosts field
+          if ((this.selected === AUTH_TYPE._SSH) && this.showSshKnownHosts) {
+            secret.data.known_hosts = base64Encode(this.sshKnownHosts || '');
+          }
         }
       }
 
@@ -603,6 +626,15 @@ export default {
             label-key="selectOrCreateAuthSecret.ssh.privateKey"
           />
         </div>
+        <div
+          v-if="showSshKnownHosts"
+          class="col span-2"
+        >
+          <SSHKnownHosts
+            v-model:value="sshKnownHosts"
+            :mode="mode"
+          />
+        </div>
       </template>
       <template v-else-if="selected === BASIC || selected === RKE">
         <Banner

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

@@ -127,7 +127,7 @@ describe('component: KeyValue', () => {
     expect(secondKeyInput.exists()).toBe(false);
     expect(secondValueInput.exists()).toBe(false);
 
-    const addButton = wrapper.find('[data-testid="add_link_button"]');
+    const addButton = wrapper.find('[data-testid="add_row_item_button"]');
 
     addButton.trigger('click');
     await nextTick();

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

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
+
+describe('component: SSHKnownHosts', () => {
+  it.each([
+    ['0 entities', '', 0],
+    ['0 entities (multiple empty lines)', '\n  \n  \n', 0],
+    ['1 entity', 'line1\n', 1],
+    ['1 entity (multiple empty lines)', 'line1\n\n\n', 1],
+    ['2 entities', 'line1\nline2\n', 2],
+    ['2 entities (multiple empty lines)', 'line1\n  \n  line2\n \n', 2],
+  ])('mode view: summary should be: %p', (_, value, entities) => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode: _VIEW,
+        value,
+      }
+    });
+
+    const knownSshHostsSummary = wrapper.find('[data-testid="input-known-ssh-hosts_summary"]');
+    const knownSshHostsOpenDialog = wrapper.findAll('[data-testid="input-known-ssh-hosts_open-dialog"]');
+
+    expect(wrapper.vm.entries).toBe(entities);
+    expect(knownSshHostsSummary.element).toBeDefined();
+    expect(knownSshHostsOpenDialog).toHaveLength(0);
+  });
+
+  it('mode edit: should display summary and edit button', () => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode:  _EDIT,
+        value: 'line1\nline2\n',
+      }
+    });
+
+    const knownSshHostsSummary = wrapper.find('[data-testid="input-known-ssh-hosts_summary"]');
+    const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
+
+    expect(knownSshHostsSummary.element).toBeDefined();
+    expect(knownSshHostsOpenDialog.element).toBeDefined();
+  });
+
+  it('mode edit: should open edit dialog', async() => {
+    const wrapper = mount(SSHKnownHosts, {
+      props: {
+        mode:  _EDIT,
+        value: '',
+      }
+    });
+
+    const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
+    const editDialog = wrapper.vm.$refs['editDialog'] as any;
+
+    await knownSshHostsOpenDialog.trigger('click');
+
+    expect(editDialog.showModal).toBe(true);
+  });
+});

package/components/formatter/FleetClusterSummaryGraph.vue

@@ -11,7 +11,7 @@ export default {
       required: true
     },
 
-    clusterLabel: {
+    clusterId: {
       type:     String,
       required: true
     }
@@ -22,6 +22,6 @@ export default {
 <template>
   <FleetSummaryGraph
     :row="row"
-    :clusterLabel="clusterLabel"
+    :clusterId="clusterId"
   />
 </template>

package/components/formatter/FleetSummaryGraph.vue

@@ -14,7 +14,7 @@ export default {
       required: true
     },
 
-    clusterLabel: {
+    clusterId: {
       type:     String,
       required: false,
       default:  null,
@@ -23,10 +23,8 @@ export default {
 
   computed: {
     summary() {
-      if (this.clusterLabel) {
-        return this.row.clusterResourceStatus.find((x) => {
-          return x.clusterLabel === this.clusterLabel;
-        })?.status.resourceCounts || {};
+      if (this.clusterId) {
+        return this.row.statusResourceCountsForCluster(this.clusterId);
       }
 
       return this.row.status?.resourceCounts || {};
@@ -37,7 +35,8 @@ export default {
     },
 
     stateParts() {
-      const keys = Object.keys(this.summary).filter((x) => !x.startsWith('desired'));
+      const summary = this.summary;
+      const keys = Object.keys(summary).filter((x) => !x.startsWith('desired'));
 
       const out = keys.map((key) => {
         const textColor = colorForState(key);
@@ -46,7 +45,7 @@ export default {
           label: ucFirst(key),
           color: textColor.replace(/text-/, 'bg-'),
           textColor,
-          value: this.summary[key],
+          value: summary[key],
           sort:  stateSort(textColor, key),
         };
       }).filter((x) => x.value > 0);

package/components/formatter/WorkloadHealthScale.vue

@@ -182,14 +182,21 @@ export default {
     <div
       id="trigger"
       class="hs-popover__trigger"
+      aria-role="button"
+      tabindex="0"
       :class="{expanded}"
+      :aria-roledescription="t('workload.scaleWorkloads')"
+      :aria-label="t('workload.healthScaleToggle')"
+      :aria-expanded="expanded"
       @click="expanded = !expanded"
+      @keyup.enter.space="expanded = !expanded"
     >
       <ProgressBarMulti
         v-if="parts"
         class="health"
         :values="parts"
         :show-zeros="true"
+        :aria-describedby="t('workload.healthWorkloads')"
       />
       <i :class="{icon: true, 'icon-chevron-up': expanded, 'icon-chevron-down': !expanded}" />
     </div>

package/components/nav/Group.vue

@@ -211,26 +211,40 @@ export default {
       v-if="showHeader"
       class="header"
       :class="{'active': isOverview, 'noHover': !canCollapse}"
+      role="button"
+      tabindex="0"
+      :aria-label="group.labelDisplay || group.label || ''"
       @click="groupSelected()"
+      @keyup.enter="groupSelected()"
+      @keyup.space="groupSelected()"
     >
       <slot name="header">
         <router-link
           v-if="hasOverview"
           :to="group.children[0].route"
           :exact="group.children[0].exact"
+          :tabindex="-1"
         >
-          <h6 v-clean-html="group.labelDisplay || group.label" />
+          <h6>
+            <span v-clean-html="group.labelDisplay || group.label" />
+          </h6>
         </router-link>
         <h6
           v-else
-          v-clean-html="group.labelDisplay || group.label"
-        />
+        >
+          <span v-clean-html="group.labelDisplay || group.label" />
+        </h6>
       </slot>
       <i
         v-if="!onlyHasOverview && canCollapse"
-        class="icon toggle"
+        class="icon toggle toggle-accordion"
         :class="{'icon-chevron-right': !isExpanded, 'icon-chevron-down': isExpanded}"
+        role="button"
+        tabindex="0"
+        :aria-label="t('nav.ariaLabel.collapseExpand')"
         @click="peek($event, true)"
+        @keyup.enter="peek($event, true)"
+        @keyup.space="peek($event, true)"
       />
     </div>
     <ul
@@ -288,6 +302,7 @@ export default {
     cursor: pointer;
     color: var(--body-text);
     height: 33px;
+    outline: none;
 
     H6 {
       color: var(--body-text);
@@ -315,6 +330,17 @@ export default {
 
   .accordion {
     .header {
+      &:focus-visible {
+        h6 span {
+          @include focus-outline;
+          outline-offset: 2px;
+        }
+      }
+      .toggle-accordion:focus-visible {
+        @include focus-outline;
+        outline-offset: -6px;
+      }
+
       &.active {
         color: var(--primary-hover-text);
         background-color: var(--primary-hover-bg);

package/components/nav/Header.vue

@@ -24,6 +24,12 @@ import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
 import { configType } from '@shell/models/management.cattle.io.authconfig';
 import HeaderPageActionMenu from './HeaderPageActionMenu.vue';
+import {
+  RcDropdown,
+  RcDropdownItem,
+  RcDropdownSeparator,
+  RcDropdownTrigger
+} from '@components/RcDropdown';
 
 export default {
 
@@ -39,6 +45,10 @@ export default {
     IconOrSvg,
     AppModal,
     HeaderPageActionMenu,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownSeparator,
+    RcDropdownTrigger,
   },
 
   props: {
@@ -641,27 +651,18 @@ export default {
         </button>
       </div>
 
-      <header-page-action-menu v-if="showPageActions" />
-
-      <div class="header-spacer" />
-      <div
-        v-if="showUserMenu"
-        class="user user-menu"
-        data-testid="nav_header_showUserMenu"
-        tabindex="0"
-        @blur="showMenu(false)"
-        @click="showMenu(true)"
-        @focus.capture="showMenu(true)"
-      >
-        <v-dropdown
-          :triggers="[]"
-          :shown="isUserMenuOpen"
-          :autoHide="false"
-          :flip="false"
-          :container="false"
-          :placement="'bottom-end'"
+      <div class="center-self">
+        <header-page-action-menu v-if="showPageActions" />
+        <rc-dropdown
+          v-if="showUserMenu"
+          :aria-label="t('nav.userMenu.label')"
         >
-          <div class="user-image text-right hand">
+          <rc-dropdown-trigger
+            ghost
+            small
+            data-testid="nav_header_showUserMenu"
+            :aria-label="t('nav.userMenu.button.label')"
+          >
             <img
               v-if="principal && principal.avatarSrc"
               :src="principal.avatarSrc"
@@ -673,88 +674,47 @@ export default {
               v-else
               class="icon icon-user icon-3x avatar"
             />
-          </div>
-          <template #popper>
-            <div
-              class="user-menu"
+          </rc-dropdown-trigger>
+          <template #dropdownCollection>
+            <template v-if="authEnabled">
+              <div class="user-info">
+                <div class="user-name">
+                  <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
+                </div>
+                <div class="text-small">
+                  <template v-if="principal.loginName !== principal.name">
+                    {{ principal.name }}
+                  </template>
+                </div>
+              </div>
+              <rc-dropdown-separator />
+            </template>
+            <rc-dropdown-item
+              v-if="showPreferencesLink"
+              @click="$router.push({ name: 'prefs'})"
             >
-              <ul
-                class="list-unstyled dropdown"
-                data-testid="user-menu-dropdown"
-                @click.stop="showMenu(false)"
-              >
-                <li
-                  v-if="authEnabled"
-                  class="user-info"
-                >
-                  <div class="user-name">
-                    <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
-                  </div>
-                  <div class="text-small pt-5 pb-5">
-                    <template v-if="principal.loginName !== principal.name">
-                      {{ principal.name }}
-                    </template>
-                  </div>
-                </li>
-                <router-link
-                  v-if="showPreferencesLink"
-                  v-slot="{ href, navigate }"
-                  custom
-                  :to="{name: 'prefs'}"
-                >
-                  <li
-                    class="user-menu-item"
-                    @click="navigate"
-                    @keypress.enter="navigate"
-                  >
-                    <a :href="href">{{ t('nav.userMenu.preferences') }}</a>
-                  </li>
-                </router-link>
-                <router-link
-                  v-if="showAccountAndApiKeyLink"
-                  v-slot="{ href, navigate }"
-                  custom
-                  :to="{name: 'account'}"
-                >
-                  <li
-                    class="user-menu-item"
-                    @click="navigate"
-                    @keypress.enter="navigate"
-                  >
-                    <a :href="href">{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
-                  </li>
-                </router-link>
-                <!-- SLO modal -->
-                <li
-                  v-if="authEnabled && shouldShowSloLogoutModal"
-                  class="user-menu-item no-link"
-                  @click="showSloModal"
-                  @keypress.enter="showSloModal"
-                >
-                  <span>{{ t('nav.userMenu.logOut') }}</span>
-                </li>
-                <!-- logout -->
-                <router-link
-                  v-else-if="authEnabled"
-                  v-slot="{ href, navigate }"
-                  custom
-                  :to="generateLogoutRoute"
-                >
-                  <li
-                    class="user-menu-item"
-                    @click="navigate"
-                    @keypress.enter="navigate"
-                  >
-                    <a
-                      :href="href"
-                      @blur="showMenu(false)"
-                    >{{ t('nav.userMenu.logOut') }}</a>
-                  </li>
-                </router-link>
-              </ul>
-            </div>
+              {{ t('nav.userMenu.preferences') }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-if="showAccountAndApiKeyLink"
+              @click="$router.push({ name: 'account'})"
+            >
+              {{ t('nav.userMenu.accountAndKeys', {}, true) }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-if="authEnabled && shouldShowSloLogoutModal"
+              @click="showSloModal"
+            >
+              {{ t('nav.userMenu.logOut') }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-else-if="authEnabled"
+              @click="$router.push(generateLogoutRoute)"
+            >
+              {{ t('nav.userMenu.logOut') }}
+            </rc-dropdown-item>
           </template>
-        </v-dropdown>
+        </rc-dropdown>
       </div>
     </div>
   </header>
@@ -957,7 +917,7 @@ export default {
         width: 40px;
       }
 
-      :deep() > div > .btn.role-tertiary {
+      :deep() div .btn.role-tertiary {
         border: 1px solid var(--header-btn-bg);
         border: none;
         background: var(--header-btn-bg);
@@ -1010,8 +970,9 @@ export default {
         position: relative;
       }
 
-      .user.user-menu {
-        padding-top: 9.5px;
+      .avatar-round {
+        border: 0;
+        border-radius: 50%;
       }
 
       > .user {
@@ -1047,11 +1008,14 @@ export default {
         }
 
         background-color: var(--header-bg);
+      }
 
-        .avatar-round {
-          border: 0;
-          border-radius: 50%;
-        }
+      > .center-self {
+        align-self: center;
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        padding-right: 1rem;
       }
     }
   }
@@ -1063,14 +1027,17 @@ export default {
         justify-content: space-between;
         padding: 10px;
       }
+    }
+  }
 
-      &.user-info {
-        display: block;
-        margin-bottom: 10px;
-        padding: 10px 20px;
-        border-bottom: solid 1px var(--border);
-        min-width: 200px;
-      }
+  div {
+    &.user-info {
+      padding: 0 8px;
+      margin: 0 9px;
+      min-width: 200px;
+      display: flex;
+      gap: 5px;
+      flex-direction: column;
     }
   }
 
@@ -1152,4 +1119,5 @@ export default {
       }
     }
   }
+
 </style>