@rancher/shell 3.0.9-rc.5 → 3.0.9

package/components/fleet/GitRepoAdvancedTab.vue

@@ -0,0 +1,333 @@
+<script setup>
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { Banner } from '@components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import UnitInput from '@shell/components/form/UnitInput';
+import FleetOCIStorageSecret from '@shell/components/fleet/FleetOCIStorageSecret.vue';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  },
+  workspace: {
+    type:     String,
+    required: true
+  },
+  tlsMode: {
+    type:     String,
+    required: true
+  },
+  tlsOptions: {
+    type:     Array,
+    required: true
+  },
+  caBundle: {
+    type:    String,
+    default: null
+  },
+  isTls: {
+    type:     Boolean,
+    required: true
+  },
+  displayHelmRepoUrlRegex: {
+    type:     Boolean,
+    required: true
+  },
+  tempCachedValues: {
+    type:     Object,
+    required: true
+  },
+  correctDriftEnabled: {
+    type:     Boolean,
+    required: true
+  },
+  pollingInterval: {
+    type:     Number,
+    required: false,
+    default:  undefined
+  },
+  showPollingIntervalWarning: {
+    type:     Boolean,
+    required: true
+  },
+  specifyOption: {
+    type:     String,
+    required: true
+  },
+  registerBeforeHook: {
+    type:     Function,
+    required: true
+  },
+  isGithubDotComRepository: {
+    type:     Boolean,
+    required: true,
+  },
+  isBasicAuthSelected: {
+    type:     Boolean,
+    required: true,
+  }
+});
+
+const emit = defineEmits([
+  'update:tls-mode',
+  'update:ca-bundle',
+  'update:auth',
+  'update:cached-auth',
+  'update:correct-drift',
+  'update:polling-enabled',
+  'update:polling-interval',
+  'update:validate-polling-interval',
+]);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const updateTlsMode = (event) => {
+  emit('update:tls-mode', event);
+};
+
+const updateCaBundle = (value) => {
+  emit('update:ca-bundle', value);
+};
+
+const updateAuth = (val, key) => {
+  emit('update:auth', { value: val, key });
+};
+
+const updateCachedAuthVal = (val, key) => {
+  emit('update:cached-auth', { value: val, key });
+};
+
+const updateCorrectDrift = (value) => {
+  emit('update:correct-drift', value);
+};
+
+const enablePolling = (value) => {
+  emit('update:polling-enabled', value);
+};
+
+const updatePollingInterval = (value) => {
+  emit('update:polling-interval', value);
+};
+
+const validatePollingInterval = () => {
+  emit('update:validate-polling-interval');
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="!isView"
+      color="info"
+      label-key="fleet.gitRepo.add.steps.advanced.info"
+      data-testid="gitrepo-advanced-info"
+    />
+
+    <h2>{{ t('fleet.gitRepo.auth.title') }}</h2>
+    <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"
+      :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')"
+    />
+    <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"
+      :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')"
+    />
+
+    <div
+      v-if="displayHelmRepoUrlRegex"
+      class="row mt-20"
+    >
+      <div
+        class="col span-6"
+        data-testid="gitrepo-helm-repo-url-regex"
+      >
+        <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 === specifyOption"
+          class="col span-6"
+        >
+          <LabeledInput
+            :value="caBundle"
+            :mode="mode"
+            type="multiline"
+            label-key="fleet.gitRepo.caBundle.label"
+            placeholder-key="fleet.gitRepo.caBundle.placeholder"
+            @update:value="updateCaBundle"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="spacer" />
+
+    <h2>
+      {{ t('fleet.gitRepo.ociStorageSecret.title') }}
+    </h2>
+    <div class="row mt-20">
+      <div class="col span-6">
+        <FleetOCIStorageSecret
+          :secret="value.spec.ociRegistrySecret"
+          :workspace="workspace"
+          :mode="mode"
+          @update:value="value.spec.ociRegistrySecret=$event"
+        />
+      </div>
+    </div>
+    <div class="spacer" />
+
+    <h2>
+      {{ t('fleet.gitRepo.resources.label') }}
+    </h2>
+    <div class="resource-handling">
+      <Checkbox
+        :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"
+        @update:value="updateCorrectDrift"
+      />
+      <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>
+      {{ t('fleet.gitRepo.polling.label') }}
+    </h2>
+    <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"
+          :mode="mode"
+          @update:value="enablePolling"
+        />
+      </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
+            :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"
+            @update:value="updatePollingInterval"
+            @blur.capture="validatePollingInterval"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .spacer {
+    padding: 30px 0 0 0;
+  }
+  :deep() .select-or-create-auth-secret {
+    .row {
+      margin-top: 10px !important;
+    }
+  }
+  .resource-handling {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .polling {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>

package/components/fleet/GitRepoMetadataTab.vue

@@ -0,0 +1,43 @@
+<script setup>
+import Labels from '@shell/components/form/Labels';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['input']);
+
+const updateValue = (event) => {
+  emit('input', event);
+};
+</script>
+
+<template>
+  <div>
+    <NameNsDescription
+      v-if="!isView"
+      :value="value"
+      :namespaced="false"
+      :mode="mode"
+      @update:value="updateValue"
+    />
+    <Labels
+      :value="value"
+      :mode="mode"
+      :display-side-by-side="false"
+      :add-icon="'icon-plus'"
+    />
+  </div>
+</template>

package/components/fleet/GitRepoRepositoryTab.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import InputWithSelect from '@shell/components/form/InputWithSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import FleetGitRepoPaths from '@shell/components/fleet/FleetGitRepoPaths.vue';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  },
+  refType: {
+    type:     String,
+    required: true
+  },
+  refValue: {
+    type:     String,
+    required: true
+  },
+  touched: {
+    type:    [Object, Boolean],
+    default: null
+  },
+  fvGetAndReportPathRules: {
+    type:     Function,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:ref', 'update:paths', 'touched']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const changeRef = (event) => {
+  emit('update:ref', event);
+};
+
+const updatePaths = (value) => {
+  emit('update:paths', value);
+};
+
+const onTouched = (value) => {
+  emit('touched', value);
+};
+</script>
+
+<template>
+  <div>
+    <h2>{{ t('fleet.gitRepo.repo.title') }}</h2>
+    <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-${refType}`"
+          :mode="mode"
+          :select-label="t('fleet.gitRepo.ref.label')"
+          :select-value="refType"
+          :text-label="t(`fleet.gitRepo.ref.${refType}Label`)"
+          :text-placeholder="t(`fleet.gitRepo.ref.${refType}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
+      }"
+      :mode="mode"
+      :touched="touched"
+      @update:value="updatePaths"
+      @touched="onTouched"
+    />
+  </div>
+</template>

package/components/fleet/GitRepoTargetTab.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import FleetClusterTargets from '@shell/components/fleet/FleetClusterTargets/index.vue';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  realMode: {
+    type:     String,
+    required: true
+  },
+  targetsCreated: {
+    type:    String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:targets', 'created']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const updateTargets = (value) => {
+  emit('update:targets', value);
+};
+
+const onCreated = (value) => {
+  emit('created', value);
+};
+</script>
+
+<template>
+  <div>
+    <h2>{{ t('fleet.gitRepo.target.label') }}</h2>
+    <FleetClusterTargets
+      :targets="value.spec.targets"
+      :matching="value.targetClusters"
+      :namespace="value.metadata.namespace"
+      :mode="realMode"
+      :created="targetsCreated"
+      @update:value="updateTargets"
+      @created="onCreated"
+    />
+
+    <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"
+          :mode="mode"
+          label-key="fleet.gitRepo.serviceAccount.label"
+          placeholder-key="fleet.gitRepo.serviceAccount.placeholder"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="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>
+  </div>
+</template>