Improve epic form

- Replace static props with provide/inject
- Namespaced and moved some strings to $options
- Added missing data-testid
- Tidy up the CSS a bit
- Replaced old utility classes

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue

@@ -126,19 +126,19 @@ export default {
   <div class="labels-select-contents-list js-labels-list" @keydown="handleKeyDown">
     <gl-loading-icon
       v-if="labelsFetchInProgress"
-      class="labels-fetch-loading position-absolute d-flex align-items-center w-100 h-100"
+      class="labels-fetch-loading position-absolute gl-display-flex gl-align-items-center w-100 h-100"
       size="md"
     />
     <div
       v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
-      class="dropdown-title d-flex align-items-center pt-0 pb-2"
+      class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
     >
       <span class="flex-grow-1">{{ labelsListTitle }}</span>
       <gl-button
         :aria-label="__('Close')"
         variant="link"
         size="small"
-        class="dropdown-header-button p-0"
+        class="dropdown-header-button gl-p-0!"
         icon="close"
         @click="toggleDropdownContents"
       />
@@ -172,13 +172,17 @@ export default {
       <ul class="list-unstyled">
         <li v-if="allowLabelCreate">
           <gl-link
-            class="d-flex w-100 flex-row text-break-word label-item"
+            class="gl-display-flex w-100 flex-row text-break-word label-item"
             @click="toggleDropdownContentsCreateView"
-            >{{ footerCreateLabelTitle }}</gl-link
           >
+            {{ footerCreateLabelTitle }}
+          </gl-link>
         </li>
         <li>
-          <gl-link :href="labelsManagePath" class="d-flex flex-row text-break-word label-item">
+          <gl-link
+            :href="labelsManagePath"
+            class="gl-display-flex flex-row text-break-word label-item"
+          >
             {{ footerManageLabelTitle }}
           </gl-link>
         </li>

ee/app/assets/javascripts/epic/components/epic_form.vue

@@ -9,7 +9,7 @@ import {
 } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import createFlash from '~/flash';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import LabelsSelectVue from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import createEpic from '../queries/createEpic.mutation.graphql';
@@ -25,34 +25,14 @@ export default {
     MarkdownField,
     LabelsSelectVue,
   },
-  props: {
-    groupPath: {
-      type: String,
-      required: true,
-    },
-    groupEpicsPath: {
-      type: String,
-      required: true,
-    },
-    labelsFetchPath: {
-      type: String,
-      required: true,
-    },
-    labelsManagePath: {
-      type: String,
-      required: true,
-    },
-    markdownPreviewPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    markdownDocsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
+  inject: [
+    'groupPath',
+    'groupEpicsPath',
+    'labelsFetchPath',
+    'labelsManagePath',
+    'markdownPreviewPath',
+    'markdownDocsPath',
+  ],
   data() {
     return {
       title: '',
@@ -69,6 +49,13 @@ export default {
       return this.labels.map(label => label.id);
     },
   },
+  i18n: {
+    confidentialityLabel: s__(`
+      Epics|This epic and any containing child epics are confidential
+      and should only be visible to team members with at least Reporter access.
+    `),
+    epicDatesHint: s__('Epics|Leave empty to inherit from milestone dates'),
+  },
   methods: {
     save() {
       this.loading = true;
@@ -102,7 +89,7 @@ export default {
         })
         .catch(() => {
           this.loading = false;
-          createFlash(__('Unable to save epic. Please try again'));
+          createFlash(s__('Epics|Unable to save epic. Please try again'));
         });
     },
     updateDueDate(val) {
@@ -136,7 +123,8 @@ export default {
         <gl-form-input
           id="epic-title"
           v-model="title"
-          :placeholder="__('Enter a title for your epic')"
+          data-testid="epic-title"
+          :placeholder="s__('Epics|Enter a title for your epic')"
           autocomplete="off"
           autofocus
         />
@@ -158,6 +146,7 @@ export default {
             <textarea
               id="epic-description"
               v-model="description"
+              data-testid="epic-description"
               class="note-textarea js-gfm-input js-autosize markdown-area"
               dir="auto"
               data-supports-quick-actions="true"
@@ -169,16 +158,16 @@ export default {
         </markdown-field>
       </gl-form-group>
       <gl-form-group :label="__('Confidentiality')" label-for="epic-confidentiality">
-        <gl-form-checkbox id="epic-confidentiality" v-model="confidential">{{
-          __(
-            'This epic and any containing child epics are confidential' +
-              ' and are only visible to team members with at least Reporter access.',
-          )
-        }}</gl-form-checkbox>
+        <gl-form-checkbox
+          id="epic-confidentiality"
+          v-model="confidential"
+          data-testid="epic-confidentiality"
+        >
+          {{ $options.i18n.confidentialityLabel }}
+        </gl-form-checkbox>
       </gl-form-group>
       <hr />
       <gl-form-group :label="__('Labels')">
-        <div class="issuable-form-select-holder">
         <labels-select-vue
           :allow-label-edit="false"
           :allow-label-create="true"
@@ -196,12 +185,8 @@ export default {
         >
           {{ __('None') }}
         </labels-select-vue>
-        </div>
       </gl-form-group>
-      <gl-form-group
-        :label="__('Start date')"
-        :description="__('Leave empty to inherit from milestone dates')"
-      >
+      <gl-form-group :label="__('Start date')" :description="$options.i18n.epicDatesHint">
         <div class="gl-display-inline-block gl-mr-2">
           <gl-datepicker v-model="startDateFixed" data-testid="epic-start-date" />
         </div>
@@ -216,8 +201,9 @@ export default {
         </gl-button>
       </gl-form-group>
       <gl-form-group
+        class="gl-pb-4"
         :label="__('Due date')"
-        :description="__('Leave empty to inherit from milestone dates')"
+        :description="$options.i18n.epicDatesHint"
       >
         <div class="gl-display-inline-block gl-mr-2">
           <gl-datepicker v-model="dueDateFixed" data-testid="epic-due-date" />

ee/app/assets/javascripts/epic/new_epic_bundle.js

@@ -28,9 +28,7 @@ export function initEpicForm() {
   return new Vue({
     el,
     apolloProvider,
-    render(createElement) {
-      return createElement(EpicForm, {
-        props: {
+    provide: {
       groupPath,
       groupEpicsPath,
       labelsFetchPath,
@@ -38,7 +36,8 @@ export function initEpicForm() {
       markdownDocsPath,
       markdownPreviewPath,
     },
-      });
+    render(createElement) {
+      return createElement(EpicForm);
     },
   });
 }

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

@@ -93,15 +93,13 @@
   }
 
   .markdown-area::placeholder {
-    color: $gray-400;
+    @include gl-text-gray-400;
   }
 }
 
-.issuable-form-select-holder {
+.labels-select-wrapper.is-embedded {
   width: $gl-dropdown-width;
-}
 
-.labels-select-wrapper.is-embedded {
   .labels-select-dropdown-button {
     @include gl-bg-white;
     @include gl-font-regular;

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

@@ -17,11 +17,13 @@ describe('ee/epic/components/epic_form.vue', () => {
 
   const createWrapper = ({ mutationResult = TEST_NEW_EPIC } = {}) => {
     wrapper = shallowMount(EpicForm, {
-      propsData: {
+      provide: {
         groupPath: TEST_GROUP_PATH,
         groupEpicsPath: TEST_HOST,
         labelsFetchPath: TEST_HOST,
         labelsManagePath: TEST_HOST,
+        markdownPreviewPath: TEST_HOST,
+        markdownDocsPath: TEST_HOST,
       },
       stubs: {
         ApolloMutation,
@@ -40,10 +42,10 @@ describe('ee/epic/components/epic_form.vue', () => {
     wrapper = null;
   });
 
-  const findTitle = () => wrapper.find('#epic-title');
-  const findDescription = () => wrapper.find('#epic-description');
   const findLabels = () => wrapper.find(LabelsSelectVue);
-  const findConfidentialityCheck = () => wrapper.find('#epic-confidentiality');
+  const findTitle = () => wrapper.find('[data-testid="epic-title"]');
+  const findDescription = () => wrapper.find('[data-testid="epic-description"]');
+  const findConfidentialityCheck = () => wrapper.find('[data-testid="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"]');

locale/gitlab.pot

@@ -8871,9 +8871,6 @@ msgstr ""
 msgid "Enter a number"
 msgstr ""
 
-msgid "Enter a title for your epic"
-msgstr ""
-
 msgid "Enter a whole number between 0 and 100"
 msgstr ""
 
@@ -9228,9 +9225,15 @@ msgstr ""
 msgid "Epics|Are you sure you want to remove %{bStart}%{targetIssueTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}?"
 msgstr ""
 
+msgid "Epics|Enter a title for your epic"
+msgstr ""
+
 msgid "Epics|How can I solve this?"
 msgstr ""
 
+msgid "Epics|Leave empty to inherit from milestone dates"
+msgstr ""
+
 msgid "Epics|More information"
 msgstr ""
 
@@ -9270,12 +9273,18 @@ msgstr ""
 msgid "Epics|These dates affect how your epics appear in the roadmap. Dates from milestones come from the milestones assigned to issues in the epic. You can also set fixed dates or remove them entirely."
 msgstr ""
 
+msgid "Epics|This epic and any containing child epics are confidential and should only be visible to team members with at least Reporter access."
+msgstr ""
+
 msgid "Epics|This will also remove any descendents of %{bStart}%{targetEpicTitle}%{bEnd} from %{bStart}%{parentEpicTitle}%{bEnd}. Are you sure?"
 msgstr ""
 
 msgid "Epics|To schedule your epic's %{epicDateType} date based on milestones, assign a milestone with a %{epicDateType} date to any issue in the epic."
 msgstr ""
 
+msgid "Epics|Unable to save epic. Please try again"
+msgstr ""
+
 msgid "Epics|due"
 msgstr ""
 
@@ -13646,9 +13655,6 @@ msgstr ""
 msgid "Leave edit mode? All unsaved changes will be lost."
 msgstr ""
 
-msgid "Leave empty to inherit from milestone dates"
-msgstr ""
-
 msgid "Leave group"
 msgstr ""
 
@@ -23923,9 +23929,6 @@ msgstr ""
 msgid "This epic already has the maximum number of child epics."
 msgstr ""
 
-msgid "This epic and any containing child epics are confidential and are only visible to team members with at least Reporter access."
-msgstr ""
-
 msgid "This epic and its child elements will only be visible to team members with at minimum Reporter access."
 msgstr ""
 
@@ -25103,9 +25106,6 @@ msgstr ""
 msgid "Unable to resolve"
 msgstr ""
 
-msgid "Unable to save epic. Please try again"
-msgstr ""
-
 msgid "Unable to save iteration. Please try again"
 msgstr ""