Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/blob/components/blob_content.vue

+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
+import BlobContentError from './blob_content_error.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    BlobContentError,
+  },
+  props: {
+    content: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    loading: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    activeViewer: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    viewer() {
+      switch (this.activeViewer.type) {
+        case 'rich':
+          return RichViewer;
+        default:
+          return SimpleViewer;
+      }
+    },
+    viewerError() {
+      return this.activeViewer.renderError;
+    },
+  },
+};
+</script>
+<template>
+  <div class="blob-viewer" :data-type="activeViewer.type">
+    <gl-loading-icon v-if="loading" size="md" color="dark" class="my-4 mx-auto" />
+
+    <template v-else>
+      <blob-content-error v-if="viewerError" :viewer-error="viewerError" />
+      <component :is="viewer" v-else ref="contentViewer" :content="content" />
+    </template>
+  </div>
+</template>

app/assets/javascripts/blob/components/blob_content_error.vue

+<script>
+export default {
+  props: {
+    viewerError: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="file-content code">
+    <div class="text-center py-4" v-html="viewerError"></div>
+  </div>
+</template>

app/assets/javascripts/blob/components/blob_header_default_actions.vue

@@ -36,11 +36,6 @@ export default {
       return this.activeViewer === RICH_BLOB_VIEWER;
     },
   },
-  methods: {
-    requestCopyContents() {
-      this.$emit('copy');
-    },
-  },
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
   BTN_RAW_TITLE,
@@ -53,7 +48,7 @@ export default {
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
       :disabled="copyDisabled"
-      @click="requestCopyContents"
+      data-clipboard-target="#blob-code-content"
     >
       <gl-icon name="copy-to-clipboard" :size="14" />
     </gl-button>

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

 import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
-import { GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import filterMixins from 'ee_else_ce/analytics/cycle_analytics/mixins/filter_mixins';
 import Flash from '../flash';
 import { __ } from '~/locale';
@@ -28,6 +28,7 @@ export default () => {
     name: 'CycleAnalytics',
     components: {
       GlEmptyState,
+      GlLoadingIcon,
       banner,
       'stage-issue-component': stageComponent,
       'stage-plan-component': stageComponent,

app/assets/javascripts/graphql_shared/fragments/blobviewer.fragment.graphql

 fragment BlobViewer on SnippetBlobViewer {
   collapsed
-  loadingPartialName
   renderError
   tooLarge
+  type
+  fileType
 }

app/assets/javascripts/snippets/components/snippet_blob_view.vue

@@ -2,13 +2,19 @@
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import { SNIPPET_VISIBILITY_PUBLIC } from '../constants';
 import BlobHeader from '~/blob/components/blob_header.vue';
-import GetSnippetBlobQuery from '../queries/snippet.blob.query.graphql';
+import BlobContent from '~/blob/components/blob_content.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
+import GetSnippetBlobQuery from '../queries/snippet.blob.query.graphql';
+import GetBlobContent from '../queries/snippet.blob.content.query.graphql';
+
+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
+
 export default {
   components: {
     BlobEmbeddable,
     BlobHeader,
+    BlobContent,
     GlLoadingIcon,
   },
   apollo: {
@@ -20,6 +26,23 @@ export default {
         };
       },
       update: data => data.snippets.edges[0].node.blob,
+      result(res) {
+        const viewer = res.data.snippets.edges[0].node.blob.richViewer
+          ? RICH_BLOB_VIEWER
+          : SIMPLE_BLOB_VIEWER;
+        this.switchViewer(viewer, true);
+      },
+    },
+    blobContent: {
+      query: GetBlobContent,
+      variables() {
+        return {
+          ids: this.snippet.id,
+          rich: this.activeViewerType === RICH_BLOB_VIEWER,
+        };
+      },
+      update: data =>
+        data.snippets.edges[0].node.blob.richData || data.snippets.edges[0].node.blob.plainData,
     },
   },
   props: {
@@ -31,6 +54,8 @@ export default {
   data() {
     return {
       blob: {},
+      blobContent: '',
+      activeViewerType: window.location.hash ? SIMPLE_BLOB_VIEWER : '',
     };
   },
   computed: {
@@ -40,6 +65,18 @@ export default {
     isBlobLoading() {
       return this.$apollo.queries.blob.loading;
     },
+    isContentLoading() {
+      return this.$apollo.queries.blobContent.loading;
+    },
+    viewer() {
+      const { richViewer, simpleViewer } = this.blob;
+      return this.activeViewerType === RICH_BLOB_VIEWER ? richViewer : simpleViewer;
+    },
+  },
+  methods: {
+    switchViewer(newViewer, respectHash = false) {
+      this.activeViewerType = respectHash && window.location.hash ? SIMPLE_BLOB_VIEWER : newViewer;
+    },
   },
 };
 </script>
@@ -49,11 +86,12 @@ export default {
     <gl-loading-icon
       v-if="isBlobLoading"
       :label="__('Loading blob')"
-      :size="2"
+      size="lg"
       class="prepend-top-20 append-bottom-20"
     />
     <article v-else class="file-holder snippet-file-content">
-      <blob-header :blob="blob" />
+      <blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer" />
+      <blob-content :loading="isContentLoading" :content="blobContent" :active-viewer="viewer" />
     </article>
   </div>
 </template>

app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql

+query SnippetBlobContent($ids: [ID!], $rich: Boolean!) {
+  snippets(ids: $ids) {
+    edges {
+      node {
+        id
+        blob {
+          richData @include(if: $rich)
+          plainData @skip(if: $rich)
+        }
+      }
+    }
+  }
+}

app/assets/javascripts/vue_shared/components/blob_viewers/constants.js

+export const HIGHLIGHT_CLASS_NAME = 'hll';
+
+export default {};

app/assets/javascripts/vue_shared/components/blob_viewers/index.js

+import RichViewer from './rich_viewer.vue';
+import SimpleViewer from './simple_viewer.vue';
+
+export { RichViewer, SimpleViewer };

app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js

+export default {
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+};

app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue

+<script>
+import ViewerMixin from './mixins';
+
+export default {
+  mixins: [ViewerMixin],
+};
+</script>
+<template>
+  <div v-html="content"></div>
+</template>

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

+<script>
+import ViewerMixin from './mixins';
+import { GlIcon } from '@gitlab/ui';
+import { HIGHLIGHT_CLASS_NAME } from './constants';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  mixins: [ViewerMixin],
+  data() {
+    return {
+      highlightedLine: null,
+    };
+  },
+  computed: {
+    lineNumbers() {
+      return this.content.split('\n').length;
+    },
+  },
+  mounted() {
+    const { hash } = window.location;
+    if (hash) this.scrollToLine(hash, true);
+  },
+  methods: {
+    scrollToLine(hash, scroll = false) {
+      const lineToHighlight = hash && this.$el.querySelector(hash);
+      const currentlyHighlighted = this.highlightedLine;
+      if (lineToHighlight) {
+        if (currentlyHighlighted) {
+          currentlyHighlighted.classList.remove(HIGHLIGHT_CLASS_NAME);
+        }
+
+        lineToHighlight.classList.add(HIGHLIGHT_CLASS_NAME);
+        this.highlightedLine = lineToHighlight;
+        if (scroll) {
+          lineToHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }
+    },
+  },
+  userColorScheme: window.gon.user_color_scheme,
+};
+</script>
+<template>
+  <div
+    class="file-content code js-syntax-highlight qa-file-content"
+    :class="$options.userColorScheme"
+  >
+    <div class="line-numbers">
+      <a
+        v-for="line in lineNumbers"
+        :id="`L${line}`"
+        :key="line"
+        class="diff-line-num js-line-number"
+        :href="`#LC${line}`"
+        :data-line-number="line"
+        @click="scrollToLine(`#LC${line}`)"
+      >
+        <gl-icon :size="12" name="link" />
+        {{ line }}
+      </a>
+    </div>
+    <div class="blob-content">
+      <pre class="code highlight"><code id="blob-code-content" v-html="content"></code></pre>
+    </div>
+  </div>
+</template>

app/assets/stylesheets/framework/highlight.scss

@@ -30,7 +30,6 @@
       .line {
         display: block;
         width: 100%;
-        min-height: 1.5em;
         padding-left: 10px;
         padding-right: 10px;
         white-space: pre;
@@ -48,10 +47,10 @@
       font-family: $monospace-font;
       display: block;
       font-size: $code-font-size !important;
-      min-height: 1.5em;
       white-space: nowrap;
-      i {
+      i,
+      svg {
         float: left;
         margin-top: 3px;
         margin-right: 5px;
@@ -62,12 +61,20 @@
       &:focus {
         outline: none;
-        i {
+        i,
+        svg {
           visibility: visible;
         }
       }
     }
   }
+
+  pre .line,
+  .line-numbers a {
+    font-size: 0.8125rem;
+    line-height: 1.1875rem;
+    min-height: 1.1875rem;
+  }
 }
 // Vertically aligns <table> line numbers (eg. blame view)

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -109,14 +109,6 @@
     top: $gl-padding-top;
   }
-  .fa-spinner {
-    font-size: 28px;
-    position: relative;
-    margin-left: -20px;
-    left: 50%;
-    margin-top: 36px;
-  }
-
   .stage-panel-body {
     display: flex;
     flex-wrap: wrap;

app/controllers/concerns/metrics_dashboard.rb

@@ -5,6 +5,7 @@
 module MetricsDashboard
   include RenderServiceResults
   include ChecksCollaboration
+  include EnvironmentsHelper
   extend ActiveSupport::Concern
@@ -15,8 +16,9 @@ module MetricsDashboard
       metrics_dashboard_params.to_h.symbolize_keys
     )
-    if include_all_dashboards? && result
-      result[:all_dashboards] = all_dashboards
+    if result
+      result[:all_dashboards] = all_dashboards if include_all_dashboards?
+      result[:metrics_data] = metrics_data(project_for_dashboard, environment_for_dashboard) if project_for_dashboard && environment_for_dashboard
     end
     respond_to do |format|
@@ -76,10 +78,14 @@ module MetricsDashboard
     defined?(project) ? project : nil
   end
+  def environment_for_dashboard
+    defined?(environment) ? environment : nil
+  end
+
   def dashboard_success_response(result)
     {
       status: :ok,
-      json: result.slice(:all_dashboards, :dashboard, :status)
+      json: result.slice(:all_dashboards, :dashboard, :status, :metrics_data)
     }
   end

app/helpers/environments_helper.rb

 # frozen_string_literal: true
 module EnvironmentsHelper
+  include ActionView::Helpers::AssetUrlHelper
   prepend_if_ee('::EE::EnvironmentsHelper') # rubocop: disable Cop/InjectEnterpriseEditionModule
   def environments_list_data
@@ -21,7 +22,7 @@ module EnvironmentsHelper
     {
       "settings-path" => edit_project_service_path(project, 'prometheus'),
       "clusters-path" => project_clusters_path(project),
-      "current-environment-name": environment.name,
+      "current-environment-name" => environment.name,
       "documentation-path" => help_page_path('administration/monitoring/prometheus/index.md'),
       "empty-getting-started-svg-path" => image_path('illustrations/monitoring/getting_started.svg'),
       "empty-loading-svg-path" => image_path('illustrations/monitoring/loading.svg'),

app/views/projects/cycle_analytics/show.html.haml

@@ -5,7 +5,7 @@
     %banner{ "v-if" => "!isOverviewDialogDismissed",
       "documentation-link": help_page_path('user/analytics/value_stream_analytics.md'),
       "v-on:dismiss-overview-dialog" => "dismissOverviewDialog()" }
-  = icon("spinner spin", "v-show" => "isLoading")
+  %gl-loading-icon{ "v-show" => "isLoading", "size" => "lg" }
   .wrapper{ "v-show" => "!isLoading && !hasError" }
     .card
       .card-header
@@ -57,8 +57,7 @@
             %ul
               %stage-nav-item{ "v-for" => "stage in state.stages", ":key" => '`ca-stage-title-${stage.title}`', '@select' => 'selectStage(stage)', ":title" => "stage.title", ":is-user-allowed" => "stage.isUserAllowed", ":value" => "stage.value", ":is-active" => "stage.active" }
           .section.stage-events
-            %template{ "v-if" => "isLoadingStage" }
-              = icon("spinner spin")
+            %gl-loading-icon{ "v-show" => "isLoadingStage", "size" => "lg" }
             %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
               = render partial: "no_access"
             %template{ "v-else" => true }

app/views/projects/snippets/show.html.haml

@@ -12,7 +12,7 @@
     %article.file-holder.snippet-file-content
       = render 'shared/snippets/blob'
-    .row-content-block.top-block.content-component-block
-      = render 'award_emoji/awards_block', awardable: @snippet, inline: true
-    #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
+.row-content-block.top-block.content-component-block
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+#notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true

app/views/snippets/show.html.haml

@@ -13,7 +13,7 @@
     %article.file-holder.snippet-file-content
       = render 'shared/snippets/blob'
-    .row-content-block.top-block.content-component-block
-      = render 'award_emoji/awards_block', awardable: @snippet, inline: true
-    #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => false
+.row-content-block.top-block.content-component-block
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+#notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => false

changelogs/unreleased/196184-convert-insights-to-echarts.yml

+---
+title: Move insights charts to echarts
+merge_request: 24661
+author:
+type: other