Merge branch 'replace_checkbox_group_by_dropdown_item' into 'master'

Replace gl checkbox group by gl dropdown items

See merge request gitlab-org/gitlab!67784

ee/app/assets/javascripts/approvals/components/rule_form.vue

 <script>
-import {
-  GlFormGroup,
-  GlFormInput,
-  GlDropdown,
-  GlFormCheckbox,
-  GlFormCheckboxGroup,
-} from '@gitlab/ui';
+import { GlFormGroup, GlFormInput, GlDropdown, GlTruncate, GlDropdownItem } from '@gitlab/ui';
 import { groupBy, isEqual, isNumber, omit } from 'lodash';
 import { mapState, mapActions } from 'vuex';
 import { REPORT_TYPES } from 'ee/security_dashboard/store/constants';
@@ -26,7 +20,7 @@ import ApproversSelect from './approvers_select.vue';
 
 const DEFAULT_NAME = 'Default';
 
-const EXCLUDED_REPORT_TYPE = 'cluster_image_scanning';
+export const EXCLUDED_REPORT_TYPE = 'cluster_image_scanning';
 
 export const READONLY_NAMES = [LICENSE_CHECK_NAME, VULNERABILITY_CHECK_NAME, COVERAGE_CHECK_NAME];
 
@@ -42,8 +36,8 @@ export default {
     GlFormInput,
     ProtectedBranchesSelector,
     GlDropdown,
-    GlFormCheckbox,
-    GlFormCheckboxGroup,
+    GlTruncate,
+    GlDropdownItem,
   },
   props: {
     initRule: {
@@ -382,6 +376,17 @@ export default {
     setAllSelectedScanners() {
       this.scanners = this.areAllScannersSelected ? [] : Object.keys(this.$options.REPORT_TYPES);
     },
+    isScannerSelected(scanner) {
+      return this.scanners.includes(scanner);
+    },
+    setScanner(scanner) {
+      const pos = this.scanners.indexOf(scanner);
+      if (pos === -1) {
+        this.scanners.push(scanner);
+      } else {
+        this.scanners.splice(pos, 1);
+      }
+    },
   },
   APPROVAL_DIALOG_I18N,
   REPORT_TYPES: omit(REPORT_TYPES, EXCLUDED_REPORT_TYPE),
@@ -430,18 +435,23 @@ export default {
       data-testid="scanners-group"
     >
       <gl-dropdown :text="scannersText">
-        <gl-form-checkbox
-          :checked="areAllScannersSelected"
-          class="gl-ml-2"
-          @change="setAllSelectedScanners"
+        <gl-dropdown-item
+          key="all"
+          is-check-item
+          :is-checked="areAllScannersSelected"
+          @click.native.capture.stop="setAllSelectedScanners"
+        >
+          <gl-truncate :text="$options.APPROVAL_DIALOG_I18N.form.selectAllScannersLabel" />
+        </gl-dropdown-item>
+        <gl-dropdown-item
+          v-for="(value, key) in $options.REPORT_TYPES"
+          :key="key"
+          is-check-item
+          :is-checked="isScannerSelected(key)"
+          @click.native.capture.stop="setScanner(key)"
         >
-          {{ $options.APPROVAL_DIALOG_I18N.form.selectAllScannersLabel }}
-        </gl-form-checkbox>
-        <gl-form-checkbox-group
-          v-model="scanners"
-          :options="$options.REPORT_TYPES"
-          class="gl-ml-2"
-        />
+          <gl-truncate :text="value" />
+        </gl-dropdown-item>
       </gl-dropdown>
     </gl-form-group>
     <gl-form-group

ee/spec/frontend/approvals/components/rule_form_spec.js

-import { GlFormGroup, GlFormInput, GlFormCheckboxGroup } from '@gitlab/ui';
+import { GlFormGroup, GlFormInput, GlTruncate } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import ApproversList from 'ee/approvals/components/approvers_list.vue';
 import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
-import RuleForm, { READONLY_NAMES } from 'ee/approvals/components/rule_form.vue';
+import RuleForm, {
+  READONLY_NAMES,
+  EXCLUDED_REPORT_TYPE,
+} from 'ee/approvals/components/rule_form.vue';
 import {
   TYPE_USER,
   TYPE_GROUP,
@@ -13,6 +16,7 @@ import {
 } from 'ee/approvals/constants';
 import { createStoreOptions } from 'ee/approvals/stores';
 import projectSettingsModule from 'ee/approvals/stores/modules/project_settings';
+import { REPORT_TYPES } from 'ee/security_dashboard/store/constants';
 import ProtectedBranchesSelector from 'ee/vue_shared/components/branches_selector/protected_branches_selector.vue';
 import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -665,9 +669,10 @@ describe('EE Approvals RuleForm', () => {
           );
         });
 
-        it('does not contain unsupported report type', () => {
-          const group = wrapper.find(GlFormCheckboxGroup);
-          expect(Object.keys(group.props('options'))).not.toContain('cluster_image_scanning');
+        it('contains the supported report types and select all option', () => {
+          const supportedReportsPlusAll =
+            Object.keys(REPORT_TYPES).length - [EXCLUDED_REPORT_TYPE].length + 1;
+          expect(wrapper.findAllComponents(GlTruncate)).toHaveLength(supportedReportsPlusAll);
         });
       });
     });