Merge branch '451734-basic-information-open-by-default' into 'master'

Make basic information section open by default

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



Merged-by: Savas Vedova <svedova@gitlab.com>
Approved-by: Diana Zubova <dzubova@gitlab.com>
Approved-by: Savas Vedova <svedova@gitlab.com>
Reviewed-by: Illya Klymov <iklymov@gitlab.com>
Reviewed-by: Diana Zubova <dzubova@gitlab.com>
Co-authored-by: Illya Klymov <iklymov@gitlab.com>

ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue

@@ -144,6 +144,7 @@ export default {
     :title="$options.i18n.basicInformation"
     :description="$options.i18n.basicInformationDetails"
     :expandable="expandable"
+    :initially-expanded="expandable"
   >
     <gl-form-group
       :label="$options.i18n.titleInputLabel"

ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue

@@ -20,11 +20,16 @@ export default {
       required: false,
       default: false,
     },
+    initiallyExpanded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
-  data() {
+  data(props) {
     return {
-      isExpanded: false,
+      isExpanded: props.initiallyExpanded,
     };
   },
 

ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section_spec.js

 import * as Utils from 'ee/groups/settings/compliance_frameworks/utils';
 import BasicInformationSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue';
+import EditSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
@@ -21,11 +22,12 @@ describe('Basic information section', () => {
   const invalidFeedback = (input) =>
     input.closest('[role=group].is-invalid').querySelector('.invalid-feedback').textContent;
 
-  function createComponent() {
+  function createComponent(props) {
     return mountExtended(BasicInformationSection, {
       provide: provideData,
       propsData: {
         value: fakeFramework,
+        ...props,
       },
       stubs: {
         ColorPicker: true,
@@ -65,4 +67,10 @@ describe('Basic information section', () => {
       expect(invalidFeedback(pipelineInput.element)).toBe(message);
     },
   );
+
+  it('renders section as initially expanded if expandable', () => {
+    wrapper = createComponent({ expandable: true });
+
+    expect(wrapper.findComponent(EditSection).props('initiallyExpanded')).toBe(true);
+  });
 });

ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section_spec.js

@@ -30,22 +30,32 @@ describe('Section', () => {
     it('does not render expand/collapse button', () => {
       expect(findButton('Expand').exists()).toBe(false);
     });
+
+    it('ignores initiallyExpanded prop', () => {
+      wrapper = createComponent({ expandable: false, initiallyExpanded: false });
+
+      expect(findCollapse().props('visible')).toBe(true);
+    });
   });
 
   describe('if expandable', () => {
-    beforeEach(() => {
+    it('renders collapse hidden by default', () => {
       wrapper = createComponent({ expandable: true });
+      expect(findCollapse().props('visible')).toBe(false);
     });
 
-    it('renders collapse hidden by default', () => {
-      expect(findCollapse().props('visible')).toBe(false);
+    it('renders collapse expanded if initiallyExpanded is provided', () => {
+      wrapper = createComponent({ expandable: true, initiallyExpanded: true });
+      expect(findCollapse().props('visible')).toBe(true);
     });
 
     it('renders expand button', () => {
+      wrapper = createComponent({ expandable: true });
       expect(findButton('Expand').exists()).toBe(true);
     });
 
     it('expands collapse on clicking button', async () => {
+      wrapper = createComponent({ expandable: true });
       await findButton('Expand').trigger('click');
       expect(findCollapse().props('visible')).toBe(true);
       expect(findButton('Expand').exists()).toBe(false);

ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/edit_framework_spec.js

@@ -4,6 +4,7 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import getComplianceFrameworkQuery from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/graphql/get_compliance_framework.query.graphql';
 import * as Utils from 'ee/groups/settings/compliance_frameworks/utils';
 import EditFramework from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/edit_framework.vue';
+import BasicInformationSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue';
 import PoliciesSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/policies_section.vue';
 import DeleteModal from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/delete_modal.vue';
 import createComplianceFrameworkMutation from 'ee/compliance_dashboard/graphql/mutations/create_compliance_framework.mutation.graphql';
@@ -253,6 +254,20 @@ describe('Edit Framework Form', () => {
     });
   });
 
+  describe('Basic information section', () => {
+    it('renders basic information section as non-collapsible if creating new framework', async () => {
+      wrapper = createComponent(shallowMountExtended, { routeParams: {} });
+      await waitForPromises();
+      expect(wrapper.findComponent(BasicInformationSection).props('expandable')).toBe(false);
+    });
+
+    it('renders basic information section as expandable if editing framework', async () => {
+      wrapper = createComponent(shallowMountExtended);
+      await waitForPromises();
+      expect(wrapper.findComponent(BasicInformationSection).props('expandable')).toBe(true);
+    });
+  });
+
   describe('Policies section', () => {
     it('does not render policies section if creating new framework', async () => {
       wrapper = createComponent(shallowMountExtended, { routeParams: {} });
@@ -260,12 +275,10 @@ describe('Edit Framework Form', () => {
       expect(wrapper.findComponent(PoliciesSection).exists()).toBe(false);
     });
 
-    describe('when editing framework', () => {
-      it('render policies section', async () => {
-        wrapper = createComponent(shallowMountExtended);
-        await waitForPromises();
-        expect(wrapper.findComponent(PoliciesSection).exists()).toBe(true);
-      });
+    it('render policies section if editing framework', async () => {
+      wrapper = createComponent(shallowMountExtended);
+      await waitForPromises();
+      expect(wrapper.findComponent(PoliciesSection).exists()).toBe(true);
     });
   });
 });