Merge branch 'master' into jivl-update-katex

app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js

 import initSettingsPanels from '~/settings_panels';
 import SecretValues from '~/behaviors/secret_values';
+import AjaxVariableList from '~/ci_variable_list/ajax_variable_list';
 export default function () {
   // Initialize expandable settings panels
   initSettingsPanels();
+
   const runnerToken = document.querySelector('.js-secret-runner-token');
   if (runnerToken) {
     const runnerTokenSecretValue = new SecretValues({
@@ -12,11 +14,12 @@ export default function () {
     runnerTokenSecretValue.init();
   }
-  const secretVariableTable = document.querySelector('.js-secret-variable-table');
-  if (secretVariableTable) {
-    const secretVariableTableValues = new SecretValues({
-      container: secretVariableTable,
-    });
-    secretVariableTableValues.init();
-  }
+  const variableListEl = document.querySelector('.js-ci-variable-list-section');
+  // eslint-disable-next-line no-new
+  new AjaxVariableList({
+    container: variableListEl,
+    saveButton: variableListEl.querySelector('.js-secret-variables-save-button'),
+    errorBox: variableListEl.querySelector('.js-ci-variable-error-box'),
+    saveEndpoint: variableListEl.dataset.saveEndpoint,
+  });
 }

app/assets/javascripts/pages/search/init_filtered_search.js

-export default (page) => {
+export default ({ page }) => {
   const filteredSearchEnabled = gl.FilteredSearchManager && document.querySelector('.filtered-search');
   if (filteredSearchEnabled) {
-    const filteredSearchManager = new gl.FilteredSearchManager(page);
+    const filteredSearchManager = new gl.FilteredSearchManager({ page });
     filteredSearchManager.setup();
   }
 };

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

@@ -31,10 +31,9 @@
         type: String,
         required: true,
       },
-      confirmActionMessage: {
-        type: String,
-        required: false,
-        default: '',
+      id: {
+        type: Number,
+        required: true,
       },
     },
     data() {
@@ -49,11 +48,10 @@
     },
     methods: {
       onClick() {
-        if (this.confirmActionMessage !== '' && confirm(this.confirmActionMessage)) {
-          this.makeRequest();
-        } else if (this.confirmActionMessage === '') {
-          this.makeRequest();
-        }
+        eventHub.$emit('actionConfirmationModal', {
+          id: this.id,
+          callback: this.makeRequest,
+        });
       },
       makeRequest() {
         this.isLoading = true;

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

 <script>
   import pipelinesTableRowComponent from './pipelines_table_row.vue';
+  import stopConfirmationModal from './stop_confirmation_modal.vue';
+  import retryConfirmationModal from './retry_confirmation_modal.vue';
   /**
    * Pipelines Table Component.
@@ -9,6 +11,8 @@
   export default {
     components: {
       pipelinesTableRowComponent,
+      stopConfirmationModal,
+      retryConfirmationModal,
     },
     props: {
       pipelines: {
@@ -70,5 +74,7 @@
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
     />
+    <stop-confirmation-modal />
+    <retry-confirmation-modal />
   </div>
 </template>

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

@@ -305,6 +305,9 @@
           css-class="js-pipelines-retry-button btn-default btn-retry"
           title="Retry"
           icon="repeat"
+          :id="pipeline.id"
+          data-toggle="modal"
+          data-target="#retry-confirmation-modal"
         />
         <async-button-component
@@ -313,7 +316,9 @@
           css-class="js-pipelines-cancel-button btn-remove"
           title="Cancel"
           icon="close"
-          confirm-action-message="Are you sure you want to cancel this pipeline?"
+          :id="pipeline.id"
+          data-toggle="modal"
+          data-target="#stop-confirmation-modal"
         />
       </div>
     </div>

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

+<script>
+  import modal from '~/vue_shared/components/modal.vue';
+  import { s__, sprintf } from '~/locale';
+  import eventHub from '../event_hub';
+
+  export default {
+    components: {
+      modal,
+    },
+    data() {
+      return {
+        id: '',
+        callback: () => {},
+      };
+    },
+    computed: {
+      title() {
+        return sprintf(s__('Pipeline|Retry pipeline #%{id}?'), {
+          id: `'${this.id}'`,
+        }, false);
+      },
+      text() {
+        return sprintf(s__('Pipeline|You’re about to retry pipeline %{id}.'), {
+          id: `<strong>#${this.id}</strong>`,
+        }, false);
+      },
+      primaryButtonLabel() {
+        return s__('Pipeline|Retry pipeline');
+      },
+    },
+    created() {
+      eventHub.$on('actionConfirmationModal', this.updateModal);
+    },
+    beforeDestroy() {
+      eventHub.$off('actionConfirmationModal', this.updateModal);
+    },
+    methods: {
+      updateModal(action) {
+        this.id = action.id;
+        this.callback = action.callback;
+      },
+      onSubmit() {
+        this.callback();
+      },
+    },
+  };
+</script>
+
+<template>
+  <modal
+    id="retry-confirmation-modal"
+    :title="title"
+    :text="text"
+    kind="danger"
+    :primary-button-label="primaryButtonLabel"
+    @submit="onSubmit"
+  >
+    <template
+      slot="body"
+      slot-scope="props"
+    >
+      <p v-html="props.text"></p>
+    </template>
+  </modal>
+</template>

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

+<script>
+  import modal from '~/vue_shared/components/modal.vue';
+  import { s__, sprintf } from '~/locale';
+  import eventHub from '../event_hub';
+
+  export default {
+    components: {
+      modal,
+    },
+    data() {
+      return {
+        id: '',
+        callback: () => {},
+      };
+    },
+    computed: {
+      title() {
+        return sprintf(s__('Pipeline|Stop pipeline #%{id}?'), {
+          id: `'${this.id}'`,
+        }, false);
+      },
+      text() {
+        return sprintf(s__('Pipeline|You’re about to stop pipeline %{id}.'), {
+          id: `<strong>#${this.id}</strong>`,
+        }, false);
+      },
+      primaryButtonLabel() {
+        return s__('Pipeline|Stop pipeline');
+      },
+    },
+    created() {
+      eventHub.$on('actionConfirmationModal', this.updateModal);
+    },
+    beforeDestroy() {
+      eventHub.$off('actionConfirmationModal', this.updateModal);
+    },
+    methods: {
+      updateModal(action) {
+        this.id = action.id;
+        this.callback = action.callback;
+      },
+      onSubmit() {
+        this.callback();
+      },
+    },
+  };
+</script>
+
+<template>
+  <modal
+    id="stop-confirmation-modal"
+    :title="title"
+    :text="text"
+    kind="danger"
+    :primary-button-label="primaryButtonLabel"
+    @submit="onSubmit"
+  >
+    <template
+      slot="body"
+      slot-scope="props"
+    >
+      <p v-html="props.text"></p>
+    </template>
+  </modal>
+</template>

app/assets/javascripts/profile/profile.js

 /* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
 import Cookies from 'js-cookie';
-import Flash from '../flash';
-import { getPagePath } from '../lib/utils/common_utils';
+import { getPagePath } from '~/lib/utils/common_utils';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import flash from '../flash';
 ((global) => {
   class Profile {
@@ -57,8 +59,8 @@ import { getPagePath } from '../lib/utils/common_utils';
     onUpdateNotifs(e, data) {
       return data.saved ?
-        new Flash("Notification settings saved", "notice") :
-        new Flash("Failed to save new settings", "alert");
+        flash(__('Notification settings saved'), 'notice') :
+        flash(__('Failed to save new settings'));
     }
     saveForm() {
@@ -70,21 +72,18 @@ import { getPagePath } from '../lib/utils/common_utils';
         formData.append('user[avatar]', avatarBlob, 'avatar.png');
       }
-      return $.ajax({
+      axios({
+        method: this.form.attr('method'),
         url: this.form.attr('action'),
-        type: this.form.attr('method'),
         data: formData,
-        dataType: "json",
-        processData: false,
-        contentType: false,
-        success: response => new Flash(response.message, 'notice'),
-        error: jqXHR => new Flash(jqXHR.responseJSON.message, 'alert'),
-        complete: () => {
-          window.scrollTo(0, 0);
-          // Enable submit button after requests ends
-          return self.form.find(':input[disabled]').enable();
-        }
-      });
+      })
+      .then(({ data }) => flash(data.message, 'notice'))
+      .then(() => {
+        window.scrollTo(0, 0);
+        // Enable submit button after requests ends
+        self.form.find(':input[disabled]').enable();
+      })
+      .catch(error => flash(error.message));
     }
     setNewRepoCookie() {

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);

app/assets/javascripts/search_autocomplete.js

 /* eslint-disable no-return-assign, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-unused-vars, no-cond-assign, consistent-return, object-shorthand, prefer-arrow-callback, func-names, space-before-function-paren, prefer-template, quotes, class-methods-use-this, no-sequences, wrap-iife, no-lonely-if, no-else-return, no-param-reassign, vars-on-top, max-len */
+import axios from './lib/utils/axios_utils';
 import { isInGroupsPage, isInProjectPage, getGroupSlug, getProjectSlug } from './lib/utils/common_utils';
 /**
@@ -146,23 +147,25 @@ export default class SearchAutocomplete {
     this.loadingSuggestions = true;
-    return $.get(this.autocompletePath, {
-      project_id: this.projectId,
-      project_ref: this.projectRef,
-      term: term,
-    }, (response) => {
-      var firstCategory, i, lastCategory, len, suggestion;
+    return axios.get(this.autocompletePath, {
+      params: {
+        project_id: this.projectId,
+        project_ref: this.projectRef,
+        term: term,
+      },
+    }).then((response) => {
       // Hide dropdown menu if no suggestions returns
-      if (!response.length) {
+      if (!response.data.length) {
         this.disableAutocomplete();
         return;
       }
       const data = [];
       // List results
-      firstCategory = true;
-      for (i = 0, len = response.length; i < len; i += 1) {
-        suggestion = response[i];
+      let firstCategory = true;
+      let lastCategory;
+      for (let i = 0, len = response.data.length; i < len; i += 1) {
+        const suggestion = response.data[i];
         // Add group header before list each group
         if (lastCategory !== suggestion.category) {
           if (!firstCategory) {
@@ -177,7 +180,7 @@ export default class SearchAutocomplete {
           lastCategory = suggestion.category;
         }
         data.push({
-          id: (suggestion.category.toLowerCase()) + "-" + suggestion.id,
+          id: `${suggestion.category.toLowerCase()}-${suggestion.id}`,
           category: suggestion.category,
           text: suggestion.label,
           url: suggestion.url,
@@ -187,13 +190,17 @@ export default class SearchAutocomplete {
       if (data.length) {
         data.push('separator');
         data.push({
-          text: "Result name contains \"" + term + "\"",
-          url: "/search?search=" + term + "&project_id=" + (this.projectInputEl.val()) + "&group_id=" + (this.groupInputEl.val()),
+          text: `Result name contains "${term}"`,
+          url: `/search?search=${term}&project_id=${this.projectInputEl.val()}&group_id=${this.groupInputEl.val()}`,
         });
       }
-      return callback(data);
-    })
-    .always(() => { this.loadingSuggestions = false; });
+
+      callback(data);
+
+      this.loadingSuggestions = false;
+    }).catch(() => {
+      this.loadingSuggestions = false;
+    });
   }
   getCategoryContents() {

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

@@ -2,6 +2,7 @@
   import Flash from '../../../flash';
   import editForm from './edit_form.vue';
   import Icon from '../../../vue_shared/components/icon.vue';
+  import { __ } from '../../../locale';
   export default {
     components: {
@@ -40,8 +41,7 @@
         this.service.update('issue', { confidential })
           .then(() => location.reload())
           .catch(() => {
-            Flash(`Something went wrong trying to
-  change the confidentiality of this issue`);
+            Flash(__('Something went wrong trying to change the confidentiality of this issue'));
           });
       },
     },
@@ -58,7 +58,7 @@
       />
     </div>
     <div class="title hide-collapsed">
-      Confidentiality
+      {{ __('Confidentiality') }}
       <a
         v-if="isEditable"
         class="pull-right confidential-edit"
@@ -84,7 +84,7 @@
           aria-hidden="true"
           class="sidebar-item-icon inline"
         />
-        Not confidential
+        {{ __('Not confidential') }}
       </div>
       <div
         v-else
@@ -95,7 +95,7 @@
           aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
-        This issue is confidential
+        {{ __('This issue is confidential') }}
       </div>
     </div>
   </div>

app/assets/javascripts/sidebar/components/confidential/edit_form.vue

 <script>
   import editFormButtons from './edit_form_buttons.vue';
+  import { s__ } from '../../../locale';
   export default {
     components: {
@@ -19,6 +20,14 @@
         type: Function,
       },
     },
+    computed: {
+      confidentialityOnWarning() {
+        return s__('confidentiality|You are going to turn on the confidentiality. This means that only team members with <strong>at least Reporter access</strong> are able to see and leave comments on the issue.');
+      },
+      confidentialityOffWarning() {
+        return s__('confidentiality|You are going to turn off the confidentiality. This means <strong>everyone</strong> will be able to see and leave a comment on this issue.');
+      },
+    },
   };
 </script>
@@ -26,15 +35,13 @@
   <div class="dropdown open">
     <div class="dropdown-menu sidebar-item-warning-message">
       <div>
-        <p v-if="!isConfidential">
-          You are going to turn on the confidentiality. This means that only team members with
-          <strong>at least Reporter access</strong>
-          are able to see and leave comments on the issue.
+        <p
+          v-if="!isConfidential"
+          v-html="confidentialityOnWarning">
         </p>
-        <p v-else>
-          You are going to turn off the confidentiality. This means
-          <strong>everyone</strong>
-          will be able to see and leave a comment on this issue.
+        <p
+          v-else
+          v-html="confidentialityOffWarning">
         </p>
         <edit-form-buttons
           :is-confidential="isConfidential"

app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue

@@ -32,7 +32,7 @@ export default {
       class="btn btn-default append-right-10"
       @click="toggleForm"
     >
-      Cancel
+      {{ __('Cancel') }}
     </button>
     <button
       type="button"

app/assets/javascripts/sidebar/components/lock/edit_form.vue

 <script>
   import editFormButtons from './edit_form_buttons.vue';
   import issuableMixin from '../../../vue_shared/mixins/issuable';
+  import { __, sprintf } from '../../../locale';
   export default {
     components: {
@@ -25,6 +26,14 @@
         type: Function,
       },
     },
+    computed: {
+      lockWarning() {
+        return sprintf(__('Lock this %{issuableDisplayName}? Only <strong>project members</strong> will be able to comment.'), { issuableDisplayName: this.issuableDisplayName });
+      },
+      unlockWarning() {
+        return sprintf(__('Unlock this %{issuableDisplayName}? <strong>Everyone</strong> will be able to comment.'), { issuableDisplayName: this.issuableDisplayName });
+      },
+    },
   };
 </script>
@@ -33,19 +42,14 @@
     <div class="dropdown-menu sidebar-item-warning-message">
       <p
         class="text"
-        v-if="isLocked">
-        Unlock this {{ issuableDisplayName }}?
-        <strong>Everyone</strong>
-        will be able to comment.
+        v-if="isLocked"
+        v-html="unlockWarning">
       </p>
       <p
         class="text"
-        v-else>
-        Lock this {{ issuableDisplayName }}?
-        Only
-        <strong>project members</strong>
-        will be able to comment.
+        v-else
+        v-html="lockWarning">
       </p>
       <edit-form-buttons

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -72,7 +72,7 @@
     </div>
     <div class="title hide-collapsed">
-      Lock {{ issuableDisplayName }}
+      {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
       <button
         v-if="isEditable"
         class="pull-right lock-edit btn btn-blank"

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js

@@ -68,7 +68,7 @@ export default {
         <div class="compare-display-container">
           <div class="compare-display pull-left">
             <span class="compare-label">
-              Spent
+            {{ s__('TimeTracking|Spent') }}
             </span>
             <span class="compare-value spent">
               {{ timeSpentHumanReadable }}
@@ -76,7 +76,7 @@ export default {
           </div>
           <div class="compare-display estimated pull-right">
             <span class="compare-label">
-              Est
+              {{ s__('TimeTrackingEstimated|Est') }}
             </span>
             <span class="compare-value">
               {{ timeEstimateHumanReadable }}

app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js

@@ -9,7 +9,7 @@ export default {
   template: `
     <div class="time-tracking-estimate-only-pane">
       <span class="bold">
-        Estimated:
+        {{ s__('TimeTracking|Estimated:') }}
       </span>
       {{ timeEstimateHumanReadable }}
     </div>

app/assets/javascripts/sidebar/components/time_tracking/help_state.js

+import { sprintf, s__ } from '../../../locale';
+
 export default {
   name: 'time-tracking-help-state',
   props: {
@@ -10,33 +12,39 @@ export default {
     href() {
       return `${this.rootPath}help/workflow/time_tracking.md`;
     },
+    estimateText() {
+      return sprintf(
+        s__('estimateCommand|%{slash_command} will update the estimated time with the latest command.'), {
+          slash_command: '<code>/estimate</code>',
+        }, false,
+      );
+    },
+    spendText() {
+      return sprintf(
+        s__('spendCommand|%{slash_command} will update the sum of the time spent.'), {
+          slash_command: '<code>/spend</code>',
+        }, false,
+      );
+    },
   },
   template: `
     <div class="time-tracking-help-state">
       <div class="time-tracking-info">
         <h4>
-          Track time with quick actions
+          {{ __('Track time with quick actions') }}
         </h4>
         <p>
-          Quick actions can be used in the issues description and comment boxes.
+          {{ __('Quick actions can be used in the issues description and comment boxes.') }}
         </p>
-        <p>
-          <code>
-            /estimate
-          </code>
-          will update the estimated time with the latest command.
+        <p v-html="estimateText">
         </p>
-        <p>
-          <code>
-            /spend
-          </code>
-          will update the sum of the time spent.
+        <p v-html="spendText">
         </p>
         <a
           class="btn btn-default learn-more-button"
           :href="href"
         >
-          Learn more
+          {{ __('Learn more') }}
         </a>
       </div>
     </div>

app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js

@@ -3,7 +3,7 @@ export default {
   template: `
     <div class="time-tracking-no-tracking-pane">
       <span class="no-value">
-        No estimate or time spent
+        {{ __('No estimate or time spent') }}
       </span>
     </div>
   `,

app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import '~/smart_interval';
-import timeTracker from './time_tracker';
+import IssuableTimeTracker from './time_tracker.vue';
 import Store from '../../stores/sidebar_store';
 import Mediator from '../../sidebar_mediator';
@@ -16,7 +16,7 @@ export default {
     };
   },
   components: {
-    'issuable-time-tracker': timeTracker,
+    IssuableTimeTracker,
   },
   methods: {
     listenForQuickActions() {