@rancher/shell 3.0.9-rc.5 → 3.0.9-rc.6

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>

package/components/fleet/HelmOpAdvancedTab.vue

@@ -0,0 +1,247 @@
+<script setup>
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import Banner from '@components/Banner/Banner.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
+import UnitInput from '@shell/components/form/UnitInput';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
+import { SOURCE_TYPE } from '@shell/config/product/fleet';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  },
+  sourceType: {
+    type:     String,
+    required: true
+  },
+  tempCachedValues: {
+    type:     Object,
+    required: true
+  },
+  correctDriftEnabled: {
+    type:     Boolean,
+    required: true
+  },
+  pollingInterval: {
+    type:     Number,
+    required: false,
+    default:  undefined
+  },
+  isPollingEnabled: {
+    type:     Boolean,
+    required: true
+  },
+  showPollingIntervalMinValueWarning: {
+    type:     Boolean,
+    required: true
+  },
+  enablePollingTooltip: {
+    type:    String,
+    default: null
+  },
+  isNullOrStaticVersion: {
+    type:     Boolean,
+    required: true
+  },
+  downstreamSecretsList: {
+    type:     Array,
+    required: true
+  },
+  downstreamConfigMapsList: {
+    type:     Array,
+    required: true
+  },
+  registerBeforeHook: {
+    type:     Function,
+    required: true
+  }
+});
+
+const emit = defineEmits([
+  'update:auth',
+  'update:cached-auth',
+  'update:correct-drift',
+  'update:downstream-resources',
+  'toggle-polling',
+  'update:polling-interval',
+  'update:validate-polling-interval',
+]);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const updateAuth = (value, key) => {
+  emit('update:auth', { value, key });
+};
+
+const updateCachedAuthVal = (value, key) => {
+  emit('update:cached-auth', { value, key });
+};
+
+const updateCorrectDrift = (value) => {
+  emit('update:correct-drift', value);
+};
+
+const updateDownstreamResources = (kind, list) => {
+  emit('update:downstream-resources', { kind, list });
+};
+
+const togglePolling = (value) => {
+  emit('toggle-polling', 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.helmOp.add.steps.advanced.info"
+      data-testid="helmOp-advanced-info"
+    />
+
+    <h2>{{ t('fleet.helmOp.auth.title') }}</h2>
+
+    <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.helmOp.auth.helm"
+      :pre-select="tempCachedValues.helmSecretName"
+      :cache-secrets="true"
+      :show-ssh-known-hosts="true"
+      @update:value="updateAuth($event, 'helmSecretName')"
+      @inputauthval="updateCachedAuthVal($event, 'helmSecretName')"
+    />
+
+    <div class="row mt-20 mb-20">
+      <div class="col span-6">
+        <Checkbox
+          v-model:value="value.spec.insecureSkipTLSVerify"
+          type="checkbox"
+          label-key="fleet.helmOp.tls.insecure"
+          :mode="mode"
+        />
+      </div>
+    </div>
+
+    <h2>{{ t('fleet.helmOp.resources.label') }}</h2>
+
+    <div class="row mt-20 mb-20">
+      <div class="col span-6">
+        <FleetSecretSelector
+          :value="downstreamSecretsList"
+          :namespace="value.metadata.namespace"
+          :mode="mode"
+          @update:value="updateDownstreamResources('Secret', $event)"
+        />
+      </div>
+    </div>
+    <div class="row mt-20 mb-20">
+      <div class="col span-6">
+        <FleetConfigMapSelector
+          :value="downstreamConfigMapsList"
+          :namespace="value.metadata.namespace"
+          :mode="mode"
+          @update:value="updateDownstreamResources('ConfigMap', $event)"
+        />
+      </div>
+    </div>
+    <div class="resource-handling mb-30">
+      <Checkbox
+        :value="correctDriftEnabled"
+        :tooltip="t('fleet.helmOp.resources.correctDriftTooltip')"
+        type="checkbox"
+        label-key="fleet.helmOp.resources.correctDrift"
+        :mode="mode"
+        @update:value="updateCorrectDrift"
+      />
+      <Checkbox
+        v-model:value="value.spec.keepResources"
+        :tooltip="t('fleet.helmOp.resources.keepResourcesTooltip')"
+        type="checkbox"
+        label-key="fleet.helmOp.resources.keepResources"
+        :mode="mode"
+      />
+    </div>
+
+    <template v-if="sourceType === SOURCE_TYPE.REPO">
+      <h2>{{ t('fleet.helmOp.polling.label') }}</h2>
+      <div class="row polling">
+        <div class="col span-6">
+          <Checkbox
+            :value="isPollingEnabled"
+            type="checkbox"
+            label-key="fleet.helmOp.polling.enable"
+            data-testid="helmOp-enablePolling-checkbox"
+            :tooltip="enablePollingTooltip"
+            :mode="mode"
+            :disabled="isNullOrStaticVersion"
+            @update:value="togglePolling"
+          />
+        </div>
+        <template v-if="isPollingEnabled">
+          <div class="col">
+            <Banner
+              v-if="showPollingIntervalMinValueWarning"
+              color="warning"
+              label-key="fleet.helmOp.polling.pollingInterval.minimumValueWarning"
+              data-testid="helmOp-pollingInterval-minimumValueWarning"
+            />
+          </div>
+          <div class="col span-6">
+            <UnitInput
+              :value="pollingInterval"
+              min="1"
+              data-testid="helmOp-pollingInterval-input"
+              :suffix="t('suffix.seconds', { count: pollingInterval })"
+              :label="t('fleet.helmOp.polling.pollingInterval.label')"
+              :mode="mode"
+              tooltip-key="fleet.helmOp.polling.pollingInterval.tooltip"
+              @update:value="updatePollingInterval"
+              @blur.capture="validatePollingInterval"
+            />
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resource-handling {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.polling {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+</style>

package/components/fleet/HelmOpChartTab.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { SOURCE_TYPE } from '@shell/config/product/fleet';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  },
+  sourceType: {
+    type:     String,
+    required: true
+  },
+  sourceTypeOptions: {
+    type:     Array,
+    required: true
+  },
+  fvGetAndReportPathRules: {
+    type:     Function,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:source-type']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const onSourceTypeSelect = (type) => {
+  emit('update:source-type', type);
+};
+</script>
+
+<template>
+  <div>
+    <h2>{{ t('fleet.helmOp.source.release.title') }}</h2>
+
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="value.spec.helm.releaseName"
+          :mode="mode"
+          :label-key="`fleet.helmOp.source.release.label`"
+          :placeholder="t(`fleet.helmOp.source.release.placeholder`, null, true)"
+        />
+      </div>
+    </div>
+
+    <h2>{{ t('fleet.helmOp.source.title') }}</h2>
+
+    <div
+      v-if="!isView"
+      class="row mb-20"
+    >
+      <div class="col span-6">
+        <LabeledSelect
+          :value="sourceType"
+          :options="sourceTypeOptions"
+          option-key="value"
+          :mode="mode"
+          :selectable="option => !option.disabled"
+          :label="t('fleet.helmOp.source.selectLabel')"
+          @update:value="onSourceTypeSelect"
+        />
+      </div>
+    </div>
+
+    <template v-if="sourceType === SOURCE_TYPE.TARBALL">
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="value.spec.helm.chart"
+            :mode="mode"
+            label-key="fleet.helmOp.source.tarball.label"
+            :placeholder="t('fleet.helmOp.source.tarball.placeholder', null, true)"
+            :rules="fvGetAndReportPathRules('spec.helm.chart')"
+            :required="true"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-if="sourceType === SOURCE_TYPE.REPO">
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="value.spec.helm.repo"
+            :mode="mode"
+            :label-key="`fleet.helmOp.source.${ sourceType }.repo.label`"
+            :placeholder="t(`fleet.helmOp.source.${ sourceType }.repo.placeholder`, null, true)"
+            :rules="fvGetAndReportPathRules('spec.helm.repo')"
+            :required="true"
+          />
+        </div>
+      </div>
+
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="value.spec.helm.chart"
+            :mode="mode"
+            :label-key="`fleet.helmOp.source.${ sourceType }.chart.label`"
+            :placeholder="t(`fleet.helmOp.source.${ sourceType }.chart.placeholder`, null, true)"
+            :rules="fvGetAndReportPathRules('spec.helm.chart')"
+            :required="true"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledInput
+            v-model:value="value.spec.helm.version"
+            :mode="mode"
+            label-key="fleet.helmOp.source.version.label"
+            :placeholder="t('fleet.helmOp.source.version.placeholder', null, true)"
+            :rules="fvGetAndReportPathRules('spec.helm.version')"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-if="sourceType === SOURCE_TYPE.OCI">
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="value.spec.helm.repo"
+            :mode="mode"
+            :label-key="`fleet.helmOp.source.${ sourceType }.chart.label`"
+            :placeholder="t(`fleet.helmOp.source.${ sourceType }.chart.placeholder`, null, true)"
+            :rules="fvGetAndReportPathRules('spec.helm.repo')"
+            :required="true"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledInput
+            v-model:value="value.spec.helm.version"
+            :mode="mode"
+            label-key="fleet.helmOp.source.version.label"
+            :placeholder="t('fleet.helmOp.source.version.placeholder', null, true)"
+            :rules="fvGetAndReportPathRules('spec.helm.version')"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/fleet/HelmOpMetadataTab.vue

@@ -0,0 +1,46 @@
+<script setup>
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import Labels from '@shell/components/form/Labels';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:value']);
+
+const updateValue = (value) => {
+  emit('update:value', value);
+};
+</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>
+
+<style lang="scss" scoped>
+</style>