@rancher/shell 0.1.0 → 0.1.1

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

@@ -1,15 +1,17 @@
 <script>
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { mapGetters } from 'vuex';
-import { FLEET, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
+import {
+  AUTH_TYPE, FLEET, NORMAN, SECRET, VIRTUAL_HARVESTER_PROVIDER
+} from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import ArrayList from '@shell/components/form/ArrayList';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import InputWithSelect from '@shell/components/form/InputWithSelect';
 import jsyaml from 'js-yaml';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Labels from '@shell/components/form/Labels';
 import Loading from '@shell/components/Loading';
@@ -19,7 +21,8 @@ import { base64Decode, base64Encode } from '@shell/utils/crypto';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import { _CREATE } from '@shell/config/query-params';
 import { isHarvesterCluster } from '@shell/utils/cluster';
-import { CAPI } from '@shell/config/labels-annotations';
+import { CAPI, CATALOG } from '@shell/config/labels-annotations';
+import { SECRET_TYPES } from '@shell/config/secret';
 
 const _VERIFY = 'verify';
 const _SKIP = 'skip';
@@ -39,7 +42,7 @@ export default {
     Loading,
     NameNsDescription,
     YamlEditor,
-    SelectOrCreateAuthSecret
+    SelectOrCreateAuthSecret,
   },
 
   mixins: [CreateEditView],
@@ -85,28 +88,50 @@ export default {
       targetMode = `group://${ targetClusterGroup }`;
     }
 
-    return {
-      allClusters:      [],
-      allClusterGroups: [],
-      allWorkspaces:    [],
+    const stepRepoInfo = {
+      name:             'stepRepoInfo',
+      title:            this.t('fleet.gitRepo.add.steps.repoInfo.title'),
+      label:            this.t('fleet.gitRepo.add.steps.repoInfo.label'),
+      subtext:          this.t('fleet.gitRepo.add.steps.repoInfo.subtext'),
+      descriptionKey:   'fleet.gitRepo.add.steps.repoInfo.description',
+      ready:            false,
+      weight:           30
+    };
 
-      username:   null,
-      password:   null,
-      publicKey:  null,
-      privateKey: null,
-      tlsMode:    null,
-      caBundle:   null,
+    const stepTargetInfo = {
+      name:           'stepTargetInfo',
+      title:          this.t('fleet.gitRepo.add.steps.targetInfo.title'),
+      label:          this.t('fleet.gitRepo.add.steps.targetInfo.label'),
+      subtext:        this.t('fleet.gitRepo.add.steps.targetInfo.subtext'),
+      descriptionKey: 'fleet.gitRepo.steps.add.targetInfo.description',
+      ready:          true,
+      weight:         30
+    };
 
+    const addRepositorySteps = [stepRepoInfo, stepTargetInfo].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+
+    return {
+      allClusters:          [],
+      allClusterGroups:     [],
+      allWorkspaces:        [],
+      tempCachedValues:     {},
+      username:             null,
+      password:             null,
+      publicKey:            null,
+      privateKey:           null,
+      tlsMode:              null,
+      caBundle:             null,
+      targetAdvancedErrors: null,
+      matchingClusters:     null,
       ref,
       refValue,
-
       targetMode,
       targetCluster,
       targetClusterGroup,
       targetAdvanced,
-      targetAdvancedErrors: null,
-
-      matchingClusters: null,
+      stepRepoInfo,
+      stepTargetInfo,
+      addRepositorySteps,
     };
   },
 
@@ -204,6 +229,11 @@ export default {
         { label: this.t('fleet.gitRepo.tls.skip'), value: _SKIP },
       ];
     },
