Add latest changes from gitlab-org/gitlab@master

7 files changed, 384 insertions, 53 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/anomaly.vue b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
new file mode 100644
index 00000000000..8eeac737a11
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
@@ -0,0 +1,227 @@
+<script>
+import { flatten, isNumber } from 'underscore';
+import { GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
+import { roundOffFloat } from '~/lib/utils/common_utils';
+import { hexToRgb } from '~/lib/utils/color_utils';
+import { areaOpacityValues, symbolSizes, colorValues } from '../../constants';
+import { graphDataValidatorForAnomalyValues } from '../../utils';
+import MonitorTimeSeriesChart from './time_series.vue';
+
+/**
+ * Series indexes
+ */
+const METRIC = 0;
+const UPPER = 1;
+const LOWER = 2;
+
+/**
+ * Boundary area appearance
+ */
+const AREA_COLOR = colorValues.anomalyAreaColor;
+const AREA_OPACITY = areaOpacityValues.default;
+const AREA_COLOR_RGBA = `rgba(${hexToRgb(AREA_COLOR).join(',')},${AREA_OPACITY})`;
+
+/**
+ * The anomaly component highlights when a metric shows
+ * some anomalous behavior.
+ *
+ * It shows both a metric line and a boundary band in a
+ * time series chart, the boundary band shows the normal
+ * range of values the metric should take.
+ *
+ * This component accepts 3 queries, which contain the
+ * "metric", "upper" limit and "lower" limit.
+ *
+ * The upper and lower series are "stacked areas" visually
+ * to create the boundary band, and if any "metric" value
+ * is outside this band, it is highlighted to warn users.
+ *
+ * The boundary band stack must be painted above the 0 line
+ * so the area is shown correctly. If any of the values of
+ * the data are negative, the chart data is shifted to be
+ * above 0 line.
+ *
+ * The data passed to the time series is will always be
+ * positive, but reformatted to show the original values of
+ * data.
+ *
+ */
+export default {
+  components: {
+    GlLineChart,
+    GlChartSeriesLabel,
+    MonitorTimeSeriesChart,
+  },
+  inheritAttrs: false,
+  props: {
+    graphData: {
+      type: Object,
+      required: true,
+      validator: graphDataValidatorForAnomalyValues,
+    },
+  },
+  computed: {
+    series() {
+      return this.graphData.queries.map(query => {
+        const values = query.result[0] ? query.result[0].values : [];
+        return {
+          label: query.label,
+          data: values.filter(([, value]) => !Number.isNaN(value)),
+        };
+      });
+    },
+    /**
+     * If any of the values of the data is negative, the
+     * chart data is shifted to the lowest value
+     *
+     * This offset is the lowest value.
+     */
+    yOffset() {
+      const values = flatten(this.series.map(ser => ser.data.map(([, y]) => y)));
+      const min = values.length ? Math.floor(Math.min(...values)) : 0;
+      return min < 0 ? -min : 0;
+    },
+    metricData() {
+      const originalMetricQuery = this.graphData.queries[0];
+
+      const metricQuery = { ...originalMetricQuery };
+      metricQuery.result[0].values = metricQuery.result[0].values.map(([x, y]) => [
+        x,
+        y + this.yOffset,
+      ]);
+      return {
+        ...this.graphData,
+        type: 'line-chart',
+        queries: [metricQuery],
+      };
+    },
+    metricSeriesConfig() {
+      return {
+        type: 'line',
+        symbol: 'circle',
+        symbolSize: (val, params) => {
+          if (this.isDatapointAnomaly(params.dataIndex)) {
+            return symbolSizes.anomaly;
+          }
+          // 0 causes echarts to throw an error, use small number instead
+          // see https://gitlab.com/gitlab-org/gitlab-ui/issues/423
+          return 0.001;
+        },
+        showSymbol: true,
+        itemStyle: {
+          color: params => {
+            if (this.isDatapointAnomaly(params.dataIndex)) {
+              return colorValues.anomalySymbol;
+            }
+            return colorValues.primaryColor;
+          },
+        },
+      };
+    },
+    chartOptions() {
+      const [, upperSeries, lowerSeries] = this.series;
+      const calcOffsetY = (data, offsetCallback) =>
+        data.map((value, dataIndex) => {
+          const [x, y] = value;
+          return [x, y + offsetCallback(dataIndex)];
+        });
+
+      const yAxisWithOffset = {
+        name: this.yAxisLabel,
+        axisLabel: {
+          formatter: num => roundOffFloat(num - this.yOffset, 3).toString(),
+        },
+      };
+
+      /**
+       * Boundary is rendered by 2 series: An invisible
+       * series (opacity: 0) stacked on a visible one.
+       *
+       * Order is important, lower boundary is stacked
+       * *below* the upper boundary.
+       */
+      const boundarySeries = [];
+
+      if (upperSeries.data.length && lowerSeries.data.length) {
+        // Lower boundary, plus the offset if negative values
+        boundarySeries.push(
+          this.makeBoundarySeries({
+            name: this.formatLegendLabel(lowerSeries),
+            data: calcOffsetY(lowerSeries.data, () => this.yOffset),
+          }),
+        );
+        // Upper boundary, minus the lower boundary
+        boundarySeries.push(
+          this.makeBoundarySeries({
+            name: this.formatLegendLabel(upperSeries),
+            data: calcOffsetY(upperSeries.data, i => -this.yValue(LOWER, i)),
+            areaStyle: {
+              color: AREA_COLOR,
+              opacity: AREA_OPACITY,
+            },
+          }),
+        );
+      }
+      return { yAxis: yAxisWithOffset, series: boundarySeries };
+    },
+  },
+  methods: {
+    formatLegendLabel(query) {
+      return query.label;
+    },
+    yValue(seriesIndex, dataIndex) {
+      const d = this.series[seriesIndex].data[dataIndex];
+      return d && d[1];
+    },
+    yValueFormatted(seriesIndex, dataIndex) {
+      const y = this.yValue(seriesIndex, dataIndex);
+      return isNumber(y) ? y.toFixed(3) : '';
+    },
+    isDatapointAnomaly(dataIndex) {
+      const yVal = this.yValue(METRIC, dataIndex);
+      const yUpper = this.yValue(UPPER, dataIndex);
+      const yLower = this.yValue(LOWER, dataIndex);
+      return (isNumber(yUpper) && yVal > yUpper) || (isNumber(yLower) && yVal < yLower);
+    },
+    makeBoundarySeries(series) {
+      const stackKey = 'anomaly-boundary-series-stack';
+      return {
+        type: 'line',
+        stack: stackKey,
+        lineStyle: {
+          width: 0,
+          color: AREA_COLOR_RGBA, // legend color
+        },
+        color: AREA_COLOR_RGBA, // tooltip color
+        symbol: 'none',
+        ...series,
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <monitor-time-series-chart
+    v-bind="$attrs"
+    :graph-data="metricData"
+    :option="chartOptions"
+    :series-config="metricSeriesConfig"
+  >
+    <slot></slot>
+    <template v-slot:tooltipContent="slotProps">
+      <div
+        v-for="(content, seriesIndex) in slotProps.tooltip.content"
+        :key="seriesIndex"
+        class="d-flex justify-content-between"
+      >
+        <gl-chart-series-label :color="content.color">
+          {{ content.name }}
+        </gl-chart-series-label>
+        <div class="prepend-left-32">
+          {{ yValueFormatted(seriesIndex, content.dataIndex) }}
+        </div>
+      </div>
+    </template>
+  </monitor-time-series-chart>
+</template>
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 434debb67f5..6a88c8a5ee3 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -1,12 +1,20 @@
 <script>
 import { s__, __ } from '~/locale';
+import _ from 'underscore';
 import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { roundOffFloat } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
-import { chartHeight, graphTypes, lineTypes, symbolSizes, dateFormats } from '../../constants';
+import {
+  chartHeight,
+  graphTypes,
+  lineTypes,
+  lineWidths,
+  symbolSizes,
+  dateFormats,
+} from '../../constants';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
 
@@ -30,6 +38,16 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    seriesConfig: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     deploymentData: {
       type: Array,
       required: false,
@@ -96,29 +114,35 @@ export default {
         const lineWidth =
           appearance && appearance.line && appearance.line.width
             ? appearance.line.width
-            : undefined;
+            : lineWidths.default;
         const areaStyle = {
           opacity:
             appearance && appearance.area && typeof appearance.area.opacity === 'number'
               ? appearance.area.opacity
               : undefined,
         };
-
         const series = makeDataSeries(query.result, {
           name: this.formatLegendLabel(query),
           lineStyle: {
             type: lineType,
             width: lineWidth,
+            color: this.primaryColor,
           },
           showSymbol: false,
           areaStyle: this.graphData.type === 'area-chart' ? areaStyle : undefined,
+          ...this.seriesConfig,
         });
 
         return acc.concat(series);
       }, []);
     },
+    chartOptionSeries() {
+      return (this.option.series || []).concat(this.scatterSeries ? [this.scatterSeries] : []);
+    },
     chartOptions() {
+      const option = _.omit(this.option, 'series');
       return {
+        series: this.chartOptionSeries,
         xAxis: {
           name: __('Time'),
           type: 'time',
@@ -135,8 +159,8 @@ export default {
             formatter: num => roundOffFloat(num, 3).toString(),
           },
         },
-        series: this.scatterSeries,
         dataZoom: [this.dataZoomConfig],
+        ...option,
       };
     },
     dataZoomConfig() {
@@ -144,6 +168,14 @@ export default {
 
       return handleIcon ? { handleIcon } : {};
     },
+    /**
+     * This method returns the earliest time value in all series of a chart.
+     * Takes a chart data with data to populate a timeseries.
+     * data should be an array of data points [t, y] where t is a ISO formatted date,
+     * and is sorted by t (time).
+     * @returns {(String|null)} earliest x value from all series, or null when the
+     * chart series data is empty.
+     */
     earliestDatapoint() {
       return this.chartData.reduce((acc, series) => {
         const { data } = series;
@@ -230,10 +262,11 @@ export default {
           this.tooltip.sha = deploy.sha.substring(0, 8);
           this.tooltip.commitUrl = deploy.commitUrl;
         } else {
-          const { seriesName, color } = dataPoint;
+          const { seriesName, color, dataIndex } = dataPoint;
           const value = yVal.toFixed(3);
           this.tooltip.content.push({
             name: seriesName,
+            dataIndex,
             value,
             color,
           });
@@ -306,23 +339,27 @@ export default {
       </template>
       <template v-else>
         <template slot="tooltipTitle">
-          <div class="text-nowrap">
-            {{ tooltip.title }}
-          </div>
+          <slot name="tooltipTitle">
+            <div class="text-nowrap">
+              {{ tooltip.title }}
+            </div>
+          </slot>
         </template>
         <template slot="tooltipContent">
-          <div
-            v-for="(content, key) in tooltip.content"
-            :key="key"
-            class="d-flex justify-content-between"
-          >
-            <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
-              {{ content.name }}
-            </gl-chart-series-label>
-            <div class="prepend-left-32">
-              {{ content.value }}
+          <slot name="tooltipContent" :tooltip="tooltip">
+            <div
+              v-for="(content, key) in tooltip.content"
+              :key="key"
+              class="d-flex justify-content-between"
+            >
+              <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
+                {{ content.name }}
+              </gl-chart-series-label>
+              <div class="prepend-left-32">
+                {{ content.value }}
+              </div>
             </div>
-          </div>
+          </slot>
         </template>
       </template>
     </component>
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 2c56966f120..e3f99dbda9a 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -11,6 +11,7 @@ import {
 } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import MonitorTimeSeriesChart from './charts/time_series.vue';
+import MonitorAnomalyChart from './charts/anomaly.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import MonitorEmptyChart from './charts/empty_chart.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
@@ -19,7 +20,6 @@ import { downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 export default {
   components: {
     MonitorSingleStatChart,
-    MonitorTimeSeriesChart,
     MonitorEmptyChart,
     Icon,
     GlDropdown,
@@ -67,6 +67,12 @@ export default {
       const data = new Blob([this.csvText], { type: 'text/plain' });
       return window.URL.createObjectURL(data);
     },
+    monitorChartComponent() {
+      if (this.isPanelType('anomaly-chart')) {
+        return MonitorAnomalyChart;
+      }
+      return MonitorTimeSeriesChart;
+    },
   },
   methods: {
     getGraphAlerts(queries) {
@@ -93,13 +99,14 @@ export default {
     v-if="isPanelType('single-stat') && graphDataHasMetrics"
     :graph-data="graphData"
   />
-  <monitor-time-series-chart
+  <component
+    :is="monitorChartComponent"
     v-else-if="graphDataHasMetrics"
     :graph-data="graphData"
     :deployment-data="deploymentData"
     :project-path="projectPath"
     :thresholds="getGraphAlertValues(graphData.queries)"
-    group-id="monitor-area-chart"
+    group-id="panel-type-chart"
   >
     <div class="d-flex align-items-center">
       <alert-widget
@@ -141,6 +148,6 @@ export default {
         </gl-dropdown-item>
       </gl-dropdown>
     </div>
-  </monitor-time-series-chart>
+  </component>
   <monitor-empty-chart v-else :graph-title="graphData.title" />
 </template>
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index 2836fe4fc26..1a1fcdd0e66 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -14,13 +14,28 @@ export const graphTypes = {
 };
 
 export const symbolSizes = {
+  anomaly: 8,
   default: 14,
 };
 
+export const areaOpacityValues = {
+  default: 0.2,
+};
+
+export const colorValues = {
+  primaryColor: '#1f78d1', // $blue-500 (see variables.scss)
+  anomalySymbol: '#db3b21',
+  anomalyAreaColor: '#1f78d1',
+};
+
 export const lineTypes = {
   default: 'solid',
 };
 
+export const lineWidths = {
+  default: 2,
+};
+
 export const timeWindows = {
   thirtyMinutes: __('30 minutes'),
   threeHours: __('3 hours'),
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index 00f188c1d5a..6747306a6d9 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -131,4 +131,20 @@ export const downloadCSVOptions = title => {
   return { category, action, label: 'Chart title', property: title };
 };
 
+/**
+ * This function validates the graph data contains exactly 3 queries plus
+ * value validations from graphDataValidatorForValues.
+ * @param {Object} isValues
+ * @param {Object} graphData  the graph data response from a prometheus request
+ * @returns {boolean} true if the data is valid
+ */
+export const graphDataValidatorForAnomalyValues = graphData => {
+  const anomalySeriesCount = 3; // metric, upper, lower
+  return (
+    graphData.queries &&
+    graphData.queries.length === anomalySeriesCount &&
+    graphDataValidatorForValues(false, graphData)
+  );
+};
+
 export default {};
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index fcc57da0649..4802cc2ad25 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -1,7 +1,6 @@
 <script>
-/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import projectFeatureSetting from './project_feature_setting.vue';
 import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
 import projectSettingRow from './project_setting_row.vue';
@@ -13,7 +12,7 @@ import {
 } from '../constants';
 import { toggleHiddenClassBySelector } from '../external';
 
-const PAGE_FEATURE_ACCESS_LEVEL = __('Everyone');
+const PAGE_FEATURE_ACCESS_LEVEL = s__('ProjectSettings|Everyone');
 
 export default {
   components: {
@@ -207,7 +206,10 @@ export default {
 <template>
   <div>
     <div class="project-visibility-setting">
-      <project-setting-row :help-path="visibilityHelpPath" label="Project visibility">
+      <project-setting-row
+        :help-path="visibilityHelpPath"
+        :label="s__('ProjectSettings|Project visibility')"
+      >
         <div class="project-feature-controls">
           <div class="select-wrapper">
             <select
@@ -220,17 +222,17 @@ export default {
               <option
                 :value="visibilityOptions.PRIVATE"
                 :disabled="!visibilityAllowed(visibilityOptions.PRIVATE)"
-                >{{ __('Private') }}</option
+                >{{ s__('ProjectSettings|Private') }}</option
               >
               <option
                 :value="visibilityOptions.INTERNAL"
                 :disabled="!visibilityAllowed(visibilityOptions.INTERNAL)"
-                >{{ __('Internal') }}</option
+                >{{ s__('ProjectSettings|Internal') }}</option
               >
               <option
                 :value="visibilityOptions.PUBLIC"
                 :disabled="!visibilityAllowed(visibilityOptions.PUBLIC)"
-                >{{ __('Public') }}</option
+                >{{ s__('ProjectSettings|Public') }}</option
               >
             </select>
             <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
@@ -243,14 +245,15 @@ export default {
             type="hidden"
             name="project[request_access_enabled]"
           />
-          <input v-model="requestAccessEnabled" type="checkbox" /> Allow users to request access
+          <input v-model="requestAccessEnabled" type="checkbox" />
+          {{ s__('ProjectSettings|Allow users to request access') }}
         </label>
       </project-setting-row>
     </div>
     <div :class="{ 'highlight-changes': highlightChangesClass }" class="project-feature-settings">
       <project-setting-row
-        label="Issues"
-        help-text="Lightweight issue tracking system for this project"
+        :label="s__('ProjectSettings|Issues')"
+        :help-text="s__('ProjectSettings|Lightweight issue tracking system for this project')"
       >
         <project-feature-setting
           v-model="issuesAccessLevel"
@@ -258,7 +261,10 @@ export default {
           name="project[project_feature_attributes][issues_access_level]"
         />
       </project-setting-row>
-      <project-setting-row label="Repository" help-text="View and edit files in this project">
+      <project-setting-row
+        :label="s__('ProjectSettings|Repository')"
+        :help-text="s__('ProjectSettings|View and edit files in this project')"
+      >
         <project-feature-setting
           v-model="repositoryAccessLevel"
           :options="featureAccessLevelOptions"
@@ -267,8 +273,8 @@ export default {
       </project-setting-row>
       <div class="project-feature-setting-group">
         <project-setting-row
-          label="Merge requests"
-          help-text="Submit changes to be merged upstream"
+          :label="s__('ProjectSettings|Merge requests')"
+          :help-text="s__('ProjectSettings|Submit changes to be merged upstream')"
         >
           <project-feature-setting
             v-model="mergeRequestsAccessLevel"
@@ -277,7 +283,10 @@ export default {
             name="project[project_feature_attributes][merge_requests_access_level]"
           />
         </project-setting-row>
-        <project-setting-row label="Pipelines" help-text="Build, test, and deploy your changes">
+        <project-setting-row
+          :label="s__('ProjectSettings|Pipelines')"
+          :help-text="s__('ProjectSettings|Build, test, and deploy your changes')"
+        >
           <project-feature-setting
             v-model="buildsAccessLevel"
             :options="repoFeatureAccessLevelOptions"
@@ -288,11 +297,17 @@ export default {
         <project-setting-row
           v-if="registryAvailable"
           :help-path="registryHelpPath"
-          label="Container registry"
-          help-text="Every project can have its own space to store its Docker images"
+          :label="s__('ProjectSettings|Container registry')"
+          :help-text="
+            s__('ProjectSettings|Every project can have its own space to store its Docker images')
+          "
         >
           <div v-if="showContainerRegistryPublicNote" class="text-muted">
-            {{ __('Note: the container registry is always visible when a project is public') }}
+            {{
+              s__(
+                'ProjectSettings|Note: the container registry is always visible when a project is public',
+              )
+            }}
           </div>
           <project-feature-toggle
             v-model="containerRegistryEnabled"
@@ -303,8 +318,10 @@ export default {
         <project-setting-row
           v-if="lfsAvailable"
           :help-path="lfsHelpPath"
-          label="Git Large File Storage"
-          help-text="Manages large files such as audio, video, and graphics files"
+          :label="s__('ProjectSettings|Git Large File Storage')"
+          :help-text="
+            s__('ProjectSettings|Manages large files such as audio, video, and graphics files')
+          "
         >
           <project-feature-toggle
             v-model="lfsEnabled"
@@ -315,8 +332,10 @@ export default {
         <project-setting-row
           v-if="packagesAvailable"
           :help-path="packagesHelpPath"
-          label="Packages"
-          help-text="Every project can have its own space to store its packages"
+          :label="s__('ProjectSettings|Packages')"
+          :help-text="
+            s__('ProjectSettings|Every project can have its own space to store its packages')
+          "
         >
           <project-feature-toggle
             v-model="packagesEnabled"
@@ -325,7 +344,10 @@ export default {
           />
         </project-setting-row>
       </div>
-      <project-setting-row label="Wiki" help-text="Pages for project documentation">
+      <project-setting-row
+        :label="s__('ProjectSettings|Wiki')"
+        :help-text="s__('ProjectSettings|Pages for project documentation')"
+      >
         <project-feature-setting
           v-model="wikiAccessLevel"
           :options="featureAccessLevelOptions"
@@ -333,8 +355,8 @@ export default {
         />
       </project-setting-row>
       <project-setting-row
-        label="Snippets"
-        help-text="Share code pastes with others out of Git repository"
+        :label="s__('ProjectSettings|Snippets')"
+        :help-text="s__('ProjectSettings|Share code pastes with others out of Git repository')"
       >
         <project-feature-setting
           v-model="snippetsAccessLevel"
@@ -346,7 +368,9 @@ export default {
         v-if="pagesAvailable && pagesAccessControlEnabled"
         :help-path="pagesHelpPath"
         :label="s__('ProjectSettings|Pages')"
-        :help-text="__('With GitLab Pages you can host your static websites on GitLab')"
+        :help-text="
+          s__('ProjectSettings|With GitLab Pages you can host your static websites on GitLab')
+        "
       >
         <project-feature-setting
           v-model="pagesAccessLevel"
@@ -358,10 +382,13 @@ export default {
     <project-setting-row v-if="canDisableEmails" class="mb-3">
       <label class="js-emails-disabled">
         <input :value="emailsDisabled" type="hidden" name="project[emails_disabled]" />
-        <input v-model="emailsDisabled" type="checkbox" /> {{ __('Disable email notifications') }}
+        <input v-model="emailsDisabled" type="checkbox" />
+        {{ s__('ProjectSettings|Disable email notifications') }}
       </label>
       <span class="form-text text-muted">{{
-        __('This setting will override user notification preferences for all project members.')
+        s__(
+          'ProjectSettings|This setting will override user notification preferences for all project members.',
+        )
       }}</span>
     </project-setting-row>
   </div>
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 171841178a3..81ae5143082 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -97,11 +97,13 @@ export default {
     },
   },
   methods: {
-    openRow() {
-      if (this.isFolder) {
+    openRow(e) {
+      if (e.target.tagName === 'A') return;
+
+      if (this.isFolder && !e.metaKey) {
         this.$router.push(this.routerLinkTo);
       } else {
-        visitUrl(this.url);
+        visitUrl(this.url, e.metaKey);
       }
     },
   },