Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

app/assets/javascripts/profile/components/user_achievements.vue

@@ -8,8 +8,6 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { joinPaths } from '~/lib/utils/url_utility';
 import getUserAchievements from './graphql/get_user_achievements.query.graphql';
 
-export const MAX_VISIBLE_ACHIEVEMENTS = 7;
-
 export default {
   name: 'UserAchievements',
   components: { GlAvatar, GlBadge, GlPopover, GlSprintf },
@@ -38,27 +36,25 @@ export default {
   },
   methods: {
     processNodes(nodes) {
-      return Object.entries(groupBy(nodes, 'achievement.id'))
-        .slice(0, MAX_VISIBLE_ACHIEVEMENTS)
-        .map(([id, values]) => {
-          const {
-            achievement: { name, avatarUrl, description, namespace },
-            createdAt,
-          } = values[0];
-          const count = values.length;
-          return {
-            id: `user-achievement-${id}`,
-            name,
-            timeAgo: this.timeFormatted(createdAt),
-            avatarUrl: avatarUrl || gon.gitlab_logo,
-            description,
-            namespace: namespace && {
-              fullPath: namespace.fullPath,
-              webUrl: joinPaths(this.rootUrl, namespace.achievementsPath),
-            },
-            count,
-          };
-        });
+      return Object.entries(groupBy(nodes, 'achievement.id')).map(([id, values]) => {
+        const {
+          achievement: { name, avatarUrl, description, namespace },
+          createdAt,
+        } = values[0];
+        const count = values.length;
+        return {
+          id: `user-achievement-${id}`,
+          name,
+          timeAgo: this.timeFormatted(createdAt),
+          avatarUrl: avatarUrl || gon.gitlab_logo,
+          description,
+          namespace: namespace && {
+            fullPath: namespace.fullPath,
+            webUrl: joinPaths(this.rootUrl, namespace.achievementsPath),
+          },
+          count,
+        };
+      });
     },
     achievementAwardedMessage(userAchievement) {
       return userAchievement.namespace
@@ -85,51 +81,56 @@ export default {
     <h2 class="gl-font-base gl-mb-2 gl-mt-4">
       {{ $options.i18n.achievementsLabel }}
     </h2>
-    <div
-      v-for="userAchievement in userAchievements"
-      :key="userAchievement.id"
-      class="gl-mr-2 gl-display-inline-block gl-align-top gl-text-center"
-      data-testid="user-achievement"
-    >
-      <gl-avatar
-        :id="userAchievement.id"
-        :src="userAchievement.avatarUrl"
-        :size="32"
-        tabindex="0"
-        shape="rect"
-        class="gl-p-1 gl-border-none"
-      />
-      <br />
-      <gl-badge v-if="showCountBadge(userAchievement.count)" variant="info">{{
-        getCountBadge(userAchievement.count)
-      }}</gl-badge>
-      <gl-popover :target="userAchievement.id">
-        <div>
-          <span class="gl-font-bold">{{ userAchievement.name }}</span>
-          <gl-badge v-if="showCountBadge(userAchievement.count)" variant="info">{{
-            getCountBadge(userAchievement.count)
-          }}</gl-badge>
-        </div>
-        <div>
-          <gl-sprintf :message="achievementAwardedMessage(userAchievement)">
-            <template #timeAgo>
-              <span>{{ userAchievement.timeAgo }}</span>
-            </template>
-            <template v-if="userAchievement.namespace" #namespace>
-              <a :href="userAchievement.namespace.webUrl">{{
-                userAchievement.namespace.fullPath
-              }}</a>
-            </template>
-          </gl-sprintf>
-        </div>
-        <div
-          v-if="userAchievement.description"
-          class="gl-mt-5"
-          data-testid="achievement-description"
+    <div class="gl-flex gl-gap-3 gl-flex-wrap">
+      <div
+        v-for="userAchievement in userAchievements"
+        :key="userAchievement.id"
+        class="gl-relative"
+        data-testid="user-achievement"
+      >
+        <gl-avatar
+          :id="userAchievement.id"
+          :src="userAchievement.avatarUrl"
+          :size="48"
+          tabindex="0"
+          shape="rect"
+          class="gl-p-1 gl-outline-none"
+        />
+        <br />
+        <gl-badge
+          v-if="showCountBadge(userAchievement.count)"
+          class="gl-absolute gl-left-7 gl-top-7 gl-z-1"
+          variant="info"
+          >{{ getCountBadge(userAchievement.count) }}</gl-badge
         >
-          {{ userAchievement.description }}
-        </div>
-      </gl-popover>
+        <gl-popover :target="userAchievement.id">
+          <div>
+            <span class="gl-font-bold">{{ userAchievement.name }}</span>
+            <gl-badge v-if="showCountBadge(userAchievement.count)" variant="info">{{
+              getCountBadge(userAchievement.count)
+            }}</gl-badge>
+          </div>
+          <div>
+            <gl-sprintf :message="achievementAwardedMessage(userAchievement)">
+              <template #timeAgo>
+                <span>{{ userAchievement.timeAgo }}</span>
+              </template>
+              <template v-if="userAchievement.namespace" #namespace>
+                <a :href="userAchievement.namespace.webUrl">{{
+                  userAchievement.namespace.fullPath
+                }}</a>
+              </template>
+            </gl-sprintf>
+          </div>
+          <div
+            v-if="userAchievement.description"
+            class="gl-mt-5"
+            data-testid="achievement-description"
+          >
+            {{ userAchievement.description }}
+          </div>
+        </gl-popover>
+      </div>
     </div>
   </div>
 </template>

app/assets/javascripts/super_sidebar/super_sidebar_bundle.js

@@ -19,7 +19,6 @@ Vue.use(VueApollo);
 const getTrialStatusWidgetData = (sidebarData) => {
   if (sidebarData.trial_status_widget_data_attrs && sidebarData.trial_status_popover_data_attrs) {
     const {
-      containerId,
       trialDaysUsed,
       trialDuration,
       navIconImagePath,
@@ -36,15 +35,13 @@ const getTrialStatusWidgetData = (sidebarData) => {
     return {
       showTrialStatusWidget: true,
       showDuoProTrialStatusWidget: false,
-      containerId,
       trialDaysUsed: Number(trialDaysUsed),
       trialDuration: Number(trialDuration),
       navIconImagePath,
       percentageComplete: Number(percentageComplete),
       planName,
       plansHref,
       daysRemaining,
-      targetId: containerId,
       trialEndDate: new Date(trialEndDate),
       trialDiscoverPagePath,
     };
@@ -55,7 +52,6 @@ const getTrialStatusWidgetData = (sidebarData) => {
     sidebarData.duo_pro_trial_status_popover_data_attrs
   ) {
     const {
-      containerId,
       trialDaysUsed,
       trialDuration,
       percentageComplete,
@@ -72,7 +68,6 @@ const getTrialStatusWidgetData = (sidebarData) => {
     return {
       showDuoProTrialStatusWidget: true,
       showTrialStatusWidget: false,
-      containerId,
       trialDaysUsed: Number(trialDaysUsed),
       trialDuration: Number(trialDuration),
       percentageComplete: Number(percentageComplete),
@@ -81,7 +76,6 @@ const getTrialStatusWidgetData = (sidebarData) => {
       featureId,
       dismissEndpoint,
       daysRemaining,
-      targetId: containerId,
       trialEndDate: new Date(trialEndDate),
       purchaseNowUrl,
       learnAboutButtonUrl: widgetUrl,

app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue

@@ -21,13 +21,13 @@ export default {
 };
 </script>
 <template>
-  <div class="blame gl-bg-gray-10 gl-border-r">
-    <div class="blame-commit gl-border-none!">
+  <div class="blame gl-border-r gl-bg-gray-10">
+    <div class="blame-commit !gl-border-none">
       <commit-info
         v-for="(blame, index) in blameInfo"
         :key="index"
         :class="{ 'gl-border-t': blame.blameOffset !== '0px' }"
-        class="gl-display-flex gl-absolute gl-px-3"
+        class="gl-absolute gl-flex gl-px-3"
         :style="{ top: blame.blameOffset }"
         :commit="blame.commit"
         :span="blame.span"