Add latest changes from gitlab-org/gitlab@master

2 files changed, 37 insertions, 11 deletions

diff --git a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
index 66fcb8e10eb..63ea089a62b 100644
--- a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
@@ -141,13 +141,6 @@ export default {
     </gl-form-group>
 
     <gl-form-group
-      :label="$options.i18n.I18N_NEW_BRANCH_LABEL_BRANCH"
-      label-for="branch-name-input"
-    >
-      <gl-form-input id="branch-name-input" v-model="branchName" type="text" required />
-    </gl-form-group>
-
-    <gl-form-group
       :label="$options.i18n.I18N_NEW_BRANCH_LABEL_SOURCE"
       label-for="source-branch-select"
     >
@@ -160,6 +153,14 @@ export default {
       />
     </gl-form-group>
 
+    <gl-form-group
+      :label="$options.i18n.I18N_NEW_BRANCH_LABEL_BRANCH"
+      label-for="branch-name-input"
+      class="gl-max-w-62"
+    >
+      <gl-form-input id="branch-name-input" v-model="branchName" type="text" required />
+    </gl-form-group>
+
     <div class="form-actions">
       <gl-button
         :loading="createBranchLoading"
diff --git a/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue
index 751f3e9639d..88005cccd89 100644
--- a/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue
@@ -1,5 +1,11 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlSearchBoxByType,
+  GlLoadingIcon,
+  GlDropdownItem,
+  GlAvatarLabeled,
+} from '@gitlab/ui';
 import { __ } from '~/locale';
 import { PROJECTS_PER_PAGE } from '../constants';
 import getProjectsQuery from '../graphql/queries/get_projects.query.graphql';
@@ -14,6 +20,7 @@ export default {
     GlDropdownItem,
     GlSearchBoxByType,
     GlLoadingIcon,
+    GlAvatarLabeled,
   },
   props: {
     selectedProject: {
@@ -56,7 +63,7 @@ export default {
       return Boolean(this.$apollo.queries.projects.loading);
     },
     projectDropdownText() {
-      return this.selectedProject?.nameWithNamespace || __('Select a project');
+      return this.selectedProject?.nameWithNamespace || this.$options.i18n.selectProjectText;
     },
   },
   methods: {
@@ -70,11 +77,19 @@ export default {
       return project.id === this.selectedProject?.id;
     },
   },
+  i18n: {
+    selectProjectText: __('Select a project'),
+  },
 };
 </script>
 
 <template>
-  <gl-dropdown :text="projectDropdownText" :loading="initialProjectsLoading">
+  <gl-dropdown
+    :text="projectDropdownText"
+    :loading="initialProjectsLoading"
+    menu-class="gl-w-auto!"
+    :header-text="$options.i18n.selectProjectText"
+  >
     <template #header>
       <gl-search-box-by-type v-model.trim="projectSearchQuery" :debounce="250" />
     </template>
@@ -85,10 +100,20 @@ export default {
         v-for="project in projects"
         :key="project.id"
         is-check-item
+        is-check-centered
         :is-checked="isProjectSelected(project)"
+        :data-testid="`test-project-${project.id}`"
         @click="onProjectSelect(project)"
       >
-        {{ project.nameWithNamespace }}
+        <gl-avatar-labeled
+          class="gl-text-truncate"
+          shape="rect"
+          :size="32"
+          :src="project.avatarUrl"
+          :label="project.name"
+          :entity-name="project.name"
+          :sub-label="project.nameWithNamespace"
+        />
       </gl-dropdown-item>
     </template>
   </gl-dropdown>