Merge remote-tracking branch 'upstream/master' into qa-clone-with-deploy-key

* upstream/master: (69 commits)
  Change issue show page to group MRs by projects and namespaces
  Merge branch 'master-i18n' into 'master'
  Update sidekiq_style_guide.md
  Document all_queues.yml in sidekiq_style_guide.md
  Fix artifact creation
  Fix Error 500s creating merge requests with external issue tracker
  Addressed mr observations
  Clean new Flash() and stop disabling no-new (eslint) when possible
  Disable query limiting warnings for now on GitLab.com
  Dry up spec
  Add changelog entry
  Schedule PopulateUntrackedUploads if needed
  Fix orphan temp table untracked_files_for_uploads
  Fix last batch size equals max batch size error
  Revert "Merge branch 'rd-40552-gitlab-should-check-if-keys-are-valid-before-saving' into 'master'"
  Fix warning messages for promoting labels and milestones
  Fixed missing js selector for the realtime pipelines commit comp
  Reuse getter Add loading button for better UX
  Honour workhorse provided file name
  Fix a transient failure in db/post_migrate/20170717111152_cleanup_move_system_upload_folder_symlink.rb where symlink already exists
  ...

app/assets/javascripts/notes/stores/getters.js

@@ -8,6 +8,7 @@ export const getNotesDataByProp = state => prop => state.notesData[prop];
 export const getNoteableData = state => state.noteableData;
 export const getNoteableDataByProp = state => prop => state.noteableData[prop];
+export const issueState = state => state.noteableData.state;
 export const getUserData = state => state.userData || {};
 export const getUserDataByProp = state => prop => state.userData && state.userData[prop];

app/assets/javascripts/notes/stores/mutation_types.js

@@ -12,3 +12,7 @@ export const SHOW_PLACEHOLDER_NOTE = 'SHOW_PLACEHOLDER_NOTE';
 export const TOGGLE_AWARD = 'TOGGLE_AWARD';
 export const TOGGLE_DISCUSSION = 'TOGGLE_DISCUSSION';
 export const UPDATE_NOTE = 'UPDATE_NOTE';
+
+// Issue
+export const CLOSE_ISSUE = 'CLOSE_ISSUE';
+export const REOPEN_ISSUE = 'REOPEN_ISSUE';

app/assets/javascripts/notes/stores/mutations.js

@@ -152,4 +152,12 @@ export default {
       noteObj.notes.splice(noteObj.notes.indexOf(comment), 1, note);
     }
   },
+
+  [types.CLOSE_ISSUE](state) {
+    Object.assign(state.noteableData, { state: constants.CLOSED });
+  },
+
+  [types.REOPEN_ISSUE](state) {
+    Object.assign(state.noteableData, { state: constants.REOPENED });
+  },
 };

app/assets/javascripts/pages/projects/tree/show/index.js

@@ -14,7 +14,7 @@ export default () => {
   $('#tree-slider').waitForImages(() =>
     ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath));
