From d63e3bd045cec4df106dcd0391861982fe3022bc Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Thu, 17 Oct 2024 10:21:44 -0700
Subject: [PATCH] Add disabled prop to `ColorInput.vue`

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/components/form/ColorInput.vue          | 15 +++++++++--
 .../form/__tests__/ColorInput.test.ts         | 27 +++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 shell/components/form/__tests__/ColorInput.test.ts

diff --git a/shell/components/form/ColorInput.vue b/shell/components/form/ColorInput.vue
index f447f5cce22..eccbeaba752 100644
--- a/shell/components/form/ColorInput.vue
+++ b/shell/components/form/ColorInput.vue
@@ -40,6 +40,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'color-input'
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -56,6 +61,12 @@ export default {
      */
     inputValue() {
       return this.value ? this.value : this.defaultValue;
+    },
+
+    isDisabled() {
+      const disabled = this.disabled;
+
+      return this.mode !== this.editMode || disabled;
     }
   },
 
@@ -69,7 +80,7 @@ export default {
 <template>
   <div
     class="color-input"
-    :class="{[mode]:mode, disabled: mode !== editMode}"
+    :class="{[mode]:mode, disabled: isDisabled}"
     :data-testid="componentTestid + '-color-input'"
   >
     <label class="text-label"><t
@@ -89,7 +100,7 @@ export default {
         <input
           ref="input"
           type="color"
-          :disabled="mode !== editMode"
+          :disabled="isDisabled"
           :value="inputValue"
           @input="$emit('update:value', $event.target.value)"
         >
diff --git a/shell/components/form/__tests__/ColorInput.test.ts b/shell/components/form/__tests__/ColorInput.test.ts
new file mode 100644
index 00000000000..48fa331653f
--- /dev/null
+++ b/shell/components/form/__tests__/ColorInput.test.ts
@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import ColorInput from '@shell/components/form/ColorInput.vue';
+
+describe('colorInput.vue', () => {
+  it('disables the input when disabled prop is true', () => {
+    const wrapper = shallowMount(
+      ColorInput,
+      { props: { disabled: true } }
+    );
+
+    const colorWrapper = wrapper.find('.color-input');
+    const colorInput = wrapper.find('input');
+
+    expect(colorWrapper.classes()).toContain('disabled');
+    expect(Object.keys(colorInput.attributes())).toContain('disabled');
+  });
+
+  it('defaults to enabled when no disabled prop is passed', () => {
+    const wrapper = shallowMount(ColorInput);
+
+    const colorWrapper = wrapper.find('.color-input');
+    const colorInput = wrapper.find('input');
+
+    expect(colorWrapper.classes()).not.toContain('disabled');
+    expect(Object.keys(colorInput.attributes())).not.toContain('disabled');
+  });
+});