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

-<script>
-import { GlTab } from '@gitlab/ui';
-import { s__ } from '~/locale';
-
-export default {
-  i18n: {
-    title: s__('UserProfile|Snippets'),
-  },
-  components: { GlTab },
-};
-</script>
-
-<template>
-  <gl-tab :title="$options.i18n.title">
-    <!-- placeholder -->
-  </gl-tab>
-</template>

app/assets/javascripts/profile/constants.js

@@ -5,3 +5,5 @@ export const CALENDAR_PERIOD_12_MONTHS = 12;
  * (see activity_calendar.js)
  */
 export const OVERVIEW_CALENDAR_BREAKPOINT = 918;
+
+export const SNIPPET_MAX_LIST_COUNT = 20;

app/assets/javascripts/profile/index.js

@@ -13,10 +13,22 @@ export const initProfileTabs = () => {
 
   if (!el) return false;
 
-  const { followees, followers, userCalendarPath, utcOffset, userId } = el.dataset;
+  const {
+    followees,
+    followers,
+    userCalendarPath,
+    utcOffset,
+    userId,
+    snippetsEmptyState,
+  } = el.dataset;
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
 
   return new Vue({
     el,
+    apolloProvider,
     name: 'ProfileRoot',
     provide: {
       followees: parseInt(followers, 10),
@@ -24,6 +36,7 @@ export const initProfileTabs = () => {
       userCalendarPath,
       utcOffset,
       userId,
+      snippetsEmptyState,
     },
     render(createElement) {
       return createElement(ProfileTabs);

app/assets/javascripts/projects/commit_box/info/components/commit_refs.vue

+<script>
+import { createAlert } from '~/alert';
+import commitReferencesQuery from '../graphql/queries/commit_references.query.graphql';
+import containingBranchesQuery from '../graphql/queries/commit_containing_branches.query.graphql';
+import containingTagsQuery from '../graphql/queries/commit_containing_tags.query.graphql';
+import {
+  BRANCHES,
+  TAGS,
+  FETCH_CONTAINING_REFS_EVENT,
+  FETCH_COMMIT_REFERENCES_ERROR,
+} from '../constants';
+import RefsList from './refs_list.vue';
+
+export default {
+  name: 'CommitRefs',
+  components: {
+    RefsList,
+  },
+  inject: ['fullPath', 'commitSha'],
+  apollo: {
+    project: {
+      query: commitReferencesQuery,
+      variables() {
+        return this.queryVariables;
+      },
+      update({
+        project: {
+          commitReferences: { tippingTags, tippingBranches, containingBranches, containingTags },
+        },
+      }) {
+        this.tippingTags = tippingTags.names;
+        this.tippingBranches = tippingBranches.names;
+        this.hasContainingBranches = Boolean(containingBranches.names.length);
+        this.hasContainingTags = Boolean(containingTags.names.length);
+      },
+      error() {
+        createAlert({
+          message: this.$options.i18n.errorMessage,
+          captureError: true,
+        });
+      },
+    },
+  },
+  data() {
+    return {
+      containingTags: [],
+      containingBranches: [],
+      tippingTags: [],
+      tippingBranches: [],
+      hasContainingBranches: false,
+      hasContainingTags: false,
+    };
+  },
+  computed: {
+    hasBranches() {
+      return this.tippingBranches.length || this.hasContainingBranches;
+    },
+    hasTags() {
+      return this.tippingTags.length || this.hasContainingTags;
+    },
+    queryVariables() {
+      return {
+        fullPath: this.fullPath,
+        commitSha: this.commitSha,
+      };
+    },
+  },
+  methods: {
+    async fetchContainingRefs({ query, namespace }) {
+      try {
+        const { data } = await this.$apollo.query({
+          query,
+          variables: this.queryVariables,
+        });
+        this[namespace] = data.project.commitReferences[namespace].names;
+        return data.project.commitReferences[namespace].names;
+      } catch {
+        return createAlert({
+          message: this.$options.i18n.errorMessage,
+          captureError: true,
+        });
+      }
+    },
+    fetchContainingBranches() {
+      this.fetchContainingRefs({ query: containingBranchesQuery, namespace: 'containingBranches' });
+    },
+    fetchContainingTags() {
+      this.fetchContainingRefs({ query: containingTagsQuery, namespace: 'containingTags' });
+    },
+  },
+  i18n: {
+    branches: BRANCHES,
+    tags: TAGS,
+    errorMessage: FETCH_COMMIT_REFERENCES_ERROR,
+  },
+  fetchContainingRefsEvent: FETCH_CONTAINING_REFS_EVENT,
+};
+</script>
+
+<template>
+  <div class="gl-ml-7">
+    <refs-list
+      v-if="hasBranches"
+      :has-containing-refs="hasContainingBranches"
+      :is-loading="$apollo.queries.project.loading"
+      :tipping-refs="tippingBranches"
+      :containing-refs="containingBranches"
+      :namespace="$options.i18n.branches"
+      @[$options.fetchContainingRefsEvent]="fetchContainingBranches"
+    />
+    <refs-list
+      v-if="hasTags"
+      :has-containing-refs="hasContainingTags"
+      :is-loading="$apollo.queries.project.loading"
+      :tipping-refs="tippingTags"
+      :containing-refs="containingTags"
+      :namespace="$options.i18n.tags"
+      @[$options.fetchContainingRefsEvent]="fetchContainingTags"
+    />
+  </div>
+</template>

app/assets/javascripts/projects/commit_box/info/components/refs_list.vue

+<script>
+import { GlCollapse, GlBadge, GlButton, GlIcon, GlSkeletonLoader } from '@gitlab/ui';
+import { CONTAINING_COMMIT, FETCH_CONTAINING_REFS_EVENT } from '../constants';
+
+export default {
+  name: 'RefsList',
+  components: {
+    GlCollapse,
+    GlSkeletonLoader,
+    GlBadge,
+    GlButton,
+    GlIcon,
+  },
+  props: {
+    containingRefs: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    tippingRefs: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    namespace: {
+      type: String,
+      required: true,
+    },
+    hasContainingRefs: {
+      type: Boolean,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isContainingRefsVisible: false,
+    };
+  },
+  computed: {
+    collapseIcon() {
+      return this.isContainingRefsVisible ? 'chevron-down' : 'chevron-right';
+    },
+    isLoadingRefs() {
+      return this.isLoading && !this.containingRefs.length;
+    },
+  },
+  methods: {
+    toggleCollapse() {
+      this.isContainingRefsVisible = !this.isContainingRefsVisible;
+    },
+    showRefs() {
+      this.toggleCollapse();
+      this.$emit(FETCH_CONTAINING_REFS_EVENT);
+    },
+  },
+  i18n: {
+    containingCommit: CONTAINING_COMMIT,
+  },
+};
+</script>
+
+<template>
+  <div class="gl-pt-4">
+    <span data-testid="title" class="gl-mr-2">{{ namespace }}</span>
+    <gl-badge v-for="ref in tippingRefs" :key="ref" class="gl-mt-2 gl-mr-2" size="sm">{{
+      ref
+    }}</gl-badge>
+    <gl-button
+      v-if="hasContainingRefs"
+      class="gl-mr-2 gl-font-sm!"
+      variant="link"
+      size="small"
+      @click="showRefs"
+    >
+      <gl-icon :name="collapseIcon" :size="14" />
+      {{ namespace }} {{ $options.i18n.containingCommit }}
+    </gl-button>
+    <gl-collapse :visible="isContainingRefsVisible">
+      <gl-skeleton-loader v-if="isLoadingRefs" :lines="1" />
+      <template v-else>
+        <gl-badge v-for="ref in containingRefs" :key="ref" class="gl-mt-3 gl-mr-2" size="sm">{{
+          ref
+        }}</gl-badge>
+      </template>
+    </gl-collapse>
+  </div>
+</template>

app/assets/javascripts/projects/commit_box/info/constants.js

-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const COMMIT_BOX_POLL_INTERVAL = 10000;
 
 export const PIPELINE_STATUS_FETCH_ERROR = __(
   'There was a problem fetching the latest pipeline status.',
 );
+
+export const BRANCHES = s__('Commit|Branches');
+
+export const TAGS = s__('Commit|Tags');
+
+export const CONTAINING_COMMIT = s__('Commit|containing commit');
+
+export const FETCH_CONTAINING_REFS_EVENT = 'fetch-containing-refs';
+
+export const FETCH_COMMIT_REFERENCES_ERROR = s__(
+  'Commit|There was an error fetching the commit references. Please try again later.',
+);

app/assets/javascripts/projects/commit_box/info/graphql/queries/commit_containing_branches.query.graphql

+query CommitContainingBranches($fullPath: ID!, $commitSha: String!) {
+  project(fullPath: $fullPath) {
+    id
+    commitReferences(commitSha: $commitSha) {
+      containingBranches(excludeTipped: true) {
+        names
+      }
+    }
+  }
+}

app/assets/javascripts/projects/commit_box/info/graphql/queries/commit_containing_tags.query.graphql

+query CommitContainingTags($fullPath: ID!, $commitSha: String!) {
+  project(fullPath: $fullPath) {
+    id
+    commitReferences(commitSha: $commitSha) {
+      containingTags(excludeTipped: true) {
+        names
+      }
+    }
+  }
+}

app/assets/javascripts/projects/commit_box/info/graphql/queries/commit_references.query.graphql

+query CommitReferences($fullPath: ID!, $commitSha: String!) {
+  project(fullPath: $fullPath) {
+    id
+    commitReferences(commitSha: $commitSha) {
+      containingBranches(excludeTipped: true, limit: 1) {
+        names
+      }
+      containingTags(excludeTipped: true, limit: 1) {
+        names
+      }
+      tippingBranches {
+        names
+      }
+      tippingTags {
+        names
+      }
+    }
+  }
+}

app/assets/javascripts/projects/commit_box/info/index.js

 import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 import { initCommitPipelineMiniGraph } from './init_commit_pipeline_mini_graph';
-import { loadBranches } from './load_branches';
 import initCommitPipelineStatus from './init_commit_pipeline_status';
+import initCommitReferences from './init_commit_references';
 
 export const initCommitBoxInfo = () => {
   // Display commit related branches
-  loadBranches();
-
   // Related merge requests to this commit
   fetchCommitMergeRequests();
 
@@ -14,4 +12,6 @@ export const initCommitBoxInfo = () => {
   initCommitPipelineMiniGraph();
 
   initCommitPipelineStatus();
+
+  initCommitReferences();
 };

app/assets/javascripts/projects/commit_box/info/init_commit_references.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import CommitBranches from './components/commit_refs.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export default (selector = 'js-commit-branches-and-tags') => {
+  const el = document.getElementById(selector);
+
+  if (!el) {
+    return false;
+  }
+
+  const { fullPath, commitSha } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      fullPath,
+      commitSha,
+    },
+    render(createElement) {
+      return createElement(CommitBranches);
+    },
+  });
+};

app/assets/javascripts/projects/commit_box/info/load_branches.js

-import axios from 'axios';
-import { sanitize } from '~/lib/dompurify';
-import { __ } from '~/locale';
-import { initDetailsButton } from './init_details_button';
-
-export const loadBranches = (containerSelector = '.js-commit-box-info') => {
-  const containerEl = document.querySelector(containerSelector);
-  if (!containerEl) {
-    return;
-  }
-
-  const { commitPath } = containerEl.dataset;
-  const branchesEl = containerEl.querySelector('.commit-info.branches');
-  axios
-    .get(commitPath)
-    .then(({ data }) => {
-      branchesEl.innerHTML = sanitize(data);
-
-      initDetailsButton();
-    })
-    .catch(() => {
-      branchesEl.textContent = __('Failed to load branches. Please try again.');
-    });
-};

app/assets/javascripts/projects/new/components/app.vue

 <script>
-import createFromTemplateIllustration from '@gitlab/svgs/dist/illustrations/project-create-from-template-sm.svg';
-import blankProjectIllustration from '@gitlab/svgs/dist/illustrations/project-create-new-sm.svg';
-import importProjectIllustration from '@gitlab/svgs/dist/illustrations/project-import-sm.svg';
-import ciCdProjectIllustration from '@gitlab/svgs/dist/illustrations/project-run-CICD-pipelines-sm.svg';
+import createFromTemplateIllustration from '@gitlab/svgs/dist/illustrations/project-create-from-template-sm.svg?raw';
+import blankProjectIllustration from '@gitlab/svgs/dist/illustrations/project-create-new-sm.svg?raw';
+import importProjectIllustration from '@gitlab/svgs/dist/illustrations/project-import-sm.svg?raw';
+import ciCdProjectIllustration from '@gitlab/svgs/dist/illustrations/project-run-CICD-pipelines-sm.svg?raw';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
 import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';

app/assets/javascripts/repository/components/fork_info.vue

@@ -314,7 +314,7 @@ export default {
         >
           {{ $options.i18n.inaccessibleProject }}
         </div>
-        <div class="gl-display-flex gl-xs-display-none!">
+        <div class="gl-display-none gl-sm-display-flex">
           <gl-button
             v-if="hasCreateMrButton"
             class="gl-ml-4"

app/assets/javascripts/security_configuration/components/constants.js

@@ -15,9 +15,9 @@ import {
   REPORT_TYPE_API_FUZZING,
 } from '~/vue_shared/security_reports/constants';
 
-import kontraLogo from 'images/vulnerability/kontra-logo.svg';
-import scwLogo from 'images/vulnerability/scw-logo.svg';
-import secureflagLogo from 'images/vulnerability/secureflag-logo.svg';
+import kontraLogo from 'images/vulnerability/kontra-logo.svg?raw';
+import scwLogo from 'images/vulnerability/scw-logo.svg?raw';
+import secureflagLogo from 'images/vulnerability/secureflag-logo.svg?raw';
 import configureSastMutation from '../graphql/configure_sast.mutation.graphql';
 import configureSastIacMutation from '../graphql/configure_iac.mutation.graphql';
 import configureSecretDetectionMutation from '../graphql/configure_secret_detection.mutation.graphql';

app/assets/javascripts/streaming/handle_streamed_relative_timestamps.js

+import { localTimeAgo } from '~/lib/utils/datetime_utility';
+
+const STREAMING_ELEMENT_NAME = 'streaming-element';
+const TIME_AGO_CLASS_NAME = 'js-timeago';
+
+// Callback handler for intersections observed on timestamps.
+const handleTimestampsIntersecting = (entries, observer) => {
+  entries.forEach((entry) => {
+    const { isIntersecting, target: timestamp } = entry;
+    if (isIntersecting) {
+      localTimeAgo([timestamp]);
+      observer.unobserve(timestamp);
+    }
+  });
+};
+
+// Finds nodes containing the `js-timeago` class within a mutation list.
+const findTimeAgoNodes = (mutationList) => {
+  return mutationList.reduce((acc, mutation) => {
+    [...mutation.addedNodes].forEach((node) => {
+      if (node.classList?.contains(TIME_AGO_CLASS_NAME)) {
+        acc.push(node);
+      }
+    });
+
+    return acc;
+  }, []);
+};
+
+// Callback handler for mutations observed on the streaming element.
+const handleStreamingElementMutation = (mutationList) => {
+  const timestamps = findTimeAgoNodes(mutationList);
+  const timestampIntersectionObserver = new IntersectionObserver(handleTimestampsIntersecting, {
+    rootMargin: `${window.innerHeight}px 0px`,
+  });
+
+  timestamps.forEach((timestamp) => timestampIntersectionObserver.observe(timestamp));
+};
+
+// Finds the streaming element within a mutation list.
+const findStreamingElement = (mutationList) =>
+  mutationList.find((mutation) =>
+    [...mutation.addedNodes].find((node) => node.localName === STREAMING_ELEMENT_NAME),
+  )?.target;
+
+// Waits for the streaming element to become available on the rootElement.
+const waitForStreamingElement = (rootElement) => {
+  return new Promise((resolve) => {
+    let element = document.querySelector(STREAMING_ELEMENT_NAME);
+
+    if (element) {
+      resolve(element);
+      return;
+    }
+
+    const rootElementObserver = new MutationObserver((mutations) => {
+      element = findStreamingElement(mutations);
+      if (element) {
+        resolve(element);
+        rootElementObserver.disconnect();
+      }
+    });
+
+    rootElementObserver.observe(rootElement, { childList: true, subtree: true });
+  });
+};
+
+/**
+ * Ensures relative (timeago) timestamps that are streamed are formatted correctly.
+ *
+ * Example: `May 12, 2020` → `3 years ago`
+ */
+export const handleStreamedRelativeTimestamps = async (rootElement) => {
+  const streamingElement = await waitForStreamingElement(rootElement); // wait for streaming to start
+  const streamingElementObserver = new MutationObserver(handleStreamingElementMutation);
+
+  streamingElementObserver.observe(streamingElement, { childList: true, subtree: true });
+
+  return () => streamingElementObserver.disconnect();
+};

app/assets/javascripts/super_sidebar/components/brand_logo.vue

+<script>
+import { __ } from '~/locale';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import logo from '../../../../views/shared/_logo.svg?raw';
+
+export default {
+  logo,
+  i18n: {
+    homepage: __('Homepage'),
+  },
+  directives: {
+    SafeHtml,
+  },
+  inject: ['rootPath'],
+  props: {
+    logoUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.homepage"
+    class="tanuki-logo-container"
+    :href="rootPath"
+    :title="$options.i18n.homepage"
+    data-track-action="click_link"
+    data-track-label="gitlab_logo_link"
+    data-track-property="nav_core_menu"
+  >
+    <img v-if="logoUrl" data-testid="brand-header-custom-logo" :src="logoUrl" class="gl-h-6" />
+    <span v-else v-safe-html="$options.logo" data-testid="brand-header-default-logo"></span>
+  </a>
+</template>

app/assets/javascripts/super_sidebar/components/frequent_items_list.vue

 <script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import AccessorUtilities from '~/lib/utils/accessor';
+import { __ } from '~/locale';
 import { getTopFrequentItems, formatContextSwitcherItems } from '../utils';
 import ItemsList from './items_list.vue';
 
 export default {
   components: {
+    GlButton,
     ItemsList,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     title: {
       type: String,
@@ -68,6 +74,9 @@ export default {
       }
     },
   },
+  i18n: {
+    removeItem: __('Remove'),
+  },
 };
 </script>
 
@@ -87,7 +96,20 @@ export default {
     >
       {{ pristineText }}
     </div>
-    <items-list :aria-label="title" :items="cachedFrequentItems" @remove-item="handleItemRemove">
+    <items-list :aria-label="title" :items="cachedFrequentItems">
+      <template #actions="{ item }">
+        <gl-button
+          v-gl-tooltip.right.viewport
+          size="small"
+          category="tertiary"
+          icon="dash"
+          :aria-label="$options.i18n.removeItem"
+          :title="$options.i18n.removeItem"
+          class="gl-align-self-center gl-p-1! gl-absolute gl-right-4"
+          data-testid="item-remove"
+          @click.stop.prevent="handleItemRemove(item)"
+        />
+      </template>
       <template #view-all-items>
         <slot name="view-all-items"></slot>
       </template>

app/assets/javascripts/super_sidebar/components/help_center.vue

@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 import GitlabVersionCheckBadge from '~/gitlab_version_check/components/gitlab_version_check_badge.vue';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { DOMAIN, PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
+import { FORUM_URL, DOCS_URL, PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import { STORAGE_KEY } from '~/whats_new/utils/notification';
 import Tracking from '~/tracking';
@@ -93,7 +93,7 @@ export default {
             },
             {
               text: this.$options.i18n.docs,
-              href: `https://docs.${DOMAIN}`,
+              href: DOCS_URL,
               extraAttrs: {
                 ...this.trackingAttrs('gitlab_documentation'),
               },
@@ -107,7 +107,7 @@ export default {
             },
             {
               text: this.$options.i18n.forum,
-              href: `https://forum.${DOMAIN}/`,
+              href: FORUM_URL,
               extraAttrs: {
                 ...this.trackingAttrs('community_forum'),
               },

app/assets/javascripts/super_sidebar/components/items_list.vue

 <script>
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import NavItem from './nav_item.vue';
 
 export default {
   components: {
-    GlButton,
     ProjectAvatar,
     NavItem,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   props: {
     items: {
       type: Array,
@@ -40,17 +35,7 @@ export default {
         />
       </template>
       <template #actions>
-        <gl-button
-          v-gl-tooltip.right.viewport
-          size="small"
-          category="tertiary"
-          icon="dash"
-          :aria-label="__('Remove')"
-          :title="__('Remove')"
-          class="gl-align-self-center gl-p-1! gl-absolute gl-right-4"
-          data-testid="item-remove"
-          @click.stop.prevent="$emit('remove-item', item)"
-        />
+        <slot name="actions" :item="item"></slot>
       </template>
     </nav-item>
     <slot name="view-all-items"></slot>