Add disabled prop to ColorInput.vue

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)"
         >

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');
+  });
+});