Fleet targets revisit CSS

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

shell/assets/translations/en-us.yaml

@@ -2579,15 +2579,18 @@ fleet:
       notReady: Not Ready
       waitApplied: Wait Applied
   clusterTargets:
+    title: Select by name
     label: Clusters
     advancedConfigs: Advanced target configurations are defined, check the YAML file for further details.
     placeholders:
       selectMultiple: Select Multiple Clusters
     rules:
-      title: Labels matching rules
+      title: Select by labels
-      description: Add rules to select clusters with matching labels
       addSelector: Add cluster selector
-      matching: Target Clusters
+      matching:
+        title: Selected clusters
+        placeholder: Select clusters by name or labels
+        empty: No clusters in the workspace
   application:
     pageTitle: App Bundles
     menuLabel: App Bundles
@@ -2719,7 +2722,7 @@ fleet:
       clusterGroup: Cluster Group
       label: Deploy To
       labelLocal: Deploy With
-      additionalOptions: Additional Options
+      additionalOptions: Additional settings
     targetDisplay:
       advanced: Advanced
       clusters: "Clusters"

shell/components/fleet/FleetClusterTargets/TargetsList.vue

@@ -9,6 +9,11 @@ export default {
       type:    Array as PropType<{ name: string }[]>,
       default: () => [],
     },
+
+    emptyLabel: {
+      type:    String,
+      default: ''
+    }
   },
 
   computed: {
@@ -33,22 +38,25 @@ export default {
 
 <template>
   <div class="targets-list">
-    <h3>{{ t('fleet.clusterTargets.rules.matching') }}</h3>
+    <h3>{{ t('fleet.clusterTargets.rules.matching.title') }}</h3>
     <span
       v-for="(name, i) in names"
       :key="i"
-      class="row"
+      class="row mt-5"
     >
       {{ name }}
     </span>
+    <span
+      v-if="!names.length"
+      class="text-muted"
+    >
+      {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
+    </span>
   </div>
 </template>
 
 <style lang="scss" scoped>
   .targets-list {
-    border: 1px solid var(--border);
-    padding: 15px;
-    border-radius: 5px;
     height: 100%;
   }
 </style>

shell/components/fleet/FleetClusterTargets/index.vue

@@ -111,18 +111,18 @@ export default {
 
       const out: { label: string, value: TargetMode }[] = [
         {
-          label: 'All Clusters in the Workspace',
+          label: 'All Clusters in the workspace',
           value: 'all',
         },
         {
-          label: 'No Clusters',
+          label: 'No clusters',
           value: 'none'
         },
       ];
 
       if (this.clustersOptions.length) {
         out.push({
-          label: 'Manually select clusters',
+          label: 'Manually selected clusters',
           value: 'clusters'
         });
       }
@@ -326,7 +326,9 @@ export default {
     class="row mt-20"
   >
     <div class="col span-8">
+      <h3> {{ t('fleet.clusterTargets.title') }} </h3>
       <LabeledSelect
+        class="mt-20"
         :value="selectedClusters"
         :label="t('fleet.clusterTargets.label')"
         :options="clustersOptions"
@@ -337,15 +339,12 @@ export default {
         :placeholder="t('fleet.clusterTargets.placeholders.selectMultiple')"
         @update:value="selectClusters"
       />
-      <div class="mt-20">
+      <div class="mt-30">
         <h3> {{ t('fleet.clusterTargets.rules.title') }} </h3>
-        <p class="text-muted">
-          {{ t('fleet.clusterTargets.rules.description') }}
-        </p>
         <div
           v-for="(selector, i) in clusterSelectors"
           :key="selector.key"
-          class="match-expressions-container mt-10"
+          class="match-expressions-container mt-20"
         >
           <MatchExpressions
             class="body"
@@ -382,6 +381,7 @@ export default {
       <TargetsList
         class="target-list"
         :clusters="matching"
+        :empty-label="t('fleet.clusterTargets.rules.matching.placeholder')"
       />
     </div>
   </div>

shell/edit/fleet.cattle.io.gitrepo.vue

@@ -127,7 +127,7 @@ export default {
           label:          this.t('fleet.gitRepo.add.steps.metadata.label'),
           subtext:        this.t('fleet.gitRepo.add.steps.metadata.subtext'),
           descriptionKey: 'fleet.gitRepo.add.steps.metadata.description',
-          ready:          this.isView || !!this.value.metadata.name,
+          ready:          true,
           weight:         1
         },
         {
@@ -136,7 +136,7 @@ export default {
           label:          this.t('fleet.gitRepo.add.steps.repo.label'),
           subtext:        this.t('fleet.gitRepo.add.steps.repo.subtext'),
           descriptionKey: 'fleet.gitRepo.add.steps.repo.description',
-          ready:          this.isView || (!!this.refValue && !!this.fvFormIsValid),
+          ready:          true,
           weight:         1
         },
         {
@@ -657,7 +657,6 @@ export default {
 
     <template #stepTarget>
       <h2 v-t="'fleet.gitRepo.target.label'" />
-
       <FleetClusterTargets
         :targets="value.spec.targets"
         :matching="value.targetClusters"
@@ -666,7 +665,7 @@ export default {
         @update:value="updateTargets"
       />
 
-      <h3 class="mt-30">
+      <h3 class="mt-40">
         {{ t('fleet.gitRepo.target.additionalOptions') }}
       </h3>
       <div class="row mt-20">

shell/edit/fleet.cattle.io.helmop.vue

@@ -673,7 +673,6 @@ export default {
 
     <template #target>
       <h2 v-t="'fleet.helmOp.target.label'" />
-
       <FleetClusterTargets
         :targets="value.spec.targets"
         :matching="value.targetClusters"
@@ -682,7 +681,7 @@ export default {
         @update:value="updateTargets"
       />
 
-      <h3 class="mt-30">
+      <h3 class="mt-40">
         {{ t('fleet.helmOp.target.additionalOptions') }}
       </h3>
       <div class="row mt-20">