Add latest changes from gitlab-org/gitlab@master

17 files changed, 244 insertions, 107 deletions

diff --git a/app/assets/javascripts/content_editor/components/toolbar_image_button.vue b/app/assets/javascripts/content_editor/components/toolbar_image_button.vue
index 8ed4dfce6de..972b03eeeeb 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_image_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_image_button.vue
@@ -84,7 +84,7 @@ export default {
       data-testid="insert-image-toolbar-button"
       @hidden="resetFields()"
     >
-      <gl-dropdown-form class="gl-px-3!">
+      <gl-dropdown-form class="gl-px-3! gl-pb-2!">
         <gl-form-input-group v-model="imgSrc" :placeholder="__('Image URL')">
           <template #append>
             <gl-button variant="confirm" @click="insertImage">{{ __('Insert') }}</gl-button>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_link_button.vue b/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
index 4fb1e8ce16f..b505b120f00 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_link_button.vue
@@ -102,7 +102,7 @@ export default {
         lazy
         @show="selectLink()"
       >
-        <gl-dropdown-form class="gl-px-3!">
+        <gl-dropdown-form class="gl-px-3! gl-pb-2!">
           <gl-form-input-group v-model="linkHref" :placeholder="__('Link URL')">
             <template #append>
               <gl-button variant="confirm" @click="updateLink">{{ __('Apply') }}</gl-button>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
index 4b1929e1a20..bf2740f9864 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
@@ -83,7 +83,7 @@ export default {
     text-sr-only
     lazy
   >
-    <gl-dropdown-form class="gl-px-3!">
+    <gl-dropdown-form class="gl-px-3! gl-pb-2!">
       <div v-for="r of list(maxRows)" :key="r" class="gl-display-flex">
         <gl-button
           v-for="c of list(maxCols)"
diff --git a/app/assets/javascripts/issues/index.js b/app/assets/javascripts/issues/index.js
index 1fa292d4ab7..61531880842 100644
--- a/app/assets/javascripts/issues/index.js
+++ b/app/assets/javascripts/issues/index.js
@@ -3,7 +3,6 @@ import IssuableForm from 'ee_else_ce/issuable/issuable_form';
 import IssuableLabelSelector from '~/issuable/issuable_label_selector';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import GLForm from '~/gl_form';
 import { initIssuableHeaderWarnings, initIssuableSidebar } from '~/issuable';
 import { TYPE_INCIDENT } from '~/issues/constants';
 import Issue from '~/issues/issue';
@@ -37,7 +36,6 @@ export function initFilteredSearchServiceDesk() {
 }
 
 export function initForm() {
-  new GLForm($('.issue-form')); // eslint-disable-line no-new
   new IssuableForm($('.issue-form')); // eslint-disable-line no-new
   IssuableLabelSelector();
   new LabelsSelect(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
index 3d5ac528920..7ea19df7a6c 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
@@ -1,4 +1,6 @@
 <script>
+import { GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { n__ } from '~/locale';
 import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
@@ -10,16 +12,20 @@ import {
   CANCEL_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
   DELETE_PACKAGE_VERSION_TRACKING_ACTION,
   DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
+  FETCH_PACKAGE_VERSIONS_ERROR_MESSAGE,
+  GRAPHQL_PAGE_SIZE,
   REQUEST_DELETE_PACKAGE_VERSION_TRACKING_ACTION,
   REQUEST_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
 } from '~/packages_and_registries/package_registry/constants';
 import Tracking from '~/tracking';
 import { packageTypeToTrackCategory } from '~/packages_and_registries/package_registry/utils';
+import getPackageVersionsQuery from '~/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql';
 
 export default {
   components: {
     DeleteModal,
     DeletePackageModal,
+    GlAlert,
     VersionRow,
     PackagesListLoader,
     RegistryList,
@@ -31,33 +37,65 @@ export default {
       required: false,
       default: false,
     },
-    versions: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    pageInfo: {
-      type: Object,
-      required: true,
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    isLoading: {
+    isMutationLoading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    packageId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
       itemToBeDeleted: null,
       itemsToBeDeleted: [],
+      packageVersions: {},
+      fetchPackageVersionsError: false,
     };
   },
+  apollo: {
+    packageVersions: {
+      query: getPackageVersionsQuery,
+      variables() {
+        return this.queryVariables;
+      },
+      skip() {
+        return this.isListEmpty;
+      },
+      update(data) {
+        return data.package?.versions ?? {};
+      },
+      error(error) {
+        this.fetchPackageVersionsError = true;
+        Sentry.captureException(error);
+      },
+    },
+  },
   computed: {
+    isListEmpty() {
+      return this.count === 0;
+    },
+    isLoading() {
+      return this.$apollo.queries.packageVersions.loading || this.isMutationLoading;
+    },
+    pageInfo() {
+      return this.packageVersions?.pageInfo ?? {};
+    },
     listTitle() {
       return n__('%d version', '%d versions', this.versions.length);
     },
-    isListEmpty() {
-      return this.versions.length === 0;
+    queryVariables() {
+      return {
+        id: this.packageId,
+        first: GRAPHQL_PAGE_SIZE,
+      };
     },
     tracking() {
       const category = this.itemToBeDeleted
@@ -67,6 +105,9 @@ export default {
         category,
       };
     },
+    versions() {
+      return this.packageVersions?.nodes ?? [];
+    },
   },
   methods: {
     deleteItemConfirmation() {
@@ -101,6 +142,32 @@ export default {
       this.track(REQUEST_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION);
       this.$refs.deletePackagesModal.show();
     },
+    fetchPreviousVersionsPage() {
+      const variables = {
+        ...this.queryVariables,
+        first: null,
+        last: GRAPHQL_PAGE_SIZE,
+        before: this.pageInfo?.startCursor,
+      };
+      this.$apollo.queries.packageVersions.fetchMore({
+        variables,
+      });
+    },
+    fetchNextVersionsPage() {
+      const variables = {
+        ...this.queryVariables,
+        first: GRAPHQL_PAGE_SIZE,
+        last: null,
+        after: this.pageInfo?.endCursor,
+      };
+
+      this.$apollo.queries.packageVersions.fetchMore({
+        variables,
+      });
+    },
+  },
+  i18n: {
+    errorMessage: FETCH_PACKAGE_VERSIONS_ERROR_MESSAGE,
   },
 };
 </script>
@@ -109,6 +176,9 @@ export default {
     <div v-if="isLoading">
       <packages-list-loader />
     </div>
+    <gl-alert v-else-if="fetchPackageVersionsError" variant="danger" :dismissible="false">{{
+      $options.i18n.errorMessage
+    }}</gl-alert>
     <slot v-else-if="isListEmpty" name="empty-state"></slot>
     <div v-else>
       <registry-list
@@ -118,8 +188,8 @@ export default {
         :pagination="pageInfo"
         :title="listTitle"
         @delete="setItemsToBeDeleted"
-        @prev-page="$emit('prev-page')"
-        @next-page="$emit('next-page')"
+        @prev-page="fetchPreviousVersionsPage"
+        @next-page="fetchNextVersionsPage"
       >
         <template #default="{ first, item, isSelected, selectItem }">
           <version-row
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue
index 193a222853f..37a6fe75f15 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/version_row.vue
@@ -130,13 +130,14 @@ export default {
 
     <template v-if="packageEntity.canDestroy" #right-action>
       <gl-dropdown
+        data-testid="delete-dropdown"
         icon="ellipsis_v"
         :text="$options.i18n.moreActions"
         :text-sr-only="true"
         category="tertiary"
         no-caret
       >
-        <gl-dropdown-item variant="danger" @click="$emit('delete')">{{
+        <gl-dropdown-item data-testid="action-delete" variant="danger" @click="$emit('delete')">{{
           $options.i18n.deletePackage
         }}</gl-dropdown-item>
       </gl-dropdown>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
index eda8d9e0066..a65c0e9ab2d 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -115,6 +115,10 @@ export const DELETE_PACKAGE_VERSION_TRACKING_ACTION = 'delete_package_version';
 export const REQUEST_DELETE_PACKAGE_VERSION_TRACKING_ACTION = 'request_delete_package_version';
 export const CANCEL_DELETE_PACKAGE_VERSION_TRACKING_ACTION = 'cancel_delete_package_version';
 
+export const FETCH_PACKAGE_VERSIONS_ERROR_MESSAGE = s__(
+  'PackageRegistry|Failed to load version data',
+);
+
 export const DELETE_PACKAGES_ERROR_MESSAGE = s__(
   'PackageRegistry|Something went wrong while deleting packages.',
 );
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/index.js b/app/assets/javascripts/packages_and_registries/package_registry/graphql/index.js
index 56f95fa2c1f..39e5da54509 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/index.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/index.js
@@ -4,6 +4,27 @@ import createDefaultClient from '~/lib/graphql';
 
 Vue.use(VueApollo);
 
+export const mergeVariables = (existing, incoming) => {
+  if (!incoming) return existing;
+  return incoming;
+};
+
 export const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient(
+    {},
+    {
+      cacheConfig: {
+        typePolicies: {
+          PackageDetailsType: {
+            fields: {
+              versions: {
+                keyArgs: false,
+                merge: mergeVariables,
+              },
+            },
+          },
+        },
+      },
+    },
+  ),
 });
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
index b5313f929f8..99864f7ad0c 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql
@@ -1,10 +1,4 @@
-query getPackageDetails(
-  $id: PackagesPackageID!
-  $first: Int
-  $last: Int
-  $after: String
-  $before: String
-) {
+query getPackageDetails($id: PackagesPackageID!) {
   package(id: $id) {
     id
     name
@@ -62,31 +56,8 @@ query getPackageDetails(
         downloadPath
       }
     }
-    versions(after: $after, before: $before, first: $first, last: $last) {
+    versions {
       count
-      nodes {
-        id
-        name
-        canDestroy
-        createdAt
-        version
-        status
-        _links {
-          webPath
-        }
-        tags(first: 1) {
-          nodes {
-            id
-            name
-          }
-        }
-      }
-      pageInfo {
-        hasNextPage
-        hasPreviousPage
-        endCursor
-        startCursor
-      }
     }
     dependencyLinks {
       nodes {
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql
new file mode 100644
index 00000000000..a4119ac5821
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql
@@ -0,0 +1,38 @@
+query getPackageVersions(
+  $id: PackagesPackageID!
+  $first: Int
+  $last: Int
+  $after: String
+  $before: String
+) {
+  package(id: $id) {
+    id
+    versions(after: $after, before: $before, first: $first, last: $last) {
+      count
+      nodes {
+        id
+        name
+        canDestroy
+        createdAt
+        packageType
+        version
+        status
+        _links {
+          webPath
+        }
+        tags(first: 1) {
+          nodes {
+            id
+            name
+          }
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        endCursor
+        startCursor
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
index 1ce2140894e..0f1c63a04ad 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
@@ -54,6 +54,7 @@ import {
 
 import destroyPackageFilesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_files.mutation.graphql';
 import getPackageDetails from '~/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql';
+import getPackageVersionsQuery from '~/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql';
 import Tracking from '~/tracking';
 
 export default {
@@ -135,7 +136,6 @@ export default {
     queryVariables() {
       return {
         id: convertToGraphQLId(TYPENAME_PACKAGES_PACKAGE, this.packageId),
-        first: GRAPHQL_PAGE_SIZE,
       };
     },
     packageFiles() {
@@ -147,9 +147,6 @@ export default {
     isLoading() {
       return this.$apollo.queries.packageEntity.loading;
     },
-    isVersionsLoading() {
-      return this.isLoading || this.versionsMutationLoading;
-    },
     packageFilesLoading() {
       return this.isLoading || this.mutationLoading;
     },
@@ -161,12 +158,12 @@ export default {
         category: packageTypeToTrackCategory(this.packageType),
       };
     },
-    versionPageInfo() {
-      return this.packageEntity?.versions?.pageInfo ?? {};
-    },
     packageDependencies() {
       return this.packageEntity.dependencyLinks?.nodes || [];
     },
+    packageVersionsCount() {
+      return this.packageEntity.versions?.count ?? 0;
+    },
     showDependencies() {
       return this.packageType === PACKAGE_TYPE_NUGET;
     },
@@ -190,6 +187,17 @@ export default {
         },
       ];
     },
+    refetchVersionsQueryData() {
+      return [
+        {
+          query: getPackageVersionsQuery,
+          variables: {
+            id: this.queryVariables.id,
+            first: GRAPHQL_PAGE_SIZE,
+          },
+        },
+      ];
+    },
   },
   methods: {
     formatSize(size) {
@@ -274,34 +282,6 @@ export default {
     resetDeleteModalContent() {
       this.deletePackageModalContent = DELETE_MODAL_CONTENT;
     },
-    updateQuery(_, { fetchMoreResult }) {
-      return fetchMoreResult;
-    },
-    fetchPreviousVersionsPage() {
-      const variables = {
-        ...this.queryVariables,
-        first: null,
-        last: GRAPHQL_PAGE_SIZE,
-        before: this.versionPageInfo?.startCursor,
-      };
-      this.$apollo.queries.packageEntity.fetchMore({
-        variables,
-        updateQuery: this.updateQuery,
-      });
-    },
-    fetchNextVersionsPage() {
-      const variables = {
-        ...this.queryVariables,
-        first: GRAPHQL_PAGE_SIZE,
-        last: null,
-        after: this.versionPageInfo?.endCursor,
-      };
-
-      this.$apollo.queries.packageEntity.fetchMore({
-        variables,
-        updateQuery: this.updateQuery,
-      });
-    },
   },
   i18n: {
     DELETE_MODAL_TITLE,
@@ -403,12 +383,12 @@ export default {
         <template #title>
           <span>{{ $options.i18n.otherVersionsTabTitle }}</span>
           <gl-badge size="sm" class="gl-tab-counter-badge" data-testid="other-versions-badge">{{
-            packageEntity.versions.count
+            packageVersionsCount
           }}</gl-badge>
         </template>
 
         <delete-packages
-          :refetch-queries="refetchQueriesData"
+          :refetch-queries="refetchVersionsQueryData"
           show-success-alert
           @start="versionsMutationLoading = true"
           @end="versionsMutationLoading = false"
@@ -416,12 +396,10 @@ export default {
           <template #default="{ deletePackages }">
             <package-versions-list
               :can-destroy="packageEntity.canDestroy"
-              :is-loading="isVersionsLoading"
-              :page-info="versionPageInfo"
-              :versions="packageEntity.versions.nodes"
+              :count="packageVersionsCount"
+              :is-mutation-loading="versionsMutationLoading"
+              :package-id="packageEntity.id"
               @delete="deletePackages"
-              @prev-page="fetchPreviousVersionsPage"
-              @next-page="fetchNextVersionsPage"
             >
               <template #empty-state>
                 <p class="gl-mt-3" data-testid="no-versions-message">
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 79d54773436..dd39fb7c666 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -8,6 +8,7 @@ import { BlobViewer, initAuxiliaryViewer } from '~/blob/viewer/index';
 import GpgBadges from '~/gpg_badges';
 import createDefaultClient from '~/lib/graphql';
 import initBlob from '~/pages/projects/init_blob';
+import ForkInfo from '~/repository/components/fork_info.vue';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
@@ -88,6 +89,41 @@ if (viewBlobEl) {
   initBlob();
 }
 
+const initForkInfo = () => {
+  const forkEl = document.getElementById('js-fork-info');
+  if (!forkEl) {
+    return null;
+  }
+  const {
+    projectPath,
+    selectedBranch,
+    sourceName,
+    sourcePath,
+    sourceDefaultBranch,
+    aheadComparePath,
+    behindComparePath,
+  } = forkEl.dataset;
+  return new Vue({
+    el: forkEl,
+    apolloProvider,
+    render(h) {
+      return h(ForkInfo, {
+        props: {
+          projectPath,
+          selectedBranch,
+          sourceName,
+          sourcePath,
+          sourceDefaultBranch,
+          aheadComparePath,
+          behindComparePath,
+        },
+      });
+    },
+  });
+};
+
+initForkInfo();
+
 const CommitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
 const statusLink = document.querySelector('.commit-actions .ci-status-link');
 if (statusLink) {
diff --git a/app/assets/javascripts/repository/components/fork_info.vue b/app/assets/javascripts/repository/components/fork_info.vue
index 1a834ba1d82..d84e197714e 100644
--- a/app/assets/javascripts/repository/components/fork_info.vue
+++ b/app/assets/javascripts/repository/components/fork_info.vue
@@ -4,10 +4,12 @@ import { s__, sprintf, n__ } from '~/locale';
 import { createAlert } from '~/alert';
 import syncForkMutation from '~/repository/mutations/sync_fork.mutation.graphql';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import eventHub from '../event_hub';
 import {
   POLLING_INTERVAL_DEFAULT,
   POLLING_INTERVAL_BACKOFF,
   FIVE_MINUTES_IN_MS,
+  FORK_UPDATED_EVENT,
 } from '../constants';
 import forkDetailsQuery from '../queries/fork_details.query.graphql';
 import ConflictsModal from './fork_sync_conflicts_modal.vue';
@@ -55,7 +57,12 @@ export default {
         });
       },
       result({ loading }) {
-        this.handlePolingInterval(loading);
+        if (!loading && this.isSyncing) {
+          this.increasePollInterval();
+        }
+        if (this.isForkUpdated) {
+          eventHub.$emit(FORK_UPDATED_EVENT);
+        }
       },
       pollInterval() {
         return this.pollInterval;
@@ -126,6 +133,9 @@ export default {
     isSyncing() {
       return this.forkDetails?.isSyncing;
     },
+    isForkUpdated() {
+      return !this.hasConflicts && !this.isSyncing && this.currentPollInterval;
+    },
     ahead() {
       return this.project?.forkDetails?.ahead;
     },
@@ -237,18 +247,11 @@ export default {
         this.startSyncing();
       }
     },
-    handlePolingInterval(loading) {
-      if (!loading && this.isSyncing) {
-        const backoff = POLLING_INTERVAL_BACKOFF;
-        const interval = this.currentPollInterval;
-        const newInterval = Math.min(interval * backoff, FIVE_MINUTES_IN_MS);
-        this.currentPollInterval = this.currentPollInterval
-          ? newInterval
-          : POLLING_INTERVAL_DEFAULT;
-      }
-      if (this.currentPollInterval === FIVE_MINUTES_IN_MS) {
-        this.$apollo.queries.forkDetailsQuery.stopPolling();
-      }
+    increasePollInterval() {
+      const backoff = POLLING_INTERVAL_BACKOFF;
+      const interval = this.currentPollInterval;
+      const newInterval = Math.min(interval * backoff, FIVE_MINUTES_IN_MS);
+      this.currentPollInterval = this.currentPollInterval ? newInterval : POLLING_INTERVAL_DEFAULT;
     },
   },
 };
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 2d2e21dfd92..82dd1fda2a0 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -12,6 +12,8 @@ import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_ima
 import SignatureBadge from '~/commit/components/signature_badge.vue';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
+import eventHub from '../event_hub';
+import { FORK_UPDATED_EVENT } from '../constants';
 
 export default {
   components: {
@@ -97,10 +99,19 @@ export default {
       this.commit = null;
     },
   },
+  mounted() {
+    eventHub.$on(FORK_UPDATED_EVENT, this.refetchLastCommit);
+  },
+  beforeDestroy() {
+    eventHub.$off(FORK_UPDATED_EVENT, this.refetchLastCommit);
+  },
   methods: {
     toggleShowDescription() {
       this.showDescription = !this.showDescription;
     },
+    refetchLastCommit() {
+      this.$apollo.queries.commit.refetch();
+    },
   },
   defaultAvatarUrl,
   safeHtmlConfig: {
diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js
index a6191203b2f..b711f671850 100644
--- a/app/assets/javascripts/repository/constants.js
+++ b/app/assets/javascripts/repository/constants.js
@@ -112,3 +112,5 @@ export const POLLING_INTERVAL_DEFAULT = 2500;
 export const POLLING_INTERVAL_BACKOFF = 2;
 
 export const CONFLICTS_MODAL_ID = 'fork-sync-conflicts-modal';
+
+export const FORK_UPDATED_EVENT = 'fork:updated';
diff --git a/app/assets/javascripts/repository/event_hub.js b/app/assets/javascripts/repository/event_hub.js
new file mode 100644
index 00000000000..e31806ad199
--- /dev/null
+++ b/app/assets/javascripts/repository/event_hub.js
@@ -0,0 +1,3 @@
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 7050587a907..8dc67b97a60 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -70,6 +70,7 @@ export default function setupVueRepositoryList() {
       return null;
     }
     const {
+      selectedBranch,
       sourceName,
       sourcePath,
       sourceDefaultBranch,
@@ -83,7 +84,7 @@ export default function setupVueRepositoryList() {
         return h(ForkInfo, {
           props: {
             projectPath,
-            selectedBranch: ref,
+            selectedBranch,
             sourceName,
             sourcePath,
             sourceDefaultBranch,