Add latest changes from gitlab-org/gitlab@master

19 files changed, 184 insertions, 75 deletions

diff --git a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
index d3d1fd8ddc3..e6bd0f53672 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue
@@ -129,7 +129,7 @@ export default {
             <template #help>
               {{
                 s__(
-                  'JiraService|Warning: All GitLab users that have access to this GitLab project will be able to view all issues from the Jira project specified below.',
+                  'JiraService|Warning: All GitLab users that have access to this GitLab project are able to view all issues from the Jira project specified below.',
                 )
               }}
             </template>
@@ -169,7 +169,7 @@ export default {
           id="service_project_key"
           v-model="projectKey"
           name="service[project_key]"
-          :placeholder="s__('JiraService|e.g. AB')"
+          :placeholder="s__('JiraService|For example, AB')"
           :required="enableJiraIssues"
           :state="validProjectKey"
           :disabled="!enableJiraIssues"
diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
index 03b1e8586ae..a17378edafd 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
@@ -144,7 +144,7 @@ export default {
       label-for="service[trigger]"
       :description="
         s__(
-          'Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) will be created.',
+          'Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) is created.',
         )
       "
     >
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 0f74d78c8e0..dfe2763d8bd 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -121,6 +121,7 @@ export default {
           :is="componentName(firstNote)"
           :note="componentData(firstNote)"
           :line="line || diffLine"
+          :discussion-file="discussion.diff_file"
           :commit="commit"
           :help-page-path="helpPagePath"
           :show-reply-button="userCanReply"
@@ -167,6 +168,7 @@ export default {
           v-for="(note, index) in discussion.notes"
           :key="note.id"
           :note="componentData(note)"
+          :discussion-file="discussion.diff_file"
           :help-page-path="helpPagePath"
           :line="diffLine"
           :discussion-root="index === 0"
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 0b5abacc963..0feb77be653 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -48,6 +48,11 @@ export default {
       required: false,
       default: null,
     },
+    discussionFile: {
+      type: Object,
+      required: false,
+      default: null,
+    },
     helpPagePath: {
       type: String,
       required: false,
@@ -167,12 +172,18 @@ export default {
       return commentLineOptions(lines, this.commentLineStart, this.line.line_code);
     },
     diffFile() {
+      let fileResolvedFromAvailableSource;
+
       if (this.commentLineStart.line_code) {
         const lineCode = this.commentLineStart.line_code.split('_')[0];
-        return this.getDiffFileByHash(lineCode);
+        fileResolvedFromAvailableSource = this.getDiffFileByHash(lineCode);
+      }
+
+      if (!fileResolvedFromAvailableSource && this.discussionFile) {
+        fileResolvedFromAvailableSource = this.discussionFile;
       }
 
-      return null;
+      return fileResolvedFromAvailableSource || null;
     },
   },
   created() {
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index d7a7fc9c375..6ff7b356438 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -2,7 +2,7 @@
 import { reportToSentry } from '../../utils';
 import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
 import LinksLayer from '../graph_shared/links_layer.vue';
-import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH } from './constants';
+import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from './constants';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
 import { validateConfigPaths } from './utils';
@@ -25,11 +25,20 @@ export default {
       type: Object,
       required: true,
     },
+    viewType: {
+      type: String,
+      required: true,
+    },
     isLinkedPipeline: {
       type: Boolean,
       required: false,
       default: false,
     },
+    pipelineLayers: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     type: {
       type: String,
       required: false,
@@ -63,8 +72,8 @@ export default {
     downstreamPipelines() {
       return this.hasDownstreamPipelines ? this.pipeline.downstream : [];
     },
-    graph() {
-      return this.pipeline.stages;
+    layout() {
+      return this.isStageView ? this.pipeline.stages : this.generateColumnsFromLayersList();
     },
     hasDownstreamPipelines() {
       return Boolean(this.pipeline?.downstream?.length > 0);
@@ -72,12 +81,18 @@ export default {
     hasUpstreamPipelines() {
       return Boolean(this.pipeline?.upstream?.length > 0);
     },
+    isStageView() {
+      return this.viewType === STAGE_VIEW;
+    },
     metricsConfig() {
       return {
         path: this.configPaths.metricsPath,
         collectMetrics: true,
       };
     },
+    shouldHideLinks() {
+      return this.isStageView;
+    },
     // The show downstream check prevents showing redundant linked columns
     showDownstreamPipelines() {
       return (
@@ -101,6 +116,26 @@ export default {
     this.getMeasurements();
   },
   methods: {
+    generateColumnsFromLayersList() {
+      return this.pipelineLayers.map((layers, idx) => {
+        /*
+          look up the groups in each layer,
+          then add each set of layer groups to a stage-like object
+        */
+
+        const groups = layers.map((id) => {
+          const { stageIdx, groupIdx } = this.pipeline.stagesLookup[id];
+          return this.pipeline.stages?.[stageIdx]?.groups?.[groupIdx];
+        });
+
+        return {
+          name: '',
+          id: `layer-${idx}`,
+          status: { action: null },
+          groups: groups.filter(Boolean),
+        };
+      });
+    },
     getMeasurements() {
       this.measurements = {
         width: this.$refs[this.containerId].scrollWidth,
@@ -147,29 +182,31 @@ export default {
             :linked-pipelines="upstreamPipelines"
             :column-title="__('Upstream')"
             :type="$options.pipelineTypeConstants.UPSTREAM"
+            :view-type="viewType"
             @error="onError"
           />
         </template>
         <template #main>
           <div :id="containerId" :ref="containerId">
             <links-layer
-              :pipeline-data="graph"
+              :pipeline-data="layout"
               :pipeline-id="pipeline.id"
               :container-id="containerId"
               :container-measurements="measurements"
               :highlighted-job="hoveredJobName"
               :metrics-config="metricsConfig"
-              :never-show-links="true"
+              :never-show-links="shouldHideLinks"
+              :view-type="viewType"
               default-link-color="gl-stroke-transparent"
               @error="onError"
               @highlightedJobsChange="updateHighlightedJobs"
             >
               <stage-column-component
-                v-for="stage in graph"
-                :key="stage.name"
-                :title="stage.name"
-                :groups="stage.groups"
-                :action="stage.status.action"
+                v-for="column in layout"
+                :key="column.id || column.name"
+                :title="column.name"
+                :groups="column.groups"
+                :action="column.status.action"
                 :highlighted-jobs="highlightedJobs"
                 :job-hovered="hoveredJobName"
                 :pipeline-expanded="pipelineExpanded"
@@ -189,6 +226,7 @@ export default {
             :linked-pipelines="downstreamPipelines"
             :column-title="__('Downstream')"
             :type="$options.pipelineTypeConstants.DOWNSTREAM"
+            :view-type="viewType"
             @downstreamHovered="setJob"
             @pipelineExpandToggle="togglePipelineExpanded"
             @scrollContainer="slidePipelineContainer"
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
index be0f3643784..71e6c26ff22 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -5,7 +5,8 @@ import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
 import { reportToSentry } from '../../utils';
-import { IID_FAILURE, STAGE_VIEW } from './constants';
+import { listByLayers } from '../parsing_utils';
+import { IID_FAILURE, LAYER_VIEW, STAGE_VIEW } from './constants';
 import PipelineGraph from './graph_component.vue';
 import GraphViewSelector from './graph_view_selector.vue';
 import {
@@ -43,6 +44,7 @@ export default {
       alertType: null,
       currentViewType: STAGE_VIEW,
       pipeline: null,
+      pipelineLayers: null,
       showAlert: false,
     };
   },
@@ -155,6 +157,13 @@ export default {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
   methods: {
+    getPipelineLayers() {
+      if (this.currentViewType === LAYER_VIEW && !this.pipelineLayers) {
+        this.pipelineLayers = listByLayers(this.pipeline);
+      }
+
+      return this.pipelineLayers;
+    },
     hideAlert() {
       this.showAlert = false;
       this.alertType = null;
@@ -192,6 +201,8 @@ export default {
       v-if="pipeline"
       :config-paths="configPaths"
       :pipeline="pipeline"
+      :pipeline-layers="getPipelineLayers()"
+      :view-type="currentViewType"
       @error="reportFailure"
       @refreshPipelineGraph="refreshPipelineGraph"
     />
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
index 080a9831574..b8b41e826bd 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
@@ -55,16 +55,16 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-end gl-align-items-center gl-my-4">
+  <div class="gl-display-flex gl-align-items-center gl-my-4">
     <span>{{ $options.i18n.labelText }}</span>
-    <gl-dropdown class="gl-ml-4" :right="true">
+    <gl-dropdown class="gl-ml-4">
       <template #button-content>
         <gl-sprintf :message="currentDropdownText">
           <template #code="{ content }">
             <code> {{ content }} </code>
           </template>
         </gl-sprintf>
-        <gl-icon class="gl-px-2" name="angle-down" :size="18" />
+        <gl-icon class="gl-px-2" name="angle-down" :size="16" />
       </template>
       <gl-dropdown-item
         v-for="view in $options.views"
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
index a8942c86ba9..7f772e35e55 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
@@ -2,7 +2,8 @@
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { LOAD_FAILURE } from '../../constants';
 import { reportToSentry } from '../../utils';
-import { ONE_COL_WIDTH, UPSTREAM } from './constants';
+import { listByLayers } from '../parsing_utils';
+import { ONE_COL_WIDTH, UPSTREAM, LAYER_VIEW } from './constants';
 import LinkedPipeline from './linked_pipeline.vue';
 import {
   getQueryHeaders,
@@ -35,11 +36,16 @@ export default {
       type: String,
       required: true,
     },
+    viewType: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
       currentPipeline: null,
       loadingPipelineId: null,
+      pipelineLayers: {},
       pipelineExpanded: false,
     };
   },
@@ -123,6 +129,13 @@ export default {
 
       toggleQueryPollingByVisibility(this.$apollo.queries.currentPipeline);
     },
+    getPipelineLayers(id) {
+      if (this.viewType === LAYER_VIEW && !this.pipelineLayers[id]) {
+        this.pipelineLayers[id] = listByLayers(this.currentPipeline);
+      }
+
+      return this.pipelineLayers[id];
+    },
     isExpanded(id) {
       return Boolean(this.currentPipeline?.id && id === this.currentPipeline.id);
     },
@@ -203,7 +216,9 @@ export default {
               class="d-inline-block gl-mt-n2"
               :config-paths="configPaths"
               :pipeline="currentPipeline"
+              :pipeline-layers="getPipelineLayers(pipeline.id)"
               :is-linked-pipeline="true"
+              :view-type="viewType"
             />
           </div>
         </li>
diff --git a/app/assets/javascripts/pipelines/components/graph/utils.js b/app/assets/javascripts/pipelines/components/graph/utils.js
index d36f18f0903..373aa6bf9a1 100644
--- a/app/assets/javascripts/pipelines/components/graph/utils.js
+++ b/app/assets/javascripts/pipelines/components/graph/utils.js
@@ -1,6 +1,6 @@
 import Visibility from 'visibilityjs';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { unwrapStagesWithNeeds } from '../unwrapping_utils';
+import { unwrapStagesWithNeedsAndLookup } from '../unwrapping_utils';
 
 const addMulti = (mainPipelineProjectPath, linkedPipeline) => {
   return {
@@ -86,12 +86,13 @@ const unwrapPipelineData = (mainPipelineProjectPath, data) => {
     stages: { nodes: stages },
   } = pipeline;
 
-  const nodes = unwrapStagesWithNeeds(stages);
+  const { stages: updatedStages, lookup } = unwrapStagesWithNeedsAndLookup(stages);
 
   return {
     ...pipeline,
     id: getIdFromGraphQLId(pipeline.id),
-    stages: nodes,
+    stages: updatedStages,
+    stagesLookup: lookup,
     upstream: upstream
       ? [upstream].map(addMulti.bind(null, mainPipelineProjectPath)).map(transformId)
       : [],
diff --git a/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue b/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue
index 382127285ba..0ed5b8a5f09 100644
--- a/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue
+++ b/app/assets/javascripts/pipelines/components/graph_shared/links_inner.vue
@@ -11,6 +11,7 @@ import {
 import { performanceMarkAndMeasure } from '~/performance/utils';
 import { DRAW_FAILURE } from '../../constants';
 import { createJobsHash, generateJobNeedsDict, reportToSentry } from '../../utils';
+import { STAGE_VIEW } from '../graph/constants';
 import { parseData } from '../parsing_utils';
 import { reportPerformance } from './api';
 import { generateLinksData } from './drawing_utils';
@@ -54,11 +55,17 @@ export default {
       required: false,
       default: '',
     },
+    viewType: {
+      type: String,
+      required: false,
+      default: STAGE_VIEW,
+    },
   },
   data() {
     return {
       links: [],
       needsObject: null,
+      parsedData: {},
     };
   },
   computed: {
@@ -108,6 +115,15 @@ export default {
     highlightedJobs(jobs) {
       this.$emit('highlightedJobsChange', jobs);
     },
+    viewType() {
+      /*
+        We need to wait a tick so that the layout reflows
+        before the links refresh.
+      */
+      this.$nextTick(() => {
+        this.refreshLinks();
+      });
+    },
   },
   errorCaptured(err, _vm, info) {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
@@ -166,14 +182,17 @@ export default {
       this.beginPerfMeasure();
       try {
         const arrayOfJobs = this.pipelineData.flatMap(({ groups }) => groups);
-        const parsedData = parseData(arrayOfJobs);
-        this.links = generateLinksData(parsedData, this.containerId, `-${this.pipelineId}`);
+        this.parsedData = parseData(arrayOfJobs);
+        this.refreshLinks();
       } catch (err) {
         this.$emit('error', { type: DRAW_FAILURE, reportToSentry: false });
         reportToSentry(this.$options.name, err);
       }
       this.finishPerfMeasureAndSend();
     },
+    refreshLinks() {
+      this.links = generateLinksData(this.parsedData, this.containerId, `-${this.pipelineId}`);
+    },
     getLinkClasses(link) {
       return [
         this.isLinkHighlighted(link.ref) ? 'gl-stroke-blue-400' : this.defaultLinkColor,
diff --git a/app/assets/javascripts/pipelines/components/parsing_utils.js b/app/assets/javascripts/pipelines/components/parsing_utils.js
index 9c97fa832d0..f5ab869633b 100644
--- a/app/assets/javascripts/pipelines/components/parsing_utils.js
+++ b/app/assets/javascripts/pipelines/components/parsing_utils.js
@@ -1,4 +1,5 @@
 import { uniqWith, isEqual } from 'lodash';
+import { createSankey } from './dag/drawing_utils';
 
 /*
     The following functions are the main engine in transforming the data as
@@ -144,3 +145,28 @@ export const getMaxNodes = (nodes) => {
 export const removeOrphanNodes = (sankeyfiedNodes) => {
   return sankeyfiedNodes.filter((node) => node.sourceLinks.length || node.targetLinks.length);
 };
+
+/*
+  This utility accepts unwrapped pipeline data in the format returned from
+  our standard pipeline GraphQL query and returns a list of names by layer
+  for the layer view. It can be combined with the stageLookup on the pipeline
+  to generate columns by layer.
+*/
+
+export const listByLayers = ({ stages }) => {
+  const arrayOfJobs = stages.flatMap(({ groups }) => groups);
+  const parsedData = parseData(arrayOfJobs);
+  const dataWithLayers = createSankey()(parsedData);
+
+  return dataWithLayers.nodes.reduce((acc, { layer, name }) => {
+    /* sort groups by layer */
+
+    if (!acc[layer]) {
+      acc[layer] = [];
+    }
+
+    acc[layer].push(name);
+
+    return acc;
+  }, []);
+};
diff --git a/app/assets/javascripts/pipelines/components/unwrapping_utils.js b/app/assets/javascripts/pipelines/components/unwrapping_utils.js
index 7a3b28ed7dd..15316fe3279 100644
--- a/app/assets/javascripts/pipelines/components/unwrapping_utils.js
+++ b/app/assets/javascripts/pipelines/components/unwrapping_utils.js
@@ -1,11 +1,11 @@
 import { reportToSentry } from '../utils';
 
 const unwrapGroups = (stages) => {
-  return stages.map((stage) => {
+  return stages.map((stage, idx) => {
     const {
       groups: { nodes: groups },
     } = stage;
-    return { ...stage, groups };
+    return { node: { ...stage, groups }, lookup: { stageIdx: idx } };
   });
 };
 
@@ -23,20 +23,34 @@ const unwrapJobWithNeeds = (denodedJobArray) => {
   return unwrapNodesWithName(denodedJobArray, 'needs');
 };
 
-const unwrapStagesWithNeeds = (denodedStages) => {
+const unwrapStagesWithNeedsAndLookup = (denodedStages) => {
   const unwrappedNestedGroups = unwrapGroups(denodedStages);
 
-  const nodes = unwrappedNestedGroups.map((node) => {
+  const lookupMap = {};
+
+  const nodes = unwrappedNestedGroups.map(({ node, lookup }) => {
     const { groups } = node;
-    const groupsWithJobs = groups.map((group) => {
+    const groupsWithJobs = groups.map((group, idx) => {
       const jobs = unwrapJobWithNeeds(group.jobs.nodes);
+
+      lookupMap[group.name] = { ...lookup, groupIdx: idx };
       return { ...group, jobs };
     });
 
     return { ...node, groups: groupsWithJobs };
   });
 
-  return nodes;
+  return { stages: nodes, lookup: lookupMap };
 };
 
-export { unwrapGroups, unwrapNodesWithName, unwrapJobWithNeeds, unwrapStagesWithNeeds };
+const unwrapStagesWithNeeds = (denodedStages) => {
+  return unwrapStagesWithNeedsAndLookup(denodedStages).stages;
+};
+
+export {
+  unwrapGroups,
+  unwrapJobWithNeeds,
+  unwrapNodesWithName,
+  unwrapStagesWithNeeds,
+  unwrapStagesWithNeedsAndLookup,
+};
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 856e49bd144..f684cb090e2 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -25,32 +25,3 @@
     background-color: $red-500;
   }
 }
-
-.runner {
-  .btn {
-    padding: 1px 6px;
-  }
-
-  h4 {
-    font-weight: $gl-font-weight-normal;
-  }
-}
-
-.admin-runner-btn-group-cell {
-  min-width: 150px;
-
-  .btn-sm {
-    padding: 4px 9px;
-  }
-
-  .btn-default {
-    color: $gl-text-color-secondary;
-  }
-}
-
-@include media-breakpoint-down(md) {
-  .runners-content {
-    width: 100%;
-    overflow: auto;
-  }
-}
diff --git a/app/models/project_services/jira_service.rb b/app/models/project_services/jira_service.rb
index b4ef0be8076..3e14bf44c12 100644
--- a/app/models/project_services/jira_service.rb
+++ b/app/models/project_services/jira_service.rb
@@ -116,7 +116,7 @@ class JiraService < IssueTrackerService
   end
 
   def description
-    s_('JiraService|Jira issue tracker')
+    s_('JiraService|Track issues in Jira')
   end
 
   def self.to_param
@@ -130,19 +130,20 @@ class JiraService < IssueTrackerService
         name: 'url',
         title: s_('JiraService|Web URL'),
         placeholder: 'https://jira.example.com',
+        help: s_('JiraService|Base URL of the Jira instance.'),
         required: true
       },
       {
         type: 'text',
         name: 'api_url',
         title: s_('JiraService|Jira API URL'),
-        placeholder: s_('JiraService|If different from Web URL')
+        help: s_('JiraService|If different from Web URL.')
       },
       {
         type: 'text',
         name: 'username',
         title: s_('JiraService|Username or Email'),
-        placeholder: s_('JiraService|Use a username for server version and an email for cloud version'),
+        help: s_('JiraService|Use a username for server version and an email for cloud version.'),
         required: true
       },
       {
@@ -150,8 +151,8 @@ class JiraService < IssueTrackerService
         name: 'password',
         title: s_('JiraService|Password or API token'),
         non_empty_password_title: s_('JiraService|Enter new password or API token'),
-        non_empty_password_help: s_('JiraService|Leave blank to use your current password or API token'),
-        placeholder: s_('JiraService|Use a password for server version and an API token for cloud version'),
+        non_empty_password_help: s_('JiraService|Leave blank to use your current password or API token.'),
+        help: s_('JiraService|Use a password for server version and an API token for cloud version.'),
         required: true
       }
     ]
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
index 5ee68e8fd16..50fc11ec7f3 100644
--- a/app/views/admin/application_settings/_performance.html.haml
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -6,7 +6,7 @@
       .form-check
         = f.check_box :authorized_keys_enabled, class: 'form-check-input'
         = f.label :authorized_keys_enabled, class: 'form-check-label' do
-          Write to "authorized_keys" file
+          = _('Write to "authorized_keys" file')
         .form-text.text-muted
           By default, we write to the "authorized_keys" file to support Git
           over SSH without additional configuration. GitLab can be optimized
@@ -31,4 +31,4 @@
       .form-text.text-muted
         = _('Number of changes (branches or tags) in a single push to determine whether individual push events or bulk push event will be created. Bulk push event will be created if it surpasses that value.')
 
-  = f.submit 'Save changes', class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 8e62dae6c4d..b5a869aa91c 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -118,7 +118,7 @@
     = _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
 
 - if @runners.any?
-  .runners-content.content-list
+  .content-list{ data: { testid: 'runners-table' } }
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
diff --git a/app/views/groups/runners/_index.html.haml b/app/views/groups/runners/_index.html.haml
index 7cbc709ecf8..2c6ded7327f 100644
--- a/app/views/groups/runners/_index.html.haml
+++ b/app/views/groups/runners/_index.html.haml
@@ -82,7 +82,7 @@
 
 
 - if @group_runners.any?
-  .runners-content.content-list
+  .content-list{ data: { testid: 'runners-table' } }
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
diff --git a/app/views/projects/blob/viewers/_empty.html.haml b/app/views/projects/blob/viewers/_empty.html.haml
index a293a8de231..c15dabc9111 100644
--- a/app/views/projects/blob/viewers/_empty.html.haml
+++ b/app/views/projects/blob/viewers/_empty.html.haml
@@ -1,3 +1,3 @@
 .file-content.code
   .nothing-here-block
-    Empty file
+    = _("Empty file")
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index c003a76728b..0d67deb34cf 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -1,5 +1,5 @@
 %li.runner{ id: dom_id(runner) }
-  %h4
+  %h4.gl-font-weight-normal
     = runner_status_icon(runner)
 
     - if @project_runners.include?(runner)
@@ -9,9 +9,9 @@
         %span.has-tooltip{ title: _('Locked to current projects') }
           = sprite_icon('lock')
 
-      %small.edit-runner
-        = link_to edit_project_runner_path(@project, runner), class: 'btn gl-button btn-edit' do
-          = sprite_icon('pencil', css_class: 'gl-my-2')
+      = link_to edit_project_runner_path(@project, runner), class: 'btn gl-button btn-sm btn-icon', data: { testid: 'edit-runner-link' } do
+        = sprite_icon('pencil')
+
     - else
       %span.commit-sha
         = runner.short_sha