Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

5 files changed, 63 insertions, 19 deletions

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index c9e4aab1db1..3729bd4c601 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -8,7 +8,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import { redirectTo } from '~/lib/utils/url_utility';
+import { redirectTo, getLocationHash } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
@@ -17,15 +17,12 @@ import getRefMixin from '../mixins/get_ref';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
 import userInfoQuery from '../queries/user_info.query.graphql';
 import applicationInfoQuery from '../queries/application_info.query.graphql';
-import { DEFAULT_BLOB_INFO, TEXT_FILE_TYPE, LFS_STORAGE } from '../constants';
+import { DEFAULT_BLOB_INFO, TEXT_FILE_TYPE, LFS_STORAGE, LEGACY_FILE_TYPES } from '../constants';
 import BlobButtonGroup from './blob_button_group.vue';
 import ForkSuggestion from './fork_suggestion.vue';
 import { loadViewer } from './blob_viewers';
 
 export default {
-  i18n: {
-    pipelineEditor: __('Pipeline Editor'),
-  },
   components: {
     BlobHeader,
     BlobButtonGroup,
@@ -132,7 +129,8 @@ export default {
       return this.shouldLoadLegacyViewer ? null : loadViewer(fileType, this.isUsingLfs);
     },
     shouldLoadLegacyViewer() {
-      return this.viewer.fileType === TEXT_FILE_TYPE && !this.glFeatures.highlightJs;
+      const isTextFile = this.viewer.fileType === TEXT_FILE_TYPE && !this.glFeatures.highlightJs;
+      return isTextFile || LEGACY_FILE_TYPES.includes(this.blobInfo.fileType);
     },
     legacyViewerLoaded() {
       return (
@@ -199,11 +197,20 @@ export default {
             this.legacyRichViewer = html;
           }
 
+          this.scrollToHash();
           this.isBinary = binary;
           this.isLoadingLegacyViewer = false;
         })
         .catch(() => this.displayError());
     },
+    scrollToHash() {
+      const hash = getLocationHash();
+      if (hash) {
+        // Ensures the browser's native scroll to hash is triggered for async content
+        window.location.hash = '';
+        window.location.hash = hash;
+      }
+    },
     displayError() {
       createFlash({ message: __('An error occurred while loading the file. Please try again.') });
     },
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index 84c9f9d0bbe..20888db80a9 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -269,6 +269,9 @@ export default {
     renderAddToTreeDropdown() {
       return !this.isBlobPath && (this.canCollaborate || this.canCreateMrFromFork);
     },
+    newDirectoryPath() {
+      return joinPaths(this.newDirPath, this.currentPath);
+    },
   },
   methods: {
     isLast(i) {
@@ -332,7 +335,7 @@ export default {
       :commit-message="__('Add new directory')"
       :target-branch="selectedBranch"
       :original-branch="originalBranch"
-      :path="newDirPath"
+      :path="newDirectoryPath"
     />
   </nav>
 </template>
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 2810db33e64..03dd7c6fada 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -14,6 +14,7 @@ import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
 
@@ -27,6 +28,7 @@ export default {
     GlButtonGroup,
     GlLink,
     GlLoadingIcon,
+    UserAvatarImage,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -111,24 +113,24 @@ export default {
 </script>
 
 <template>
-  <div class="well-segment commit gl-p-5 gl-w-full">
+  <div class="well-segment commit gl-p-5 gl-w-full gl-display-flex">
     <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" />
     <template v-else-if="commit">
       <user-avatar-link
         v-if="commit.author"
         :link-href="commit.author.webPath"
         :img-src="commit.author.avatarUrl"
-        :img-size="40"
-        class="avatar-cell"
+        :img-size="32"
+        :img-css-classes="'gl-mr-0!' /* NOTE: this is needed only while we migrate user-avatar-image to GlAvatar (7731 epics) */"
+        class="gl-my-2 gl-mr-4"
+      />
+      <user-avatar-image
+        v-else
+        class="gl-my-2 gl-mr-4"
+        :img-src="commit.authorGravatar || $options.defaultAvatarUrl"
+        :css-classes="'gl-mr-0!' /* NOTE: this is needed only while we migrate user-avatar-image to GlAvatar (7731 epics) */"
+        :size="32"
       />
-      <span v-else class="avatar-cell user-avatar-link">
-        <img
-          :src="commit.authorGravatar || $options.defaultAvatarUrl"
-          width="40"
-          height="40"
-          class="avatar s40"
-        />
-      </span>
       <div class="commit-detail flex-list">
         <div class="commit-content qa-commit-content">
           <gl-link
@@ -168,7 +170,10 @@ export default {
             class="commit-row-description gl-mb-3"
           ></pre>
         </div>
-        <div class="commit-actions flex-row">
+        <div class="gl-flex-grow-1"></div>
+        <div
+          class="commit-actions gl-display-flex gl-flex-align gl-align-items-center gl-flex-direction-row"
+        >
           <div
             v-if="commit.signatureHtml"
             v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */"
diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js
index bb9d3180be8..2cafeed2ef4 100644
--- a/app/assets/javascripts/repository/constants.js
+++ b/app/assets/javascripts/repository/constants.js
@@ -86,3 +86,24 @@ export const DEFAULT_BLOB_INFO = {
 export const TEXT_FILE_TYPE = 'text';
 
 export const LFS_STORAGE = 'lfs';
+
+/**
+ * We have some features (like linking to external dependencies) that our frontend highlighter
+ * do not yet support.
+ * These are file types that we want the legacy (backend) syntax highlighter to highlight.
+ */
+export const LEGACY_FILE_TYPES = [
+  'package_json',
+  'gemfile',
+  'gemspec',
+  'composer_json',
+  'podfile',
+  'podspec',
+  'podspec_json',
+  'cartfile',
+  'godeps_json',
+  'requirements_txt',
+  'cargo_toml',
+  'go_mod',
+  'go_sum',
+];
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index b38a1cfdc7b..8f8735a6371 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -151,12 +151,20 @@ export default function setupVueRepositoryList() {
 
   const treeHistoryLinkEl = document.getElementById('js-tree-history-link');
   const { historyLink } = treeHistoryLinkEl.dataset;
+  let { isProjectOverview } = treeHistoryLinkEl.dataset;
+
+  const isProjectOverviewAfterEach = router.afterEach(() => {
+    isProjectOverview = false;
+    isProjectOverviewAfterEach();
+  });
 
   // eslint-disable-next-line no-new
   new Vue({
     el: treeHistoryLinkEl,
     router,
     render(h) {
+      if (parseBoolean(isProjectOverview) && !this.$route.params.path) return null;
+
       return h(
         GlButton,
         {