app/assets/javascripts/behaviors/copy_code.js

@@ -30,6 +30,7 @@ class CopyCodeButton extends HTMLElement {
 
 function addCodeButton() {
   [...document.querySelectorAll('pre.code.js-syntax-highlight')]
+    .filter((el) => el.attr('lang') !== 'mermaid')
     .filter((el) => !el.closest('.js-markdown-code'))
     .forEach((el) => {
       const copyCodeEl = document.createElement('copy-code');

app/assets/javascripts/behaviors/markdown/render_gfm.js

@@ -4,6 +4,7 @@ import initUserPopovers from '../../user_popovers';
 import highlightCurrentUser from './highlight_current_user';
 import renderMath from './render_math';
 import renderMermaid from './render_mermaid';
+import renderSandboxedMermaid from './render_sandboxed_mermaid';
 import renderMetrics from './render_metrics';
 
 // Render GitLab flavoured Markdown
@@ -13,7 +14,11 @@ import renderMetrics from './render_metrics';
 $.fn.renderGFM = function renderGFM() {
   syntaxHighlight(this.find('.js-syntax-highlight').get());
   renderMath(this.find('.js-render-math'));
-  renderMermaid(this.find('.js-render-mermaid'));
+  if (gon.features?.sandboxedMermaid) {
+    renderSandboxedMermaid(this.find('.js-render-mermaid'));
+  } else {
+    renderMermaid(this.find('.js-render-mermaid'));
+  }
   highlightCurrentUser(this.find('.gfm-project_member').get());
   initUserPopovers(this.find('.js-user-link').get());
 

app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js

+import $ from 'jquery';
+import { once, countBy } from 'lodash';
+import { __ } from '~/locale';
+import {
+  getBaseURL,
+  relativePathToAbsolute,
+  setUrlParams,
+  joinPaths,
+} from '~/lib/utils/url_utility';
+import { darkModeEnabled } from '~/lib/utils/color_utils';
+import { setAttributes } from '~/lib/utils/dom_utils';
+
+// Renders diagrams and flowcharts from text using Mermaid in any element with the
+// `js-render-mermaid` class.
+//
+// Example markup:
+//
+// <pre class="js-render-mermaid">
+//  graph TD;
+//    A-- > B;
+//    A-- > C;
+//    B-- > D;
+//    C-- > D;
+// </pre>
+//
+
+const SANDBOX_FRAME_PATH = '/-/sandbox/mermaid';
+// This is an arbitrary number; Can be iterated upon when suitable.
+const MAX_CHAR_LIMIT = 2000;
+// Max # of mermaid blocks that can be rendered in a page.
+const MAX_MERMAID_BLOCK_LIMIT = 50;
+// Max # of `&` allowed in Chaining of links syntax
+const MAX_CHAINING_OF_LINKS_LIMIT = 30;
+// Keep a map of mermaid blocks we've already rendered.
+const elsProcessingMap = new WeakMap();
+let renderedMermaidBlocks = 0;
+
+// Pages without any restrictions on mermaid rendering
+const PAGES_WITHOUT_RESTRICTIONS = [
+  // Group wiki
+  'groups:wikis:show',
+  'groups:wikis:edit',
+  'groups:wikis:create',
+
+  // Project wiki
+  'projects:wikis:show',
+  'projects:wikis:edit',
+  'projects:wikis:create',
+
+  // Project files
+  'projects:show',
+  'projects:blob:show',
+];
+
+function shouldLazyLoadMermaidBlock(source) {
+  /**
+   * If source contains `&`, which means that it might
+   * contain Chaining of links a new syntax in Mermaid.
+   */
+  if (countBy(source)['&'] > MAX_CHAINING_OF_LINKS_LIMIT) {
+    return true;
+  }
+
+  return false;
+}
+
+function fixElementSource(el) {
+  // Mermaid doesn't like `<br />` tags, so collapse all like tags into `<br>`, which is parsed correctly.
+  const source = el.textContent?.replace(/<br\s*\/>/g, '<br>');
+
+  // Remove any extra spans added by the backend syntax highlighting.
+  Object.assign(el, { textContent: source });
+
+  return { source };
+}
+
+function getSandboxFrameSrc() {
+  const path = joinPaths(gon.relative_url_root || '', SANDBOX_FRAME_PATH);
+  if (!darkModeEnabled()) {
+    return path;
+  }
+  const absoluteUrl = relativePathToAbsolute(path, getBaseURL());
+  return setUrlParams({ darkMode: darkModeEnabled() }, absoluteUrl);
+}
+
+function renderMermaidEl(el, source) {
+  const iframeEl = document.createElement('iframe');
+  setAttributes(iframeEl, {
+    src: getSandboxFrameSrc(),
+    sandbox: 'allow-scripts',
+    frameBorder: 0,
+    scrolling: 'no',
+  });
+
+  // Add the original source into the DOM
+  // to allow Copy-as-GFM to access it.
+  const sourceEl = document.createElement('text');
+  sourceEl.textContent = source;
+  sourceEl.classList.add('gl-display-none');
+
+  const wrapper = document.createElement('div');
+  wrapper.appendChild(iframeEl);
+  wrapper.appendChild(sourceEl);
+
+  el.closest('pre').replaceWith(wrapper);
+
+  // Event Listeners
+  iframeEl.addEventListener('load', () => {
+    // Potential risk associated with '*' discussed in below thread
+    // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74414#note_735183398
+    iframeEl.contentWindow.postMessage(source, '*');
+  });
+
+  window.addEventListener(
+    'message',
+    (event) => {
+      if (event.origin !== 'null' || event.source !== iframeEl.contentWindow) {
+        return;
+      }
+      const { h, w } = event.data;
+      iframeEl.width = w;
+      iframeEl.height = h;
+    },
+    false,
+  );
+}
+
+function renderMermaids($els) {
+  if (!$els.length) return;
+
+  const pageName = document.querySelector('body').dataset.page;
+
+  // A diagram may have been truncated in search results which will cause errors, so abort the render.
+  if (pageName === 'search:show') return;
+
+  let renderedChars = 0;
+
+  $els.each((i, el) => {
+    // Skipping all the elements which we've already queued in requestIdleCallback
+    if (elsProcessingMap.has(el)) {
+      return;
+    }
+
+    const { source } = fixElementSource(el);
+    /**
+     * Restrict the rendering to a certain amount of character
+     * and mermaid blocks to prevent mermaidjs from hanging
+     * up the entire thread and causing a DoS.
+     */
+    if (
+      !PAGES_WITHOUT_RESTRICTIONS.includes(pageName) &&
+      ((source && source.length > MAX_CHAR_LIMIT) ||
+        renderedChars > MAX_CHAR_LIMIT ||
+        renderedMermaidBlocks >= MAX_MERMAID_BLOCK_LIMIT ||
+        shouldLazyLoadMermaidBlock(source))
+    ) {
+      const html = `
+          <div class="alert gl-alert gl-alert-warning alert-dismissible lazy-render-mermaid-container js-lazy-render-mermaid-container fade show" role="alert">
+            <div>
+              <div>
+                <div class="js-warning-text"></div>
+                <div class="gl-alert-actions">
+                  <button type="button" class="js-lazy-render-mermaid btn gl-alert-action btn-warning btn-md gl-button">Display</button>
+                </div>
+              </div>
+              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          </div>
+          `;
+
+      const $parent = $(el).parent();
+
+      if (!$parent.hasClass('lazy-alert-shown')) {
+        $parent.after(html);
+        $parent
+          .siblings()
+          .find('.js-warning-text')
+          .text(
+            __('Warning: Displaying this diagram might cause performance issues on this page.'),
+          );
+        $parent.addClass('lazy-alert-shown');
+      }
+
+      return;
+    }
+
+    renderedChars += source.length;
+    renderedMermaidBlocks += 1;
+
+    const requestId = window.requestIdleCallback(() => {
+      renderMermaidEl(el, source);
+    });
+
+    elsProcessingMap.set(el, requestId);
+  });
+}
+
+const hookLazyRenderMermaidEvent = once(() => {
+  $(document.body).on('click', '.js-lazy-render-mermaid', function eventHandler() {
+    const parent = $(this).closest('.js-lazy-render-mermaid-container');
+    const pre = parent.prev();
+
+    const el = pre.find('.js-render-mermaid');
+
+    parent.remove();
+
+    // sandbox update
+    const element = el.get(0);
+    const { source } = fixElementSource(element);
+
+    renderMermaidEl(element, source);
+  });
+});
+
+export default function renderMermaid($els) {
+  if (!$els.length) return;
+
+  const visibleMermaids = $els.filter(function filter() {
+    return $(this).closest('details').length === 0 && $(this).is(':visible');
+  });
+
+  renderMermaids(visibleMermaids);
+
+  $els.closest('details').one('toggle', function toggle() {
+    if (this.open) {
+      renderMermaids($(this).find('.js-render-mermaid'));
+    }
+  });
+
+  hookLazyRenderMermaidEvent();
+}

app/assets/javascripts/lib/mermaid.js

+import mermaid from 'mermaid';
+import { getParameterByName } from '~/lib/utils/url_utility';
+
+const setIframeRenderedSize = (h, w) => {
+  const { origin } = window.location;
+  window.parent.postMessage({ h, w }, origin);
+};
+
+const drawDiagram = (source) => {
+  const element = document.getElementById('app');
+  const insertSvg = (svgCode) => {
+    element.innerHTML = svgCode;
+
+    const height = parseInt(element.firstElementChild.getAttribute('height'), 10);
+    const width = parseInt(element.firstElementChild.style.maxWidth, 10);
+    setIframeRenderedSize(height, width);
+  };
+  mermaid.mermaidAPI.render('mermaid', source, insertSvg);
+};
+
+const darkModeEnabled = () => getParameterByName('darkMode') === 'true';
+
+const initMermaid = () => {
+  let theme = 'neutral';
+
+  if (darkModeEnabled()) {
+    theme = 'dark';
+  }
+
+  mermaid.initialize({
+    // mermaid core options
+    mermaid: {
+      startOnLoad: false,
+    },
+    // mermaidAPI options
+    theme,
+    flowchart: {
+      useMaxWidth: true,
+      htmlLabels: true,
+    },
+    secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'htmlLabels'],
+    securityLevel: 'strict',
+  });
+};
+
+const addListener = () => {
+  window.addEventListener(
+    'message',
+    (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+      drawDiagram(event.data);
+    },
+    false,
+  );
+};
+
+addListener();
+initMermaid();
+export default {};

app/assets/javascripts/pipelines/components/header_component.vue

@@ -212,7 +212,9 @@ export default {
 </script>
 <template>
   <div class="js-pipeline-header-container">
-    <gl-alert v-if="hasError" :variant="failure.variant">{{ failure.text }}</gl-alert>
+    <gl-alert v-if="hasError" :variant="failure.variant" :dismissible="false">{{
+      failure.text
+    }}</gl-alert>
     <ci-header
       v-if="shouldRenderContent"
       :status="pipeline.detailedStatus"

app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue

 <script>
-import { GlIcon, GlPopover, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlLink, GlPopover, GlTooltipDirective } from '@gitlab/ui';
 import { __, n__, sprintf } from '~/locale';
 import createFlash from '~/flash';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
@@ -10,6 +10,7 @@ import issueCrmContactsSubscription from './queries/issue_crm_contacts.subscript
 export default {
   components: {
     GlIcon,
+    GlLink,
     GlPopover,
   },
   directives: {
@@ -85,9 +86,6 @@ export default {
       );
     },
   },
-  i18n: {
-    help: __('Work in progress- click here to find out more'),
-  },
 };
 </script>
 
@@ -97,11 +95,10 @@ export default {
       <gl-icon name="users" />
       <span> {{ contactCount }} </span>
     </div>
-    <div
-      v-gl-tooltip.left.viewport="$options.i18n.help"
-      class="hide-collapsed help-button float-right"
-    >
-      <a href="https://gitlab.com/gitlab-org/gitlab/-/issues/2256"><gl-icon name="question-o" /></a>
+    <div class="hide-collapsed help-button gl-float-right">
+      <gl-link href="https://docs.gitlab.com/ee/user/crm/" target="_blank"
+        ><gl-icon name="question-o"
+      /></gl-link>
     </div>
     <div class="title hide-collapsed gl-mb-2 gl-line-height-20">
       {{ contactsLabel }}

app/assets/stylesheets/framework/variables_overrides.scss

@@ -5,7 +5,7 @@
 
 $secondary: $gray-light;
 $input-disabled-bg: $gray-light;
-$input-border-color: $gray-100;
+$input-border-color: $gray-400;
 $input-color: $gl-text-color;
 $input-font-size: $gl-font-size;
 $font-family-sans-serif: $regular-font;

app/assets/stylesheets/startup/startup-dark.scss

@@ -140,7 +140,7 @@ h1 {
   color: #fafafa;
   background-color: #333;
   background-clip: padding-box;
-  border: 1px solid #404040;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {

app/assets/stylesheets/startup/startup-general.scss

@@ -121,7 +121,7 @@ h1 {
   color: #303030;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #dbdbdb;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {

app/assets/stylesheets/startup/startup-signin.scss

@@ -189,7 +189,7 @@ hr {
   color: #303030;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #dbdbdb;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {

app/assets/stylesheets/utilities.scss

@@ -247,16 +247,6 @@ $gl-line-height-42: px-to-rem(42px);
   max-width: 50%;
 }
 
-// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
-.gl-popover {
-  .popover-header {
-    .gl-button.close {
-      margin-top: -$gl-spacing-scale-3;
-      margin-right: -$gl-spacing-scale-4;
-    }
-  }
-}
-
 // Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1490
 .gl-w-grid-size-28 {
   width: $grid-size * 28;

app/controllers/oauth/token_info_controller.rb

@@ -13,7 +13,7 @@ def show
         'expires_in_seconds' => token_json[:expires_in]
       ), status: :ok
     else
-      error = Doorkeeper::OAuth::ErrorResponse.new(name: :invalid_request)
+      error = Doorkeeper::OAuth::InvalidTokenResponse.new
       response.headers.merge!(error.headers)
       render json: error.body, status: error.status
     end

app/controllers/projects/google_cloud/base_controller.rb

@@ -23,4 +23,39 @@ def google_oauth2_enabled!
   def feature_flag_enabled!
     access_denied! unless Feature.enabled?(:incubation_5mp_google_cloud, project)
   end
+
+  def validate_gcp_token!
+    is_token_valid = GoogleApi::CloudPlatform::Client.new(token_in_session, nil)
+                                                     .validate_token(expires_at_in_session)
+
+    return if is_token_valid
+
+    return_url = project_google_cloud_index_path(project)
+    state = generate_session_key_redirect(request.url, return_url)
+    @authorize_url = GoogleApi::CloudPlatform::Client.new(nil,
+                                                          callback_google_api_auth_url,
+                                                          state: state).authorize_url
+    redirect_to @authorize_url
+  end
+
+  def generate_session_key_redirect(uri, error_uri)
+    GoogleApi::CloudPlatform::Client.new_session_key_for_redirect_uri do |key|
+      session[key] = uri
+      session[:error_uri] = error_uri
+    end
+  end
+
+  def token_in_session
+    session[GoogleApi::CloudPlatform::Client.session_key_for_token]
+  end
+
+  def expires_at_in_session
+    session[GoogleApi::CloudPlatform::Client.session_key_for_expires_at]
+  end
+
+  def handle_gcp_error(error, project)
+    Gitlab::ErrorTracking.track_exception(error, project_id: project.id)
+    @js_data = { screen: 'gcp_error', error: error.to_s }.to_json
+    render status: :unauthorized, template: 'projects/google_cloud/errors/gcp_error'
+  end
 end

app/controllers/projects/google_cloud/deployments_controller.rb

+# frozen_string_literal: true
+
+class Projects::GoogleCloud::DeploymentsController < Projects::GoogleCloud::BaseController
+  before_action :validate_gcp_token!
+
+  def cloud_run
+    render json: "Placeholder"
+  end
+
+  def cloud_storage
+    render json: "Placeholder"
+  end
+end

app/controllers/projects/google_cloud/service_accounts_controller.rb

@@ -45,41 +45,4 @@ def create
   rescue Google::Apis::ClientError, Google::Apis::ServerError, Google::Apis::AuthorizationError => error
     handle_gcp_error(error, project)
   end
-
-  private
-
-  def validate_gcp_token!
-    is_token_valid = GoogleApi::CloudPlatform::Client.new(token_in_session, nil)
-                                                     .validate_token(expires_at_in_session)
-
-    return if is_token_valid
-
-    return_url = project_google_cloud_index_path(project)
-    state = generate_session_key_redirect(request.url, return_url)
-    @authorize_url = GoogleApi::CloudPlatform::Client.new(nil,
-                                                          callback_google_api_auth_url,
-                                                          state: state).authorize_url
-    redirect_to @authorize_url
-  end
-
-  def generate_session_key_redirect(uri, error_uri)
-    GoogleApi::CloudPlatform::Client.new_session_key_for_redirect_uri do |key|
-      session[key] = uri
-      session[:error_uri] = error_uri
-    end
-  end
-
-  def token_in_session
-    session[GoogleApi::CloudPlatform::Client.session_key_for_token]
-  end
-
-  def expires_at_in_session
-    session[GoogleApi::CloudPlatform::Client.session_key_for_expires_at]
-  end
-
-  def handle_gcp_error(error, project)
-    Gitlab::ErrorTracking.track_exception(error, project_id: project.id)
-    @js_data = { screen: 'gcp_error', error: error.to_s }.to_json
-    render status: :unauthorized, template: 'projects/google_cloud/errors/gcp_error'
-  end
 end

app/controllers/projects/tree_controller.rb

@@ -19,6 +19,7 @@ class Projects::TreeController < Projects::ApplicationController
     push_frontend_feature_flag(:lazy_load_commits, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:new_dir_modal, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:refactor_blob_viewer, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:highlight_js, @project, default_enabled: :yaml)
   end
 
   feature_category :source_code_management

app/controllers/sandbox_controller.rb

+# frozen_string_literal: true
+
+class SandboxController < ApplicationController # rubocop:disable Gitlab/NamespacedClass
+  skip_before_action :authenticate_user!
+
+  feature_category :not_owned
+
+  def mermaid
+    render layout: false
+  end
+end

app/graphql/resolvers/clusters/agent_tokens_resolver.rb

@@ -9,10 +9,17 @@ class AgentTokensResolver < BaseResolver
 
       delegate :project, to: :agent
 
+      argument :status, Types::Clusters::AgentTokenStatusEnum,
+               required: false,
+               description: 'Status of the token.'
+
       def resolve(**args)
         return ::Clusters::AgentToken.none unless can_read_agent_tokens?
 
-        agent.last_used_agent_tokens
+        tokens = agent.last_used_agent_tokens
+        tokens = tokens.with_status(args[:status]) if args[:status].present?
+
+        tokens
       end
 
       private

app/graphql/resolvers/concerns/resolves_pipelines.rb

@@ -24,7 +24,7 @@ module ResolvesPipelines
     argument :source,
              GraphQL::Types::String,
              required: false,
-             description: "Filter pipelines by their source. Will be ignored if `dast_view_scans` feature flag is disabled."
+             description: "Filter pipelines by their source."
   end
 
   class_methods do
@@ -38,8 +38,6 @@ def resolver_complexity(args, child_complexity:)
   end
 
   def resolve_pipelines(project, params = {})
-    params.delete(:source) unless Feature.enabled?(:dast_view_scans, project, default_enabled: :yaml)
-
     Ci::PipelinesFinder.new(project, context[:current_user], params).execute
   end
 end

app/graphql/types/ci/runner_type.rb

@@ -4,6 +4,7 @@ module Types
   module Ci
     class RunnerType < BaseObject
       edge_type_class(RunnerWebUrlEdge)
+      connection_type_class(Types::CountableConnectionType)
       graphql_name 'CiRunner'
       authorize :read_runner
       present_using ::Ci::RunnerPresenter