Add latest changes from gitlab-org/gitlab@12-7-stable-ee

app/assets/javascripts/diffs/store/mutations.js

@@ -40,27 +40,33 @@ export default {
     Object.assign(state, { isBatchLoading });
   },
+  [types.SET_RETRIEVING_BATCHES](state, retrievingBatches) {
+    Object.assign(state, { retrievingBatches });
+  },
+
   [types.SET_DIFF_DATA](state, data) {
+    let files = state.diffFiles;
+
     if (
-      !(
-        gon &&
-        gon.features &&
-        gon.features.diffsBatchLoad &&
-        window.location.search.indexOf('diff_id') === -1
-      )
+      !(gon?.features?.diffsBatchLoad && window.location.search.indexOf('diff_id') === -1) &&
+      data.diff_files
     ) {
-      prepareDiffData(data);
+      files = prepareDiffData(data, files);
     }
     Object.assign(state, {
       ...convertObjectPropsToCamelCase(data),
+      diffFiles: files,
     });
   },
   [types.SET_DIFF_DATA_BATCH](state, data) {
-    prepareDiffData(data);
-    state.diffFiles.push(...data.diff_files);
+    const files = prepareDiffData(data, state.diffFiles);
+    Object.assign(state, {
+      ...convertObjectPropsToCamelCase(data),
+      diffFiles: files,
+    });
   },
   [types.RENDER_FILE](state, file) {
@@ -84,11 +90,11 @@ export default {
     if (!diffFile) return;
-    if (diffFile.highlighted_diff_lines) {
+    if (diffFile.highlighted_diff_lines.length) {
       diffFile.highlighted_diff_lines.find(l => l.line_code === lineCode).hasForm = hasForm;
     }
-    if (diffFile.parallel_diff_lines) {
+    if (diffFile.parallel_diff_lines.length) {
       const line = diffFile.parallel_diff_lines.find(l => {
         const { left, right } = l;
@@ -149,13 +155,13 @@ export default {
   },
   [types.EXPAND_ALL_FILES](state) {
-    state.diffFiles = state.diffFiles.map(file => ({
-      ...file,
-      viewer: {
-        ...file.viewer,
-        collapsed: false,
-      },
-    }));
+    state.diffFiles.forEach(file => {
+      Object.assign(file, {
+        viewer: Object.assign(file.viewer, {
+          collapsed: false,
+        }),
+      });
+    });
   },
   [types.SET_LINE_DISCUSSIONS_FOR_FILE](state, { discussion, diffPositionByLineCode, hash }) {
@@ -173,16 +179,19 @@ export default {
     const mapDiscussions = (line, extraCheck = () => true) => ({
       ...line,
       discussions: extraCheck()
-        ? line.discussions
+        ? line.discussions &&
+          line.discussions
             .filter(() => !line.discussions.some(({ id }) => discussion.id === id))
             .concat(lineCheck(line) ? discussion : line.discussions)
         : [],
     });
     const setDiscussionsExpanded = line => {
-      const isLineNoteTargeted = line.discussions.some(
-        disc => disc.notes && disc.notes.find(note => hash === `note_${note.id}`),
-      );
+      const isLineNoteTargeted =
+        line.discussions &&
+        line.discussions.some(
+          disc => disc.notes && disc.notes.find(note => hash === `note_${note.id}`),
+        );
       return {
         ...line,
@@ -193,29 +202,29 @@ export default {
       };
     };
-    state.diffFiles = state.diffFiles.map(diffFile => {
-      if (diffFile.file_hash === fileHash) {
-        const file = { ...diffFile };
-
-        if (file.highlighted_diff_lines) {
-          file.highlighted_diff_lines = file.highlighted_diff_lines.map(line =>
-            setDiscussionsExpanded(lineCheck(line) ? mapDiscussions(line) : line),
-          );
+    state.diffFiles.forEach(file => {
+      if (file.file_hash === fileHash) {
+        if (file.highlighted_diff_lines.length) {
+          file.highlighted_diff_lines.forEach(line => {
+            Object.assign(
+              line,
+              setDiscussionsExpanded(lineCheck(line) ? mapDiscussions(line) : line),
+            );
+          });
         }
-        if (file.parallel_diff_lines) {
-          file.parallel_diff_lines = file.parallel_diff_lines.map(line => {
+        if (file.parallel_diff_lines.length) {
+          file.parallel_diff_lines.forEach(line => {
             const left = line.left && lineCheck(line.left);
             const right = line.right && lineCheck(line.right);
             if (left || right) {
-              return {
-                ...line,
+              Object.assign(line, {
                 left: line.left ? setDiscussionsExpanded(mapDiscussions(line.left)) : null,
                 right: line.right
                   ? setDiscussionsExpanded(mapDiscussions(line.right, () => !left))
                   : null,
-              };
+              });
             }
             return line;
@@ -223,15 +232,15 @@ export default {
         }
         if (!file.parallel_diff_lines || !file.highlighted_diff_lines) {
-          file.discussions = (file.discussions || [])
+          const newDiscussions = (file.discussions || [])
             .filter(d => d.id !== discussion.id)
             .concat(discussion);
-        }
-        return file;
+          Object.assign(file, {
+            discussions: newDiscussions,
+          });
+        }
       }
-
-      return diffFile;
     });
   },
@@ -255,9 +264,9 @@ export default {
   [types.TOGGLE_LINE_DISCUSSIONS](state, { fileHash, lineCode, expanded }) {
     const selectedFile = state.diffFiles.find(f => f.file_hash === fileHash);
-    updateLineInFile(selectedFile, lineCode, line =>
-      Object.assign(line, { discussionsExpanded: expanded }),
-    );
+    updateLineInFile(selectedFile, lineCode, line => {
+      Object.assign(line, { discussionsExpanded: expanded });
+    });
   },
   [types.TOGGLE_FOLDER_OPEN](state, path) {

app/assets/javascripts/diffs/store/utils.js

@@ -185,6 +185,7 @@ export function addContextLines(options) {
  * Trims the first char of the `richText` property when it's either a space or a diff symbol.
  * @param {Object} line
  * @returns {Object}
+ * @deprecated
  */
 export function trimFirstCharOfLineContent(line = {}) {
   // eslint-disable-next-line no-param-reassign
@@ -212,79 +213,171 @@ function getLineCode({ left, right }, index) {
   return index;
 }
-// This prepares and optimizes the incoming diff data from the server
-// by setting up incremental rendering and removing unneeded data
-export function prepareDiffData(diffData) {
-  const filesLength = diffData.diff_files.length;
-  let showingLines = 0;
-  for (let i = 0; i < filesLength; i += 1) {
-    const file = diffData.diff_files[i];
-
-    if (file.parallel_diff_lines) {
-      const linesLength = file.parallel_diff_lines.length;
-      for (let u = 0; u < linesLength; u += 1) {
-        const line = file.parallel_diff_lines[u];
-
-        line.line_code = getLineCode(line, u);
-        if (line.left) {
-          line.left = trimFirstCharOfLineContent(line.left);
-          line.left.discussions = [];
-          line.left.hasForm = false;
-        }
-        if (line.right) {
-          line.right = trimFirstCharOfLineContent(line.right);
-          line.right.discussions = [];
-          line.right.hasForm = false;
-        }
+function diffFileUniqueId(file) {
+  return `${file.content_sha}-${file.file_hash}`;
+}
+
+function combineDiffFilesWithPriorFiles(files, prior = []) {
+  files.forEach(file => {
+    const id = diffFileUniqueId(file);
+    const oldMatch = prior.find(oldFile => diffFileUniqueId(oldFile) === id);
+
+    if (oldMatch) {
+      const missingInline = !file.highlighted_diff_lines;
+      const missingParallel = !file.parallel_diff_lines;
+
+      if (missingInline) {
+        Object.assign(file, {
+          highlighted_diff_lines: oldMatch.highlighted_diff_lines,
+        });
       }
-    }
-    if (file.highlighted_diff_lines) {
-      const linesLength = file.highlighted_diff_lines.length;
-      for (let u = 0; u < linesLength; u += 1) {
-        const line = file.highlighted_diff_lines[u];
-        Object.assign(line, {
-          ...trimFirstCharOfLineContent(line),
-          discussions: [],
-          hasForm: false,
+      if (missingParallel) {
+        Object.assign(file, {
+          parallel_diff_lines: oldMatch.parallel_diff_lines,
         });
       }
-      showingLines += file.parallel_diff_lines.length;
+    }
+  });
+
+  return files;
+}
+
+function ensureBasicDiffFileLines(file) {
+  const missingInline = !file.highlighted_diff_lines;
+  const missingParallel = !file.parallel_diff_lines;
+
+  Object.assign(file, {
+    highlighted_diff_lines: missingInline ? [] : file.highlighted_diff_lines,
+    parallel_diff_lines: missingParallel ? [] : file.parallel_diff_lines,
+  });
+
+  return file;
+}
+
+function cleanRichText(text) {
+  return text ? text.replace(/^[+ -]/, '') : undefined;
+}
+
+function prepareLine(line) {
+  return Object.assign(line, {
+    rich_text: cleanRichText(line.rich_text),
+    discussionsExpanded: true,
+    discussions: [],
+    hasForm: false,
+    text: undefined,
+  });
+}
+
+function prepareDiffFileLines(file) {
+  const inlineLines = file.highlighted_diff_lines;
+  const parallelLines = file.parallel_diff_lines;
+  let parallelLinesCount = 0;
+
+  inlineLines.forEach(prepareLine);
+
+  parallelLines.forEach((line, index) => {
+    Object.assign(line, { line_code: getLineCode(line, index) });
+
+    if (line.left) {
+      parallelLinesCount += 1;
+      prepareLine(line.left);
     }
-    const name = (file.viewer && file.viewer.name) || diffViewerModes.text;
+    if (line.right) {
+      parallelLinesCount += 1;
+      prepareLine(line.right);
+    }
     Object.assign(file, {
-      renderIt: showingLines < LINES_TO_BE_RENDERED_DIRECTLY,
-      collapsed: name === diffViewerModes.text && showingLines > MAX_LINES_TO_BE_RENDERED,
-      isShowingFullFile: false,
-      isLoadingFullFile: false,
-      discussions: [],
-      renderingLines: false,
+      inlineLinesCount: inlineLines.length,
+      parallelLinesCount,
     });
-  }
+  });
+
+  return file;
 }
-export function getDiffPositionByLineCode(diffFiles) {
-  return diffFiles.reduce((acc, diffFile) => {
-    // We can only use highlightedDiffLines to create the map of diff lines because
-    // highlightedDiffLines will also include every parallel diff line in it.
-    if (diffFile.highlighted_diff_lines) {
+function getVisibleDiffLines(file) {
+  return Math.max(file.inlineLinesCount, file.parallelLinesCount);
+}
+
+function finalizeDiffFile(file) {
+  const name = (file.viewer && file.viewer.name) || diffViewerModes.text;
+  const lines = getVisibleDiffLines(file);
+
+  Object.assign(file, {
+    renderIt: lines < LINES_TO_BE_RENDERED_DIRECTLY,
+    collapsed: name === diffViewerModes.text && lines > MAX_LINES_TO_BE_RENDERED,
+    isShowingFullFile: false,
+    isLoadingFullFile: false,
+    discussions: [],
+    renderingLines: false,
+  });
+
+  return file;
+}
+
+export function prepareDiffData(diffData, priorFiles) {
+  return combineDiffFilesWithPriorFiles(diffData.diff_files, priorFiles)
+    .map(ensureBasicDiffFileLines)
+    .map(prepareDiffFileLines)
+    .map(finalizeDiffFile);
+}
+
+export function getDiffPositionByLineCode(diffFiles, useSingleDiffStyle) {
+  let lines = [];
+  const hasInlineDiffs = diffFiles.some(file => file.highlighted_diff_lines.length > 0);
+
+  if (!useSingleDiffStyle || hasInlineDiffs) {
+    // In either of these cases, we can use `highlighted_diff_lines` because
+    // that will include all of the parallel diff lines, too
+
+    lines = diffFiles.reduce((acc, diffFile) => {
       diffFile.highlighted_diff_lines.forEach(line => {
-        if (line.line_code) {
-          acc[line.line_code] = {
-            base_sha: diffFile.diff_refs.base_sha,
-            head_sha: diffFile.diff_refs.head_sha,
-            start_sha: diffFile.diff_refs.start_sha,
-            new_path: diffFile.new_path,
-            old_path: diffFile.old_path,
-            old_line: line.old_line,
-            new_line: line.new_line,
-            line_code: line.line_code,
-            position_type: 'text',
-          };
+        acc.push({ file: diffFile, line });
+      });
+
+      return acc;
+    }, []);
+  } else {
+    // If we're in single diff view mode and the inline lines haven't been
+    // loaded yet, we need to parse the parallel lines
+
+    lines = diffFiles.reduce((acc, diffFile) => {
+      diffFile.parallel_diff_lines.forEach(pair => {
+        // It's possible for a parallel line to have an opposite line that doesn't exist
+        // For example: *deleted* lines will have `null` right lines, while
+        // *added* lines will have `null` left lines.
+        // So we have to check each line before we push it onto the array so we're not
+        // pushing null line diffs
+
+        if (pair.left) {
+          acc.push({ file: diffFile, line: pair.left });
+        }
+
+        if (pair.right) {
+          acc.push({ file: diffFile, line: pair.right });
         }
       });
+
+      return acc;
+    }, []);
+  }
+
+  return lines.reduce((acc, { file, line }) => {
+    if (line.line_code) {
+      acc[line.line_code] = {
+        base_sha: file.diff_refs.base_sha,
+        head_sha: file.diff_refs.head_sha,
+        start_sha: file.diff_refs.start_sha,
+        new_path: file.new_path,
+        old_path: file.old_path,
+        old_line: line.old_line,
+        new_line: line.new_line,
+        line_code: line.line_code,
+        position_type: 'text',
+      };
     }
     return acc;
@@ -462,47 +555,47 @@ export const convertExpandLines = ({
 export const idleCallback = cb => requestIdleCallback(cb);
-export const updateLineInFile = (selectedFile, lineCode, updateFn) => {
-  if (selectedFile.parallel_diff_lines) {
-    const targetLine = selectedFile.parallel_diff_lines.find(
-      line =>
-        (line.left && line.left.line_code === lineCode) ||
-        (line.right && line.right.line_code === lineCode),
-    );
-    if (targetLine) {
-      const side = targetLine.left && targetLine.left.line_code === lineCode ? 'left' : 'right';
-      updateFn(targetLine[side]);
-    }
-  }
-  if (selectedFile.highlighted_diff_lines) {
-    const targetInlineLine = selectedFile.highlighted_diff_lines.find(
-      line => line.line_code === lineCode,
-    );
-    if (targetInlineLine) {
-      updateFn(targetInlineLine);
-    }
-  }
+function getLinesFromFileByLineCode(file, lineCode) {
+  const parallelLines = file.parallel_diff_lines;
+  const inlineLines = file.highlighted_diff_lines;
+  const matchesCode = line => line.line_code === lineCode;
+  return [
+    ...parallelLines.reduce((acc, line) => {
+      if (line.left) {
+        acc.push(line.left);
+      }
+      if (line.right) {
+        acc.push(line.right);
+      }
+
+      return acc;
+    }, []),
+    ...inlineLines,
+  ].filter(matchesCode);
+}
+
+export const updateLineInFile = (selectedFile, lineCode, updateFn) => {
+  getLinesFromFileByLineCode(selectedFile, lineCode).forEach(updateFn);
 };
 export const allDiscussionWrappersExpanded = diff => {
-  const discussionsExpandedArray = [];
-  if (diff.parallel_diff_lines) {
-    diff.parallel_diff_lines.forEach(line => {
-      if (line.left && line.left.discussions.length) {
-        discussionsExpandedArray.push(line.left.discussionsExpanded);
-      }
-      if (line.right && line.right.discussions.length) {
-        discussionsExpandedArray.push(line.right.discussionsExpanded);
-      }
-    });
-  } else if (diff.highlighted_diff_lines) {
-    diff.highlighted_diff_lines.forEach(line => {
-      if (line.discussions.length) {
-        discussionsExpandedArray.push(line.discussionsExpanded);
-      }
-    });
-  }
-  return discussionsExpandedArray.every(el => el);
+  let discussionsExpanded = true;
+  const changeExpandedResult = line => {
+    if (line && line.discussions.length) {
+      discussionsExpanded = discussionsExpanded && line.discussionsExpanded;
+    }
+  };
+
+  diff.parallel_diff_lines.forEach(line => {
+    changeExpandedResult(line.left);
+    changeExpandedResult(line.right);
+  });
+
+  diff.highlighted_diff_lines.forEach(line => {
+    changeExpandedResult(line);
+  });
+
+  return discussionsExpanded;
 };

app/assets/javascripts/droplab/drop_down.js

@@ -101,6 +101,11 @@ class DropDown {
   render(data) {
     const children = data ? data.map(this.renderChildren.bind(this)) : [];
+
+    if (this.list.querySelector('.filter-dropdown-loading')) {
+      return;
+    }
+
     const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
     renderableList.innerHTML = children.join('');

app/assets/javascripts/dropzone_input.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Dropzone from 'dropzone';
 import _ from 'underscore';
 import './behaviors/preview_markdown';
+import PasteMarkdownTable from './behaviors/markdown/paste_markdown_table';
 import csrf from './lib/utils/csrf';
 import axios from './lib/utils/axios_utils';
 import { n__, __ } from '~/locale';
@@ -173,14 +174,25 @@ export default function dropzoneInput(form) {
   // eslint-disable-next-line consistent-return
   handlePaste = event => {
     const pasteEvent = event.originalEvent;
-    if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
-      const image = isImage(pasteEvent);
-      if (image) {
+    const { clipboardData } = pasteEvent;
+    if (clipboardData && clipboardData.items) {
+      const converter = new PasteMarkdownTable(clipboardData);
+      // Apple Numbers copies a table as an image, HTML, and text, so
+      // we need to check for the presence of a table first.
+      if (converter.isTable()) {
         event.preventDefault();
-        const filename = getFilename(pasteEvent) || 'image.png';
-        const text = `{{${filename}}}`;
+        const text = converter.convertToTableMarkdown();
         pasteText(text);
-        return uploadFile(image.getAsFile(), filename);
+      } else {
+        const image = isImage(pasteEvent);
+
+        if (image) {
+          event.preventDefault();
+          const filename = getFilename(pasteEvent) || 'image.png';
+          const text = `{{${filename}}}`;
+          pasteText(text);
+          return uploadFile(image.getAsFile(), filename);
+        }
       }
     }
   };

app/assets/javascripts/due_date_select.js

@@ -116,11 +116,13 @@ class DueDateSelect {
   }
   updateIssueBoardIssue() {
+    // eslint-disable-next-line no-jquery/no-fade
     this.$loading.fadeIn();
     this.$dropdown.trigger('loading.gl.dropdown');
     this.$selectbox.hide();
     this.$value.css('display', '');
     const fadeOutLoader = () => {
+      // eslint-disable-next-line no-jquery/no-fade
       this.$loading.fadeOut();
     };
@@ -135,6 +137,7 @@ class DueDateSelect {
     const hasDueDate = this.displayedDate !== __('None');
     const displayedDateStyle = hasDueDate ? 'bold' : 'no-value';
+    // eslint-disable-next-line no-jquery/no-fade
     this.$loading.removeClass('hidden').fadeIn();
     if (isDropdown) {
@@ -158,6 +161,7 @@ class DueDateSelect {
       }
       this.$sidebarCollapsedValue.attr('data-original-title', tooltipText);
+      // eslint-disable-next-line no-jquery/no-fade
       return this.$loading.fadeOut();
     });
   }

app/assets/javascripts/environments/components/environment_item.vue

 <script>
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
-import { format } from 'timeago.js';
 import _ from 'underscore';
 import { GlTooltipDirective } from '@gitlab/ui';
-import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
+import { __, sprintf } from '~/locale';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import CommitComponent from '~/vue_shared/components/commit.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
-import { __, sprintf } from '~/locale';
+import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
+import eventHub from '../event_hub';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
-import StopComponent from './environment_stop.vue';
+import MonitoringButtonComponent from './environment_monitoring.vue';
+import PinComponent from './environment_pin.vue';
 import RollbackComponent from './environment_rollback.vue';
+import StopComponent from './environment_stop.vue';
 import TerminalButtonComponent from './environment_terminal_button.vue';
-import MonitoringButtonComponent from './environment_monitoring.vue';
-import CommitComponent from '../../vue_shared/components/commit.vue';
-import eventHub from '../event_hub';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 /**
  * Environment Item Component
@@ -26,21 +27,22 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 export default {
   components: {
-    CommitComponent,
-    Icon,
     ActionsComponent,
+    CommitComponent,
     ExternalUrlComponent,
-    StopComponent,
+    Icon,
+    MonitoringButtonComponent,
+    PinComponent,
     RollbackComponent,
+    StopComponent,
     TerminalButtonComponent,
-    MonitoringButtonComponent,
     TooltipOnTruncate,
     UserAvatarLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [environmentItemMixin],
+  mixins: [environmentItemMixin, timeagoMixin],
   props: {
     canReadEnvironment: {
@@ -52,7 +54,12 @@ export default {
     model: {
       type: Object,
       required: true,
-      default: () => ({}),
+    },
+
+    shouldShowAutoStopDate: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
     tableData: {
@@ -76,6 +83,16 @@ export default {
       return false;
     },
+    /**
+     * Checkes whether the row displayed is a folder.
+     *
+     * @returns {Boolean}
+     */
+
+    isFolder() {
+      return this.model.isFolder;
+    },
+
     /**
      * Checkes whether the environment is protected.
      * (`is_protected` currently only set in EE)
@@ -112,24 +129,64 @@ export default {
     },
     /**
-     * Verifies if the date to be shown is present.
+     * Verifies if the autostop date is present.
+     *
+     * @returns {Boolean}
+     */
+    canShowAutoStopDate() {
+      if (!this.model.auto_stop_at) {
+        return false;
+      }
+
+      const autoStopDate = new Date(this.model.auto_stop_at);
+      const now = new Date();
+
+      return now < autoStopDate;
+    },
+
+    /**
+     * Human readable deployment date.
+     *
+     * @returns {String}
+     */
+    autoStopDate() {
+      if (this.canShowAutoStopDate) {
+        return {
+          formatted: this.timeFormatted(this.model.auto_stop_at),
+          tooltip: this.tooltipTitle(this.model.auto_stop_at),
+        };
+      }
+      return {
+        formatted: '',
+        tooltip: '',
+      };
+    },
+
+    /**
+     * Verifies if the deployment date is present.
      *
      * @returns {Boolean|Undefined}
      */
-    canShowDate() {
+    canShowDeploymentDate() {
       return this.model && this.model.last_deployment && this.model.last_deployment.deployed_at;
     },
     /**
-     * Human readable date.
+     * Human readable deployment date.
      *
      * @returns {String}
      */
     deployedDate() {
-      if (this.canShowDate) {
-        return format(this.model.last_deployment.deployed_at);
+      if (this.canShowDeploymentDate) {
+        return {
+          formatted: this.timeFormatted(this.model.last_deployment.deployed_at),
+          tooltip: this.tooltipTitle(this.model.last_deployment.deployed_at),
+        };
       }
-      return '';
+      return {
+        formatted: '',
+        tooltip: '',
+      };
     },
     actions() {
@@ -344,6 +401,15 @@ export default {
       return {};
     },
+    /**
+     * Checkes whether to display no deployment text.
+     *
+     * @returns {Boolean}
+     */
+    showNoDeployments() {
+      return !this.hasLastDeploymentKey && !this.isFolder;
+    },
+
     /**
      * Verifies if the build name column should be rendered by verifing
      * if all the information needed is present
@@ -353,7 +419,7 @@ export default {
      */
     shouldRenderBuildName() {
       return (
-        !this.model.isFolder &&
+        !this.isFolder &&
         !_.isEmpty(this.model.last_deployment) &&
         !_.isEmpty(this.model.last_deployment.deployable)
       );
@@ -383,11 +449,7 @@ export default {
      * @return {String}
      */
     externalURL() {
-      if (this.model && this.model.external_url) {
-        return this.model.external_url;
-      }
-
-      return '';
+      return this.model.external_url || '';
     },
     /**
@@ -399,26 +461,22 @@ export default {
      */
     shouldRenderDeploymentID() {
       return (
-        !this.model.isFolder &&
+        !this.isFolder &&
         !_.isEmpty(this.model.last_deployment) &&
         this.model.last_deployment.iid !== undefined
       );
     },
     environmentPath() {
-      if (this.model && this.model.environment_path) {
-        return this.model.environment_path;
-      }
-
-      return '';
+      return this.model.environment_path || '';
     },
     monitoringUrl() {
-      if (this.model && this.model.metrics_path) {
-        return this.model.metrics_path;
-      }
-      return '';
+      return this.model.metrics_path || '';
+    },
+    autoStopUrl() {
+      return this.model.cancel_auto_stop_path || '';
     },
     displayEnvironmentActions() {
@@ -447,7 +505,7 @@ export default {
   <div
     :class="{
       'js-child-row environment-child-row': model.isChildren,
-      'folder-row': model.isFolder,
+      'folder-row': isFolder,
     }"
     class="gl-responsive-table-row"
     role="row"
@@ -457,7 +515,7 @@ export default {
       :class="tableData.name.spacing"
       role="gridcell"
     >
-      <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
+      <div v-if="!isFolder" class="table-mobile-header" role="rowheader">
         {{ tableData.name.title }}
       </div>
@@ -466,7 +524,7 @@ export default {
       </span>
       <span
-        v-if="!model.isFolder"
+        v-if="!isFolder"
         v-gl-tooltip
         :title="model.name"
         class="environment-name table-mobile-content"
@@ -506,7 +564,7 @@ export default {
         {{ deploymentInternalId }}
       </span>
-      <span v-if="!model.isFolder && deploymentHasUser" class="text-break-word">
+      <span v-if="!isFolder && deploymentHasUser" class="text-break-word">
         by
         <user-avatar-link
           :link-href="deploymentUser.web_url"
@@ -516,6 +574,10 @@ export default {
           class="js-deploy-user-container float-none"
         />
       </span>
+
+      <div v-if="showNoDeployments" class="commit-title table-mobile-content">
+        {{ s__('Environments|No deployments yet') }}
+      </div>
     </div>
     <div
@@ -536,14 +598,8 @@ export default {
       </a>
     </div>
-    <div
-      v-if="!model.isFolder"
-      class="table-section"
-      :class="tableData.commit.spacing"
-      role="gridcell"
-    >
+    <div v-if="!isFolder" class="table-section" :class="tableData.commit.spacing" role="gridcell">
       <div role="rowheader" class="table-mobile-header">{{ tableData.commit.title }}</div>
-
       <div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
         <commit-component
           :tag="commitTag"
@@ -554,31 +610,51 @@ export default {
           :author="commitAuthor"
         />
       </div>
-      <div v-if="!hasLastDeploymentKey" class="commit-title table-mobile-content">
-        {{ s__('Environments|No deployments yet') }}
-      </div>
+    </div>
+
+    <div v-if="!isFolder" class="table-section" :class="tableData.date.spacing" role="gridcell">
+      <div role="rowheader" class="table-mobile-header">{{ tableData.date.title }}</div>
+      <span
+        v-if="canShowDeploymentDate"
+        v-gl-tooltip
+        :title="deployedDate.tooltip"
+        class="environment-created-date-timeago table-mobile-content flex-truncate-parent"
+      >
+        <span class="flex-truncate-child">
+          {{ deployedDate.formatted }}
+        </span>
+      </span>
     </div>
     <div
-      v-if="!model.isFolder"
+      v-if="!isFolder && shouldShowAutoStopDate"
       class="table-section"
-      :class="tableData.date.spacing"
+      :class="tableData.autoStop.spacing"
       role="gridcell"
     >
-      <div role="rowheader" class="table-mobile-header">{{ tableData.date.title }}</div>
-
-      <span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
-        {{ deployedDate }}
+      <div role="rowheader" class="table-mobile-header">{{ tableData.autoStop.title }}</div>
+      <span
+        v-if="canShowAutoStopDate"
+        v-gl-tooltip
+        :title="autoStopDate.tooltip"
+        class="table-mobile-content flex-truncate-parent"
+      >
+        <span class="flex-truncate-child js-auto-stop">{{ autoStopDate.formatted }}</span>
       </span>
     </div>
     <div
-      v-if="!model.isFolder && displayEnvironmentActions"
+      v-if="!isFolder && displayEnvironmentActions"
       class="table-section table-button-footer"
       :class="tableData.actions.spacing"
       role="gridcell"
     >
       <div class="btn-group table-action-buttons" role="group">
+        <pin-component
+          v-if="canShowAutoStopDate && shouldShowAutoStopDate"
+          :auto-stop-url="autoStopUrl"
+        />
+
         <external-url-component
           v-if="externalURL && canReadEnvironment"
           :external-url="externalURL"

app/assets/javascripts/environments/components/environment_pin.vue

+<script>
+/**
+ * Renders a prevent auto-stop button.
+ * Used in environments table.
+ */
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
+import eventHub from '../event_hub';
+
+export default {
+  components: {
+    Icon,
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    autoStopUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onPinClick() {
+      eventHub.$emit('cancelAutoStop', this.autoStopUrl);
+    },
+  },
+  title: __('Prevent environment from auto-stopping'),
+};
+</script>
+<template>
+  <gl-button v-gl-tooltip :title="$options.title" :aria-label="$options.title" @click="onPinClick">
+    <icon name="thumbtack" />
+  </gl-button>
+</template>

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -8,7 +8,6 @@
 import { GlTooltipDirective, GlLoadingIcon, GlModalDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 import eventHub from '../event_hub';
 export default {
@@ -16,7 +15,6 @@ export default {
     Icon,
     GlLoadingIcon,
     GlButton,
-    ConfirmRollbackModal,
   },
   directives: {
     GlTooltip: GlTooltipDirective,

app/assets/javascripts/environments/components/environments_table.vue

@@ -6,6 +6,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import _ from 'underscore';
 import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin';
 import { s__ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import EnvironmentItem from './environment_item.vue';
 export default {
@@ -16,7 +17,7 @@ export default {
     CanaryDeploymentCallout: () =>
       import('ee_component/environments/components/canary_deployment_callout.vue'),
   },
-  mixins: [environmentTableMixin],
+  mixins: [environmentTableMixin, glFeatureFlagsMixin()],
   props: {
     environments: {
       type: Array,
@@ -42,6 +43,9 @@ export default {
           : env,
       );
     },
+    shouldShowAutoStopDate() {
+      return this.glFeatures.autoStopEnvironments;
+    },
     tableData() {
       return {
         // percent spacing for cols, should add up to 100
@@ -65,8 +69,12 @@ export default {
           title: s__('Environments|Updated'),
           spacing: 'section-10',
         },
+        autoStop: {
+          title: s__('Environments|Auto stop in'),
+          spacing: 'section-5',
+        },
         actions: {
-          spacing: 'section-30',
+          spacing: this.shouldShowAutoStopDate ? 'section-25' : 'section-30',
         },
       };
     },
@@ -123,6 +131,14 @@ export default {
       <div class="table-section" :class="tableData.date.spacing" role="columnheader">
         {{ tableData.date.title }}
       </div>
+      <div
+        v-if="shouldShowAutoStopDate"
+        class="table-section"
+        :class="tableData.autoStop.spacing"
+        role="columnheader"
+      >
+        {{ tableData.autoStop.title }}
+      </div>
     </div>
     <template v-for="(model, i) in sortedEnvironments" :model="model">
       <div
@@ -130,6 +146,7 @@ export default {
         :key="`environment-item-${i}`"
         :model="model"
         :can-read-environment="canReadEnvironment"
+        :should-show-auto-stop-date="shouldShowAutoStopDate"
         :table-data="tableData"
       />

app/assets/javascripts/environments/components/stop_environment_modal.vue

@@ -3,7 +3,6 @@
 import { GlTooltipDirective } from '@gitlab/ui';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
 export default {
@@ -12,7 +11,6 @@ export default {
   components: {
     GlModal: DeprecatedModal2,
-    LoadingButton,
   },
   directives: {

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -90,16 +90,19 @@ export default {
       Flash(s__('Environments|An error occurred while fetching the environments.'));
     },
-    postAction({ endpoint, errorMessage }) {
+    postAction({
+      endpoint,
+      errorMessage = s__('Environments|An error occurred while making the request.'),
+    }) {
       if (!this.isMakingRequest) {
         this.isLoading = true;
         this.service
           .postAction(endpoint)
           .then(() => this.fetchEnvironments())
-          .catch(() => {
+          .catch(err => {
             this.isLoading = false;
-            Flash(errorMessage || s__('Environments|An error occurred while making the request.'));
+            Flash(_.isFunction(errorMessage) ? errorMessage(err.response.data) : errorMessage);
           });
       }
     },
@@ -138,6 +141,13 @@ export default {
           );
       this.postAction({ endpoint: retryUrl, errorMessage });
     },
+
+    cancelAutoStop(autoStopPath) {
+      const errorMessage = ({ message }) =>
+        message ||
+        s__('Environments|An error occurred while canceling the auto stop, please try again');
+      this.postAction({ endpoint: autoStopPath, errorMessage });
+    },
   },
   computed: {
@@ -199,6 +209,8 @@ export default {
     eventHub.$on('requestRollbackEnvironment', this.updateRollbackModal);
     eventHub.$on('rollbackEnvironment', this.rollbackEnvironment);
+
+    eventHub.$on('cancelAutoStop', this.cancelAutoStop);
   },
   beforeDestroy() {
@@ -208,5 +220,7 @@ export default {
     eventHub.$off('requestRollbackEnvironment', this.updateRollbackModal);
     eventHub.$off('rollbackEnvironment', this.rollbackEnvironment);
+
+    eventHub.$off('cancelAutoStop', this.cancelAutoStop);
   },
 };

app/assets/javascripts/error_tracking/components/error_details.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
-import { GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { GlButton, GlFormInput, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import { __, sprintf, n__ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -11,21 +12,41 @@ import TrackEventDirective from '~/vue_shared/directives/track_event';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { trackClickErrorLinkToSentryOptions } from '../utils';
+import query from '../queries/details.query.graphql';
+
 export default {
   components: {
     LoadingButton,
+    GlButton,
     GlFormInput,
     GlLink,
     GlLoadingIcon,
     TooltipOnTruncate,
     Icon,
     Stacktrace,
+    GlBadge,
   },
   directives: {
     TrackEvent: TrackEventDirective,
   },
   mixins: [timeagoMixin],
   props: {
+    listPath: {
+      type: String,
+      required: true,
+    },
+    issueUpdatePath: {
+      type: String,
+      required: true,
+    },
+    issueId: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     issueDetailsPath: {
       type: String,
       required: true,
@@ -43,38 +64,67 @@ export default {
       required: true,
     },
   },
+  apollo: {
+    GQLerror: {
+      query,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+          errorId: `gid://gitlab/Gitlab::ErrorTracking::DetailedError/${this.issueId}`,
+        };
+      },
+      pollInterval: 2000,
+      update: data => data.project.sentryDetailedError,
+      error: () => createFlash(__('Failed to load error details from Sentry.')),
+      result(res) {
+        if (res.data.project?.sentryDetailedError) {
+          this.$apollo.queries.GQLerror.stopPolling();
+        }
+      },
+    },
+  },
   data() {
     return {
+      GQLerror: null,
       issueCreationInProgress: false,
     };
   },
   computed: {
-    ...mapState('details', ['error', 'loading', 'loadingStacktrace', 'stacktraceData']),
+    ...mapState('details', [
+      'error',
+      'loading',
+      'loadingStacktrace',
+      'stacktraceData',
+      'updatingResolveStatus',
+      'updatingIgnoreStatus',
+    ]),
     ...mapGetters('details', ['stacktrace']),
     reported() {
       return sprintf(
         __('Reported %{timeAgo} by %{reportedBy}'),
         {
-          reportedBy: `<strong>${this.error.culprit}</strong>`,
+          reportedBy: `<strong>${this.GQLerror.culprit}</strong>`,
           timeAgo: this.timeFormatted(this.stacktraceData.date_received),
         },
         false,
       );
     },
     firstReleaseLink() {
-      return `${this.error.external_base_url}/releases/${this.error.first_release_short_version}`;
+      return `${this.error.external_base_url}/releases/${this.GQLerror.firstReleaseShortVersion}`;
     },
     lastReleaseLink() {
-      return `${this.error.external_base_url}releases/${this.error.last_release_short_version}`;
+      return `${this.error.external_base_url}releases/${this.GQLerror.lastReleaseShortVersion}`;
     },
     showDetails() {
-      return Boolean(!this.loading && this.error && this.error.id);
+      return Boolean(
+        !this.loading && !this.$apollo.queries.GQLerror.loading && this.error && this.GQLerror,
+      );
     },
     showStacktrace() {
       return Boolean(!this.loadingStacktrace && this.stacktrace && this.stacktrace.length);
     },
     issueTitle() {
-      return this.error.title;
+      return this.GQLerror.title;
     },
     issueDescription() {
       return sprintf(
@@ -83,29 +133,35 @@ export default {
         ),
         {
           description: '# Error Details:\n',
-          errorUrl: `${this.error.external_url}\n`,
-          firstSeen: `\n${this.error.first_seen}\n`,
-          lastSeen: `${this.error.last_seen}\n`,
-          countLabel: n__('- Event', '- Events', this.error.count),
-          count: `${this.error.count}\n`,
-          userCountLabel: n__('- User', '- Users', this.error.user_count),
-          userCount: `${this.error.user_count}\n`,
+          errorUrl: `${this.GQLerror.externalUrl}\n`,
+          firstSeen: `\n${this.GQLerror.firstSeen}\n`,
+          lastSeen: `${this.GQLerror.lastSeen}\n`,
+          countLabel: n__('- Event', '- Events', this.GQLerror.count),
+          count: `${this.GQLerror.count}\n`,
+          userCountLabel: n__('- User', '- Users', this.GQLerror.userCount),
+          userCount: `${this.GQLerror.userCount}\n`,
         },
         false,
       );
     },
+    errorLevel() {
+      return sprintf(__('level: %{level}'), { level: this.error.tags.level });
+    },
   },
   mounted() {
     this.startPollingDetails(this.issueDetailsPath);
     this.startPollingStacktrace(this.issueStackTracePath);
   },
   methods: {
-    ...mapActions('details', ['startPollingDetails', 'startPollingStacktrace']),
+    ...mapActions('details', ['startPollingDetails', 'startPollingStacktrace', 'updateStatus']),
     trackClickErrorLinkToSentryOptions,
     createIssue() {
       this.issueCreationInProgress = true;
       this.$refs.sentryIssueForm.submit();
     },
+    updateIssueStatus(status) {
+      this.updateStatus({ endpoint: this.issueUpdatePath, redirectUrl: this.listPath, status });
+    },
     formatDate(date) {
       return `${this.timeFormatted(date)} (${dateFormat(date, 'UTC:yyyy-mm-dd h:MM:ssTT Z')})`;
     },
@@ -115,75 +171,118 @@ export default {
 <template>
   <div>
-    <div v-if="loading" class="py-3">
+    <div v-if="$apollo.queries.GQLerror.loading || loading" class="py-3">
       <gl-loading-icon :size="3" />
     </div>
     <div v-else-if="showDetails" class="error-details">
       <div class="top-area align-items-center justify-content-between py-3">
         <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span>
-        <form ref="sentryIssueForm" :action="projectIssuesPath" method="POST">
-          <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" />
-          <input name="issue[description]" :value="issueDescription" type="hidden" />
-          <gl-form-input
-            :value="error.id"
-            class="hidden"
-            name="issue[sentry_issue_attributes][sentry_issue_identifier]"
+        <div class="d-inline-flex">
+          <loading-button
+            :label="__('Ignore')"
+            :loading="updatingIgnoreStatus"
+            @click="updateIssueStatus('ignored')"
           />
-          <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
           <loading-button
-            v-if="!error.gitlab_issue"
-            class="btn-success"
-            :label="__('Create issue')"
-            :loading="issueCreationInProgress"
-            data-qa-selector="create_issue_button"
-            @click="createIssue"
+            class="btn-outline-info ml-2"
+            :label="__('Resolve')"
+            :loading="updatingResolveStatus"
+            @click="updateIssueStatus('resolved')"
           />
-        </form>
+          <gl-button
+            v-if="error.gitlab_issue"
+            class="ml-2"
+            data-qa-selector="view_issue_button"
+            :href="error.gitlab_issue"
+            variant="success"
+          >
+            {{ __('View issue') }}
+          </gl-button>
+          <form
+            ref="sentryIssueForm"
+            :action="projectIssuesPath"
+            method="POST"
+            class="d-inline-block ml-2"
+          >
+            <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" />
+            <input name="issue[description]" :value="issueDescription" type="hidden" />
+            <gl-form-input
+              :value="GQLerror.sentryId"
+              class="hidden"
+              name="issue[sentry_issue_attributes][sentry_issue_identifier]"
+            />
+            <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
+            <loading-button
+              v-if="!error.gitlab_issue"
+              class="btn-success"
+              :label="__('Create issue')"
+              :loading="issueCreationInProgress"
+              data-qa-selector="create_issue_button"
+              @click="createIssue"
+            />
+          </form>
+        </div>
       </div>
       <div>
-        <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">
-          <h2 class="text-truncate">{{ error.title }}</h2>
+        <tooltip-on-truncate :title="GQLerror.title" truncate-target="child" placement="top">
+          <h2 class="text-truncate">{{ GQLerror.title }}</h2>
         </tooltip-on-truncate>
-        <h3>{{ __('Error details') }}</h3>
+        <template v-if="error.tags">
+          <gl-badge v-if="error.tags.level" variant="danger" class="rounded-pill mr-2"
+            >{{ errorLevel }}
+          </gl-badge>
+          <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill"
+            >{{ error.tags.logger }}
+          </gl-badge>
+        </template>
         <ul>
+          <li v-if="GQLerror.gitlabCommit">
+            <strong class="bold">{{ __('GitLab commit') }}:</strong>
+            <gl-link :href="GQLerror.gitlabCommitPath">
+              <span>{{ GQLerror.gitlabCommit.substr(0, 10) }}</span>
+            </gl-link>
+          </li>
           <li v-if="error.gitlab_issue">
-            <span class="bold">{{ __('GitLab Issue') }}:</span>
+            <strong class="bold">{{ __('GitLab Issue') }}:</strong>
             <gl-link :href="error.gitlab_issue">
               <span>{{ error.gitlab_issue }}</span>
             </gl-link>
           </li>
           <li>
-            <span class="bold">{{ __('Sentry event') }}:</span>
+            <strong class="bold">{{ __('Sentry event') }}:</strong>
             <gl-link
-              v-track-event="trackClickErrorLinkToSentryOptions(error.external_url)"
-              :href="error.external_url"
+              v-track-event="trackClickErrorLinkToSentryOptions(GQLerror.externalUrl)"
+              class="d-inline-flex align-items-center"
+              :href="GQLerror.externalUrl"
               target="_blank"
             >
-              <span class="text-truncate">{{ error.external_url }}</span>
+              <span class="text-truncate">{{ GQLerror.externalUrl }}</span>
               <icon name="external-link" class="ml-1 flex-shrink-0" />
             </gl-link>
           </li>
-          <li v-if="error.first_release_short_version">
-            <span class="bold">{{ __('First seen') }}:</span>
-            {{ formatDate(error.first_seen) }}
+          <li v-if="GQLerror.firstReleaseShortVersion">
+            <strong class="bold">{{ __('First seen') }}:</strong>
+            {{ formatDate(GQLerror.firstSeen) }}
             <gl-link :href="firstReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ error.first_release_short_version }}</span>
+              <span>
+                {{ __('Release') }}: {{ GQLerror.firstReleaseShortVersion.substr(0, 10) }}
+              </span>
             </gl-link>
           </li>
-          <li v-if="error.last_release_short_version">
-            <span class="bold">{{ __('Last seen') }}:</span>
-            {{ formatDate(error.last_seen) }}
+          <li v-if="GQLerror.lastReleaseShortVersion">
+            <strong class="bold">{{ __('Last seen') }}:</strong>
+            {{ formatDate(GQLerror.lastSeen) }}
             <gl-link :href="lastReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ error.last_release_short_version }}</span>
+              <span>{{ __('Release') }}: {{ GQLerror.lastReleaseShortVersion.substr(0, 10) }}</span>
             </gl-link>
           </li>
           <li>
-            <span class="bold">{{ __('Events') }}:</span>
-            <span>{{ error.count }}</span>
+            <strong class="bold">{{ __('Events') }}:</strong>
+            <span>{{ GQLerror.count }}</span>
           </li>
           <li>
-            <span class="bold">{{ __('Users') }}:</span>
-            <span>{{ error.user_count }}</span>
+            <strong class="bold">{{ __('Users') }}:</strong>
+            <span>{{ GQLerror.userCount }}</span>
           </li>
         </ul>

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -25,10 +25,47 @@ export default {
   PREV_PAGE: 1,
   NEXT_PAGE: 2,
   fields: [
-    { key: 'error', label: __('Open errors'), thClass: 'w-70p' },
-    { key: 'events', label: __('Events') },
-    { key: 'users', label: __('Users') },
-    { key: 'lastSeen', label: __('Last seen'), thClass: 'w-15p' },
+    {
+      key: 'error',
+      label: __('Error'),
+      thClass: 'w-60p',
+      tdClass: 'table-col d-flex d-sm-table-cell px-3',
+    },
+    {
+      key: 'events',
+      label: __('Events'),
+      thClass: 'text-right',
+      tdClass: 'table-col d-flex d-sm-table-cell',
+    },
+    {
+      key: 'users',
+      label: __('Users'),
+      thClass: 'text-right',
+      tdClass: 'table-col d-flex d-sm-table-cell',
+    },
+    {
+      key: 'lastSeen',
+      label: __('Last seen'),
+      thClass: '',
+      tdClass: 'table-col d-flex d-sm-table-cell',
+    },
+    {
+      key: 'ignore',
+      label: '',
+      thClass: 'w-3rem',
+      tdClass: 'table-col d-flex pl-0 d-sm-table-cell',
+    },
+    {
+      key: 'resolved',
+      label: '',
+      thClass: 'w-3rem',
+      tdClass: 'table-col d-flex pl-0 d-sm-table-cell',
+    },
+    {
+      key: 'details',
+      tdClass: 'table-col d-sm-none d-flex align-items-center',
+      thClass: 'invisible w-0',
+    },
   ],
   sortFields: {
     last_seen: __('Last Seen'),
@@ -74,6 +111,14 @@ export default {
       type: Boolean,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    listPath: {
+      type: String,
+      required: true,
+    },
   },
   hasLocalStorage: AccessorUtils.isLocalStorageAccessSafe(),
   data() {
@@ -90,6 +135,7 @@ export default {
       'sortField',
       'recentSearches',
       'pagination',
+      'cursor',
     ]),
     paginationRequired() {
       return !_.isEmpty(this.pagination);
@@ -119,6 +165,8 @@ export default {
       'clearRecentSearches',
       'loadRecentSearches',
       'setIndexPath',
+      'fetchPaginatedResults',
+      'updateStatus',
     ]),
     setSearchText(text) {
       this.errorSearchQuery = text;
@@ -129,10 +177,10 @@ export default {
     },
     goToNextPage() {
       this.pageValue = this.$options.NEXT_PAGE;
-      this.startPolling(`${this.indexPath}?cursor=${this.pagination.next.cursor}`);
+      this.fetchPaginatedResults(this.pagination.next.cursor);
     },
     goToPrevPage() {
-      this.startPolling(`${this.indexPath}?cursor=${this.pagination.previous.cursor}`);
+      this.fetchPaginatedResults(this.pagination.previous.cursor);
     },
     goToPage(page) {
       window.scrollTo(0, 0);
@@ -141,6 +189,16 @@ export default {
     isCurrentSortField(field) {
       return field === this.sortField;
     },
+    getIssueUpdatePath(errorId) {
+      return `/${this.projectPath}/-/error_tracking/${errorId}.json`;
+    },
+    updateIssueStatus(errorId, status) {
+      this.updateStatus({
+        endpoint: this.getIssueUpdatePath(errorId),
+        redirectUrl: this.listPath,
+        status,
+      });
+    },
   },
 };
 </script>
@@ -148,62 +206,62 @@ export default {
 <template>
   <div class="error-list">
     <div v-if="errorTrackingEnabled">
-      <div
-        class="d-flex flex-row justify-content-around align-items-center bg-secondary border mt-2"
-      >
-        <div class="filtered-search-box flex-grow-1 my-3 ml-3 mr-2">
-          <gl-dropdown
-            :text="__('Recent searches')"
-            class="filtered-search-history-dropdown-wrapper d-none d-md-block"
-            toggle-class="filtered-search-history-dropdown-toggle-button"
-            :disabled="loading"
-          >
-            <div v-if="!$options.hasLocalStorage" class="px-3">
-              {{ __('This feature requires local storage to be enabled') }}
-            </div>
-            <template v-else-if="recentSearches.length > 0">
-              <gl-dropdown-item
-                v-for="searchQuery in recentSearches"
-                :key="searchQuery"
-                @click="setSearchText(searchQuery)"
-                >{{ searchQuery }}</gl-dropdown-item
-              >
-              <gl-dropdown-divider />
-              <gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches">{{
-                __('Clear recent searches')
-              }}</gl-dropdown-item>
-            </template>
-            <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
-          </gl-dropdown>
-          <div class="filtered-search-input-container flex-fill">
-            <gl-form-input
-              v-model="errorSearchQuery"
-              class="pl-2 filtered-search"
+      <div class="row flex-column flex-sm-row align-items-sm-center row-top m-0 mt-sm-2 p-0 p-sm-3">
+        <div class="search-box flex-fill mr-sm-2 my-3 m-sm-0 p-3 p-sm-0">
+          <div class="filtered-search-box mb-0">
+            <gl-dropdown
+              :text="__('Recent searches')"
+              class="filtered-search-history-dropdown-wrapper"
+              toggle-class="filtered-search-history-dropdown-toggle-button"
               :disabled="loading"
-              :placeholder="__('Search or filter results…')"
-              autofocus
-              @keyup.enter.native="searchByQuery(errorSearchQuery)"
-            />
-          </div>
-          <div class="gl-search-box-by-type-right-icons">
-            <gl-button
-              v-if="errorSearchQuery.length > 0"
-              v-gl-tooltip.hover
-              :title="__('Clear')"
-              class="clear-search text-secondary"
-              name="clear"
-              @click="errorSearchQuery = ''"
             >
-              <gl-icon name="close" :size="12" />
-            </gl-button>
+              <div v-if="!$options.hasLocalStorage" class="px-3">
+                {{ __('This feature requires local storage to be enabled') }}
+              </div>
+              <template v-else-if="recentSearches.length > 0">
+                <gl-dropdown-item
+                  v-for="searchQuery in recentSearches"
+                  :key="searchQuery"
+                  @click="setSearchText(searchQuery)"
+                  >{{ searchQuery }}
+                </gl-dropdown-item>
+                <gl-dropdown-divider />
+                <gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
+                  >{{ __('Clear recent searches') }}
+                </gl-dropdown-item>
+              </template>
+              <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
+            </gl-dropdown>
+            <div class="filtered-search-input-container flex-fill">
+              <gl-form-input
+                v-model="errorSearchQuery"
+                class="pl-2 filtered-search"
+                :disabled="loading"
+                :placeholder="__('Search or filter results…')"
+                autofocus
+                @keyup.enter.native="searchByQuery(errorSearchQuery)"
+              />
+            </div>
+            <div class="gl-search-box-by-type-right-icons">
+              <gl-button
+                v-if="errorSearchQuery.length > 0"
+                v-gl-tooltip.hover
+                :title="__('Clear')"
+                class="clear-search text-secondary"
+                name="clear"
+                @click="errorSearchQuery = ''"
+              >
+                <gl-icon name="close" :size="12" />
+              </gl-button>
+            </div>
           </div>
         </div>
         <gl-dropdown
+          class="sort-control"
           :text="$options.sortFields[sortField]"
           left
           :disabled="loading"
-          class="mr-3"
           menu-class="sort-dropdown"
         >
           <gl-dropdown-item
@@ -227,62 +285,97 @@ export default {
         <gl-loading-icon size="md" />
       </div>
-      <gl-table
-        v-else
-        class="mt-3"
-        :items="errors"
-        :fields="$options.fields"
-        :show-empty="true"
-        fixed
-        stacked="sm"
-      >
-        <template slot="HEAD_events" slot-scope="data">
-          <div class="text-md-right">{{ data.label }}</div>
-        </template>
-        <template slot="HEAD_users" slot-scope="data">
-          <div class="text-md-right">{{ data.label }}</div>
-        </template>
-        <template slot="error" slot-scope="errors">
-          <div class="d-flex flex-column">
-            <gl-link class="d-flex text-dark" :href="getDetailsLink(errors.item.id)">
-              <strong class="text-truncate">{{ errors.item.title.trim() }}</strong>
-            </gl-link>
-            <span class="text-secondary text-truncate">
-              {{ errors.item.culprit }}
-            </span>
-          </div>
-        </template>
-        <template slot="events" slot-scope="errors">
-          <div class="text-md-right">{{ errors.item.count }}</div>
-        </template>
-        <template slot="users" slot-scope="errors">
-          <div class="text-md-right">{{ errors.item.userCount }}</div>
-        </template>
-        <template slot="lastSeen" slot-scope="errors">
-          <div class="d-flex align-items-center">
-            <time-ago :time="errors.item.lastSeen" class="text-secondary" />
-          </div>
-        </template>
-        <template slot="empty">
-          <div ref="empty">
+      <template v-else>
+        <h4 class="d-block d-sm-none my-3">{{ __('Open errors') }}</h4>
+        <gl-table
+          class="mt-3"
+          :items="errors"
+          :fields="$options.fields"
+          :show-empty="true"
+          fixed
+          stacked="sm"
+          tbody-tr-class="table-row mb-4"
+        >
+          <template v-slot:head(error)>
+            <div class="d-none d-sm-block">{{ __('Open errors') }}</div>
+          </template>
+          <template v-slot:head(events)="data">
+            <div class="text-sm-right">{{ data.label }}</div>
+          </template>
+          <template v-slot:head(users)="data">
+            <div class="text-sm-right">{{ data.label }}</div>
+          </template>
+          <template v-slot:error="errors">
+            <div class="d-flex flex-column">
+              <gl-link class="d-flex mw-100 text-dark" :href="getDetailsLink(errors.item.id)">
+                <strong class="text-truncate">{{ errors.item.title.trim() }}</strong>
+              </gl-link>
+              <span class="text-secondary text-truncate mw-100">
+                {{ errors.item.culprit }}
+              </span>
+            </div>
+          </template>
+          <template v-slot:events="errors">
+            <div class="text-right">{{ errors.item.count }}</div>
+          </template>
+
+          <template v-slot:users="errors">
+            <div class="text-right">{{ errors.item.userCount }}</div>
+          </template>
+
+          <template v-slot:lastSeen="errors">
+            <div class="text-md-left text-right">
+              <time-ago :time="errors.item.lastSeen" class="text-secondary" />
+            </div>
+          </template>
+          <template v-slot:ignore="errors">
+            <gl-button
+              ref="ignoreError"
+              v-gl-tooltip.hover
+              :title="__('Ignore')"
+              @click="updateIssueStatus(errors.item.id, 'ignored')"
+            >
+              <gl-icon name="eye-slash" :size="12" />
+            </gl-button>
+          </template>
+          <template v-slot:resolved="errors">
+            <gl-button
+              ref="resolveError"
+              v-gl-tooltip
+              :title="__('Resolve')"
+              @click="updateIssueStatus(errors.item.id, 'resolved')"
+            >
+              <gl-icon name="check-circle" :size="12" />
+            </gl-button>
+          </template>
+          <template v-slot:details="errors">
+            <gl-button
+              :href="getDetailsLink(errors.item.id)"
+              variant="outline-info"
+              class="d-block"
+            >
+              {{ __('More details') }}
+            </gl-button>
+          </template>
+          <template v-slot:empty>
             {{ __('No errors to display.') }}
             <gl-link class="js-try-again" @click="restartPolling">
               {{ __('Check again') }}
             </gl-link>
-          </div>
-        </template>
-      </gl-table>
-      <gl-pagination
-        v-show="!loading"
-        v-if="paginationRequired"
-        :prev-page="$options.PREV_PAGE"
-        :next-page="$options.NEXT_PAGE"
-        :value="pageValue"
-        align="center"
-        @input="goToPage"
-      />
+          </template>
+        </gl-table>
+        <gl-pagination
+          v-show="!loading"
+          v-if="paginationRequired"
+          :prev-page="$options.PREV_PAGE"
+          :next-page="$options.NEXT_PAGE"
+          :value="pageValue"
+          align="center"
+          @input="goToPage"
+        />
+      </template>
     </div>
     <div v-else-if="userCanEnableErrorTracking">
       <gl-empty-state

app/assets/javascripts/error_tracking/components/stacktrace_entry.vue

 <script>
+import _ from 'underscore';
 import { GlTooltip } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -56,17 +57,36 @@ export default {
     collapseIcon() {
       return this.isExpanded ? 'chevron-down' : 'chevron-right';
     },
-    noCodeFn() {
-      return this.errorFn ? sprintf(__('in %{errorFn} '), { errorFn: this.errorFn }) : '';
+    errorFnText() {
+      return this.errorFn
+        ? sprintf(
+            __(`%{spanStart}in%{spanEnd} %{errorFn}`),
+            {
+              errorFn: `<strong>${_.escape(this.errorFn)}</strong>`,
+              spanStart: `<span class="text-tertiary">`,
+              spanEnd: `</span>`,
+            },
+            false,
+          )
+        : '';
     },
-    noCodeLine() {
+    errorPositionText() {
       return this.errorLine
-        ? sprintf(__('at line %{errorLine}%{errorColumn}'), {
-            errorLine: this.errorLine,
-            errorColumn: this.errorColumn ? `:${this.errorColumn}` : '',
-          })
+        ? sprintf(
+            __(`%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}`),
+            {
+              errorLine: `<strong>${this.errorLine}</strong>`,
+              errorColumn: this.errorColumn ? `:<strong>${this.errorColumn}</strong>` : ``,
+              spanStart: `<span class="text-tertiary">`,
+              spanEnd: `</span>`,
+            },
+            false,
+          )
         : '';
     },
+    errorInfo() {
+      return `${this.errorFnText} ${this.errorPositionText}`;
+    },
   },
   methods: {
     isHighlighted(lineNum) {
@@ -102,8 +122,7 @@ export default {
         <strong
           v-gl-tooltip
           :title="filePath"
-          class="file-title-name d-inline-block overflow-hidden text-truncate"
-          :class="{ 'limited-width': !hasCode }"
+          class="file-title-name d-inline-block overflow-hidden text-truncate limited-width"
           data-container="body"
         >
           {{ filePath }}
@@ -113,7 +132,7 @@ export default {
           :text="filePath"
           css-class="btn-default btn-transparent btn-clipboard position-static"
         />
-        <span v-if="!hasCode" class="text-tertiary">{{ noCodeFn }}{{ noCodeLine }}</span>
+        <span v-html="errorInfo"></span>
       </div>
     </div>

app/assets/javascripts/error_tracking/details.js

 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import store from './store';
 import ErrorDetails from './components/error_details.vue';
 import csrf from '~/lib/utils/csrf';
+Vue.use(VueApollo);
+
 export default () => {
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-error_details',
+    apolloProvider,
     components: {
       ErrorDetails,
     },
     store,
     render(createElement) {
       const domEl = document.querySelector(this.$options.el);
-      const { issueDetailsPath, issueStackTracePath, projectIssuesPath } = domEl.dataset;
+      const {
+        issueId,
+        projectPath,
+        listPath,
+        issueUpdatePath,
+        issueDetailsPath,
+        issueStackTracePath,
+        projectIssuesPath,
+      } = domEl.dataset;
       return createElement('error-details', {
         props: {
+          issueId,
+          projectPath,
+          listPath,
+          issueUpdatePath,
           issueDetailsPath,
           issueStackTracePath,
           projectIssuesPath,

app/assets/javascripts/error_tracking/list.js

@@ -13,7 +13,13 @@ export default () => {
     store,
     render(createElement) {
       const domEl = document.querySelector(this.$options.el);
-      const { indexPath, enableErrorTrackingLink, illustrationPath } = domEl.dataset;
+      const {
+        indexPath,
+        enableErrorTrackingLink,
+        illustrationPath,
+        projectPath,
+        listPath,
+      } = domEl.dataset;
       let { errorTrackingEnabled, userCanEnableErrorTracking } = domEl.dataset;
       errorTrackingEnabled = parseBoolean(errorTrackingEnabled);
@@ -26,6 +32,8 @@ export default () => {
           errorTrackingEnabled,
           illustrationPath,
           userCanEnableErrorTracking,
+          projectPath,
+          listPath,
         },
       });
     },

app/assets/javascripts/error_tracking/queries/details.query.graphql

+query errorDetails($fullPath: ID!, $errorId: ID!) {
+    project(fullPath: $fullPath) {
+        sentryDetailedError(id: $errorId) {
+            id
+            sentryId
+            title
+            userCount
+            count
+            firstSeen
+            lastSeen
+            message
+            culprit
+            externalUrl
+            firstReleaseShortVersion
+            lastReleaseShortVersion
+            gitlabCommit
+            gitlabCommitPath
+        }
+    }
+}

app/assets/javascripts/error_tracking/services/index.js

@@ -4,4 +4,7 @@ export default {
   getSentryData({ endpoint, params }) {
     return axios.get(endpoint, { params });
   },
+  updateErrorStatus(endpoint, status) {
+    return axios.put(endpoint, { status });
+  },
 };

app/assets/javascripts/error_tracking/store/actions.js

+import service from './../services';
+import * as types from './mutation_types';
+import createFlash from '~/flash';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
+
+export function updateStatus({ commit }, { endpoint, redirectUrl, status }) {
+  const type =
+    status === 'resolved' ? types.SET_UPDATING_RESOLVE_STATUS : types.SET_UPDATING_IGNORE_STATUS;
+  commit(type, true);
+
+  return service
+    .updateErrorStatus(endpoint, status)
+    .then(() => visitUrl(redirectUrl))
+    .catch(() => createFlash(__('Failed to update issue status')))
+    .finally(() => commit(type, false));
+}
+
+export default () => {};

app/assets/javascripts/error_tracking/store/details/state.js

@@ -3,4 +3,6 @@ export default () => ({
   stacktraceData: {},
   loading: true,
   loadingStacktrace: true,
+  updatingResolveStatus: false,
+  updatingIgnoreStatus: false,
 });