Merge branch 'tomquirk/improve-jira-connect-branch-styling' into 'master'

Clean up Create Branch from Jira form

See merge request gitlab-org/gitlab!79922

app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue

@@ -140,13 +140,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"

app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue

 <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>

app/views/jira_connect/branches/new.html.haml

 - @hide_breadcrumbs = true
 - @hide_top_links = true
 - @content_class = 'limit-container-width'
-- page_title _('New branch')
+- page_title _('Create branch')
 
 .js-jira-connect-create-branch{ data: @new_branch_data }

spec/frontend/jira_connect/branches/components/project_dropdown_spec.js

-import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlAvatarLabeled,
+  GlDropdown,
+  GlDropdownItem,
+  GlLoadingIcon,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -56,8 +62,8 @@ describe('ProjectDropdown', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findDropdownItemByText = (text) =>
-    findAllDropdownItems().wrappers.find((item) => item.text() === text);
+  const findDropdownItemByProjectId = (projectId) =>
+    wrapper.find(`[data-testid="test-project-${projectId}"]`);
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
 
   function createMockApolloProvider({ mockGetProjectsQuery = mockGetProjectsQuerySuccess } = {}) {
@@ -106,18 +112,31 @@ describe('ProjectDropdown', () => {
       expect(findDropdown().props('loading')).toBe(false);
     });
 
-    it('renders dropdown items', () => {
+    it('renders dropdown items with correct props', () => {
       const dropdownItems = findAllDropdownItems();
+      const avatars = dropdownItems.wrappers.map((item) => item.findComponent(GlAvatarLabeled));
+      const avatarAttributes = avatars.map((avatar) => avatar.attributes());
+      const avatarProps = avatars.map((avatar) => avatar.props());
+
       expect(dropdownItems.wrappers).toHaveLength(mockProjects.length);
-      expect(dropdownItems.wrappers.map((item) => item.text())).toEqual(
-        mockProjects.map((project) => project.nameWithNamespace),
+      expect(avatarProps).toMatchObject(
+        mockProjects.map((project) => ({
+          label: project.name,
+          subLabel: project.nameWithNamespace,
+        })),
+      );
+      expect(avatarAttributes).toMatchObject(
+        mockProjects.map((project) => ({
+          src: project.avatarUrl,
+          'entity-name': project.name,
+        })),
       );
     });
 
     describe('when selecting a dropdown item', () => {
       it('emits `change` event with the selected project name', async () => {
         const mockProject = mockProjects[0];
-        const itemToSelect = findDropdownItemByText(mockProject.nameWithNamespace);
+        const itemToSelect = findDropdownItemByProjectId(mockProject.id);
         await itemToSelect.vm.$emit('click');
 
         expect(wrapper.emitted('change')[0]).toEqual([mockProject]);
@@ -134,7 +153,7 @@ describe('ProjectDropdown', () => {
       });
 
       it('sets `isChecked` prop of the corresponding dropdown item to `true`', () => {
-        expect(findDropdownItemByText(mockProject.nameWithNamespace).props('isChecked')).toBe(true);
+        expect(findDropdownItemByProjectId(mockProject.id).props('isChecked')).toBe(true);
       });
 
       it('sets dropdown text to `selectedBranchName` value', () => {