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

package/components/fleet/FleetClusterTargets/index.vue

@@ -3,16 +3,16 @@ import { PropType } from 'vue';
 import { isEmpty } from 'lodash';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { isHarvesterCluster } from '@shell/utils/cluster';
+import { HARVESTER_CONTAINER } from '@shell/store/features';
 import { FLEET } from '@shell/config/types';
 import FleetUtils from '@shell/utils/fleet';
 import { Expression, Selector, Target, TargetMode } from '@shell/types/fleet';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
-import MatchExpressions from '@shell/components/form/MatchExpressions.vue';
 import { Banner } from '@components/Banner';
-import { RcButton } from '@components/RcButton';
+import { RcSection } from '@components/RcSection';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import TargetsList from '@shell/components/fleet/FleetClusterTargets/TargetsList.vue';
+import ClusterSelectionFields from '@shell/components/fleet/FleetClusterTargets/ClusterSelectionFields.vue';
 
 export interface Cluster {
   name: string,
@@ -20,17 +20,29 @@ export interface Cluster {
   detailLocation: object,
 }
 
+interface FleetResource {
+  name: string,
+  nameDisplay: string,
+  metadata: {
+    name: string,
+    namespace: string,
+  },
+}
+
 interface DataType {
   targetMode: TargetMode,
-  allClusters: any[],
-  allClusterGroups: any[],
+  allClusters: FleetResource[],
+  allClusterGroups: FleetResource[],
   selectedClusters: string[],
   selectedClusterGroups: string[],
   clusterSelectors: Selector[],
   key: number,
+  clustersExpanded: boolean,
+  areHarvesterHostsVisible: boolean,
 }
 
 const excludeHarvesterRule = FleetUtils.Application.excludeHarvesterRule;
+const includeAllWorkgroupRule = FleetUtils.Application.includeAllWorkgroupRule;
 
 export default {
 
@@ -40,10 +52,9 @@ export default {
 
   components: {
     Banner,
-    LabeledSelect,
-    MatchExpressions,
+    ClusterSelectionFields,
     RadioGroup,
-    RcButton,
+    RcSection,
     TargetsList,
   },
 
@@ -72,6 +83,12 @@ export default {
       type:    String as PropType<TargetMode>,
       default: '',
     },
+
+    compact: {
+      type:    Boolean,
+      default: false,
+    },
+
   },
 
   async fetch() {
@@ -84,7 +101,7 @@ export default {
         inStoreType: 'management',
         type:        FLEET.CLUSTER_GROUP
       },
-    }, this.$store) as { allClusters: any[], allClusterGroups: any[] };
+    }, this.$store) as { allClusters: FleetResource[], allClusterGroups: FleetResource[] };
 
     this.allClusters = hash.allClusters || [];
     this.allClusterGroups = hash.allClusterGroups || [];