+
+    stepOneRequires() {
+      return !!this.value.metadata.name && !!this.refValue;
+    }
+
   },
 
   watch: {
@@ -225,6 +255,7 @@ export default {
 
   created() {
     this.registerBeforeHook(this.cleanTLS, 'cleanTLS');
+    this.registerBeforeHook(this.doCreateSecrets, `registerAuthSecrets${ new Date().getTime() }`, 99);
   },
 
   methods: {
@@ -237,6 +268,10 @@ export default {
       }
     },
 
+    updateCachedAuthVal(val, key) {
+      this.tempCachedValues[key] = typeof val === 'string' ? { selected: val } : { ...val };
+    },
+
     updateAuth(val, key) {
       const spec = this.value.spec;
 
@@ -245,6 +280,8 @@ export default {
       } else {
         delete spec[key];
       }
+
+      this.updateCachedAuthVal(val, key);
     },
 
     updateTargets() {
@@ -293,6 +330,8 @@ export default {
       } else {
         spec.targets = [];
       }
+
+      this.stepOneReady();
     },
 
     changeRef({ text, selected }) {
@@ -307,12 +346,91 @@ export default {
         delete spec.branch;
         spec.revision = text;
       }
+
+      this.stepOneReady();
+    },
+
+    async doCreateSecrets() {
+      if (this.tempCachedValues.clientSecretName) {
+        await this.doCreate('clientSecretName', this.tempCachedValues.clientSecretName);
+      }
+
+      if (this.tempCachedValues.helmSecretName) {
+        await this.doCreate('helmSecretName', this.tempCachedValues.helmSecretName);
+      }
+    },
+
+    async doCreate(name, credentials) {
+      const { selected, publicKey, privateKey } = credentials;
+
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(selected) ) {
+        return;
+      }
+
+      let secret;
+
+      if ( selected === AUTH_TYPE._S3 ) {
+        secret = await this.$store.dispatch(`rancher/create`, {
+          type:               NORMAN.CLOUD_CREDENTIAL,
+          s3credentialConfig: {
+            accessKey: publicKey,
+            secretKey: privateKey,
+          },
+        });
+      } else {
+        secret = await this.$store.dispatch(`${ CATALOG._MANAGEMENT }/create`, {
+          type:     SECRET,
+          metadata: {
+            namespace:    this.value.metadata.namespace,
+            generateName: 'auth-'
+          },
+        });
+
+        let type, publicField, privateField;
+
+        switch ( selected ) {
+        case AUTH_TYPE._SSH:
+          type = SECRET_TYPES.SSH;
+          publicField = 'ssh-publickey';
+          privateField = 'ssh-privatekey';
+          break;
+        case AUTH_TYPE._BASIC:
+          type = SECRET_TYPES.BASIC;
+          publicField = 'username';
+          privateField = 'password';
+          break;
+        default:
+          throw new Error('Unknown type');
+        }
+
+        secret._type = type;
+        secret.data = {
+          [publicField]:  base64Encode(publicKey),
+          [privateField]: base64Encode(privateKey),
+        };
+      }
+
+      await secret.save();
+
+      await this.$nextTick(() => {
+        this.updateAuth(secret.id, name);
+      });
+
+      return secret;
     },
 
     updateTlsMode(event) {
       this.tlsMode = event;
     },
 
+    onUpdateRepoName() {
+      this.stepOneReady();
+    },
+
+    stepOneReady() {
+      this.$set(this.addRepositorySteps[0], 'ready', this.stepOneRequires);
+    },
+
     updateTls() {
       const spec = this.value.spec;
 
@@ -345,6 +463,7 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
+
   <CruResource
     v-else
     :done-route="doneRoute"
@@ -353,163 +472,177 @@ export default {
     :subtypes="[]"
     :validation-passed="true"
     :errors="errors"
+    :steps="addRepositorySteps"
+    :edit-first-step="true"
+    :finish-mode="'finish'"
+    class="wizard"
+    @cancel="done"
     @error="e=>errors = e"
     @finish="save"
-    @cancel="done"
   >
-    <Banner
-      v-if="isLocal && mode === 'create'"
-      color="info"
-      class="mb-40"
-    >
-      {{ t('fleet.gitRepo.createLocalBanner') }}
-    </Banner>
-    <NameNsDescription v-if="!isView" v-model="value" :namespaced="false" :mode="mode" />
-
-    <div class="row" :class="{'mt-20': isView}">
-      <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.repo"
-          :mode="mode"
-          label-key="fleet.gitRepo.repo.label"
-          :placeholder="t('fleet.gitRepo.repo.placeholder', null, true)"
-        />
-      </div>
-      <div class="col span-6">
-        <InputWithSelect
-          :mode="mode"
-          :select-label="t('fleet.gitRepo.ref.label')"
-          :select-value="ref"
-          :text-label="t(`fleet.gitRepo.ref.${ref}Label`)"
-          :text-placeholder="t(`fleet.gitRepo.ref.${ref}Placeholder`)"
-          :text-value="refValue"
-          :text-required="true"
-          :options="[{label: t('fleet.gitRepo.ref.branch'), value: 'branch'}, {label: t('fleet.gitRepo.ref.revision'), value: 'revision'}]"
-          @input="changeRef($event)"
-        />
-      </div>
-    </div>
-
-    <SelectOrCreateAuthSecret
-      :value="value.spec.clientSecretName"
-      :register-before-hook="registerBeforeHook"
-      :namespace="value.metadata.namespace"
-      in-store="management"
-      generate-name="gitrepo-auth-"
-      label-key="fleet.gitRepo.auth.git"
-      @input="updateAuth($event, 'clientSecretName')"
-    />
-
-    <SelectOrCreateAuthSecret
-      :value="value.spec.helmSecretName"
-      :register-before-hook="registerBeforeHook"
-      :namespace="value.metadata.namespace"
-      in-store="management"
-      generate-name="helmrepo-auth-"
-      label-key="fleet.gitRepo.auth.helm"
-      hook-name="registerHelmAuthSecret"
-      @input="updateAuth($event, 'helmSecretName')"
-    />
-
-    <template v-if="isTls">
-      <div class="spacer" />
-      <div class="row">
+    <template #noticeBanner>
+      <Banner
+        v-if="isLocal && mode === 'create'"
+        color="info"
+      >
+        {{ t('fleet.gitRepo.createLocalBanner') }}
+      </Banner>
+    </template>
+    <template #stepRepoInfo>
+      <NameNsDescription v-if="!isView" v-model="value" :namespaced="false" :mode="mode" @change="onUpdateRepoName" />
+
+      <div class="row" :class="{'mt-20': isView}">
         <div class="col span-6">
-          <LabeledSelect
-            :label="t('fleet.gitRepo.tls.label')"
+          <LabeledInput
+            v-model="value.spec.repo"
             :mode="mode"
-            :value="tlsMode"
-            :options="tlsOptions"
-            @input="updateTlsMode($event)"
+            label-key="fleet.gitRepo.repo.label"
+            :placeholder="t('fleet.gitRepo.repo.placeholder', null, true)"
           />
         </div>
-        <div v-if="tlsMode === _SPECIFY" class="col span-6">
-          <LabeledInput
-            v-model="caBundle"
-            type="multiline"
-            label-key="fleet.gitRepo.caBundle.label"
-            placeholder-key="fleet.gitRepo.caBundle.placeholder"
+        <div class="col span-6">
+          <InputWithSelect
+            :mode="mode"
+            :select-label="t('fleet.gitRepo.ref.label')"
+            :select-value="ref"
+            :text-label="t(`fleet.gitRepo.ref.${ref}Label`)"
+            :text-placeholder="t(`fleet.gitRepo.ref.${ref}Placeholder`)"
+            :text-value="refValue"
+            :text-required="true"
+            :options="[{label: t('fleet.gitRepo.ref.branch'), value: 'branch'}, {label: t('fleet.gitRepo.ref.revision'), value: 'revision'}]"
+            @input="changeRef($event)"
           />
         </div>
       </div>
-    </template>
-    <div class="spacer" />
-
-    <h2 v-t="'fleet.gitRepo.paths.label'" />
-    <ArrayList
-      v-model="value.spec.paths"
-      :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" />
+
+      <SelectOrCreateAuthSecret
+        :value="value.spec.clientSecretName"
+        :register-before-hook="registerBeforeHook"
+        :namespace="value.metadata.namespace"
+        :delegate-create-to-parent="true"
+        in-store="management"
+        :pre-select="tempCachedValues.clientSecretName"
+        :mode="mode"
+        generate-name="gitrepo-auth-"
+        label-key="fleet.gitRepo.auth.git"
+        @input="updateAuth($event, 'clientSecretName')"
+        @inputauthval="updateCachedAuthVal($event, 'clientSecretName')"
+      />
+
+      <SelectOrCreateAuthSecret
+        :value="value.spec.helmSecretName"
+        :register-before-hook="registerBeforeHook"
+        :namespace="value.metadata.namespace"
+        :delegate-create-to-parent="true"
+        in-store="management"
+        :mode="mode"
+        generate-name="helmrepo-auth-"
+        label-key="fleet.gitRepo.auth.helm"
+        :pre-select="tempCachedValues.helmSecretName"
+        @input="updateAuth($event, 'helmSecretName')"
+        @inputauthval="updateCachedAuthVal($event, 'helmSecretName')"
+      />
+
+      <template v-if="isTls">
+        <div class="spacer" />
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect
+              :label="t('fleet.gitRepo.tls.label')"
+              :mode="mode"
+              :value="tlsMode"
+              :options="tlsOptions"
+              @input="updateTlsMode($event)"
+            />
+          </div>
+          <div v-if="tlsMode === _SPECIFY" class="col span-6">
+            <LabeledInput
+              v-model="caBundle"
+              :mode="mode"
+              type="multiline"
+              label-key="fleet.gitRepo.caBundle.label"
+              placeholder-key="fleet.gitRepo.caBundle.placeholder"
+            />
+          </div>
+        </div>
       </template>
-    </ArrayList>
+      <div class="spacer" />
 
-    <div class="spacer" />
+      <h2 v-t="'fleet.gitRepo.paths.label'" />
+      <ArrayList
+        v-model="value.spec.paths"
+        :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>
+    </template>
+    <template #stepTargetInfo>
+      <h2 v-t="isLocal ? 'fleet.gitRepo.target.labelLocal' : 'fleet.gitRepo.target.label'" />
+
+      <template v-if="!isLocal">
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect
+              v-model="targetMode"
+              :options="targetOptions"
+              option-key="value"
+              :mode="mode"
+              :selectable="option => !option.disabled"
+              :label="t('fleet.gitRepo.target.selectLabel')"
+            >
+              <template v-slot:option="opt">
+                <hr v-if="opt.kind === 'divider'">
+                <div v-else-if="opt.kind === 'title'">
+                  {{ opt.label }}
+                </div>
+                <div v-else>
+                  {{ opt.label }}
+                </div>
+              </template>
+            </LabeledSelect>
+          </div>
+        </div>
 
-    <h2 v-t="isLocal ? 'fleet.gitRepo.target.labelLocal' : 'fleet.gitRepo.target.label'" />
+        <div v-if="targetMode === 'advanced'" class="row mt-10">
+          <div class="col span-12">
+            <YamlEditor v-model="targetAdvanced" />
+          </div>
+        </div>
+
+        <Banner v-for="(err, i) in targetAdvancedErrors" :key="i" color="error" :label="err" />
+      </template>
 
-    <template v-if="!isLocal">
-      <div class="row">
+      <div class="row mt-20">
         <div class="col span-6">
-          <LabeledSelect
-            v-model="targetMode"
-            :options="targetOptions"
-            option-key="value"
+          <LabeledInput
+            v-model="value.spec.serviceAccount"
             :mode="mode"
-            :selectable="option => !option.disabled"
-            :label="t('fleet.gitRepo.target.selectLabel')"
-          >
-            <template v-slot:option="opt">
-              <hr v-if="opt.kind === 'divider'">
-              <div v-else-if="opt.kind === 'title'">
-                {{ opt.label }}
-              </div>
-              <div v-else>
-                {{ opt.label }}
-              </div>
-            </template>
-          </LabeledSelect>
+            label-key="fleet.gitRepo.serviceAccount.label"
+            placeholder-key="fleet.gitRepo.serviceAccount.placeholder"
+          />
         </div>
-      </div>
-
-      <div v-if="targetMode === 'advanced'" class="row mt-10">
-        <div class="col span-12">
-          <YamlEditor v-model="targetAdvanced" />
+        <div class="col span-6">
+          <LabeledInput
+            v-model="value.spec.targetNamespace"
+            :mode="mode"
+            label-key="fleet.gitRepo.targetNamespace.label"
+            placeholder-key="fleet.gitRepo.targetNamespace.placeholder"
+            label="Target Namespace"
+            placeholder="Optional: Require all resources to be in this namespace"
+          />
         </div>
       </div>
-
-      <Banner v-for="(err, i) in targetAdvancedErrors" :key="i" color="error" :label="err" />
+      <div class="spacer" />
+      <Labels
+        :value="value"
+        :mode="mode"
+        :display-side-by-side="false"
+      />
     </template>
-
-    <div class="row mt-20">
-      <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.serviceAccount"
-          label-key="fleet.gitRepo.serviceAccount.label"
-          placeholder-key="fleet.gitRepo.serviceAccount.placeholder"
-        />
-      </div>
-      <div class="col span-6">
-        <LabeledInput
-          v-model="value.spec.targetNamespace"
-          label-key="fleet.gitRepo.targetNamespace.label"
-          placeholder-key="fleet.gitRepo.targetNamespace.placeholder"
-          label="Target Namespace"
-          placeholder="Optional: Require all resources to be in this namespace"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <Labels
-      :value="value"
-      :mode="mode"
-      :display-side-by-side="false"
-    />
   </CruResource>
 </template>

package/edit/harvesterhci.io.host/HarvesterDisk.vue

@@ -1,10 +1,9 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabelValue from '@shell/components/LabelValue';
-import BadgeState from '@shell/components/BadgeState';
-import Banner from '@shell/components/Banner';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import RadioButton from '@shell/components/form/RadioButton';
+import { BadgeState } from '@components/BadgeState';
+import { Banner } from '@components/Banner';
+import { RadioGroup, RadioButton } from '@components/Form/Radio';
 
 export default {
   components: {