@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/components/fleet/HelmOpAppCoResourcesSection.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useHelmOpResources } from '@shell/composables/useHelmOpResources';
+import { useStore } from 'vuex';
+import Banner from '@components/Banner/Banner.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { RcSection } from '@components/RcSection';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
+import { RcIcon } from '@components/RcIcon';
+import { getVersionData } from '@shell/config/version';
+import { getDownstreamResourcesDocsUrl } from '@shell/utils/fleet-appco';
+
+const props = withDefaults(defineProps<{
+  value: Record<string, any>;
+  mode: string;
+  correctDriftEnabled: boolean;
+  downstreamSecretsList: string[];
+  downstreamConfigMapsList: string[];
+  lockedSecrets?: string[];
+}>(), { lockedSecrets: () => [] });
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'update:correct-drift', value: boolean): void;
+  (e: 'update:downstream-resources', value: { kind: string; list: string[] }): void;
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const DOCS_URL = getDownstreamResourcesDocsUrl(getVersionData()?.Version);
+
+const { updateCorrectDrift, updateSecrets, updateDownstreamResources } = useHelmOpResources(emit, toRef(props, 'lockedSecrets'));
+</script>
+
+<template>
+  <div
+    class="gap-md"
+    data-testid="helmop-appco-resources-section"
+  >
+    <!-- Helm chart resources settings -->
+    <RcSection
+      :title="t('fleet.helmOp.appCoResources.helmChartSettings')"
+      mode="with-header"
+      type="secondary"
+      expandable
+      :expanded="true"
+      data-testid="helmop-appco-resources-chart-settings"
+    >
+      <div class="resource-handling">
+        <Checkbox
+          :value="correctDriftEnabled"
+          :tooltip="t('fleet.helmOp.resources.correctDriftTooltip')"
+          type="checkbox"
+          label-key="fleet.helmOp.resources.correctDrift"
+          :use-body-text-color="true"
+          :mode="mode"
+          data-testid="helmop-appco-resources-correct-drift"
+          @update:value="updateCorrectDrift"
+        />
+        <Checkbox
+          v-model:value="value.spec.keepResources"
+          :tooltip="t('fleet.helmOp.resources.keepResourcesTooltip')"
+          type="checkbox"
+          label-key="fleet.helmOp.resources.keepResources"
+          :use-body-text-color="true"
+          :mode="mode"
+          data-testid="helmop-appco-resources-keep-resources"
+        />
+      </div>
+    </RcSection>
+
+    <!-- Additional resources to sync -->
+    <RcSection
+      :title="t('fleet.helmOp.appCoResources.additionalResources')"
+      mode="with-header"
+      type="secondary"
+      expandable
+      :expanded="true"
+      data-testid="helmop-appco-resources-additional"
+    >
+      <div class="gap-md">
+        <p>
+          {{ t('fleet.helmOp.appCoResources.additionalResourcesDescription') }}<br>
+          {{ t('fleet.helmOp.appCoResources.additionalResourcesLinkDescription') }}
+          <a
+            :href="DOCS_URL"
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+          >
+            {{ t('fleet.helmOp.appCoResources.additionalResourcesLink') }}
+            <RcIcon
+              type="external-link"
+              size="small"
+              aria-hidden="true"
+            /></a>
+        </p>
+
+        <div class="gap-12">
+          <Banner
+            v-if="lockedSecrets.length > 0"
+            color="info"
+            class="mb-0 mt-0"
+            data-testid="helmop-appco-resources-locked-secret-banner"
+          >
+            {{ t('fleet.helmOp.resources.lockedSecretBanner') }}
+          </Banner>
+
+          <div
+            class="row"
+          >
+            <div class="col span-6">
+              <FleetSecretSelector
+                :value="downstreamSecretsList"
+                :namespace="value.metadata.namespace"
+                :mode="mode"
+                :locked-options="lockedSecrets"
+                data-testid="helmop-appco-resources-secret-selector"
+                @update:value="updateSecrets"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="row"
+        >
+          <div class="col span-6">
+            <FleetConfigMapSelector
+              :value="downstreamConfigMapsList"
+              :namespace="value.metadata.namespace"
+              :mode="mode"
+              data-testid="helmop-appco-resources-configmap-selector"
+              @update:value="updateDownstreamResources('ConfigMap', $event)"
+            />
+          </div>
+        </div>
+      </div>
+    </RcSection>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resource-handling {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.gap-12 {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.gap-md {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+</style>

package/components/fleet/HelmOpResourcesSection.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useHelmOpResources } from '@shell/composables/useHelmOpResources';
+import { useStore } from 'vuex';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
+
+defineProps<{
+  value: Record<string, any>;
+  mode: string;
+  correctDriftEnabled: boolean;
+  downstreamSecretsList: string[];
+  downstreamConfigMapsList: string[];
+}>();
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'update:correct-drift', value: boolean): void;
+  (e: 'update:downstream-resources', value: { kind: string; list: string[] }): void;
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const { updateCorrectDrift, updateSecrets, updateDownstreamResources } = useHelmOpResources(emit, ref([]));
+</script>
+
+<template>
+  <div data-testid="helmop-resources-section">
+    <div class="row mt-20 mb-20">
+      <div class="col span-6">
+        <FleetSecretSelector
+          :value="downstreamSecretsList"
+          :namespace="value.metadata.namespace"
+          :mode="mode"
+          data-testid="helmop-resources-secret-selector"
+          @update:value="updateSecrets"
+        />
+      </div>
+    </div>
+    <div class="row mt-20 mb-20">
+      <div class="col span-6">
+        <FleetConfigMapSelector
+          :value="downstreamConfigMapsList"
+          :namespace="value.metadata.namespace"
+          :mode="mode"
+          data-testid="helmop-resources-configmap-selector"
+          @update:value="updateDownstreamResources('ConfigMap', $event)"
+        />
+      </div>
+    </div>
+    <div class="resource-handling">
+      <Checkbox
+        :value="correctDriftEnabled"
+        :tooltip="t('fleet.helmOp.resources.correctDriftTooltip')"
+        type="checkbox"
+        label-key="fleet.helmOp.resources.correctDrift"
+        :mode="mode"
+        data-testid="helmop-resources-correct-drift"
+        @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"
+        data-testid="helmop-resources-keep-resources"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resource-handling {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+</style>

package/components/fleet/HelmOpTargetOptionsSection.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { RcIcon } from '@components/RcIcon';
+
+withDefaults(defineProps<{
+  value: { spec: { serviceAccount?: string; namespace?: string } };
+  mode: string;
+  compact?: boolean;
+}>(), { compact: false });
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const DOCS_URL = 'https://fleet.rancher.io/reference/ref-crds#_bundledeploymentoptions';
+</script>
+
+<template>
+  <div
+    :class="{ row: !compact, 'col gap-md': compact }"
+    data-testid="helmop-target-options-section"
+  >
+    <p v-if="compact">
+      {{ t('fleet.helmOp.target.clusterDeploymentDescription') }}<br>
+      {{ t('generic.learnMoreAbout') }}
+      <a
+        :href="DOCS_URL"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        {{ t('fleet.helmOp.target.clusterDeploymentLink') }}
+        <RcIcon
+          type="external-link"
+          size="small"
+          aria-hidden="true"
+        />
+      </a>
+    </p>
+    <div class="col span-6 cluster-deployment-settings-input">
+      <LabeledInput
+        v-model:value="value.spec.serviceAccount"
+        :mode="mode"
+        label-key="fleet.helmOp.serviceAccount.label"
+        :placeholder-key="compact ? 'fleet.helmOp.serviceAccount.compactPlaceholder' : 'fleet.helmOp.serviceAccount.placeholder'"
+        data-testid="helmop-target-options-service-account"
+      />
+      <p
+        v-if="compact"
+        class="sub-description"
+      >
+        {{ t('fleet.helmOp.serviceAccount.compactDescription') }}
+      </p>
+    </div>
+    <div class="col span-6 cluster-deployment-settings-input">
+      <LabeledInput
+        v-model:value="value.spec.namespace"
+        :mode="mode"
+        label-key="fleet.helmOp.targetNamespace.label"
+        :placeholder-key="compact ? 'fleet.helmOp.targetNamespace.compactPlaceholder' : 'fleet.helmOp.targetNamespace.placeholder'"
+        data-testid="helmop-target-options-namespace"
+      />
+      <p
+        v-if="compact"
+        class="sub-description"
+      >
+        {{ t('fleet.helmOp.targetNamespace.compactDescription') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.gap-md {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+
+.cluster-deployment-settings-input {
+  display: flex;
+  gap: 4px;
+  flex-direction: column;
+}
+
+.sub-description {
+  font-size: 12px;
+}
+</style>

package/components/fleet/HelmOpTargetTab.vue

@@ -1,84 +1,88 @@
-<script setup>
+<script setup lang="ts">
 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';
+import HelmOpTargetOptionsSection from '@shell/components/fleet/HelmOpTargetOptionsSection.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: ''
-  }
+import type { Target } from '@shell/types/fleet';
+
+interface HelmOpValue {
+  spec: {
+    targets: Target[];
+    serviceAccount?: string;
+    namespace?: string;
+  };
+  metadata: { namespace: string };
+  targetClusters: object[];
+}
+
+withDefaults(defineProps<{
+  value: HelmOpValue;
+  mode: string;
+  realMode: string;
+  targetsCreated?: string;
+  hideAdditionalOptions?: boolean;
+  compact?: boolean;
+}>(), {
+  targetsCreated:        '',
+  hideAdditionalOptions: false,
+  compact:               false,
 });
 
-const emit = defineEmits(['update:targets', 'targets-created']);
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'update:targets', value: Target[]): void;
+  (e: 'targets-created', value: string): void;
+}>();
 
 const store = useStore();
 const { t } = useI18n(store);
 
-const updateTargets = (value) => {
+const updateTargets = (value: Target[]) => {
   emit('update:targets', value);
 };
 
-const onTargetsCreated = (value) => {
+const onTargetsCreated = (value: string) => {
   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 data-testid="helmop-target-tab">
+    <div :class="{ 'gap-6': compact }">
+      <h2 v-if="!compact || realMode === 'view'">
+        {{ t('fleet.helmOp.target.label') }}
+      </h2>
+      <FleetClusterTargets
+        :targets="value.spec.targets"
+        :matching="value.targetClusters"
+        :namespace="value.metadata.namespace"
+        :mode="realMode"
+        :created="targetsCreated"
+        :compact="compact"
+        data-testid="helmop-target-cluster-targets"
+        @update:value="updateTargets"
+        @created="onTargetsCreated"
+      />
     </div>
+
+    <template v-if="!hideAdditionalOptions">
+      <h3 class="mmt-16 mb-20">
+        {{ t('fleet.helmOp.target.additionalOptions') }}
+      </h3>
+      <HelmOpTargetOptionsSection
+        :value="value"
+        :mode="mode"
+        data-testid="helmop-target-options"
+      />
+    </template>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.gap-6 {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
 </style>