@@ -92,17 +109,24 @@ export default {
 
   data(): DataType {
     return {
-      targetMode:            'all',
-      allClusters:           [],
-      allClusterGroups:      [],
-      selectedClusters:      [],
-      selectedClusterGroups: [],
-      clusterSelectors:      [],
-      key:                   0 // Generates a unique key to handle Targets
+      targetMode:               'all',
+      allClusters:              [],
+      allClusterGroups:         [],
+      selectedClusters:         [],
+      selectedClusterGroups:    [],
+      clusterSelectors:         [],
+      key:                      0, // Generates a unique key to handle Targets
+      clustersExpanded:         true,
+      /**
+       * Are host harvesters treated as normal clusters... or are they hidden
+       */
+      areHarvesterHostsVisible: false,
     };
   },
 
   mounted() {
+    this.areHarvesterHostsVisible = this.$store.getters['features/get'](HARVESTER_CONTAINER);
+
     this.fromTargets();
 
     if (this.mode === _CREATE) {
@@ -110,7 +134,11 @@ export default {
       this.targetMode = this.created || 'all';
       this.update();
     } else {
-      this.targetMode = FleetUtils.Application.getTargetMode(this.targets || [], this.namespace);
+      this.targetMode = FleetUtils.Application.getTargetMode(this.targets || [], this.namespace, this.areHarvesterHostsVisible);
+      // We only want to update the information from the new target mode if it is EDIT, if CREATE, if VIEW we want to keep as it is
+      if (this.mode === _EDIT) {
+        this.update();
+      }
     }
   },
 
@@ -125,7 +153,7 @@ export default {
       }
     },
 
-    allClusters(clusters: any[]) {
+    allClusters(clusters: FleetResource[]) {
       if (clusters.length) {
         // Resolve metadata.name values to nameDisplay for UI display
         this.selectedClusters = this.selectedClusters.map(
@@ -139,25 +167,27 @@ export default {
     targetModeOptions(): { label: string, value: TargetMode }[] {
       if (this.namespace === 'fleet-local') {
         return [{
-          label: 'local cluster',
+          label: this.t('fleet.clusterTargets.targetMode.local'),
           value: 'local'
         }];
       }
 
+      const allLabel = this.compact ? this.t('fleet.clusterTargets.targetMode.allCompact', { namespace: this.namespace, count: this.clustersOptions.length }, { raw: true }) : this.t('fleet.clusterTargets.targetMode.all');
+
       const out: { label: string, value: TargetMode }[] = [
         {
-          label: 'All Clusters in the workspace',
+          label: allLabel,
           value: 'all',
         },
         {
-          label: 'No clusters',
+          label: this.t('fleet.clusterTargets.targetMode.none'),
           value: 'none'
         },
       ];
 
       if (this.clustersOptions.length) {
         out.push({
-          label: 'Manually selected clusters',
+          label: this.t('fleet.clusterTargets.targetMode.clusters'),
           value: 'clusters'
         });
       }
@@ -167,8 +197,12 @@ export default {
 
     clustersOptions() {
       return this.allClusters
-        .filter((x) => x.metadata.namespace === this.namespace && !isHarvesterCluster(x))
-        .map((x) => ({ label: x.nameDisplay, value: x.nameDisplay }));
+        .filter((x) => x.metadata.namespace === this.namespace && (this.areHarvesterHostsVisible || !isHarvesterCluster(x) || this.selectedClusters.includes(x.name)))
+        .map((x) => ({
+          label:    x.nameDisplay,
+          value:    x.nameDisplay,
+          disabled: !this.areHarvesterHostsVisible && isHarvesterCluster(x)
+        }));
     },
 
     clusterGroupsOptions() {
@@ -215,12 +249,7 @@ export default {
 
       this.clusterSelectors.push(neu);
 
-      // Focus first element in MatchExpression
-      this.$nextTick(() => {
-        const matchExpression = (this.$refs[`match-expression-${ neu.key }`] as HTMLElement[])?.[0];
-
-        matchExpression?.focus();
-      });
+      (this.$refs.selectionFields as any)?.focusMatchExpression(neu.key);
 
       this.update();
     },
@@ -285,14 +314,19 @@ export default {
 
     toTargets(): Target[] | undefined {
       switch (this.targetMode) {
-      case 'none':
+      case 'none': // No clusters
         return undefined;
-      case 'all':
+      case 'all': // All clusters in workspace
+        if (this.areHarvesterHostsVisible) {
+          // set it to empty to clear any previous and hidden harvester omission
+          return [includeAllWorkgroupRule];
+        }
+
         return [excludeHarvesterRule];
-      case 'clusters':
+      case 'clusters': // 'Manually selected clusters'
         return this.normalizeTargets(this.selectedClusters, this.clusterSelectors, this.selectedClusterGroups);
-      case 'advanced':
-      case 'local':
+      case 'advanced': // no longer in use?
+      case 'local': // only option for fleet-local workspace
         return this.targets;
       }
     },
@@ -363,7 +397,7 @@ export default {
 
     resolveClusterDisplayName(name: string): string {
       const cluster = this.allClusters.find(
-        (c: any) => c.metadata.namespace === this.namespace && c.metadata.name === name
+        (c: FleetResource) => c.metadata.namespace === this.namespace && c.metadata.name === name
       );
 
       return cluster ? cluster.nameDisplay : name;
@@ -380,151 +414,182 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="targetMode !== 'advanced'"
-    class="row"
-  >
-    <RadioGroup
-      name="targetMode"
-      data-testid="fleet-target-cluster-radio-button"
-      :value="isLocal ? 'local' : targetMode"
-      :mode="mode"
-      :options="targetModeOptions"
-      :disabled="isView"
-      @update:value="selectTargetMode"
-    />
-  </div>
-
-  <Banner
-    v-if="targetMode === 'advanced'"
-    class="row"
-    color="warning"
-    :label="t('fleet.clusterTargets.advancedConfigs')"
-  />
-
-  <div
-    v-if="targetMode === 'clusters'"
-    class="row mt-20"
-  >
-    <div class="col span-9">
-      <h3 class="m-0">
-        {{ t('fleet.clusterTargets.clusters.title') }}
-      </h3>
-      <LabeledSelect
-        data-testid="fleet-target-cluster-name-selector"
-        class="mmt-4"
-        :value="selectedClusters"
-        :label="t('fleet.clusterTargets.clusters.byName.label')"
-        :options="clustersOptions"
-        :taggable="true"
-        :close-on-select="false"
+  <div :class="compact ? 'gap-md' : 'gap-20'">
+    <div
+      v-if="targetMode !== 'advanced'"
+      class="row"
+    >
+      <RadioGroup
+        name="targetMode"
+        data-testid="fleet-target-cluster-radio-button"
+        :value="isLocal ? 'local' : targetMode"
         :mode="mode"
-        :multiple="true"
-        :placeholder="t('fleet.clusterTargets.clusters.byName.placeholder')"
-        @update:value="selectClusters"
+        :options="targetModeOptions"
+        :disabled="isView"
+        :use-body-text-color="compact"
+        @update:value="selectTargetMode"
       />
-      <div
-        v-if="!isView || (clusterSelectors && clusterSelectors.length > 0)"
-        class="mmt-6"
-      >
-        <h4 class="m-0">
-          {{ t('fleet.clusterTargets.clusters.byLabel.title') }}
-        </h4>
-        <div
-          v-for="(selector, i) in clusterSelectors"
-          :key="selector.key"
-          class="match-expressions-container mmt-4"
+    </div>
+
+    <Banner
+      v-if="targetMode === 'advanced'"
+      class="row"
+      color="warning"
+      :label="t('fleet.clusterTargets.advancedConfigs')"
+    />
+
+    <!-- AppCo: RcSection layout -->
+    <div
+      v-if="targetMode === 'clusters' && compact && !isView"
+      class="row"
+    >
+      <div class="col span-12 content-group">
+        <RcSection
+          v-model:expanded="clustersExpanded"
+          :title="t('fleet.clusterTargets.clusters.title')"
+          mode="with-header"
+          type="secondary"
+          expandable
+          data-testid="fleet-target-clusters-section"
         >
-          <MatchExpressions
-            :ref="`match-expression-${ selector.key }`"
-            class="body"
-            :value="selector"
-            :mode="mode"
-            :initial-empty-row="true"
-            :label-key="t('fleet.clusterTargets.clusters.byLabel.labelKey')"
-            :add-icon="'icon-plus'"
-            :add-class="'btn-sm'"
-            @update:value="updateMatchExpressions(i, $event, selector.key)"
-          />
-          <RcButton
-            v-if="!isView"
-            size="small"
-            variant="link"
-            @click="removeMatchExpressions(selector.key)"
+          <template
+            v-if="!clustersExpanded"
+            #badges
           >
-            <i class="icon icon-x" />
-          </RcButton>
-        </div>
-        <RcButton
-          v-if="!isView"
-          size="small"
-          variant="secondary"
-          class="mmt-4"
-          @click="addMatchExpressions"
-        >
-          <i class="icon icon-plus" />
-          <span>{{ t('fleet.clusterTargets.clusters.byLabel.addSelector') }}</span>
-        </RcButton>
+            <span
+              class="cluster-count-badge"
+              :aria-label="t('fleet.clusterTargets.rules.matching.title', { n: matching.length })"
+            >
+              {{ t('fleet.clusterTargets.rules.matching.title', { n: matching.length }) }}
+            </span>
+          </template>
+          <div class="row">
+            <div class="col span-8">
+              <ClusterSelectionFields
+                ref="selectionFields"
+                variant="appco"
+                :selected-clusters="selectedClusters"
+                :selected-cluster-groups="selectedClusterGroups"
+                :cluster-selectors="clusterSelectors"
+                :clusters-options="clustersOptions"
+                :cluster-groups-options="clusterGroupsOptions"
+                :mode="mode"
+                :is-view="isView"
+                :compact="compact"
+                @select-clusters="selectClusters"
+                @select-cluster-groups="selectClusterGroups"
+                @add-match-expressions="addMatchExpressions"
+                @update-match-expressions="updateMatchExpressions"
+                @remove-match-expressions="removeMatchExpressions"
+              />
+            </div>
+            <div class="col span-4 targets-col">
+              <TargetsList
+                class="target-list"
+                :clusters="matching"
+                :compact="compact"
+                :empty-label="t('fleet.clusterTargets.rules.matching.placeholder')"
+              />
+            </div>
+          </div>
+        </RcSection>
       </div>
-      <div class="mmt-8">
-        <h3 class="m-0">
-          {{ t('fleet.clusterTargets.clusterGroups.title') }}
+    </div>
+
+    <!-- Default: original layout -->
+    <div
+      v-if="targetMode === 'clusters' && (!compact || isView)"
+      class="row"
+    >
+      <div class="col span-8">
+        <h3
+          v-if="!compact"
+          class="m-0"
+        >
+          {{ t('fleet.clusterTargets.clusters.title') }}
         </h3>
-        <LabeledSelect
-          data-testid="fleet-target-cluster-group-selector"
-          class="mmt-4"
-          :value="selectedClusterGroups"
-          :label="t('fleet.clusterTargets.clusterGroups.byName.label')"
-          :options="clusterGroupsOptions"
-          :taggable="true"
-          :close-on-select="false"
+        <ClusterSelectionFields
+          ref="selectionFields"
+          variant="default"
+          :selected-clusters="selectedClusters"
+          :selected-cluster-groups="selectedClusterGroups"
+          :cluster-selectors="clusterSelectors"
+          :clusters-options="clustersOptions"
+          :cluster-groups-options="clusterGroupsOptions"
           :mode="mode"
-          :multiple="true"
-          :placeholder="t('fleet.clusterTargets.clusterGroups.byName.placeholder')"
-          @update:value="selectClusterGroups"
+          :is-view="isView"
+          :compact="compact"
+          @select-clusters="selectClusters"
+          @select-cluster-groups="selectClusterGroups"
+          @add-match-expressions="addMatchExpressions"
+          @update-match-expressions="updateMatchExpressions"
+          @remove-match-expressions="removeMatchExpressions"
+        />
+      </div>
+      <div class="col span-4">
+        <TargetsList
+          class="target-list"
+          :clusters="matching"
+          :empty-label="t('fleet.clusterTargets.rules.matching.placeholder')"
         />
       </div>
     </div>
-    <div class="col span-3">
-      <TargetsList
-        class="target-list"
-        :clusters="matching"
-        :empty-label="t('fleet.clusterTargets.rules.matching.placeholder')"
-      />
-    </div>
-  </div>
 
-  <div
-    v-if="targetMode === 'all' && !isLocal"
-    class="row"
-  >
-    <div class="col span-6">
-      <TargetsList
-        class="target-list mt-20"
-        :clusters="matching"
-      />
+    <!-- All mode: compact intentionally omits the target list since the parent handles cluster visibility -->
+    <div
+      v-if="targetMode === 'all' && !isLocal && !compact"
+      class="row"
+    >
+      <div class="col span-6">
+        <TargetsList
+          class="target-list"
+          :clusters="matching"
+          :compact="compact"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .match-expressions-container {
+  .content-group {
     display: flex;
-    align-items: start;
-    border: 1px solid var(--border);
-    border-radius: 5px;
+    flex-direction: column;
+    gap: var(--gap-md);
+  }
 
-    .body {
-      padding: 15px;
-      width: 100%;
-    }
+  .gap-md {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-md);
+  }
+  .gap-20 {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
 
-    .btn {
-      margin: 5px;
-    }
+  .targets-col {
+    position: relative;
+  }
+
+  .targets-col .target-list {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
 
-  .target-list {
-    max-height: 320px;
+  .cluster-count-badge {
+    display: inline-flex;
+    padding: 2px 8px;
+    align-items: center;
+    border-radius: 30px;
+    border: 1px solid var(--rc-inactive-border);
+    background: var(--body-bg);
+    font-size: 12px;
+    line-height: 17px;
+    color: var(--body-text);
   }
 </style>

package/components/fleet/FleetIntro.vue

@@ -1,10 +1,13 @@
 <script>
+import { RcButton } from '@components/RcButton';
 import { NAME } from '@shell/config/product/fleet';
 
 export default {
 
   name: 'FleetIntro',
 
+  components: { RcButton },
+
   props: {
     schema: {
       type:     Object,
@@ -63,12 +66,13 @@ export default {
       v-if="canCreate"
       class="actions"
     >
-      <router-link
+      <rc-button
+        size="large"
+        variant="secondary"
         :to="to"
-        class="btn role-secondary"
       >
         {{ t(`fleet.${ labelKey }.intro.add`) }}
-      </router-link>
+      </rc-button>
     </div>
   </div>
 </template>

package/components/fleet/FleetNoWorkspaces.vue

@@ -2,9 +2,12 @@
 <script>
 import { FLEET } from '@shell/config/types';
 import { NAME } from '@shell/config/product/fleet';
+import { RcButton } from '@components/RcButton';
 export default {
   name: 'NoWorkspaces',
 
+  components: { RcButton },
+
   props: {
     canView: {
       type:    Boolean,
@@ -34,12 +37,13 @@ export default {
       v-if="canView"
       class="actions"
     >
-      <router-link
+      <rc-button
+        size="large"
+        variant="secondary"
         :to="formRoute"
-        class="btn role-secondary"
       >
         {{ t('fleet.gitRepo.workspace.addWorkspace') }}
-      </router-link>
+      </rc-button>
     </div>
   </div>
 </template>

package/components/fleet/FleetSecretSelector.vue

@@ -34,6 +34,10 @@ const props = defineProps({
     type:    String,
     default: '',
   },
+  lockedOptions: {
+    type:    Array as () => string[],
+    default: () => []
+  },
 });
 
 const emit = defineEmits(['update:value']);
@@ -118,10 +122,8 @@ function paginatePageOptions(opts: any) {
     :in-store="inStore"
     :paginated-resource-settings="paginateSecretsSetting"
     :all-resources-settings="allSecretsSettings"
+    :locked-options="lockedOptions"
     :multiple="true"
     @update:value="update"
   />
 </template>
-
-<style lang="scss" scoped>
-</style>

package/components/fleet/FleetValuesFrom.vue

@@ -54,6 +54,11 @@ export default {
       default: ''
     },
 
+    compact: {
+      type:    Boolean,
+      default: false
+    },
+
     mode: {
       type:    String,
       default: _EDIT
@@ -251,7 +256,8 @@ export default {
     class="values-from-container"
     data-testid="fleet-values-from-list"
   >
-    <h2
+    <component
+      :is="!compact ? 'h2' : 'h4'"
       v-t="'fleet.helmOp.values.valuesFrom.selectLabel'"
       class="m-0"
     />
@@ -282,7 +288,7 @@ export default {
       data-testid="fleet-values-from-add"
       @click="addValueFrom"
     >
-      <i class="icon icon-add" />
+      <i class="icon icon-plus" />
       {{ t('workload.container.command.addEnvVar') }}
     </RcButton>
   </div>

package/components/fleet/GitRepoTargetTab.vue

@@ -68,8 +68,6 @@ const onCreated = (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"
         />
       </div>
     </div>