Add latest changes from gitlab-org/gitlab@master

14 files changed, 96 insertions, 27 deletions

diff --git a/app/assets/javascripts/repository/commits_service.js b/app/assets/javascripts/repository/commits_service.js
index e26036b5620..1e0de045d39 100644
--- a/app/assets/javascripts/repository/commits_service.js
+++ b/app/assets/javascripts/repository/commits_service.js
@@ -24,7 +24,7 @@ const addRequestedOffset = (offset) => {
 
 const removeLeadingSlash = (path) => path.replace(/^\//, '');
 
-const fetchData = (projectPath, path, ref, offset) => {
+const fetchData = (projectPath, path, ref, offset, refType) => {
   if (fetchedBatches.includes(offset) || offset < 0) {
     return [];
   }
@@ -41,12 +41,12 @@ const fetchData = (projectPath, path, ref, offset) => {
   );
 
   return axios
-    .get(url, { params: { format: 'json', offset } })
+    .get(url, { params: { format: 'json', offset, ref_type: refType } })
     .then(({ data }) => normalizeData(data, path))
     .catch(() => createAlert({ message: I18N_COMMIT_DATA_FETCH_ERROR }));
 };
 
-export const loadCommits = async (projectPath, path, ref, offset) => {
+export const loadCommits = async (projectPath, path, ref, offset, refType) => {
   if (isRequested(offset)) {
     return [];
   }
@@ -54,7 +54,7 @@ export const loadCommits = async (projectPath, path, ref, offset) => {
   // We fetch in batches of 25, so this ensures we don't refetch
   Array.from(Array(COMMIT_BATCH_SIZE)).forEach((_, i) => addRequestedOffset(offset + i));
 
-  const commits = await fetchData(projectPath, path, ref, offset);
+  const commits = await fetchData(projectPath, path, ref, offset, refType);
 
   return commits;
 };
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 969036f84b7..87b3aa91c4a 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -76,12 +76,15 @@ export default {
     project: {
       query: blobInfoQuery,
       variables() {
-        return {
+        const queryVariables = {
           projectPath: this.projectPath,
           filePath: this.path,
           ref: this.originalBranch || this.ref,
           shouldFetchRawText: Boolean(this.glFeatures.highlightJs),
+          refType: this.refType?.toUpperCase() || null,
         };
+
+        return queryVariables;
       },
       result({ data }) {
         const blob = data.project?.repository?.blobs?.nodes[0] || {};
@@ -130,6 +133,11 @@ export default {
       type: String,
       required: true,
     },
+    refType: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -259,8 +267,12 @@ export default {
       const type = this.activeViewerType;
 
       this.isLoadingLegacyViewer = true;
+
+      const newUrl = new URL(this.blobInfo.webPath, window.location.origin);
+      newUrl.searchParams.set('format', 'json');
+      newUrl.searchParams.set('viewer', type);
       axios
-        .get(`${this.blobInfo.webPath}?format=json&viewer=${type}`)
+        .get(newUrl.pathname + newUrl.search)
         .then(async ({ data: { html, binary } }) => {
           this.isRenderingLegacyTextViewer = true;
 
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index d498be0b2bb..5357644cfdf 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDisclosureDropdown, GlModalDirective } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/repository/permissions.query.graphql';
-import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
+import { joinPaths, escapeFileUrl, buildURLwithRefType } from '~/lib/utils/url_utility';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { __ } from '~/locale';
 import getRefMixin from '../mixins/get_ref';
@@ -49,6 +49,11 @@ export default {
       required: false,
       default: '',
     },
+    refType: {
+      type: String,
+      required: false,
+      default: null,
+    },
     canCollaborate: {
       type: Boolean,
       required: false,
@@ -141,14 +146,17 @@ export default {
             return acc.concat({
               name,
               path,
-              to,
+              to: buildURLwithRefType({ path: to, refType: this.refType }),
             });
           },
           [
             {
               name: this.projectShortPath,
               path: '/',
-              to: `/-/tree/${this.escapedRef}/`,
+              to: buildURLwithRefType({
+                path: joinPaths('/-/tree', this.escapedRef),
+                refType: this.refType,
+              }),
             },
           ],
         );
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index bdc9ed210ed..fa51ef30546 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -43,6 +43,7 @@ export default {
         return {
           projectPath: this.projectPath,
           ref: this.ref,
+          refType: this.refType?.toUpperCase(),
           path: this.currentPath.replace(/^\//, ''),
         };
       },
@@ -69,6 +70,11 @@ export default {
       required: false,
       default: '',
     },
+    refType: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/repository/components/table/parent_row.vue b/app/assets/javascripts/repository/components/table/parent_row.vue
index 8a081944600..0bc22253bd2 100644
--- a/app/assets/javascripts/repository/components/table/parent_row.vue
+++ b/app/assets/javascripts/repository/components/table/parent_row.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { joinPaths, buildURLwithRefType } from '~/lib/utils/url_utility';
 
 export default {
   components: {
@@ -8,6 +9,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: ['refType'],
   props: {
     commitRef: {
       type: String,
@@ -31,7 +33,9 @@ export default {
       return splitArray.map((p) => encodeURIComponent(p)).join('/');
     },
     parentRoute() {
-      return { path: `/-/tree/${this.commitRef}/${this.parentPath}` };
+      const path = joinPaths('/-/tree', this.commitRef, this.parentPath);
+
+      return buildURLwithRefType({ path, refType: this.refType });
     },
   },
   methods: {
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 6dd059a349f..c6c14c26fba 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -12,7 +12,7 @@ import {
 import { escapeRegExp } from 'lodash';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
-import { escapeFileUrl } from '~/lib/utils/url_utility';
+import { buildURLwithRefType, joinPaths } from '~/lib/utils/url_utility';
 import { TREE_PAGE_SIZE, ROW_APPEAR_DELAY } from '~/repository/constants';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -37,6 +37,7 @@ export default {
     SafeHtml,
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
+  inject: ['refType'],
   props: {
     commitInfo: {
       type: Object,
@@ -117,14 +118,18 @@ export default {
       return this.commitInfo;
     },
     routerLinkTo() {
-      const blobRouteConfig = { path: `/-/blob/${this.escapedRef}/${escapeFileUrl(this.path)}` };
-      const treeRouteConfig = { path: `/-/tree/${this.escapedRef}/${escapeFileUrl(this.path)}` };
-
       if (this.isBlob) {
-        return blobRouteConfig;
+        return buildURLwithRefType({
+          path: joinPaths('/-/blob', this.escapedRef, this.path),
+          refType: this.refType,
+        });
+      } else if (this.isFolder) {
+        return buildURLwithRefType({
+          path: joinPaths('/-/tree', this.escapedRef, this.path),
+          refType: this.refType,
+        });
       }
-
-      return this.isFolder ? treeRouteConfig : null;
+      return null;
     },
     isBlob() {
       return this.type === 'blob';
@@ -159,6 +164,7 @@ export default {
       this.apolloQuery(paginatedTreeQuery, {
         projectPath: this.projectPath,
         ref: this.ref,
+        refType: this.refType?.toUpperCase() || null,
         path: this.path,
         nextPageCursor: '',
         pageSize: TREE_PAGE_SIZE,
@@ -169,6 +175,7 @@ export default {
         projectPath: this.projectPath,
         filePath: this.path,
         ref: this.ref,
+        refType: this.refType?.toUpperCase() || null,
         shouldFetchRawText: Boolean(this.glFeatures.highlightJs),
       });
     },
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index 0c9b46344c5..dd2cfddc94e 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -27,6 +27,7 @@ export default {
       query: projectPathQuery,
     },
   },
+  inject: ['refType'],
   props: {
     path: {
       type: String,
@@ -99,6 +100,7 @@ export default {
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,
+            refType: this.refType?.toUpperCase(),
             path: originalPath,
             nextPageCursor: this.nextPageCursor,
             pageSize: TREE_PAGE_SIZE,
@@ -171,7 +173,7 @@ export default {
       }
     },
     loadCommitData(rowNumber) {
-      loadCommits(this.projectPath, this.path, this.ref, rowNumber)
+      loadCommits(this.projectPath, this.path, this.ref, rowNumber, this.refType)
         .then(this.setCommitData)
         .catch(() => {});
     },
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index c1e0104c6ac..5c53fc04640 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -121,6 +121,7 @@ export default function setupVueRepositoryList() {
         return h(LastCommit, {
           props: {
             currentPath: this.$route.params.path,
+            refType: this.$route.query.ref_type,
           },
         });
       },
@@ -207,6 +208,7 @@ export default function setupVueRepositoryList() {
         return h(Breadcrumbs, {
           props: {
             currentPath: this.$route.params.path,
+            refType: this.$route.query.ref_type,
             canCollaborate: parseBoolean(canCollaborate),
             canEditTree: parseBoolean(canEditTree),
             canPushCode: parseBoolean(canPushCode),
diff --git a/app/assets/javascripts/repository/mixins/preload.js b/app/assets/javascripts/repository/mixins/preload.js
index 30c36dee48f..473317ecf5d 100644
--- a/app/assets/javascripts/repository/mixins/preload.js
+++ b/app/assets/javascripts/repository/mixins/preload.js
@@ -18,13 +18,13 @@ export default {
   methods: {
     preload(path = '/', next) {
       this.loadingPath = path.replace(/^\//, '');
-
       return this.$apollo
         .query({
           query: paginatedTreeQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,
+            refType: this.refType?.toUpperCase(),
             path: this.loadingPath,
             nextPageCursor: '',
             pageSize: 100,
diff --git a/app/assets/javascripts/repository/pages/blob.vue b/app/assets/javascripts/repository/pages/blob.vue
index c09e2133936..37bb39e1a19 100644
--- a/app/assets/javascripts/repository/pages/blob.vue
+++ b/app/assets/javascripts/repository/pages/blob.vue
@@ -31,11 +31,15 @@ export default {
       type: String,
       required: true,
     },
+    refType: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   limitedContainerElements: document.querySelectorAll(`.${LIMITED_CONTAINER_WIDTH_CLASS}`),
 };
 </script>
-
 <template>
-  <blob-content-viewer :path="path" :project-path="projectPath" />
+  <blob-content-viewer :path="path" :project-path="projectPath" :ref-type="refType" />
 </template>
diff --git a/app/assets/javascripts/repository/pages/index.vue b/app/assets/javascripts/repository/pages/index.vue
index 0e53235779c..7b3cbdf2148 100644
--- a/app/assets/javascripts/repository/pages/index.vue
+++ b/app/assets/javascripts/repository/pages/index.vue
@@ -6,6 +6,13 @@ export default {
   components: {
     TreePage,
   },
+  props: {
+    refType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
   mounted() {
     this.updateProjectElements(true);
   },
@@ -21,5 +28,5 @@ export default {
 </script>
 
 <template>
-  <tree-page path="/" />
+  <tree-page path="/" :ref-type="refType" />
 </template>
diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue
index 6bf674eb3f1..674d7bad4e4 100644
--- a/app/assets/javascripts/repository/pages/tree.vue
+++ b/app/assets/javascripts/repository/pages/tree.vue
@@ -8,12 +8,22 @@ export default {
     TreeContent,
   },
   mixins: [preloadMixin],
+  provide() {
+    return {
+      refType: this.refType,
+    };
+  },
   props: {
     path: {
       type: String,
       required: false,
       default: '/',
     },
+    refType: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     isRoot() {
diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
index 0a675e14eb5..5f73912ed2b 100644
--- a/app/assets/javascripts/repository/router.js
+++ b/app/assets/javascripts/repository/router.js
@@ -13,15 +13,19 @@ export default function createRouter(base, baseRef) {
     component: TreePage,
     props: (route) => ({
       path: route.params.path?.replace(/^\//, '') || '/',
+      refType: route.query.ref_type || null,
     }),
   };
 
   const blobPathRoute = {
     component: BlobPage,
-    props: (route) => ({
-      path: route.params.path,
-      projectPath: base,
-    }),
+    props: (route) => {
+      return {
+        path: route.params.path,
+        projectPath: base,
+        refType: route.query.ref_type || null,
+      };
+    },
   };
 
   const router = new VueRouter({
@@ -56,6 +60,9 @@ export default function createRouter(base, baseRef) {
         path: '/',
         name: 'projectRoot',
         component: IndexPage,
+        props: {
+          refType: 'HEADS',
+        },
       },
     ],
   });
diff --git a/app/assets/javascripts/repository/utils/ref_switcher_utils.js b/app/assets/javascripts/repository/utils/ref_switcher_utils.js
index bcad4a2c822..f3d21971771 100644
--- a/app/assets/javascripts/repository/utils/ref_switcher_utils.js
+++ b/app/assets/javascripts/repository/utils/ref_switcher_utils.js
@@ -28,7 +28,7 @@ export function generateRefDestinationPath(projectRootPath, ref, selectedRef) {
     [, refType, actualRef] = matches;
   }
   if (refType) {
-    url.searchParams.set('ref_type', refType);
+    url.searchParams.set('ref_type', refType.toLowerCase());
   } else {
     url.searchParams.delete('ref_type');
   }