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

package/edit/fleet.cattle.io.gitrepo.vue

@@ -408,7 +408,12 @@ export default {
     },
 
     async doCreate(name, credentials) {
-      const { selected, publicKey, privateKey } = credentials;
+      const {
+        selected,
+        publicKey,
+        privateKey,
+        sshKnownHosts
+      } = credentials;
 
       if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(selected) ) {
         return;
@@ -456,6 +461,11 @@ export default {
           [publicField]:  base64Encode(publicKey),
           [privateField]: base64Encode(privateKey),
         };
+
+        // Add ssh known hosts
+        if (selected === AUTH_TYPE._SSH && sshKnownHosts) {
+          secret.data.known_hosts = base64Encode(sshKnownHosts);
+        }
       }
 
       await secret.save();
@@ -546,17 +556,7 @@ export default {
         @update:value="$emit('input', $event)"
       />
 
-      <div class="row">
-        <div class="col span-6">
-          <Banner
-            color="info col span-6"
-          >
-            <div>
-              {{ t('fleet.gitRepo.repo.protocolBanner') }}
-            </div>
-          </Banner>
-        </div>
-      </div>
+      <h2 v-t="'fleet.gitRepo.repo.title'" />
       <div
         class="row"
         :class="{'mt-20': isView}"
@@ -586,6 +586,10 @@ export default {
           />
         </div>
       </div>
+
+      <div class="spacer" />
+      <h2 v-t="'fleet.gitRepo.auth.title'" />
+
       <SelectOrCreateAuthSecret
         :value="value.spec.clientSecretName"
         :register-before-hook="registerBeforeHook"
@@ -633,8 +637,7 @@ export default {
       </div>
 
       <template v-if="isTls">
-        <div class="spacer" />
-        <div class="row">
+        <div class="row mt-20">
           <div class="col span-6">
             <LabeledSelect
               :label="t('fleet.gitRepo.tls.label')"
@@ -663,7 +666,7 @@ export default {
       <div class="resource-handling">
         <Checkbox
           v-model:value="correctDriftEnabled"
-          :tooltip="t('fleet.gitRepo.resources.correctDriftBanner')"
+          :tooltip="t('fleet.gitRepo.resources.correctDriftTooltip')"
           data-testid="GitRepo-correctDrift-checkbox"
           class="check"
           type="checkbox"
@@ -672,7 +675,7 @@ export default {
         />
         <Checkbox
           v-model:value="value.spec.keepResources"
-          :tooltip="t('fleet.gitRepo.resources.keepResourcesBanner')"
+          :tooltip="t('fleet.gitRepo.resources.keepResourcesTooltip')"
           data-testid="GitRepo-keepResources-checkbox"
           class="check"
           type="checkbox"
@@ -681,19 +684,16 @@ export default {
         />
       </div>
       <div class="spacer" />
-      <h2 v-t="'fleet.gitRepo.paths.label'" />
       <ArrayList
         v-model:value="value.spec.paths"
         data-testid="gitRepo-paths"
+        :title="t('fleet.gitRepo.paths.label')"
         :mode="mode"
         :initial-empty-row="false"
         :value-placeholder="t('fleet.gitRepo.paths.placeholder')"
         :add-label="t('fleet.gitRepo.paths.addLabel')"
-      >
-        <template #empty>
-          <Banner label-key="fleet.gitRepo.paths.empty" />
-        </template>
-      </ArrayList>
+        :protip="t('fleet.gitRepo.paths.empty')"
+      />
     </template>
     <template #stepTargetInfo>
       <h2 v-t="isLocal ? 'fleet.gitRepo.target.labelLocal' : 'fleet.gitRepo.target.label'" />
@@ -771,6 +771,11 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  :deep() .select-or-create-auth-secret {
+    .row {
+      margin-top: 10px !important;
+    }
+  }
   .resource-handling {
     display: flex;
     flex-direction: column;

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -12,7 +12,7 @@ import { mapGetters } from 'vuex';
 import { sortBy } from '@shell/utils/sort';
 import { PROVISIONER, _RKE1, _RKE2 } from '@shell/store/prefs';
 import { filterAndArrangeCharts } from '@shell/store/catalog';
-import { CATALOG } from '@shell/config/labels-annotations';
+import { CATALOG, CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { CAPI, MANAGEMENT, DEFAULT_WORKSPACE } from '@shell/config/types';
 import { mapFeature, RKE2 as RKE2_FEATURE, RKE1_UI } from '@shell/store/features';
 import { allHash } from '@shell/utils/promise';
@@ -173,17 +173,7 @@ export default {
   },
 
   data() {
-    let subType = null;
-
-    subType = this.$route.query[SUB_TYPE] || null;
-
-    if ( this.$route.query[SUB_TYPE]) {
-      subType = this.$route.query[SUB_TYPE];
-    } else if (this.value.isImported) {
-      subType = IMPORTED;
-    } else if (this.value.isLocal) {
-      subType = LOCAL;
-    }
+    const subType = this.$route.query[SUB_TYPE] || null;
     const rkeType = this.$route.query[RKE_TYPE] || null;
     const chart = this.$route.query[CHART] || null;
     const isImport = this.realMode === _IMPORT;
@@ -223,6 +213,14 @@ export default {
 
     emberLink() {
       if (this.value) {
+        // for imported and local clusters, set subtype using properties from prov cluster model
+        //
+        if (this.value.isImported) {
+          this.selectType(IMPORTED, false);
+        } else if (this.value.isLocal) {
+          this.selectType(LOCAL, false);
+        }
+
         // set subtype if editing EKS/GKE/AKS cluster -- this ensures that the component provided by extension is loaded instead of iframing old ember ui
         if (this.value.provisioner) {
           const matchingSubtype = this.subTypes.find((st) => DRIVER_TO_IMPORT[st.id.toLowerCase()] === this.value.provisioner.toLowerCase());
@@ -231,6 +229,16 @@ export default {
             this.selectType(matchingSubtype.id, false);
           }
         }
+
+        // subType set by the ui during cluster creation
+        // this is likely from a ui extension trying to load custom ui to edit the cluster
+        const fromAnnotation = this.value.annotations?.[CAPI_ANNOTATIONS.UI_CUSTOM_PROVIDER];
+
+        if (fromAnnotation) {
+          this.selectType(fromAnnotation, false);
+
+          return '';
+        }
         // For custom RKE2 clusters, don't load an Ember page.
         // It should be the dashboard.
         if ( this.value.isRke2 && ((this.value.isCustom && this.mode === _EDIT) || (this.value.isCustom && this.as === _CONFIG && this.mode === _VIEW) || (this.subType || '').toLowerCase() === 'custom')) {
@@ -240,17 +248,18 @@ export default {
 
           return '';
         }
-        // For RKE2/K3s clusters provisioned in Rancher with node pools,
+        // For existing RKE2/K3s clusters provisioned in Rancher,
+        // set the subtype using the machine pool provisioner
         // do not use an iFramed Ember page.
         if ( this.value.isRke2 && this.value.machineProvider ) {
-          // Edit existing RKE2
           this.selectType(this.value.machineProvider, false);
 
           return '';
         }
+
         if ( this.subType ) {
           // if driver type has a custom form component, don't load an ember page
-          if (this.selectedSubType.component) {
+          if (this.selectedSubType?.component) {
             return '';
           }
           // For RKE1 and hosted Kubernetes Clusters, set the ember link
@@ -259,8 +268,6 @@ export default {
             return this.selectedSubType.emberLink;
           }
 
-          this.selectType(this.subType, false);
-
           return '';
         }
 
@@ -379,8 +386,8 @@ export default {
 
         // Add from extensions
         this.extensions.forEach((ext) => {
-          // if the rke toggle is set to rke1, don't add extensions that specify rke2 group
-          // default group is rke2
+        // if the rke toggle is set to rke1, don't add extensions that specify rke2 group
+        // default group is rke2
           if (!this.isRke2 && (ext.group === _RKE2 || !ext.group)) {
             return;
           }

package/edit/secret/index.vue

@@ -206,7 +206,7 @@ export default {
       case TYPES.TLS:
         return this.t('secret.certificate.certificate');
       case TYPES.SSH:
-        return this.t('secret.ssh.keys');
+        return this.value.supportsSshKnownHosts ? this.t('secret.ssh.keysAndHosts') : this.t('secret.ssh.keys');
       case TYPES.BASIC:
         return this.t('secret.authentication');
       default:

package/edit/secret/ssh.vue

@@ -20,16 +20,21 @@ export default {
   data() {
     const username = this.value.decodedData['ssh-publickey'] || '';
     const password = this.value.decodedData['ssh-privatekey'] || '';
+    const knownHosts = this.value.decodedData['known_hosts'] || '';
+    const showKnownHosts = this.value.supportsSshKnownHosts;
 
     return {
       username,
       password,
+      knownHosts,
+      showKnownHosts,
     };
   },
 
   watch: {
-    username: 'update',
-    password: 'update',
+    username:   'update',
+    password:   'update',
+    knownHosts: 'update'
   },
 
   methods: {
@@ -39,8 +44,9 @@ export default {
     update() {
       this.value.setData('ssh-publickey', this.username);
       this.value.setData('ssh-privatekey', this.password);
+      this.value.setData('known_hosts', this.knownHosts);
     }
-  },
+  }
 };
 </script>
 
@@ -78,5 +84,17 @@ export default {
         />
       </div>
     </div>
+    <div class="row mt-40">
+      <div class="col span-12">
+        <LabeledInput
+          v-if="showKnownHosts"
+          v-model:value="knownHosts"
+          type="multiline"
+          :label="t('secret.ssh.knownHosts')"
+          :mode="mode"
+          :placeholder="t('secret.ssh.knownHostsPlaceholder')"
+        />
+      </div>
+    </div>
   </div>
 </template>

package/list/provisioning.cattle.io.cluster.vue

@@ -174,6 +174,7 @@ export default {
     // results are filtered so we wouldn't get the correct count on indicator...
     return { loadIndeterminate: true };
   }
+
 };
 </script>
 

package/models/fleet.cattle.io.gitrepo.js

@@ -178,7 +178,7 @@ export default class GitRepo extends SteveModel {
   }
 
   get github() {
-    const match = this.spec.repo.match(/^https?:\/\/github\.com\/(.*?)(\.git)?\/*$/);
+    const match = (this.spec.repo || '').match(/^https?:\/\/github\.com\/(.*?)(\.git)?\/*$/);
 
     if (match) {
       return match[1];
@@ -196,7 +196,7 @@ export default class GitRepo extends SteveModel {
   }
 
   get repoDisplay() {
-    let repo = this.spec.repo;
+    let repo = this.spec.repo || '';
 
     if (!repo) {
       return null;

package/models/provisioning.cattle.io.cluster.js

@@ -5,7 +5,7 @@ import SteveModel from '@shell/plugins/steve/steve-class';
 import { findBy } from '@shell/utils/array';
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
-import { escapeHtml, ucFirst } from '@shell/utils/string';
+import { ucFirst } from '@shell/utils/string';
 import { compare } from '@shell/utils/version';
 import { AS, MODE, _VIEW, _YAML } from '@shell/config/query-params';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
@@ -988,17 +988,7 @@ export default class ProvCluster extends SteveModel {
 
   get groupByParent() {
     // Customer helper can report if the cluster has a parent cluster
-    return this.customProvisionerHelper?.parentCluster?.(this);
-  }
-
-  get groupByLabel() {
-    const name = this.groupByParent;
-
-    if (name) {
-      return this.$rootGetters['i18n/t']('resourceTable.groupLabel.cluster', { name: escapeHtml(name) });
-    } else {
-      return this.$rootGetters['i18n/t']('resourceTable.groupLabel.notInACluster');
-    }
+    return this.customProvisionerHelper?.parentCluster?.(this) || this.t('resourceTable.groupLabel.notInACluster');
   }
 
   get hasError() {

package/models/secret.js

@@ -49,6 +49,11 @@ export default class Secret extends SteveModel {
     return this._type === TYPES.CLOUD_CREDENTIAL || (this.metadata.namespace === 'cattle-global-data' && this.metadata.generateName === 'cc-');
   }
 
+  // For Fleet SSH secrets - does the secret have the 'known_hosts' data key?
+  get supportsSshKnownHosts() {
+    return this._type === TYPES.SSH && 'known_hosts' in this.data;
+  }
+
   get issuer() {
     const { metadata:{ annotations = {} } } = this;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.2-rc.3",
+  "version": "3.0.2-rc.4",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/account/index.vue

@@ -160,6 +160,8 @@ export default {
       <div>
         <button
           v-if="canChangePassword"
+          role="button"
+          :aria-label="t('accountAndKeys.account.change')"
           type="button"
           class="btn role-primary"
           data-testid="account_change_password"
@@ -182,6 +184,8 @@ export default {
       </div>
       <button
         v-if="apiKeySchema"
+        role="button"
+        :aria-label="t('accountAndKeys.apiKeys.add.label')"
         class="btn role-primary add mb-20"
         data-testid="account_create_api_keys"
         @click="addKey"

package/pages/c/_cluster/explorer/ConfigBadge.vue

@@ -24,9 +24,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="config-badge"
-  >
+  <div class="config-badge">
     <div>
       <button
         class="badge-install btn btn-sm role-secondary"
@@ -34,7 +32,6 @@ export default {
         role="button"
         tabindex="0"
         @click="customBadgeDialog"
-        @keyup.space="customBadgeDialog"
       >
         <i
           v-clean-tooltip="tooltip"
@@ -60,6 +57,10 @@ export default {
     > I {
       line-height: inherit;
     }
+
+    &:focus {
+      outline: 0;
+    }
   }
 
 </style>

package/pages/c/_cluster/uiplugins/AddExtensionRepos.vue

@@ -42,7 +42,8 @@ export default {
           branch: UI_PLUGINS_REPOS.PARTNERS.BRANCH,
         }
       },
-      isDialogActive: false,
+      isDialogActive:      false,
+      returnFocusSelector: '[data-testid="extensions-page-menu"]'
     };
   },
 
@@ -109,6 +110,7 @@ export default {
     :title="t('plugins.addRepos.title')"
     mode="add"
     data-testid="add-extensions-repos-modal"
+    :return-focus-selector="returnFocusSelector"
     @okay="doAddRepos"
     @closed="isDialogActive = false"
   >

package/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue

@@ -128,6 +128,7 @@ export default {
       ...initialState(),
       secondaryResourceData: null,
       showModal:             false,
+      returnFocusSelector:   '[data-testid="extensions-catalog-load-dialog"]'
     };
   },
 
@@ -434,6 +435,8 @@ export default {
     name="catalogLoadDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
     @close="closeDialog()"
   >
     <Loading

package/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue

@@ -23,7 +23,11 @@ export default {
 
   data() {
     return {
-      catalog: undefined, busy: false, plugins: null, showModal: false,
+      catalog:             undefined,
+      busy:                false,
+      plugins:             null,
+      showModal:           false,
+      returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]'
     };
   },
 
@@ -121,6 +125,8 @@ export default {
     name="uninstallCatalogDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
     @close="closeDialog(false)"
   >
     <div

package/pages/c/_cluster/uiplugins/CatalogList/index.vue

@@ -95,10 +95,12 @@ export default {
         <template #header-left>
           <div>
             <button
-              class="btn bg-primary mr-10"
+              class="btn role-primary mr-10"
               type="button"
               aria-haspopup="dialog"
               data-testid="extensions-catalog-load-dialog"
+              role="button"
+              :aria-label="t('plugins.manageCatalog.imageLoad.load')"
               @click="$emit('showCatalogLoadDialog')"
             >
               {{ t('plugins.manageCatalog.imageLoad.load') }}

package/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue

@@ -18,17 +18,18 @@ export default {
 
   data() {
     return {
-      name:              '',
-      location:          '',
-      persist:           false,
-      canModifyName:     true,
-      canModifyLocation: true,
-      showModal:         false,
+      name:                '',
+      location:            '',
+      persist:             false,
+      canModifyName:       true,
+      canModifyLocation:   true,
+      showModal:           false,
+      returnFocusSelector: '[data-testid="extensions-page-menu"]'
     };
   },
 
   watch: {
-    name(neu, old) {
+    name(neu) {
       if (this.canModifyLocation) {
         this.location = `/pkg/${ neu }/${ neu }.umd.min.js`;
       }
@@ -154,6 +155,8 @@ export default {
     name="developerInstallPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
     @close="closeDialog()"
   >
     <div class="plugin-install-dialog">

package/pages/c/_cluster/uiplugins/InstallDialog.vue

@@ -74,6 +74,10 @@ export default {
 
     chartVersionLoadsWithoutAuth() {
       return this.chartVersionInfo?.values?.plugin?.noAuth;
+    },
+
+    returnFocusSelector() {
+      return `[data-testid="extension-card-${ this.mode }-btn-${ this.plugin?.name }"]`;
     }
   },
 
@@ -251,6 +255,9 @@ export default {
     name="installPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="'#extensions-main-page'"
     @close="closeDialog(false)"
   >
     <div