@rancher/shell 3.0.9-rc.5 → 3.0.9

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

@@ -2,27 +2,22 @@
 import { mapGetters } from 'vuex';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
 import { set } from '@shell/utils/object';
-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 { 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';
-import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { base64Decode, base64Encode } from '@shell/utils/crypto';
-import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 import { CATALOG, FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
 import { SECRET_TYPES } from '@shell/config/secret';
-import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import FormValidation from '@shell/mixins/form-validation';
-import UnitInput from '@shell/components/form/UnitInput';
-import FleetClusterTargets from '@shell/components/fleet/FleetClusterTargets/index.vue';
 import { toSeconds } from '@shell/utils/duration';
-import FleetGitRepoPaths from '@shell/components/fleet/FleetGitRepoPaths.vue';
-import FleetOCIStorageSecret from '@shell/components/fleet/FleetOCIStorageSecret.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import GitRepoMetadataTab from '@shell/components/fleet/GitRepoMetadataTab.vue';
+import GitRepoRepositoryTab from '@shell/components/fleet/GitRepoRepositoryTab.vue';
+import GitRepoTargetTab from '@shell/components/fleet/GitRepoTargetTab.vue';
+import GitRepoAdvancedTab from '@shell/components/fleet/GitRepoAdvancedTab.vue';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
 
 const MINIMUM_POLLING_INTERVAL = 15;
 const DEFAULT_POLLING_INTERVAL = 60;
@@ -39,20 +34,15 @@ export default {
   emits: ['input'],
 
   components: {
-    Checkbox,
-    Banner,
     CruResource,
-    FleetOCIStorageSecret,
-    FleetGitRepoPaths,
-    InputWithSelect,
-    Labels,
-    LabeledInput,
-    LabeledSelect,
     Loading,
+    Tabbed,
+    Tab,
+    GitRepoMetadataTab,
+    GitRepoRepositoryTab,
+    GitRepoTargetTab,
+    GitRepoAdvancedTab,
     NameNsDescription,
-    SelectOrCreateAuthSecret,
-    FleetClusterTargets,
-    UnitInput,
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -105,7 +95,7 @@ export default {
       pollingInterval,
       ref,
       refValue,
-      displayHelmRepoURLRegex: false,
+      displayHelmRepoUrlRegex: false,
       targetsCreated:          '',
       fvFormRuleSets:          [{
         path:  'spec.repo',
@@ -122,7 +112,7 @@ export default {
       return _SPECIFY;
     },
 
-    isGitHubDotComRepository() {
+    isGithubDotComRepository() {
       // It needs to be specifically https://github.com, if different it could have something like https://company-intranet.github.com/ or https://company.com/github.com/
       return this.value.spec.repo?.toLowerCase().includes('https://github.com');
     },
@@ -257,7 +247,7 @@ export default {
     },
 
     toggleHelmRepoURLRegex(active) {
-      this.displayHelmRepoURLRegex = active;
+      this.displayHelmRepoUrlRegex = active;
 
       if (!active) {
         delete this.value.spec?.helmRepoURLRegex;
@@ -398,10 +388,17 @@ export default {
     },
 
     updatePollingInterval(value) {
+      this.pollingInterval = value;
+    },
+
+    validatePollingInterval() {
+      const value = this.pollingInterval;
+
       if (!value) {
         this.pollingInterval = DEFAULT_POLLING_INTERVAL;
         this.value.spec.pollingInterval = this.durationSeconds(DEFAULT_POLLING_INTERVAL);
       } else if (value === MINIMUM_POLLING_INTERVAL) {
+        this.pollingInterval = MINIMUM_POLLING_INTERVAL;
         delete this.value.spec.pollingInterval;
       } else {
         this.value.spec.pollingInterval = this.durationSeconds(value);
@@ -425,7 +422,6 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-
   <CruResource
     v-else
     :done-route="doneRoute"
@@ -434,7 +430,7 @@ export default {
     :subtypes="[]"
     :validation-passed="true"
     :errors="errors"
-    :steps="steps"
+    :steps="!isView ? steps : undefined"
     :finish-mode="'finish'"
     class="wizard"
     @cancel="done"
@@ -442,297 +438,171 @@ export default {
     @finish="save"
   >
     <template #stepMetadata>
-      <NameNsDescription
-        v-if="!isView"
+      <GitRepoMetadataTab
         :value="value"
-        :namespaced="false"
         :mode="mode"
-        @update:value="$emit('input', $event)"
-      />
-      <Labels
-        :value="value"
-        :mode="mode"
-        :display-side-by-side="false"
-        :add-icon="'icon-plus'"
+        :is-view="isView"
+        @input="$emit('input', $event)"
       />
     </template>
     <template #stepRepo>
-      <h2 v-t="'fleet.gitRepo.repo.title'" />
-      <div
-        class="row mb-20"
-        :class="{'mt-20': isView}"
-      >
-        <div class="col span-6">
-          <LabeledInput
-            v-model:value="value.spec.repo"
-            :mode="mode"
-            label-key="fleet.gitRepo.repo.label"
-            :placeholder="t('fleet.gitRepo.repo.placeholder', null, true)"
-            :required="true"
-            :rules="fvGetAndReportPathRules('spec.repo')"
-          />
-        </div>
-        <div class="col span-6">
-          <InputWithSelect
-            :data-testid="`gitrepo-${ref}`"
-            :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'}]"
-            @update:value="changeRef($event)"
-          />
-        </div>
-      </div>
-
-      <FleetGitRepoPaths
-        :value="{
-          paths: value.spec.paths,
-          bundles: value.spec.bundles
-        }"
+      <GitRepoRepositoryTab
+        :value="value"
         :mode="mode"
+        :is-view="isView"
+        :ref-type="ref"
+        :ref-value="refValue"
         :touched="touched"
-        @update:value="updatePaths"
+        :fv-get-and-report-path-rules="fvGetAndReportPathRules"
+        @update:ref="changeRef"
+        @update:paths="updatePaths"
         @touched="touched=$event"
       />
     </template>
 
     <template #stepAdvanced>
-      <Banner
-        v-if="!isView"
-        color="info"
-        label-key="fleet.gitRepo.add.steps.advanced.info"
-        data-testid="gitrepo-advanced-info"
+      <GitRepoAdvancedTab
+        :value="value"
+        :mode="mode"
+        :is-view="isView"
+        :workspace="workspace"
+        :tls-mode="tlsMode"
+        :tls-options="tlsOptions"
+        :ca-bundle="caBundle"
+        :is-tls="isTls"
+        :display-helm-repo-url-regex="displayHelmRepoUrlRegex"
+        :temp-cached-values="tempCachedValues"
+        :correct-drift-enabled="correctDriftEnabled"
+        :polling-interval="pollingInterval"
+        :show-polling-interval-warning="showPollingIntervalWarning"
+        :specify-option="_SPECIFY"
+        :register-before-hook="registerBeforeHook"
+        :is-github-dot-com-repository="isGithubDotComRepository"
+        :is-basic-auth-selected="isBasicAuthSelected"
+        @update:tls-mode="updateTlsMode"
+        @update:ca-bundle="caBundle = $event"
+        @update:auth="updateAuth($event.value, $event.key)"
+        @update:cached-auth="updateCachedAuthVal($event.value, $event.key)"
+        @update:correct-drift="correctDriftEnabled = $event"
+        @update:polling-enabled="enablePolling"
+        @update:polling-interval="updatePollingInterval"
+        @update:validate-polling-interval="validatePollingInterval"
       />
+    </template>
 
-      <h2 v-t="'fleet.gitRepo.auth.title'" />
-
-      <Banner
-        v-if="isGitHubDotComRepository && isBasicAuthSelected"
-        color="warning"
-        label-key="fleet.gitRepo.auth.githubdotcomPasswordBanner"
-        data-testid="gitrepo-githubdotcom-password-warning"
-      />
-      <SelectOrCreateAuthSecret
-        data-testid="gitrepo-git-auth"
-        :value="value.spec.clientSecretName"
-        :register-before-hook="registerBeforeHook"
-        :namespace="value.metadata.namespace"
-        :delegate-create-to-parent="true"
-        in-store="management"
-        :pre-select="tempCachedValues.clientSecretName"
+    <template #stepTarget>
+      <GitRepoTargetTab
+        :value="value"
         :mode="mode"
-        generate-name="gitrepo-auth-"
-        label-key="fleet.gitRepo.auth.git"
-        :cache-secrets="true"
-        :show-ssh-known-hosts="true"
-        :is-github-dot-com-repository="isGitHubDotComRepository"
-        @update:value="updateAuth($event, 'clientSecretName')"
-        @inputauthval="updateCachedAuthVal($event, 'clientSecretName')"
+        :real-mode="realMode"
+        :targets-created="targetsCreated"
+        @update:targets="updateTargets"
+        @created="targetsCreated=$event"
       />
-      <SelectOrCreateAuthSecret
-        data-testid="gitrepo-helm-auth"
-        :value="value.spec.helmSecretName"
-        :register-before-hook="registerBeforeHook"
-        :namespace="value.metadata.namespace"
-        :delegate-create-to-parent="true"
-        in-store="management"
+    </template>
+
+    <template
+      v-if="isView"
+      #single
+    >
+      <NameNsDescription
+        :value="value"
+        :namespaced="false"
         :mode="mode"
-        generate-name="helmrepo-auth-"
-        label-key="fleet.gitRepo.auth.helm"
-        :pre-select="tempCachedValues.helmSecretName"
-        :cache-secrets="true"
-        :show-ssh-known-hosts="true"
-        @update:value="updateAuth($event, 'helmSecretName')"
-        @inputauthval="updateCachedAuthVal($event, 'helmSecretName')"
+        @update:value="$emit('input', $event)"
       />
 
-      <div
-        v-if="displayHelmRepoURLRegex"
-        class="row mt-20"
+      <Tabbed
+        v-if="isView && steps.length === 4"
+        :side-tabs="true"
+        :use-hash="true"
       >
-        <div
-          class="col span-6"
-          data-testid="gitrepo-helm-repo-url-regex"
+        <Tab
+          v-if="steps[1]"
+          :name="steps[1].name"
+          :label="steps[1].label"
+          :weight="3"
         >
-          <LabeledInput
-            v-model:value="value.spec.helmRepoURLRegex"
-            :mode="mode"
-            label-key="fleet.gitRepo.helmRepoURLRegex"
-          />
-        </div>
-      </div>
-
-      <template v-if="isTls">
-        <div class="row mt-20">
-          <div class="col span-6">
-            <LabeledSelect
-              :label="t('fleet.gitRepo.tls.label')"
-              :mode="mode"
-              :value="tlsMode"
-              :options="tlsOptions"
-              @update:value="updateTlsMode($event)"
-            />
-          </div>
-          <div
-            v-if="tlsMode === _SPECIFY"
-            class="col span-6"
-          >
-            <LabeledInput
-              v-model:value="caBundle"
-              :mode="mode"
-              type="multiline"
-              label-key="fleet.gitRepo.caBundle.label"
-              placeholder-key="fleet.gitRepo.caBundle.placeholder"
-            />
-          </div>
-        </div>
-      </template>
-      <div class="spacer" />
-
-      <h2 v-t="'fleet.gitRepo.ociStorageSecret.title'" />
-      <div class="row mt-20">
-        <div class="col span-6">
-          <FleetOCIStorageSecret
-            :secret="value.spec.ociRegistrySecret"
-            :workspace="workspace"
+          <GitRepoRepositoryTab
+            :value="value"
             :mode="mode"
-            @update:value="value.spec.ociRegistrySecret=$event"
+            :is-view="isView"
+            :ref-type="ref"
+            :ref-value="refValue"
+            :touched="touched"
+            :fv-get-and-report-path-rules="fvGetAndReportPathRules"
+            @update:ref="changeRef"
+            @update:paths="updatePaths"
+            @touched="touched=$event"
           />
-        </div>
-      </div>
-      <div class="spacer" />
-
-      <h2 v-t="'fleet.gitRepo.resources.label'" />
-      <div class="resource-handling">
-        <Checkbox
-          v-model:value="correctDriftEnabled"
-          :tooltip="t('fleet.gitRepo.resources.correctDriftTooltip')"
-          data-testid="gitRepo-correctDrift-checkbox"
-          class="check"
-          type="checkbox"
-          label-key="fleet.gitRepo.resources.correctDrift"
-          :mode="mode"
-        />
-        <Checkbox
-          v-model:value="value.spec.keepResources"
-          :tooltip="t('fleet.gitRepo.resources.keepResourcesTooltip')"
-          data-testid="gitRepo-keepResources-checkbox"
-          class="check"
-          type="checkbox"
-          label-key="fleet.gitRepo.resources.keepResources"
-          :mode="mode"
-        />
-      </div>
-
-      <div class="spacer" />
-      <h2 v-t="'fleet.gitRepo.polling.label'" />
-      <div class="row polling">
-        <div class="col span-6">
-          <Checkbox
-            :value="value.isPollingEnabled"
-            data-testid="gitRepo-enablePolling-checkbox"
-            class="check"
-            type="checkbox"
-            label-key="fleet.gitRepo.polling.enable"
+        </Tab>
+        <Tab
+          v-if="steps[2]"
+          :name="steps[2].name"
+          :label="steps[2].label"
+          :weight="2"
+        >
+          <GitRepoTargetTab
+            :value="value"
             :mode="mode"
-            @update:value="enablePolling"
+            :real-mode="realMode"
+            :targets-created="targetsCreated"
+            @update:targets="updateTargets"
+            @created="targetsCreated=$event"
           />
-        </div>
-        <template v-if="value.isPollingEnabled">
-          <div class="col">
-            <Banner
-              v-if="showPollingIntervalWarning"
-              color="warning"
-              label-key="fleet.gitRepo.polling.pollingInterval.minimumValueWarning"
-              data-testid="gitRepo-pollingInterval-minimumValueWarning"
-            />
-            <Banner
-              v-if="value.isWebhookConfigured"
-              color="warning"
-              label-key="fleet.gitRepo.polling.pollingInterval.webhookWarning"
-              data-testid="gitRepo-pollingInterval-webhookWarning"
-            />
-          </div>
-          <div class="col span-6">
-            <UnitInput
-              v-model:value="pollingInterval"
-              data-testid="gitRepo-pollingInterval-input"
-              min="1"
-              :suffix="t('suffix.seconds', { count: pollingInterval })"
-              :label="t('fleet.gitRepo.polling.pollingInterval.label')"
-              :mode="mode"
-              tooltip-key="fleet.gitRepo.polling.pollingInterval.tooltip"
-              @blur.capture="updatePollingInterval(pollingInterval)"
-            />
-          </div>
-        </template>
-      </div>
-    </template>
-
-    <template #stepTarget>
-      <h2 v-t="'fleet.gitRepo.target.label'" />
-      <FleetClusterTargets
-        :targets="value.spec.targets"
-        :matching="value.targetClusters"
-        :namespace="value.metadata.namespace"
-        :mode="realMode"
-        :created="targetsCreated"
-        @update:value="updateTargets"
-        @created="targetsCreated=$event"
-      />
-
-      <h3 class="mmt-16">
-        {{ t('fleet.gitRepo.target.additionalOptions') }}
-      </h3>
-      <div class="row mt-20">
-        <div class="col span-6">
-          <LabeledInput
-            v-model:value="value.spec.serviceAccount"
+        </Tab>
+        <Tab
+          v-if="steps[3]"
+          :name="steps[3].name"
+          :label="steps[3].label"
+          :weight="1"
+        >
+          <GitRepoAdvancedTab
+            :value="value"
             :mode="mode"
-            label-key="fleet.gitRepo.serviceAccount.label"
-            placeholder-key="fleet.gitRepo.serviceAccount.placeholder"
+            :is-view="isView"
+            :workspace="workspace"
+            :tls-mode="tlsMode"
+            :tls-options="tlsOptions"
+            :ca-bundle="caBundle"
+            :is-tls="isTls"
+            :display-helm-repo-url-regex="displayHelmRepoUrlRegex"
+            :temp-cached-values="tempCachedValues"
+            :correct-drift-enabled="correctDriftEnabled"
+            :polling-interval="pollingInterval"
+            :show-polling-interval-warning="showPollingIntervalWarning"
+            :specify-option="_SPECIFY"
+            :register-before-hook="registerBeforeHook"
+            @update:tls-mode="updateTlsMode"
+            @update:ca-bundle="caBundle = $event"
+            @update:auth="updateAuth($event.value, $event.key)"
+            @update:cached-auth="updateCachedAuthVal($event.value, $event.key)"
+            @update:correct-drift="correctDriftEnabled = $event"
+            @update:polling-enabled="enablePolling"
+            @update:polling-interval="updatePollingInterval"
+            @update:validate-polling-interval="validatePollingInterval"
           />
-        </div>
-        <div class="col span-6">
-          <LabeledInput
-            v-model:value="value.spec.targetNamespace"
+        </Tab>
+        <Tab
+          name="labels"
+          label-key="generic.labelsAndAnnotations"
+          :weight="4"
+        >
+          <GitRepoMetadataTab
+            :value="value"
             :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"
+            :is-view="isView"
+            @input="$emit('input', $event)"
           />
-        </div>
-      </div>
+        </Tab>
+      </Tabbed>
     </template>
   </CruResource>
 </template>
 
 <style lang="scss" scoped>
-  .spacer {
-    padding: 30px 0 0 0;
-  }
-  :deep() .select-or-create-auth-secret {
-    .row {
-      margin-top: 10px !important;
-    }
-  }
   :deep() .input-container .in-input.labeled-select {
     min-width: 110px;
     width: 20%;
   }
-  .resource-handling {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-  }
-  .polling {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-  }
 </style>