Merge branch '390531-follow-up-from-migrate-import-from-a-project-dropdown' into 'master'

Fix empty legend issue in invite members modal

See merge request !118675



Merged-by: Phil Hughes <me@iamphill.com>
Approved-by: Payton Burdette <pburdette@gitlab.com>
Approved-by: Phil Hughes <me@iamphill.com>
Co-authored-by: Doug Stull <dstull@gitlab.com>

app/assets/javascripts/invite_members/components/import_project_members_modal.vue

@@ -9,6 +9,7 @@ import {
   displaySuccessfulInvitationAlert,
   reloadOnInvitationSuccess,
 } from '../utils/trigger_successful_invite_alert';
+import { PROJECT_SELECT_LABEL_ID } from '../constants';
 import ProjectSelect from './project_select.vue';
 
 export default {
@@ -130,7 +131,7 @@ export default {
     defaultError: s__('ImportAProjectModal|Unable to import project members'),
     successMessage: s__('ImportAProjectModal|Successfully imported'),
   },
-  projectSelectLabelId: 'project-select',
+  projectSelectLabelId: PROJECT_SELECT_LABEL_ID,
   modalId: uniqueId('import-a-project-modal-'),
 };
 </script>
@@ -157,10 +158,11 @@ export default {
       :invalid-feedback="invalidFeedbackMessage"
       :state="validationState"
       data-testid="form-group"
+      label-cols="auto"
+      label-class="gl-pt-3!"
+      :label="$options.i18n.projectLabel"
+      :label-for="$options.projectSelectLabelId"
     >
-      <label :id="$options.projectSelectLabelId" class="col-form-label">{{
-        $options.i18n.projectLabel
-      }}</label>
       <project-select v-model="projectToBeImported" />
     </gl-form-group>
     <p>{{ $options.i18n.modalHelpText }}</p>

app/assets/javascripts/invite_members/components/project_select.vue

@@ -4,7 +4,7 @@ import { debounce } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { getProjects } from '~/rest_api';
-import { SEARCH_DELAY, GROUP_FILTERS } from '../constants';
+import { SEARCH_DELAY, GROUP_FILTERS, PROJECT_SELECT_LABEL_ID } from '../constants';
 
 // We can have GlCollapsibleListbox dropdown panel with full
 // width once we implement
@@ -96,6 +96,7 @@ export default {
     errorFetchingProjects: s__(
       'ProjectSelect|There was an error fetching the projects. Please try again.',
     ),
+    projectSelectLabelId: PROJECT_SELECT_LABEL_ID,
   },
   defaultFetchOptions: {
     exclude_internal: true,
@@ -110,6 +111,7 @@ export default {
     :items="projects"
     :searching="isFetching"
     :toggle-text="selectedProjectName"
+    :toggle-aria-labelled-by="$options.projectSelectLabelId"
     :search-placeholder="$options.i18n.searchPlaceholder"
     :no-results-text="$options.i18n.emptySearchResult"
     data-testid="project-select-dropdown"

app/assets/javascripts/invite_members/constants.js

 import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
+export const PROJECT_SELECT_LABEL_ID = 'project-select';
 export const SEARCH_DELAY = 200;
 export const VALID_TOKEN_BACKGROUND = 'gl-bg-green-100';
 export const INVALID_TOKEN_BACKGROUND = 'gl-bg-red-100';