From 096cb2f410c51871186f88b7c7f4084978a8cebd Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 13 Jan 2025 19:12:09 +0100
Subject: [PATCH 1/3] component Checkbox: add hasTooltip computed value

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../src/components/Form/Checkbox/Checkbox.vue      | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
index 9bf64f0ad1e..492471f64da 100644
--- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
+++ b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -135,7 +135,14 @@ export default defineComponent({
      */
     isChecked(): boolean {
       return this.isMulti(this.value) ? this.findTrueValues(this.value) : this.value === this.valueWhenTrue;
-    }
+    },
+
+    /**
+     * Determines if the Labeled Input should display a tooltip.
+     */
+    hasTooltip(): boolean {
+      return !!this.tooltip || !!this.tooltipKey;
+    },
   },
 
   methods: {
@@ -214,6 +221,9 @@ export default defineComponent({
   <div
     class="checkbox-outer-container"
     data-checkbox-ctrl
+    :class="{
+      'v-popper--has-tooltip': hasTooltip,
+    }"
   >
     <label
       class="checkbox-container"
@@ -241,7 +251,7 @@ export default defineComponent({
         role="checkbox"
       />
       <span
-        v-if="$slots.label || label || labelKey || tooltipKey || tooltip"
+        v-if="$slots.label || label || labelKey || hasTooltip"
         class="checkbox-label"
         :class="{ 'checkbox-primary': primary }"
       >

From ce752d5ea6bc876528f531b18fc89e87e7206de6 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 13 Jan 2025 19:12:51 +0100
Subject: [PATCH 2/3] Replace banners with tooltips in GitRepo edit page

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../__tests__/fleet.cattle.io.gitrepo.test.ts | 15 +++++--
 shell/edit/fleet.cattle.io.gitrepo.vue        | 39 +++++++++----------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts b/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts
index f8da63e547c..96bbee8b877 100644
--- a/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts
+++ b/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts
@@ -33,12 +33,21 @@ describe('view: fleet.cattle.io.gitrepo should', () => {
     global: { mocks }
   });
 
-  it('should have self-healing checkbox and banner', () => {
+  it('should have self-healing checkbox and tooltip', () => {
     const correctDriftCheckbox = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"]');
-    const correctDriftBanner = wrapper.find('[data-testid="GitRepo-correctDrift-banner"]');
+    const tooltip = wrapper.findAll('[data-testid="GitRepo-correctDrift-checkbox"] .v-popper--has-tooltip');
 
+    expect(tooltip).toHaveLength(1);
+    expect(correctDriftCheckbox.exists()).toBeTruthy();
+    expect(correctDriftCheckbox.attributes().value).toBeFalsy();
+  });
+
+  it('should have keep-resources checkbox and tooltip', () => {
+    const correctDriftCheckbox = wrapper.find('[data-testid="GitRepo-keepResources-checkbox"]');
+    const tooltip = wrapper.findAll('[data-testid="GitRepo-keepResources-checkbox"] .v-popper--has-tooltip');
+
+    expect(tooltip).toHaveLength(1);
     expect(correctDriftCheckbox.exists()).toBeTruthy();
-    expect(correctDriftBanner.exists()).toBeTruthy();
     expect(correctDriftCheckbox.attributes().value).toBeFalsy();
   });
 
diff --git a/shell/edit/fleet.cattle.io.gitrepo.vue b/shell/edit/fleet.cattle.io.gitrepo.vue
index d9116257144..3fce4b0726e 100644
--- a/shell/edit/fleet.cattle.io.gitrepo.vue
+++ b/shell/edit/fleet.cattle.io.gitrepo.vue
@@ -646,35 +646,26 @@ export default {
       </template>
       <div class="spacer" />
       <h2 v-t="'fleet.gitRepo.resources.label'" />
-      <div>
+      <div class="resource-handling">
         <Checkbox
           v-model:value="value.spec.correctDrift.enabled"
+          :tooltip="t('fleet.gitRepo.resources.correctDriftBanner')"
           data-testid="GitRepo-correctDrift-checkbox"
           class="check"
           type="checkbox"
           label-key="fleet.gitRepo.resources.correctDrift"
           :mode="mode"
         />
-        <Banner
-          data-testid="GitRepo-correctDrift-banner"
-          color="info"
-        >
-          {{ t('fleet.gitRepo.resources.correctDriftBanner') }}
-        </Banner>
+        <Checkbox
+          v-model:value="value.spec.keepResources"
+          :tooltip="t('fleet.gitRepo.resources.keepResourcesBanner')"
+          data-testid="GitRepo-keepResources-checkbox"
+          class="check"
+          type="checkbox"
+          label-key="fleet.gitRepo.resources.keepResources"
+          :mode="mode"
+        />
       </div>
-
-      <Checkbox
-        v-model:value="value.spec.keepResources"
-        class="check"
-        type="checkbox"
-        label-key="fleet.gitRepo.resources.keepResources"
-        :mode="mode"
-      />
-      <Banner
-        color="info"
-      >
-        {{ t('fleet.gitRepo.resources.keepResourcesBanner') }}
-      </Banner>
       <div class="spacer" />
       <h2 v-t="'fleet.gitRepo.paths.label'" />
       <ArrayList
@@ -764,3 +755,11 @@ export default {
     </template>
   </CruResource>
 </template>
+
+<style lang="scss" scoped>
+  .resource-handling {
+    display: flex;
+    flex-direction: column;
+    gap: 5px
+  }
+</style>

From ad7be5372df63a94f15681c6ffaa5185799d7c6d Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 20 Jan 2025 13:52:29 +0100
Subject: [PATCH 3/3] Remove class selector from fleet.cattle.io.test.ts

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts b/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts
index 96bbee8b877..a035d41d1ce 100644
--- a/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts
+++ b/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts
@@ -35,18 +35,18 @@ describe('view: fleet.cattle.io.gitrepo should', () => {
 
   it('should have self-healing checkbox and tooltip', () => {
     const correctDriftCheckbox = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"]');
-    const tooltip = wrapper.findAll('[data-testid="GitRepo-correctDrift-checkbox"] .v-popper--has-tooltip');
+    const tooltip = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"]');
 
-    expect(tooltip).toHaveLength(1);
+    expect(tooltip.element.classList).toContain('v-popper--has-tooltip');
     expect(correctDriftCheckbox.exists()).toBeTruthy();
     expect(correctDriftCheckbox.attributes().value).toBeFalsy();
   });
 
   it('should have keep-resources checkbox and tooltip', () => {
     const correctDriftCheckbox = wrapper.find('[data-testid="GitRepo-keepResources-checkbox"]');
-    const tooltip = wrapper.findAll('[data-testid="GitRepo-keepResources-checkbox"] .v-popper--has-tooltip');
+    const tooltip = wrapper.find('[data-testid="GitRepo-keepResources-checkbox"]');
 
-    expect(tooltip).toHaveLength(1);
+    expect(tooltip.element.classList).toContain('v-popper--has-tooltip');
     expect(correctDriftCheckbox.exists()).toBeTruthy();
     expect(correctDriftCheckbox.attributes().value).toBeFalsy();
   });