[ci skip] Merge branch 'master' into 42923-close-issue

* master: (21 commits)
  GitLab QA: Add GITLAB_USER_TYPE to support different login types (e.g. standard, LDAP)
  Return a warning string if we try to encode to unsupported encoding
  Remove confirmation_input
  Resolve failures in GitHub-ish import controller specs
  Remove changelogs for already-released security patches
  Merge branch 'mc/bug/38984-wildcard-protected-tags' into 'security-10-4'
  Merge branch 'fix/gh-namespace-issue' into 'security-10-4'
  Merge branch 'security-10-4-todo-api-reveals-sensitive-information' into 'security-10-4'
  Merge branch 'fix-mermaid-xss' into 'security-10-4'
  Merge branch 'security-10-4-25223-snippets-finder-doesnt-obey-feature-visibility' into 'security-10-4'
  API - fix searching in group/project specified by path
  Add documentation on how to build a QA Docker image
  Fix english in style_guide_js.md
  Adds tooltip for environment name Adds CSS for child envrionments
  Do not attach runner to a non-exsiting network in QA
  Remove not needed default statement
  Improve docs about allowing some side effects on the constructor
  Move all ENV to Runtime::Env
  Rename .scss files to use snake_case
  Moves missing branch into a vue file
  ...

6 files changed, 86 insertions, 117 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index a9d554e549e..79326ca3487 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,8 +1,9 @@
 <script>
   import Timeago from 'timeago.js';
   import _ from 'underscore';
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-  import { humanize } from '../../lib/utils/text_utility';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+  import { humanize } from '~/lib/utils/text_utility';
   import ActionsComponent from './environment_actions.vue';
   import ExternalUrlComponent from './environment_external_url.vue';
   import StopComponent from './environment_stop.vue';
@@ -21,14 +22,18 @@
 
   export default {
     components: {
-      userAvatarLink,
-      'commit-component': CommitComponent,
-      'actions-component': ActionsComponent,
-      'external-url-component': ExternalUrlComponent,
-      'stop-component': StopComponent,
-      'rollback-component': RollbackComponent,
-      'terminal-button-component': TerminalButtonComponent,
-      'monitoring-button-component': MonitoringButtonComponent,
+      UserAvatarLink,
+      CommitComponent,
+      ActionsComponent,
+      ExternalUrlComponent,
+      StopComponent,
+      RollbackComponent,
+      TerminalButtonComponent,
+      MonitoringButtonComponent,
+    },
+
+    directives: {
+      tooltip,
     },
 
     props: {
@@ -443,7 +448,11 @@
         v-if="!model.isFolder"
         class="environment-name flex-truncate-parent table-mobile-content"
         :href="environmentPath">
-        <span class="flex-truncate-child">{{ model.name }}</span>
+        <span
+          class="flex-truncate-child"
+          v-tooltip
+          :title="model.name"
+        >{{ model.name }}</span>
       </a>
       <span
         v-else
diff --git a/app/assets/javascripts/render_mermaid.js b/app/assets/javascripts/render_mermaid.js
index 31c7a772cf4..d4f18955bd2 100644
--- a/app/assets/javascripts/render_mermaid.js
+++ b/app/assets/javascripts/render_mermaid.js
@@ -30,6 +30,9 @@ export default function renderMermaid($els) {
     $els.each((i, el) => {
       const source = el.textContent;
 
+      // Remove any extra spans added by the backend syntax highlighting.
+      Object.assign(el, { textContent: source });
+
       mermaid.init(undefined, el, (id) => {
         const svg = document.getElementById(id);
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
deleted file mode 100644
index 7733fb74afe..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-import tooltip from '../../../vue_shared/directives/tooltip';
-import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
-
-export default {
-  name: 'MRWidgetMissingBranch',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  directives: {
-    tooltip,
-  },
-  components: {
-    'mr-widget-merge-help': mrWidgetMergeHelp,
-    statusIcon,
-  },
-  computed: {
-    missingBranchName() {
-      return this.mr.sourceBranchRemoved ? 'source' : 'target';
-    },
-    message() {
-      return `If the ${this.missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line`;
-    },
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span class="bold js-branch-text">
-          <span class="capitalize">
-            {{missingBranchName}}
-          </span> branch does not exist.
-          Please restore it or use a different {{missingBranchName}} branch
-          <i
-            v-tooltip
-            class="fa fa-question-circle"
-            :title="message"
-            :aria-label="message"></i>
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
new file mode 100644
index 00000000000..718c0e4b3c6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -0,0 +1,62 @@
+<script>
+  import { sprintf, s__ } from '~/locale';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import statusIcon from '../mr_widget_status_icon.vue';
+  import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
+
+  export default {
+    name: 'MRWidgetMissingBranch',
+    directives: {
+      tooltip,
+    },
+    components: {
+      mrWidgetMergeHelp,
+      statusIcon,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      missingBranchName() {
+        return this.mr.sourceBranchRemoved ? 'source' : 'target';
+      },
+      missingBranchNameMessage() {
+        return sprintf(s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'), {
+          missingBranchName: this.missingBranchName,
+        });
+      },
+      message() {
+        return sprintf(s__('mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line'), {
+          missingBranchName: this.missingBranchName,
+        });
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="true"
+    />
+
+    <div class="media-body space-children">
+      <span class="bold js-branch-text">
+        <span class="capitalize">
+          {{ missingBranchName }}
+        </span> {{ s__("mrWidget|branch does not exist.") }}
+        {{ missingBranchNameMessage }}
+        <i
+          v-tooltip
+          class="fa fa-question-circle"
+          :title="message"
+          :aria-label="message"
+        >
+        </i>
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 7ca15537719..5517888c3b1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -24,7 +24,7 @@ export { default as WipState } from './components/states/mr_widget_wip';
 export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts.vue';
 export { default as NothingToMergeState } from './components/states/mr_widget_nothing_to_merge';
-export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
+export { default as MissingBranchState } from './components/states/mr_widget_missing_branch.vue';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed';
 export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
 export { default as SHAMismatchState } from './components/states/mr_widget_sha_mismatch';
diff --git a/app/assets/javascripts/vue_shared/components/confirmation_input.vue b/app/assets/javascripts/vue_shared/components/confirmation_input.vue
deleted file mode 100644
index 1aa03ea6317..00000000000
--- a/app/assets/javascripts/vue_shared/components/confirmation_input.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import _ from 'underscore';
-  import { __, sprintf } from '~/locale';
-
-  export default {
-    props: {
-      inputId: {
-        type: String,
-        required: true,
-      },
-      confirmationKey: {
-        type: String,
-        required: true,
-      },
-      confirmationValue: {
-        type: String,
-        required: true,
-      },
-      shouldEscapeConfirmationValue: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-    },
-    computed: {
-      inputLabel() {
-        let value = this.confirmationValue;
-        if (this.shouldEscapeConfirmationValue) {
-          value = _.escape(value);
-        }
-
-        return sprintf(
-          __('Type %{value} to confirm:'),
-          { value: `<code>${value}</code>` },
-          false,
-        );
-      },
-    },
-    methods: {
-      hasCorrectValue() {
-        return this.$refs.enteredValue.value === this.confirmationValue;
-      },
-    },
-  };
-</script>
-
-<template>
-  <div>
-    <label
-      v-html="inputLabel"
-      :for="inputId"
-    >
-    </label>
-    <input
-      :id="inputId"
-      :name="confirmationKey"
-      type="text"
-      ref="enteredValue"
-      class="form-control"
-    />
-  </div>
-</template>