Merge branch '383296-support-disabled-state' into 'master'

Add support of disabled state to shared filter item component

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/105125



Merged-by: David Pisek <dpisek@gitlab.com>
Approved-by: Daniel Tian <dtian@gitlab.com>
Approved-by: David Pisek <dpisek@gitlab.com>
Co-authored-by: Samantha Ming <sming@gitlab.com>

ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue

@@ -13,6 +13,11 @@ export default {
       required: false,
       default: '',
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     qaSelector() {
@@ -23,12 +28,20 @@ export default {
 </script>
 
 <template>
+  <!-- 
+    // Once GlDropdownItem support a disabled state, the custom classes can be removed
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2092
+   -->
   <gl-dropdown-item
     is-check-item
     :is-checked="isChecked"
     :data-qa-selector="qaSelector"
+    :disabled="disabled"
+    :class="{ 'gl-pointer-events-none': disabled }"
     @click.native.capture.stop="$emit('click')"
   >
-    <slot>{{ text }}</slot>
+    <slot>
+      <span :class="{ 'gl-text-gray-600': disabled }">{{ text }}</span>
+    </slot>
   </gl-dropdown-item>
 </template>

ee/spec/frontend/security_dashboard/components/shared/filters/__snapshots__/filter_item_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter Item component disabled state renders the disabled dropdown item correctly 1`] = `
+<gl-dropdown-item-stub
+  avatarurl=""
+  class="gl-pointer-events-none"
+  data-qa-selector="filter_filter_dropdown"
+  disabled="true"
+  iconcolor=""
+  iconname=""
+  iconrightarialabel=""
+  iconrightname=""
+  ischeckitem="true"
+  secondarytext=""
+>
+  <span
+    class="gl-text-gray-600"
+  >
+    filter
+  </span>
+</gl-dropdown-item-stub>
+`;

ee/spec/frontend/security_dashboard/components/shared/filters/filter_item_spec.js

@@ -37,6 +37,16 @@ describe('Filter Item component', () => {
     });
   });
 
+  describe('disabled state', () => {
+    beforeEach(() => {
+      createWrapper({ disabled: true });
+    });
+
+    it('renders the disabled dropdown item correctly', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
   it.each([true, false])('shows the expected checkmark when isSelected is %s', (isChecked) => {
     createWrapper({ isChecked });
     expect(dropdownItem().props('isChecked')).toBe(isChecked);