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

package/components/fleet/FleetClusterTargets/TargetsList.vue

@@ -1,10 +1,13 @@
 <script lang="ts">
 import { PropType } from 'vue';
 import { Cluster } from '@shell/components/fleet/FleetClusterTargets/index.vue';
+import { RcTag, RcCounterBadge } from '@components/Pill';
 
 export default {
   name: 'FleetTargetsList',
 
+  components: { RcTag, RcCounterBadge },
+
   props: {
     clusters: {
       type:    Array as PropType<Cluster[]>,
@@ -13,47 +16,93 @@ export default {
 
     emptyLabel: {
       type:    String,
-      default: ''
-    }
+      default: '',
+    },
+
+    compact: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   computed: {
     clustersRenderList() {
-      const clustersRenderList = this.clusters.map(({ nameDisplay, name, detailLocation }) => ({
+      return this.clusters.map(({ nameDisplay, name, detailLocation }) => ({
         name: nameDisplay || name,
         detailLocation,
       }));
-
-      return clustersRenderList;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="targets-list-main">
-    <h3>{{ t('fleet.clusterTargets.rules.matching.title', { n: clustersRenderList.length }) }}</h3>
-    <div class="targets-list-list">
-      <span
-        v-for="(cluster, i) in clustersRenderList"
-        :key="i"
-        class="row mt-5"
-      >
-        <router-link
-          :to="cluster.detailLocation"
-          target="_blank"
-          class="link-main"
-        >
-          {{ cluster.name }}&nbsp;<i class="link-icon icon icon-external-link" />
-        </router-link>
-      </span>
-      <span
-        v-if="!clustersRenderList.length"
-        class="text-label"
-      >
-        {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
-      </span>
+  <div
+    class="targets-list-main"
+    :class="{ 'compact': compact }"
+  >
+    <h3
+      v-if="!compact"
+      class="m-0"
+    >
+      {{ t('fleet.clusterTargets.rules.matching.title', { n: clustersRenderList.length }) }}
+    </h3>
+    <div
+      v-else
+      class="compact-title"
+    >
+      <h3>{{ t('fleet.clusterTargets.rules.matching.selectedClusters') }}</h3>
+      <RcCounterBadge
+        :count="clustersRenderList.length"
+        type="inactive"
+      />
     </div>
+
+    <template v-if="compact">
+      <div class="targets-list-chips">
+        <RcTag
+          v-for="cluster in clustersRenderList"
+          :key="cluster.name"
+          type="inactive"
+          class="do-not-shrink"
+        >
+          {{ cluster.name }}
+        </RcTag>
+        <span
+          v-if="!clustersRenderList.length"
+          class="text-label"
+        >
+          {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
+        </span>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="targets-list-list">
+        <span
+          v-for="cluster in clustersRenderList"
+          :key="cluster.name"
+          class="row"
+        >
+          <router-link
+            :to="cluster.detailLocation"
+            target="_blank"
+            class="link-main"
+          >
+            {{ cluster.name }}&nbsp;<i
+              class="link-icon icon icon-external-link"
+              aria-hidden="true"
+            />
+          </router-link>
+        </span>
+        <span
+          v-if="!clustersRenderList.length"
+          class="text-label"
+        >
+          {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
+        </span>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -65,20 +114,59 @@ export default {
     background-color: var(--tabbed-sidebar-bg);
     display: flex;
     flex-direction: column;
+    gap: var(--gap-md);
+
+    &.compact {
+      background-color: var(--body-bg);
+      max-height: none;
+
+      .targets-list-list {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .row {
+          line-height: 24px;
+        }
+      }
+    }
+
+    .compact-title {
+      display: flex;
+      align-items: center;
+      gap: var(--gap);
+
+      h3 {
+        margin: 0;
+      }
+    }
   }
   .targets-list-list {
     overflow-y: auto;
   }
   .link-main{
-    word-spacing: 22px;
-    line-height: 17px; // To fit the icon size and make sure it doesnt resize
+    word-spacing: 15px;
+    line-height: 17px;
   }
   .link-icon {
-    margin-left: -14px; // Remove the space of the icon to make it float to accomodate the underline
-    display: none; // Make the icon disappear by default
+    margin-left: -14px;
+    display: none;
   }
-
   .link-main:hover .link-icon {
-    display: inline; // Only appear when hovered
+    display: inline;
+  }
+  .targets-list-chips {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    align-items: flex-start;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+
+    .do-not-shrink {
+      flex-shrink: 0;
+    }
   }
+
 </style>

package/components/fleet/FleetClusterTargets/index.vue

@@ -8,12 +8,11 @@ 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,
@@ -21,14 +20,24 @@ 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,
 }
 
@@ -43,10 +52,9 @@ export default {
 
   components: {
     Banner,
-    LabeledSelect,
-    MatchExpressions,
+    ClusterSelectionFields,
     RadioGroup,
-    RcButton,
+    RcSection,
     TargetsList,
   },
 
@@ -75,6 +83,12 @@ export default {
       type:    String as PropType<TargetMode>,
       default: '',
     },
+
+    compact: {
+      type:    Boolean,
+      default: false,
+    },
+
   },
 
   async fetch() {
@@ -87,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 || [];
@@ -102,6 +116,7 @@ export default {
       selectedClusterGroups:    [],
       clusterSelectors:         [],
       key:                      0, // Generates a unique key to handle Targets
+      clustersExpanded:         true,
       /**
        * Are host harvesters treated as normal clusters... or are they hidden
        */
@@ -138,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(
@@ -152,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'
         });
       }
@@ -232,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();
     },
@@ -385,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;
@@ -402,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>