Merge branch '378679-overview-tab-personal-projects-add-topics' into 'master'

Add topics to Vue project list

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/117723



Merged-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Approved-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Approved-by: Minahil Nichols <minahilnichols@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Reviewed-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Reviewed-by: Peter Hegman <phegman@gitlab.com>
Co-authored-by: Peter Hegman <phegman@gitlab.com>

app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue

@@ -11,6 +11,7 @@ export default {
      *   id: number | string;
      *   name: string;
      *   webUrl: string;
+     *   topics: string[];
      *   forksCount?: number;
      *   avatarUrl: string | null;
      *   starCount: number;

app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue

 <script>
-import { GlAvatarLabeled, GlIcon, GlLink, GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlAvatarLabeled,
+  GlIcon,
+  GlLink,
+  GlBadge,
+  GlTooltipDirective,
+  GlPopover,
+  GlSprintf,
+} from '@gitlab/ui';
+import uniqueId from 'lodash/uniqueId';
 
 import { VISIBILITY_TYPE_ICON, PROJECT_VISIBILITY_TYPE } from '~/visibility_level/constants';
 import { ACCESS_LEVEL_LABELS } from '~/access_level/constants';
@@ -7,6 +16,10 @@ import { FEATURABLE_ENABLED } from '~/featurable/constants';
 import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
 import { __ } from '~/locale';
 import { numberToMetricPrefix } from '~/lib/utils/number_utils';
+import { truncate } from '~/lib/utils/text_utility';
+
+const MAX_TOPICS_TO_SHOW = 3;
+const MAX_TOPIC_TITLE_LENGTH = 15;
 
 export default {
   i18n: {
@@ -14,6 +27,9 @@ export default {
     forks: __('Forks'),
     issues: __('Issues'),
     archived: __('Archived'),
+    topics: __('Topics'),
+    topicsPopoverTargetText: __('+ %{count} more'),
+    moreTopics: __('More topics'),
   },
   components: {
     GlAvatarLabeled,
@@ -21,6 +37,8 @@ export default {
     UserAccessRoleBadge,
     GlLink,
     GlBadge,
+    GlPopover,
+    GlSprintf,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -33,6 +51,7 @@ export default {
      *   id: number | string;
      *   name: string;
      *   webUrl: string;
+     *   topics: string[];
      *   forksCount?: number;
      *   avatarUrl: string | null;
      *   starCount: number;
@@ -49,6 +68,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      topicsPopoverTarget: uniqueId('project-topics-popover-'),
+    };
+  },
   computed: {
     visibilityIcon() {
       return VISIBILITY_TYPE_ICON[this.project.visibility];
@@ -83,9 +107,32 @@ export default {
     isIssuesEnabled() {
       return this.project.issuesAccessLevel === FEATURABLE_ENABLED;
     },
+    hasTopics() {
+      return this.project.topics.length;
+    },
+    visibleTopics() {
+      return this.project.topics.slice(0, MAX_TOPICS_TO_SHOW);
+    },
+    popoverTopics() {
+      return this.project.topics.slice(MAX_TOPICS_TO_SHOW);
+    },
   },
   methods: {
     numberToMetricPrefix,
+    topicPath(topic) {
+      return `/explore/projects/topics/${encodeURIComponent(topic)}`;
+    },
+    topicTitle(topic) {
+      return truncate(topic, MAX_TOPIC_TITLE_LENGTH);
+    },
+    topicTooltipTitle(topic) {
+      // Matches conditional in app/assets/javascripts/lib/utils/text_utility.js#L88
+      if (topic.length - 1 > MAX_TOPIC_TITLE_LENGTH) {
+        return topic;
+      }
+
+      return null;
+    },
   },
 };
 </script>
@@ -111,6 +158,43 @@ export default {
           accessLevelLabel
         }}</user-access-role-badge>
       </template>
+      <div v-if="hasTopics" class="gl-mt-3" data-testid="project-topics">
+        <div
+          class="gl-w-full gl-display-inline-flex gl-flex-wrap gl-font-base gl-font-weight-normal gl-align-items-center gl-mx-n2 gl-my-n2"
+        >
+          <span class="gl-p-2 gl-text-secondary">{{ $options.i18n.topics }}:</span>
+          <div v-for="topic in visibleTopics" :key="topic" class="gl-p-2">
+            <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
+              {{ topicTitle(topic) }}
+            </gl-badge>
+          </div>
+          <template v-if="popoverTopics.length">
+            <div
+              :id="topicsPopoverTarget"
+              class="gl-p-2 gl-text-secondary"
+              role="button"
+              tabindex="0"
+            >
+              <gl-sprintf :message="$options.i18n.topicsPopoverTargetText">
+                <template #count>{{ popoverTopics.length }}</template>
+              </gl-sprintf>
+            </div>
+            <gl-popover :target="topicsPopoverTarget" :title="$options.i18n.moreTopics">
+              <div class="gl-font-base gl-font-weight-normal gl-mx-n2 gl-my-n2">
+                <div
+                  v-for="topic in popoverTopics"
+                  :key="topic"
+                  class="gl-p-2 gl-display-inline-block"
+                >
+                  <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
+                    {{ topicTitle(topic) }}
+                  </gl-badge>
+                </div>
+              </div>
+            </gl-popover>
+          </template>
+        </div>
+      </div>
     </gl-avatar-labeled>
     <div
       class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-mt-0"

spec/frontend/vue_shared/components/projects_list/projects_list_item_spec.js

-import { GlAvatarLabeled, GlBadge, GlIcon } from '@gitlab/ui';
+import { GlAvatarLabeled, GlBadge, GlIcon, GlPopover } from '@gitlab/ui';
 import projects from 'test_fixtures/api/users/projects/get.json';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ProjectsListItem from '~/vue_shared/components/projects_list/projects_list_item.vue';
@@ -13,6 +13,8 @@ import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.
 import { ACCESS_LEVEL_LABELS } from '~/access_level/constants';
 import { FEATURABLE_DISABLED, FEATURABLE_ENABLED } from '~/featurable/constants';
 
+jest.mock('lodash/uniqueId', () => (prefix) => `${prefix}1`);
+
 describe('ProjectsListItem', () => {
   let wrapper;
 
@@ -32,6 +34,8 @@ describe('ProjectsListItem', () => {
   const findAvatarLabeled = () => wrapper.findComponent(GlAvatarLabeled);
   const findIssuesLink = () => wrapper.findByRole('link', { name: ProjectsListItem.i18n.issues });
   const findForksLink = () => wrapper.findByRole('link', { name: ProjectsListItem.i18n.forks });
+  const findProjectTopics = () => wrapper.findByTestId('project-topics');
+  const findPopover = () => findProjectTopics().findComponent(GlPopover);
 
   it('renders project avatar', () => {
     createComponent();
@@ -166,4 +170,64 @@ describe('ProjectsListItem', () => {
       expect(findForksLink().exists()).toBe(false);
     });
   });
+
+  describe('if project has topics', () => {
+    it('renders first three topics', () => {
+      createComponent();
+
+      const firstThreeTopics = project.topics.slice(0, 3);
+      const firstThreeBadges = findProjectTopics().findAllComponents(GlBadge).wrappers.slice(0, 3);
+      const firstThreeBadgesText = firstThreeBadges.map((badge) => badge.text());
+      const firstThreeBadgesHref = firstThreeBadges.map((badge) => badge.attributes('href'));
+
+      expect(firstThreeTopics).toEqual(firstThreeBadgesText);
+      expect(firstThreeBadgesHref).toEqual(
+        firstThreeTopics.map((topic) => `/explore/projects/topics/${encodeURIComponent(topic)}`),
+      );
+    });
+
+    it('renders the rest of the topics in a popover', () => {
+      createComponent();
+
+      const topics = project.topics.slice(3);
+      const badges = findPopover().findAllComponents(GlBadge).wrappers;
+      const badgesText = badges.map((badge) => badge.text());
+      const badgesHref = badges.map((badge) => badge.attributes('href'));
+
+      expect(topics).toEqual(badgesText);
+      expect(badgesHref).toEqual(
+        topics.map((topic) => `/explore/projects/topics/${encodeURIComponent(topic)}`),
+      );
+    });
+
+    it('renders button to open popover', () => {
+      createComponent();
+
+      const expectedButtonId = 'project-topics-popover-1';
+
+      expect(wrapper.findByText('+ 2 more').attributes('id')).toBe(expectedButtonId);
+      expect(findPopover().props('target')).toBe(expectedButtonId);
+    });
+
+    describe('when topic has a name longer than 15 characters', () => {
+      it('truncates name and shows tooltip with full name', () => {
+        const topicWithLongName = 'topic with very very very long name';
+
+        createComponent({
+          propsData: {
+            project: {
+              ...project,
+              topics: [topicWithLongName, ...project.topics],
+            },
+          },
+        });
+
+        const firstTopicBadge = findProjectTopics().findComponent(GlBadge);
+        const tooltip = getBinding(firstTopicBadge.element, 'gl-tooltip');
+
+        expect(firstTopicBadge.text()).toBe('topic with ver…');
+        expect(tooltip.value).toBe(topicWithLongName);
+      });
+    });
+  });
 });