Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

7 files changed, 58 insertions, 23 deletions

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 3729bd4c601..280455c3fed 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -6,9 +6,9 @@ import BlobHeader from '~/blob/components/blob_header.vue';
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { isLoggedIn } from '~/lib/utils/common_utils';
+import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import { redirectTo, getLocationHash } from '~/lib/utils/url_utility';
+import { redirectTo } 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';
@@ -183,7 +183,7 @@ export default {
       this.isLoadingLegacyViewer = true;
       axios
         .get(`${this.blobInfo.webPath}?format=json&viewer=${type}`)
-        .then(({ data: { html, binary } }) => {
+        .then(async ({ data: { html, binary } }) => {
           if (type === SIMPLE_BLOB_VIEWER) {
             this.isRenderingLegacyTextViewer = true;
 
@@ -197,20 +197,14 @@ export default {
             this.legacyRichViewer = html;
           }
 
-          this.scrollToHash();
           this.isBinary = binary;
           this.isLoadingLegacyViewer = false;
+
+          await this.$nextTick();
+          handleLocationHash(); // Ensures that we scroll to the hash when async content is loaded
         })
         .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.') });
     },
@@ -233,6 +227,9 @@ export default {
     setForkTarget(target) {
       this.forkTarget = target;
     },
+    onCopy() {
+      navigator.clipboard.writeText(this.blobInfo.rawTextBlob);
+    },
   },
 };
 </script>
@@ -248,7 +245,9 @@ export default {
         :active-viewer-type="viewer.type"
         :has-render-error="hasRenderError"
         :show-path="false"
+        :override-copy="glFeatures.highlightJs"
         @viewer-changed="switchViewer"
+        @copy="onCopy"
       >
         <template #actions>
           <web-ide-link
diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js
index 81d2168e2ce..3e6d2e675ed 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/index.js
+++ b/app/assets/javascripts/repository/components/blob_viewers/index.js
@@ -9,6 +9,7 @@ const viewers = {
   lfs: () => import('./lfs_viewer.vue'),
   audio: () => import('./audio_viewer.vue'),
   svg: () => import('./image_viewer.vue'),
+  sketch: () => import('./sketch_viewer.vue'),
 };
 
 export const loadViewer = (type, isUsingLfs) => {
diff --git a/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue
new file mode 100644
index 00000000000..b48af02e541
--- /dev/null
+++ b/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue
@@ -0,0 +1,31 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import SketchLoader from '~/blob/sketch';
+
+export default {
+  components: {
+    GlLoadingIcon,
+  },
+  props: {
+    blob: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      url: this.blob.rawPath,
+    };
+  },
+  mounted() {
+    // eslint-disable-next-line no-new
+    new SketchLoader(this.$refs.viewer);
+  },
+};
+</script>
+
+<template>
+  <div ref="viewer" class="file-content" :data-endpoint="url" data-testid="sketch">
+    <gl-loading-icon class="my-4 js-loading-icon" size="lg" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 03dd7c6fada..d24d7648f1b 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -114,7 +114,7 @@ export default {
 
 <template>
   <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" />
+    <gl-loading-icon v-if="isLoading" size="lg" color="dark" class="m-auto" />
     <template v-else-if="commit">
       <user-avatar-link
         v-if="commit.author"
diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue
index dc5a031c9f3..4935b8029f9 100644
--- a/app/assets/javascripts/repository/components/preview/index.vue
+++ b/app/assets/javascripts/repository/components/preview/index.vue
@@ -64,7 +64,7 @@ export default {
       </div>
     </div>
     <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about">
-      <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" />
+      <gl-loading-icon v-if="loading > 0" size="lg" color="dark" class="my-4 mx-auto" />
       <div
         v-else-if="readme"
         ref="readme"
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index c2323d6b286..41f7a4b147f 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui';
+import { GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { sprintf, __ } from '~/locale';
 import getRefMixin from '../../mixins/get_ref';
@@ -10,7 +10,7 @@ import TableRow from './row.vue';
 
 export default {
   components: {
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     TableHeader,
     TableRow,
     ParentRow,
@@ -158,11 +158,15 @@ export default {
           </template>
           <template v-if="isLoading">
             <tr v-for="i in 5" :key="i" aria-hidden="true">
-              <td><gl-skeleton-loading :lines="1" class="h-auto" /></td>
+              <td><gl-skeleton-loader :lines="1" /></td>
               <td class="gl-display-none gl-sm-display-block">
-                <gl-skeleton-loading :lines="1" class="h-auto" />
+                <gl-skeleton-loader :lines="1" />
+              </td>
+              <td>
+                <div class="gl-display-flex gl-lg-justify-content-end">
+                  <gl-skeleton-loader :equal-width-lines="true" :lines="1" />
+                </div>
               </td>
-              <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td>
             </tr>
           </template>
           <template v-if="hasMore">
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 7aac35e7613..2b910109f7d 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -2,7 +2,7 @@
 import {
   GlBadge,
   GlLink,
-  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
+  GlSkeletonLoader,
   GlTooltipDirective,
   GlLoadingIcon,
   GlIcon,
@@ -25,7 +25,7 @@ export default {
   components: {
     GlBadge,
     GlLink,
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     GlLoadingIcon,
     GlIcon,
     TimeagoTooltip,
@@ -277,12 +277,12 @@ export default {
         class="str-truncated-100 tree-commit-link"
       />
       <gl-intersection-observer @appear="rowAppeared" @disappear="rowDisappeared">
-        <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="h-auto" />
+        <gl-skeleton-loader v-if="showSkeletonLoader" :lines="1" />
       </gl-intersection-observer>
     </td>
     <td class="tree-time-ago text-right cursor-default">
       <timeago-tooltip v-if="commitData" :time="commitData.committedDate" />
-      <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="ml-auto h-auto w-50" />
+      <gl-skeleton-loader v-if="showSkeletonLoader" :lines="1" />
     </td>
   </tr>
 </template>