Generic reference[type] question support (#3304)

components/Questions/Reference.vue

@@ -0,0 +1,103 @@
+<script>
+import LabeledSelect from '@/components/form/LabeledSelect';
+import { filterBy } from '@/utils/array';
+import { PVC, STORAGE_CLASS } from '@/config/types';
+import Question from './Question';
+
+// Older versions of rancher document these words as valid types
+const LEGACY_MAP = {
+  storageclass: STORAGE_CLASS,
+  pvc:          PVC,
+};
+
+export default {
+  components: { LabeledSelect },
+  mixins:     [Question],
+
+  props: {
+    targetNamespace: {
+      type:    String,
+      default: null,
+    },
+  },
+
+  async fetch() {
+    if ( this.typeSchema ) {
+      this.all = await this.$store.dispatch('cluster/findAll', { type: this.typeName });
+    }
+  },
+
+  data() {
+    const t = this.question.type;
+
+    let typeName;
+
+    const match = t.match(/^reference\[(.*)\]$/);
+
+    if ( match ) {
+      typeName = match?.[1];
+    } else {
+      typeName = LEGACY_MAP[t] || t;
+    }
+
+    let typeSchema;
+
+    if ( typeName ) {
+      typeSchema = this.$store.getters['cluster/schemaFor'](typeName);
+    }
+
+    return {
+      typeName,
+      typeSchema,
+      all: [],
+    };
+  },
+
+  computed: {
+    isNamespaced() {
+      return !!this.typeSchema?.attributes?.namespaced;
+    },
+
+    options() {
+      let out = this.all;
+
+      if ( this.isNamespaced ) {
+        out = filterBy(this.all, 'metadata.namespace', this.targetNamespace);
+      }
+
+      return out.map((x) => {
+        return {
+          label: x.nameDisplay || x.metadata.name,
+          value: x.metadata.name
+        };
+      });
+    }
+  },
+};
+</script>
+
+<template>
+  <div v-if="typeSchema" class="row">
+    <div class="col span-6">
+      <LabeledSelect
+        :mode="mode"
+        :options="options"
+        :disabled="$fetchState.pending"
+        :label="displayLabel"
+        :placeholder="question.description"
+        :required="question.required"
+        :value="value"
+        @input="!$fetchState.pending && $emit('input', $event)"
+      />
+    </div>
+    <div class="col span-6 mt-10">
+      {{ typeSchema.attributes.kind }}<span v-if="isNamespaced"> in namespace {{ targetNamespace }}</span>
+      <div v-if="showDescription">
+        {{ question.description }}
+      </div>
+    </div>
+  </div>
+  <div v-else class="text-error">
+    Unknown type {{ question.type }}
+  </div>
+</template>

components/Questions/Secret.vue

@@ -1,40 +0,0 @@
-<script>
-import LabeledSelect from '@/components/form/LabeledSelect';
-import { SECRET } from '@/config/types';
-import { filterBy } from '@/utils/array';
-import Question from './Question';
-
-export default {
-  components: { LabeledSelect },
-  mixins:     [Question],
-
-  async fetch() {
-    this.allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
-  },
-
-  data() {
-    return { allSecrets: [] };
-  },
-
-  computed: {
-    options() {
-      return filterBy(this.allSecrets, 'metadata.namespace', this.targetNamespace).map(x => x.metadata.name);
-    }
-  }
-};
-</script>
-
-<template>
-  <div>
-    Secret in namespace {{ targetNamespace }}
-    <LabeledSelect
-      :mode="mode"
-      :disabled="$fetchState.pending"
-      :label="displayLabel"
-      :placeholder="question.description"
-      :required="question.required"
-      :value="value"
-      @input="$emit('input', $event)"
-    />
-  </div>
-</template>

components/Questions/index.vue

@@ -11,17 +11,24 @@ import IntType from './Int';
 import FloatType from './Float';
 import ArrayType from './Array';
 import MapType from './Map';
+import ReferenceType from './Reference';
 
 export const knownTypes = {
-  string:    StringType,
-  hostname:  StringType, // @TODO
-  multiline: StringType,
-  password:  StringType,
-  boolean:   BooleanType,
-  enum:      EnumType,
-  int:       IntType,
-  float:     FloatType,
-  map:       MapType,
+  string:       StringType,
+  hostname:     StringType, // @TODO
+  multiline:    StringType,
+  password:     StringType,
+  boolean:      BooleanType,
+  enum:         EnumType,
+  int:          IntType,
+  float:        FloatType,
+  map:          MapType,
+  reference:    ReferenceType,
+  configmap:    ReferenceType,
+  secret:       ReferenceType,
+  storageclass: ReferenceType,
+  pvc:          ReferenceType,
+
   // storageclass
   // pvc
   // secret
@@ -34,6 +41,8 @@ export function componentForQuestion(q) {
     return ArrayType;
   } else if ( q.type.startsWith('map[') ) { // Same, only works with map[string|multiline]
     return MapType;
+  } else if ( q.type.startsWith('reference[') ) { // Same, only works with map[string|multiline]
+    return ReferenceType;
   }
 
   return 'string';

mixins/labeled-form-element.js

@@ -51,7 +51,7 @@ export default {
     },
 
     placeholder: {
-      type:    String,
+      type:    [String, Number],
       default: ''
     },