Update epic form to use stacked form groups

This also updates tests and strings accordingly

ee/app/assets/stylesheets/pages/epics.scss

@@ -97,6 +97,10 @@
   }
 }
 
+.issuable-form-select-holder {
+  width: $gl-dropdown-width;
+}
+
 .labels-select-wrapper.is-embedded {
   .labels-select-dropdown-button {
     @include gl-bg-white;
@@ -130,6 +134,7 @@
 
     bottom: 100%;
     width: 300px !important;
+    max-height: none;
     margin-bottom: $gl-spacing-scale-6 !important;
 
     a:not(.btn) {
@@ -137,6 +142,11 @@
     }
   }
 
+  .dropdown-title {
+    padding-top: $gl-spacing-scale-2 !important;
+    padding-bottom: $gl-spacing-scale-4 !important;
+  }
+
   .dropdown-footer .list-unstyled {
     @include gl-m-0;
   }

ee/spec/frontend/epic/components/epic_form_spec.js

@@ -41,7 +41,7 @@ describe('ee/epic/components/epic_form.vue', () => {
   const findTitle = () => wrapper.find('#epic-title');
   const findDescription = () => wrapper.find('#epic-description');
   const findLabels = () => wrapper.find(LabelsSelectVue);
-  const findConfidentialityCheck = () => wrapper.find('[data-testid="epic-confidentiality"]');
+  const findConfidentialityCheck = () => wrapper.find('#epic-confidentiality');
   const findStartDate = () => wrapper.find('[data-testid="epic-start-date"]');
   const findStartDateReset = () => wrapper.find('[data-testid="clear-start-date"]');
   const findDueDate = () => wrapper.find('[data-testid="epic-due-date"]');
@@ -75,14 +75,16 @@ describe('ee/epic/components/epic_form.vue', () => {
 
       expect(wrapper.vm[field]).toBeTruthy();
 
-      findResetter().trigger('click');
+      findResetter().vm.$emit('click');
 
-      expect(wrapper.vm[field]).toBe(null);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm[field]).toBe(null);
+      });
     });
   });
 
   describe('save', () => {
-    it('submits successfully if form data is provided', () => {
+    it('submits successfully if form data is provided', async () => {
       createWrapper();
 
       const addLabelIds = [1];
@@ -101,7 +103,7 @@ describe('ee/epic/components/epic_form.vue', () => {
       findStartDate().vm.$emit('input', startDateFixed);
       findDueDate().vm.$emit('input', dueDateFixed);
 
-      findSaveButton().vm.$emit('click');
+      wrapper.vm.save();
 
       expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
         mutation: createEpic,
@@ -122,18 +124,18 @@ describe('ee/epic/components/epic_form.vue', () => {
     });
 
     it.each`
-      status        | result
-      ${'succeeds'} | ${TEST_NEW_EPIC}
-      ${'fails'}    | ${TEST_FAILED}
-    `('resets loading indicator when $status', ({ result }) => {
+      status        | result           | loading
+      ${'succeeds'} | ${TEST_NEW_EPIC} | ${true}
+      ${'fails'}    | ${TEST_FAILED}   | ${false}
+    `('resets loading indicator when $status', ({ result, loading }) => {
       createWrapper({ mutationResult: result });
 
       const savePromise = wrapper.vm.save();
 
-      expect(wrapper.vm.loading).toBeTruthy();
+      expect(wrapper.vm.loading).toBe(true);
 
       return savePromise.then(() => {
-        expect(findSaveButton().props('loading')).toBe(false);
+        expect(findSaveButton().props('loading')).toBe(loading);
       });
     });
   });

locale/gitlab.pot

@@ -4598,6 +4598,9 @@ msgstr ""
 msgid "Choose file…"
 msgstr ""
 
+msgid "Choose labels"
+msgstr ""
+
 msgid "Choose the top-level group for your repository imports."
 msgstr ""
 
@@ -8868,6 +8871,9 @@ msgstr ""
 msgid "Enter a number"
 msgstr ""
 
+msgid "Enter a title for your epic"
+msgstr ""
+
 msgid "Enter a whole number between 0 and 100"
 msgstr ""
 
@@ -20966,6 +20972,9 @@ msgstr ""
 msgid "Select health status"
 msgstr ""
 
+msgid "Select label"
+msgstr ""
+
 msgid "Select labels"
 msgstr ""