-  const commitPipelineStatusEl = document.getElementById('commit-pipeline-status');
+  const commitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
   const statusLink = document.querySelector('.commit-actions .ci-status-link');
   if (statusLink != null) {
     statusLink.remove();

app/assets/javascripts/render_math.js

-/* global katex */
+import { __ } from './locale';
+import flash from './flash';
 // Renders math using KaTeX in any element with the
 // `js-render-math` class
@@ -8,15 +9,8 @@
 //   <code class="js-render-math"></div>
 //
-import { __ } from './locale';
-import axios from './lib/utils/axios_utils';
-import flash from './flash';
-
-// Only load once
-let katexLoaded = false;
-
 // Loop over all math elements and render math
-function renderWithKaTeX(elements) {
+function renderWithKaTeX(elements, katex) {
   elements.each(function katexElementsLoop() {
     const mathNode = $('<span></span>');
     const $this = $(this);
@@ -34,30 +28,10 @@ function renderWithKaTeX(elements) {
 export default function renderMath($els) {
   if (!$els.length) return;
-
-  if (katexLoaded) {
-    renderWithKaTeX($els);
-  } else {
-    axios.get(gon.katex_css_url)
-      .then(() => {
-        const css = $('<link>', {
-          rel: 'stylesheet',
-          type: 'text/css',
-          href: gon.katex_css_url,
-        });
-        css.appendTo('head');
-      })
-      .then(() => axios.get(gon.katex_js_url, {
-        responseType: 'text',
-      }))
-      .then(({ data }) => {
-        // Add katex js to our document
-        $.globalEval(data);
-      })
-      .then(() => {
-        katexLoaded = true;
-        renderWithKaTeX($els); // Run KaTeX
-      })
-      .catch(() => flash(__('An error occurred while rendering KaTeX')));
-  }
+  Promise.all([
+    import(/* webpackChunkName: 'katex' */ 'katex'),
+    import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.css'),
+  ]).then(([katex]) => {
+    renderWithKaTeX($els, katex);
+  }).catch(() => flash(__('An error occurred while rendering KaTeX')));
 }

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/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() {

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.js → app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

+<script>
 import timeTrackingHelpState from './help_state';
 import timeTrackingCollapsedState from './collapsed_state';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
@@ -8,7 +9,15 @@ import timeTrackingComparisonPane from './comparison_pane';
 import eventHub from '../../event_hub';
 export default {
-  name: 'issuable-time-tracker',
+  name: 'IssuableTimeTracker',
+  components: {
+    'time-tracking-collapsed-state': timeTrackingCollapsedState,
+    'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
+    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
+    'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
+    'time-tracking-comparison-pane': timeTrackingComparisonPane,
+    'time-tracking-help-state': timeTrackingHelpState,
+  },
   props: {
     time_estimate: {
       type: Number,
@@ -38,14 +47,6 @@ export default {
       showHelp: false,
     };
   },
-  components: {
-    'time-tracking-collapsed-state': timeTrackingCollapsedState,
-    'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
-    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
-    'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
-    'time-tracking-comparison-pane': timeTrackingComparisonPane,
-    'time-tracking-help-state': timeTrackingHelpState,
-  },
   computed: {
     timeSpent() {
       return this.time_spent;
@@ -81,6 +82,9 @@ export default {
       return !!this.showHelp;
     },
   },
+  created() {
+    eventHub.$on('timeTracker:updateData', this.update);
+  },
   methods: {
     toggleHelpState(show) {
       this.showHelp = show;
@@ -92,72 +96,73 @@ export default {
       this.human_time_spent = data.human_time_spent;
     },
   },
-  created() {
-    eventHub.$on('timeTracker:updateData', this.update);
-  },
-  template: `
-    <div
-      class="time_tracker time-tracking-component-wrap"
-      v-cloak
-    >
-      <time-tracking-collapsed-state
-        :show-comparison-state="showComparisonState"
-        :show-no-time-tracking-state="showNoTimeTrackingState"
-        :show-help-state="showHelpState"
-        :show-spent-only-state="showSpentOnlyState"
-        :show-estimate-only-state="showEstimateOnlyState"
+};
+</script>
+
+<template>
+  <div
+    class="time_tracker time-tracking-component-wrap"
+    v-cloak
+  >
+    <time-tracking-collapsed-state
+      :show-comparison-state="showComparisonState"
+      :show-no-time-tracking-state="showNoTimeTrackingState"
+      :show-help-state="showHelpState"
+      :show-spent-only-state="showSpentOnlyState"
+      :show-estimate-only-state="showEstimateOnlyState"
+      :time-spent-human-readable="timeSpentHumanReadable"
+      :time-estimate-human-readable="timeEstimateHumanReadable"
+    />
+    <div class="title hide-collapsed">
+      {{ __('Time tracking') }}
+      <div
+        class="help-button pull-right"
+        v-if="!showHelpState"
+        @click="toggleHelpState(true)"
+      >
+        <i
+          class="fa fa-question-circle"
+          aria-hidden="true"
+        >
+        </i>
+      </div>
+      <div
+        class="close-help-button pull-right"
+        v-if="showHelpState"
+        @click="toggleHelpState(false)"
+      >
+        <i
+          class="fa fa-close"
+          aria-hidden="true"
+        >
+        </i>
+      </div>
+    </div>
+    <div class="time-tracking-content hide-collapsed">
+      <time-tracking-estimate-only-pane
+        v-if="showEstimateOnlyState"
+        :time-estimate-human-readable="timeEstimateHumanReadable"
+      />
+      <time-tracking-spent-only-pane
+        v-if="showSpentOnlyState"
+        :time-spent-human-readable="timeSpentHumanReadable"
+      />
+      <time-tracking-no-tracking-pane
+        v-if="showNoTimeTrackingState"
+      />
+      <time-tracking-comparison-pane
+        v-if="showComparisonState"
+        :time-estimate="timeEstimate"
+        :time-spent="timeSpent"
         :time-spent-human-readable="timeSpentHumanReadable"
         :time-estimate-human-readable="timeEstimateHumanReadable"
       />
-      <div class="title hide-collapsed">
-        {{ __('Time tracking') }}
-        <div
-          class="help-button pull-right"
-          v-if="!showHelpState"
-          @click="toggleHelpState(true)"
-        >
-            <i
-              class="fa fa-question-circle"
-              aria-hidden="true"
-            />
-        </div>
-        <div
-          class="close-help-button pull-right"
+      <transition name="help-state-toggle">
+        <time-tracking-help-state
           v-if="showHelpState"
-          @click="toggleHelpState(false)"
-        >
-          <i
-            class="fa fa-close"
-            aria-hidden="true"
-          />
-        </div>
-      </div>
-      <div class="time-tracking-content hide-collapsed">
-        <time-tracking-estimate-only-pane
-          v-if="showEstimateOnlyState"
-          :time-estimate-human-readable="timeEstimateHumanReadable"
+          :root-path="rootPath"
         />
-        <time-tracking-spent-only-pane
-          v-if="showSpentOnlyState"
-          :time-spent-human-readable="timeSpentHumanReadable"
-        />
-        <time-tracking-no-tracking-pane
-          v-if="showNoTimeTrackingState"
-        />
-        <time-tracking-comparison-pane
-          v-if="showComparisonState"
-          :time-estimate="timeEstimate"
-          :time-spent="timeSpent"
-          :time-spent-human-readable="timeSpentHumanReadable"
-          :time-estimate-human-readable="timeEstimateHumanReadable"
-        />
-        <transition name="help-state-toggle">
-          <time-tracking-help-state
-            v-if="showHelpState"
-            :rootPath="rootPath"
-          />
-        </transition>
-      </div>
+      </transition>
     </div>
-  `,
-};
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js

-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>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue

+<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>

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

app/assets/javascripts/vue_shared/components/confirmation_input.vue

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

app/assets/javascripts/vue_shared/components/loading_button.vue

@@ -40,7 +40,7 @@
         required: false,
       },
       containerClass: {
-        type: String,
+        type: [String, Array, Object],
         required: false,
         default: 'btn btn-align-content',
       },

app/assets/stylesheets/framework.scss

@@ -21,7 +21,7 @@
 @import "framework/flash";
 @import "framework/forms";
 @import "framework/gfm";
-@import "framework/gitlab-theme";
+@import "framework/gitlab_theme";
 @import "framework/header";
 @import "framework/highlight";
 @import "framework/issue_box";
@@ -35,10 +35,10 @@
 @import "framework/pagination";
 @import "framework/panels";
 @import "framework/popup";
-@import "framework/secondary-navigation-elements";
+@import "framework/secondary_navigation_elements";
 @import "framework/selects";
 @import "framework/sidebar";
-@import "framework/contextual-sidebar";
+@import "framework/contextual_sidebar";
 @import "framework/tables";
 @import "framework/notes";
 @import "framework/tabs";
@@ -49,16 +49,16 @@
 @import "framework/zen";
 @import "framework/blank";
 @import "framework/wells";
-@import "framework/page-header";
+@import "framework/page_header";
 @import "framework/awards";
 @import "framework/images";
-@import "framework/broadcast-messages";
+@import "framework/broadcast_messages";
 @import "framework/emojis";
-@import "framework/emoji-sprites";
+@import "framework/emoji_sprites";
 @import "framework/icons";
 @import "framework/snippets";
 @import "framework/memory_graph";
 @import "framework/responsive_tables";
-@import "framework/stacked-progress-bar";
+@import "framework/stacked_progress_bar";
 @import "framework/ci_variable_list";
 @import "framework/feature_highlight";

app/assets/stylesheets/framework/common.scss

@@ -449,9 +449,11 @@ img.emoji {
 .prepend-top-10 { margin-top: 10px; }
 .prepend-top-15 { margin-top: 15px; }
 .prepend-top-default { margin-top: $gl-padding !important; }
+.prepend-top-16 { margin-top: 16px; }
 .prepend-top-20 { margin-top: 20px; }
 .prepend-left-4 { margin-left: 4px; }
 .prepend-left-5 { margin-left: 5px; }
+.prepend-left-8 { margin-left: 8px; }
 .prepend-left-10 { margin-left: 10px; }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }

app/assets/stylesheets/framework/dropdowns.scss

@@ -736,10 +736,6 @@
   }
 }
-.droplab-item-ignore {
-  pointer-events: none;
-}
-
 .pika-single.animate-picker.is-bound,
 .pika-single.animate-picker.is-bound.is-hidden {
   /*

app/assets/stylesheets/framework/forms.scss

@@ -182,6 +182,7 @@ label {
 .help-block {
   margin-bottom: 0;
+  margin-top: #{$grid-size / 2};
 }
 .gl-field-error {