Fix: Add DockerHub authentication support to Registry configuration add/edit page

Author: lsongsuse

pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue

@@ -6,13 +6,13 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import CruResource from '@shell/components/CruResource';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { Checkbox } from '@components/Form/Checkbox';
-import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
+import { MANAGEMENT, SECRET } from '@shell/config/types';
 import {
   REGISTRY_TYPE_OPTIONS,
   SCAN_INTERVAL_OPTIONS, SCAN_INTERVALS
 } from "@pkg/constants/scan-interval-options";
 import { PRODUCT_NAME, PAGE } from "@pkg/types";
+import { SECRET_TYPES } from "@shell/config/secret";
 
 export default {
   name: 'CruRegistry',
@@ -23,12 +23,17 @@ export default {
     NameNsDescription,
     CruResource,
     SelectOrCreateAuthSecret,
-    Checkbox,
     LabeledSelect
   },
 
   mixins: [CreateEditView],
 
+  async fetch() {
+    this.allSecrets = await this.$store.dispatch(
+        `${this.inStore}/findAll`,{type: SECRET}
+    )
+  },
+
   data() {
     if (!this.value.spec) {
       this.value.spec = {
@@ -46,6 +51,8 @@ export default {
     return {
       inStore: this.$store.getters['currentProduct'].inStore,
       errors: null,
+      allSecrets:      null,
+      filteredSecrets: null,
       PAGE,
       PRODUCT_NAME,
     };
@@ -55,17 +62,45 @@ export default {
     inStore() {
       return this.$store.getters['currentProduct']?.inStore || MANAGEMENT;
     },
-    secretNamespace() {
-      const currentNamespace = this.value.metadata?.namespace? this.value.metadata.namespace: this.$store.getters['defaultNamespace'];
-      const tryNames = [ currentNamespace, 'default'];
 
-      for ( const name of tryNames ) {
-        if ( this.$store.getters['cluster/byId'](NAMESPACE, name) ) {
-          return name;
+    /**
+     * Filter secrets given their namespace and required secret type
+     *
+     * Convert secrets to list of options and supplement with custom entries
+     */
+    options(){
+      let filteredSecrets = [];
+
+      if(this.allSecrets){
+        const currentNamespace = this.value.metadata?.namespace? this.value.metadata.namespace: "default";
+        if(this.allSecrets) {
+          // Filter secrets given their namespace
+          filteredSecrets = this.allSecrets
+              .filter((secret) => secret.metadata.namespace === currentNamespace)
+              .filter((secret) =>
+                  SECRET_TYPES.DOCKER_JSON === secret._type
+              );
         }
       }
 
-      return this.$store.getters[`${ this.inStore }/all`](NAMESPACE)[0]?.id;
+      let out = filteredSecrets.map((x) => {
+        const {
+          metadata, id
+        } = x;
+        const label = metadata.name;
+
+        return {
+          label,
+          value: id.includes('/')?id.split('/')[1]:id,
+        };
+      });
+
+      out.unshift({
+        label: this.t('generic.none'),
+        value: "",
+      });
+
+      return out;
     },
 
     SCAN_INTERVAL_OPTIONS: function() {
@@ -101,6 +136,8 @@ export default {
         });
     },
 
+    update(){},
+
     doneRoute() {
       console.log('doneRoute');
       return `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`;
@@ -163,21 +200,19 @@ export default {
           />
         </div>
       </div>
-      <div class="registry-input-label mt-24 mb-0">
+      <div class="registry-input-label mt-24">
         {{ t('imageScanner.registries.configuration.cru.authentication.label') }}
       </div>
-      <SelectOrCreateAuthSecret
-          v-model:value="value.spec.authSecret"
-          :mode="mode"
-          data-testid="registry-auth-secret"
-          :register-before-hook="registerBeforeHook"
-          :namespace="secretNamespace"
-          :limit-to-namespace="true"
-          :in-store="inStore"
-          :allow-ssh=false
-          generate-name="registry-auth-"
-          :cache-secrets="true"
-      />
+      <div class="row">
+        <div class="col span-6">
+          <LabeledSelect
+              v-model:value="value.spec.authSecret"
+              data-testid="auth-secret-select"
+              :mode="mode"
+              :options="options"
+          />
+        </div>
+      </div>
       <div class="registry-input-label mt-24">
         {{ t('imageScanner.registries.configuration.cru.scan.label') }}
       </div>