@rancher/shell 3.0.9-rc.5 → 3.0.9

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>

package/components/fleet/HelmOpTargetTab.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+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
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  },
+  targetsCreated: {
+    type:    String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:targets', 'targets-created']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const updateTargets = (value) => {
+  emit('update:targets', value);
+};
+
+const onTargetsCreated = (value) => {
+  emit('targets-created', value);
+};
+</script>
+
+<template>
+  <div>
+    <h2>{{ t('fleet.helmOp.target.label') }}</h2>
+    <FleetClusterTargets
+      :targets="value.spec.targets"
+      :matching="value.targetClusters"
+      :namespace="value.metadata.namespace"
+      :mode="realMode"
+      :created="targetsCreated"
+      @update:value="updateTargets"
+      @created="onTargetsCreated"
+    />
+
+    <h3 class="mmt-16">
+      {{ t('fleet.helmOp.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.helmOp.serviceAccount.label"
+          placeholder-key="fleet.helmOp.serviceAccount.placeholder"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="value.spec.namespace"
+          :mode="mode"
+          label-key="fleet.helmOp.targetNamespace.label"
+          placeholder-key="fleet.helmOp.targetNamespace.placeholder"
+          label="Target Namespace"
+          placeholder="Optional: Require all resources to be in this namespace"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/fleet/HelmOpValuesTab.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import Banner from '@components/Banner/Banner.vue';
+import ButtonGroup from '@shell/components/ButtonGroup';
+import YamlEditor from '@shell/components/YamlEditor';
+import FleetValuesFrom from '@shell/components/fleet/FleetValuesFrom.vue';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  realMode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  },
+  chartValues: {
+    type:     String,
+    required: true
+  },
+  chartValuesInit: {
+    type:     String,
+    required: true
+  },
+  yamlForm: {
+    type:     String,
+    required: true
+  },
+  yamlFormOptions: {
+    type:     Array,
+    required: true
+  },
+  yamlDiffModeOptions: {
+    type:     Array,
+    required: true
+  },
+  isYamlDiff: {
+    type:     Boolean,
+    required: true
+  },
+  editorMode: {
+    type:     String,
+    required: true
+  },
+  diffMode: {
+    type:     String,
+    required: true
+  },
+  isRealModeEdit: {
+    type:     Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:yaml-form', 'update:chart-values', 'update:diff-mode']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const updateYamlForm = () => {
+  emit('update:yaml-form');
+};
+
+const updateChartValues = (value) => {
+  emit('update:chart-values', value);
+};
+
+const updateDiffMode = (value) => {
+  emit('update:diff-mode', value);
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      color="info"
+      class="description"
+      label-key="fleet.helmOp.values.description"
+    />
+
+    <h2>{{ t('fleet.helmOp.values.title') }}</h2>
+
+    <div class="mb-15">
+      <div
+        v-if="isRealModeEdit"
+        class="yaml-form-controls"
+      >
+        <ButtonGroup
+          :value="yamlForm"
+          inactive-class="bg-disabled btn-sm"
+          active-class="bg-primary btn-sm"
+          :options="yamlFormOptions"
+          @update:value="updateYamlForm"
+        />
+        <div
+          class="yaml-form-controls-spacer"
+          style="flex:1"
+        >
+          &nbsp;
+        </div>
+        <ButtonGroup
+          v-if="isYamlDiff"
+          :value="diffMode"
+          :options="yamlDiffModeOptions"
+          inactive-class="bg-disabled btn-sm"
+          active-class="bg-primary btn-sm"
+          @update:value="updateDiffMode"
+        />
+      </div>
+
+      <YamlEditor
+        ref="yaml"
+        :value="chartValues"
+        :mode="mode"
+        :initial-yaml-values="chartValuesInit"
+        :scrolling="true"
+        :editor-mode="editorMode"
+        :hide-preview-buttons="true"
+        @update:value="updateChartValues"
+      />
+    </div>
+
+    <div class="mb-20">
+      <FleetValuesFrom
+        :value="value.spec.helm.valuesFrom"
+        :namespace="value.metadata.namespace"
+        :mode="realMode"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.yaml-form-controls {
+  display: flex;
+  margin-bottom: 15px;
+}
+</style>