Load custom chart values components

chart/example.vue

@@ -0,0 +1,18 @@
+<script>
+import LabeledInput from '@/components/form/LabeledInput';
+
+export default {
+  components: { LabeledInput },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    }
+  }
+};
+</script>
+
+<template>
+  <LabeledInput v-model="value.foo" />
+</template>

config/labels-annotations.js

@@ -29,6 +29,12 @@ export const CATALOG = {
   EXPERIMENTAL:  'catalog.cattle.io/experimental',
   NAMESPACE:     'catalog.cattle.io/namespace',
   RELEASE_NAME:  'catalog.cattle.io/release-name',
+
+  REQUIRES:      'catalog.cattle.io/requires-gvr',
+  PROVIDES:      'catalog.cattle.io/provides-gvr',
+  AUTO_INSTALL:  'catalog.cattle.io/auto-install-gvr',
+
+  COMPONENT: 'catalog.cattle.io/ui-component',
 };
 
 export const RKE = { EXTERNAL_IP: 'rke.cattle.io/external-ip' };

edit/chartInstallAction.vue

@@ -96,8 +96,23 @@ export default {
       this.versionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
         repoType, repoName, chartName, version
       });
-      this.mergeValues(this.versionInfo.values);
-      this.valuesYaml = jsyaml.safeDump(this.value.values);
+
+      const component = this.version?.annotations?.[CATALOG.COMPONENT];
+
+      if ( component ) {
+        if ( this.$store.getters['catalog/haveComponent'](component) ) {
+          this.valuesComponent = this.$store.getters['catalog/importComponent'](component);
+        } else {
+          this.valuesComponent = null;
+        }
+      } else {
+        this.valuesComponent = null;
+      }
+
+      if ( !this.value.values ) {
+        this.mergeValues(this.versionInfo.values);
+        this.valuesYaml = jsyaml.safeDump(this.value.values);
+      }
     }
   },
 
@@ -116,7 +131,8 @@ export default {
       forceNamespace:    null,
       nameDisabled:      false,
 
-      errors: null,
+      errors:          null,
+      valuesComponent: null,
     };
   },
 
@@ -166,6 +182,12 @@ export default {
       // If there's nothing on page 1, go to page 2
       this.$router.applyQuery({ [STEP]: 2 });
     }
+
+    // For easy access debugging...
+    if ( typeof window !== 'undefined' ) {
+      window.v = v;
+      window.c = this;
+    }
   },
 
   methods: {
@@ -177,7 +199,7 @@ export default {
       this.value.values = merge({}, neu, this.value.values || {});
     },
 
-    valuesChanged(value) {
+    yamlChanged(value) {
       try {
         jsyaml.safeLoad(value);
 
@@ -281,11 +303,16 @@ export default {
     </template>
 
     <template v-if="versionInfo" #values>
+      <component
+        :is="valuesComponent"
+        v-if="valuesComponent"
+        v-model="value.values"
+      />
       <YamlEditor
-        v-if="versionInfo"
+        v-else
         class="yaml-editor"
         :value="valuesYaml"
-        @onInput="valuesChanged"
+        @onInput="yamlChanged"
       />
     </template>
 

nuxt.config.js

@@ -140,6 +140,7 @@ module.exports = {
     //     }
     //   }
     // },
+
     extend(config, { isClient, isDev }) {
       if ( isDev ) {
         config.devtool = 'eval-source-map';
@@ -167,7 +168,8 @@ module.exports = {
         });
       }
     },
-    //    extractCSS: true,
+
+    // extractCSS:   true,
     cssSourceMap: true,
     babel:        {
       presets({ isServer }) {

pages/c/_cluster/apps/index.vue

@@ -3,7 +3,9 @@ import AsyncButton from '@/components/AsyncButton';
 import Loading from '@/components/Loading';
 import Banner from '@/components/Banner';
 import { CATALOG } from '@/config/types';
-import { REPO_TYPE, REPO, CHART, VERSION } from '@/config/query-params';
+import {
+  REPO_TYPE, REPO, CHART, VERSION, SEARCH_QUERY, _FLAGGED, _UNFLAG
+} from '@/config/query-params';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@/config/labels-annotations';
 import { ensureRegex } from '@/utils/string';
 import { sortBy } from '@/utils/sort';
@@ -28,13 +30,25 @@ export default {
   },
 
   data() {
+    const query = this.$route.query;
+
+    let showRancher = query['rancher'] === _FLAGGED;
+    let showPartner = query['partner'] === _FLAGGED;
+    let showOther = query['other'] === _FLAGGED;
+
+    if ( !showRancher && !showPartner && !showOther ) {
+      showRancher = true;
+      showPartner = true;
+      showOther = true;
+    }
+
     return {
-      searchQuery:    '',
+      searchQuery:    query[SEARCH_QUERY] || '',
       sortField:      'certifiedSort',
       showDeprecated: false,
-      showRancher:    true,
-      showPartner:    true,
-      showOther:      true,
+      showRancher,
+      showPartner,
+      showOther,
     };
   },
 
@@ -73,7 +87,34 @@ export default {
     },
   },
 
+  watch: {
+    searchQuery(q) {
+      this.$router.applyQuery({ [SEARCH_QUERY]: q || undefined });
+    },
+
+    showRancher: 'updateShowFlags',
+    showPartner: 'updateShowFlags',
+    showOther:   'updateShowFlags',
+  },
+
   methods: {
+    updateShowFlags() {
+      if ( (!this.showRancher && !this.showPartner && !this.showOther) ||
+           ( this.showRancher && this.showPartner && this.showOther) ) {
+        this.$router.applyQuery({
+          rancher: _UNFLAG,
+          partner: _UNFLAG,
+          other:   _UNFLAG,
+        });
+      } else {
+        this.$router.applyQuery({
+          rancher: this.showRancher ? _FLAGGED : _UNFLAG,
+          partner: this.showPartner ? _FLAGGED : _UNFLAG,
+          other:   this.showOther ? _FLAGGED : _UNFLAG,
+        });
+      }
+    },
+
     selectChart(chart) {
       this.$router.push({
         name:   'c-cluster-product-resource-create',

store/catalog.js

@@ -75,6 +75,23 @@ export const getters = {
   errors(state) {
     return state.errors || [];
   },
+
+  haveComponent(state, getters) {
+    return (name) => {
+      try {
+        require.resolve(`@/chart/${ name }`);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    };
+  },
+
+  importComponent(state, getters) {
+    return (name) => {
+      return () => import(`@/chart/${ name }`);
+    };
+  },
 };
 
 export const mutations = {