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 }" > diff --git a/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts b/shell/edit/__tests__/fleet.cattle.io.gitrepo.test.ts index f8da63e547c..a035d41d1ce 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.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 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>