Merge pull request #13082 from torchiaf/11300-remove-banners

Fleet Resource Handling - Replace warning banners with tooltips
rancher · Jan 20, 2025 · a8e27dc · a8e27dc
2 parents 54e2cbd + ad7be53
commit a8e27dc
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 25 deletions.
diff --git 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 }"
       >

diff --git 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.find('[data-testid="GitRepo-correctDrift-checkbox"]');
 
+    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.find('[data-testid="GitRepo-keepResources-checkbox"]');
+
+    expect(tooltip.element.classList).toContain('v-popper--has-tooltip');
     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
@@ -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>