create cluster refactor (#164)

* clusterclass variables enhancements: add machine-scoped variable overrides, sections, labels, toggle, highlight

* style fixes, move workers and hide remove worker button if its  the last worker

add info annotation
delete assets from testing chart script

* fix bad merges in clusterclass-variables util;
disable editing capi clusters;
add documentation for docs annotation

* delete duplicate util

* pr feedback; fix required validation

* remove console logs and some commented code

* pr feedback

* pr feedback: style issues, validation issue, dead code, page reload issue

* pr feedback on example class dialog; remove throttle from cc variable watcher; hide the config button in the capi cluster detail view

* bang bang that awful sound

* tweak addPath to match removePath

Author: mantis-toboggan-md

pkg/capi/README.md

@@ -3,4 +3,20 @@
 
 ### **The CAPI UI extension is in tech preview.**
 
-Create clusters using the Cluster API and automatically import them into Rancher. The Turtles chart must be installed in the local Rancher cluster for the CAPI UI extension to work. Read more about the Rancher Turtles project [here](https://turtles.docs.rancher.com/turtles/next/en/index.html).
+Create clusters using the Cluster API and automatically import them into Rancher. The Turtles chart must be installed in the local Rancher cluster for the CAPI UI extension to work. Read more about the Rancher Turtles project [here](https://turtles.docs.rancher.com/turtles/next/en/index.html).
+
+
+
+#### Clusterclass Annotations
+The capi UI supports a small collection of annotations that may be applied to clusterclass variables to enhance the cluster creation UI.
+
+
+|  Name | Description|
+| --- | --- |
+| `turtles-capi.cattle.io/section` | Add variables to an expandable section. You can add variables to existing sections in the cluster form using one of the following values: `general`, `controlplane`, `networking`, or `workers`|
+| `turtles-capi.cattle.io/group` | Group variables within a section. Groups within groups are not supported.|
+| `turtles-capi.cattle.io/highlight` | Call extra attention to a variable, giving it a larger label and expanded description. Optionally, use a value of `warning` or `error` to add an icon and coloration (yellow for warning, red for error)|
+| `turtles-capi.cattle.io/label` | Add a label to your variable. Alternatively, name your variable one of the keys listed under `capi.variables` in ./pkg/capi/en-us.yaml|
+| `turtles-capi.cattle.io/docs` | Add documentation link to your variable description. Requires highlight|
+| `turtles-capi.cattle.io/toggled-by` | Tell the UI that this variable should only be shown when other variables are truthy. This is a comma-separated list of variable names. Boolean type variables that appear in another variable's toggled-by annotation will be rendered as toggle switches instead of checkboxes. It is the responsibility of the clusterclass author to group toggled variables near their toggle.|
+| `turtles-capi.cattle.io/type` | The value of this annotation should be a kubernetes resource type eg `infrastructure.cluster.x-k8s.io.azureclusteridentity` Tell the UI that this variable should be a reference to some kubernetes resource in the local cluster. The UI will automatically search for all instances of this resource type and provide the user a dropdown to select one, or manually enter a name if they do not have permission to view the resource but know its there. This annotation may only be used with object type variables that specify a name key and, if the resource is namespaced, a namespace key.|

pkg/capi/components/CCVariables/ResourceVariable.vue

@@ -0,0 +1,173 @@
+<script>
+import { mapGetters } from 'vuex';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { _CREATE } from '@shell/config/query-params';
+import { NAMESPACE } from '@shell/config/types';
+
+export default {
+  name: 'ResourceVariableInput',
+
+  props: {
+    // resource type to search for
+    resourceType: {
+      type:     String,
+      required: true
+    },
+
+    label: {
+      type:    String,
+      default: null
+    },
+    value: {
+      type:    Object,
+      default: () => {
+        return { name: '' };
+      }
+    },
+    // validation rules
+    // will be passed directly to a labeledselect w/ resource ID as value
+    rules: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+
+    // if it exists already, default to the cluster's namespace in the namespace dropdown
+    clusterNamespace: {
+      type:    String,
+      default: ''
+    },
+  },
+
+  emits: ['update:value', 'validationPassed'],
+
+  components: { LabeledSelect },
+
+  created() {
+    this.fetchResource(this.clusterNamespace);
+  },
+
+  data() {
+    return {
+      // spinner on resource input when querying by ns
+      loading:   false,
+      resource:  []
+    };
+  },
+
+  methods: {
+    async fetchResource(ns) {
+      this.loading = true;
+      const opt = {};
+
+      if (this.namespaced) {
+        opt.namespaced = ns;
+      }
+      try {
+        this.resource = await this.$store.dispatch('management/findAll', { type: this.resourceType, opt });
+      } catch (err) {
+        console.error(err);
+      }
+      this.loading = false;
+    },
+
+    update(name = '') {
+      const out = { name };
+
+      if (this.namespaced) {
+        out.namespace = this.namespace;
+      }
+
+      this.$emit('update:value', out);
+    },
+  },
+
+  computed: {
+    ...mapGetters({ all: 'management/all', schemaFor: 'management/schemaFor' }),
+
+    namespaced() {
+      const schema = this.schemaFor(this.resourceType);
+
+      return !!schema && schema?.attributes?.namespaced;
+    },
+
+    namespaces() {
+      return this.all(NAMESPACE);
+    },
+
+    resourceNames() {
+      return this.resource.map((r) => r?.metadata?.name || r.id);
+    },
+
+    name: {
+      get() {
+        return this.value?.name || '';
+      },
+      set(neu) {
+        const out = { name: neu };
+
+        if (this.namespaced) {
+          out.namespace = this.namespace;
+        }
+
+        this.$emit('update:value', out);
+      }
+    },
+
+    namespace: {
+      get() {
+        return this.value?.namespace || this.clusterNamespace || '';
+      },
+      set(neu) {
+        const out = { namespace: neu, name: this.name };
+
+        this.$emit('update:value', out);
+        // check if ns from list or user entered value
+        if (this.namespaces.find((n) => n.id === neu)) {
+          this.fetchResource(neu);
+        }
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="row">
+    <div
+      v-if="namespaced"
+      class="col span-6"
+    >
+      <LabeledSelect
+        label-key="tableHeaders.namespace"
+        :mode="mode"
+        :value="namespace"
+        option-label="id"
+        :options="namespaces || []"
+        searchable
+        taggable
+        :rules="rules"
+        @selecting="e=>namespace=e?.id"
+      />
+    </div>
+    <div class="col span-6">
+      <LabeledSelect
+        :value="name"
+        :loading="loading"
+        label-key="tableHeaders.name"
+        :options="resourceNames || []"
+        :mode="mode"
+        taggable
+        searchable
+        :rules="rules"
+        @selecting="e=>name=e"
+      />
+    </div>
+  </div>
+</template>