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

@@ -95,8 +95,6 @@ export const allBlobs = (state, getters) =>
     return acc;
   }, []);
 
-export const diffFilesLength = state => state.diffFiles.length;
-
 export const getCommentFormForDiffFile = state => fileHash =>
   state.commentForms.find(form => form.fileHash === fileHash);
 

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

@@ -45,26 +45,28 @@ export default {
   },
 
   [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);
+    const files = prepareDiffData(data, state.diffFiles);
 
-    state.diffFiles.push(...data.diff_files);
+    Object.assign(state, {
+      ...convertObjectPropsToCamelCase(data),
+      diffFiles: files,
+    });
   },
 
   [types.RENDER_FILE](state, file) {
@@ -88,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;
 
@@ -153,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 }) {
@@ -177,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,
@@ -197,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;
@@ -227,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;
     });
   },
 
@@ -259,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';
+function getLinesFromFileByLineCode(file, lineCode) {
+  const parallelLines = file.parallel_diff_lines;
+  const inlineLines = file.highlighted_diff_lines;
+  const matchesCode = line => line.line_code === lineCode;
 
-      updateFn(targetLine[side]);
-    }
-  }
-  if (selectedFile.highlighted_diff_lines) {
-    const targetInlineLine = selectedFile.highlighted_diff_lines.find(
-      line => line.line_code === lineCode,
-    );
+  return [
+    ...parallelLines.reduce((acc, line) => {
+      if (line.left) {
+        acc.push(line.left);
+      }
 
-    if (targetInlineLine) {
-      updateFn(targetInlineLine);
-    }
-  }
+      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/error_tracking/components/error_details.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
-import { GlFormInput, GlLink, GlLoadingIcon, GlBadge } 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,9 +12,12 @@ 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,
@@ -27,6 +31,22 @@ export default {
   },
   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,
@@ -44,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(
@@ -84,13 +133,13 @@ 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,
       );
@@ -104,12 +153,15 @@ export default {
     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')})`;
     },
@@ -119,42 +171,69 @@ 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.id"
+              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>
         <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>
+          <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>
 
         <h3>{{ __('Error details') }}</h3>
@@ -168,35 +247,35 @@ export default {
           <li>
             <span class="bold">{{ __('Sentry event') }}:</span>
             <gl-link
-              v-track-event="trackClickErrorLinkToSentryOptions(error.external_url)"
-              :href="error.external_url"
+              v-track-event="trackClickErrorLinkToSentryOptions(GQLerror.externalUrl)"
+              :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">
+          <li v-if="GQLerror.firstReleaseShortVersion">
             <span class="bold">{{ __('First seen') }}:</span>
-            {{ formatDate(error.first_seen) }}
+            {{ formatDate(GQLerror.firstSeen) }}
             <gl-link :href="firstReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ error.first_release_short_version }}</span>
+              <span>{{ __('Release') }}: {{ GQLerror.firstReleaseShortVersion }}</span>
             </gl-link>
           </li>
-          <li v-if="error.last_release_short_version">
+          <li v-if="GQLerror.lastReleaseShortVersion">
             <span class="bold">{{ __('Last seen') }}:</span>
-            {{ formatDate(error.last_seen) }}
+            {{ formatDate(GQLerror.lastSeen) }}
             <gl-link :href="lastReleaseLink" target="_blank">
-              <span>{{ __('Release') }}: {{ error.last_release_short_version }}</span>
+              <span>{{ __('Release') }}: {{ GQLerror.lastReleaseShortVersion }}</span>
             </gl-link>
           </li>
           <li>
             <span class="bold">{{ __('Events') }}:</span>
-            <span>{{ error.count }}</span>
+            <span>{{ GQLerror.count }}</span>
           </li>
           <li>
             <span class="bold">{{ __('Users') }}:</span>
-            <span>{{ error.user_count }}</span>
+            <span>{{ GQLerror.userCount }}</span>
           </li>
         </ul>
 

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

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

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

 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import * as actions from './actions';
+import mutations from './mutations';
+
 import * as listActions from './list/actions';
 import listMutations from './list/mutations';
 import listState from './list/state';
@@ -24,8 +27,8 @@ export const createStore = () =>
       details: {
         namespaced: true,
         state: detailsState(),
-        actions: detailsActions,
-        mutations: detailsMutations,
+        actions: { ...actions, ...detailsActions },
+        mutations: { ...mutations, ...detailsMutations },
         getters: detailsGetters,
       },
     },

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

+export const SET_UPDATING_RESOLVE_STATUS = 'SET_UPDATING_RESOLVE_STATUS';
+export const SET_UPDATING_IGNORE_STATUS = 'SET_UPDATING_IGNORE_STATUS';

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

+import * as types from './mutation_types';
+
+export default {
+  [types.SET_UPDATING_IGNORE_STATUS](state, updating) {
+    state.updatingIgnoreStatus = updating;
+  },
+  [types.SET_UPDATING_RESOLVE_STATUS](state, updating) {
+    state.updatingResolveStatus = updating;
+  },
+};

app/assets/javascripts/helpers/diffs_helper.js

+export function hasInlineLines(diffFile) {
+  return diffFile?.highlighted_diff_lines?.length > 0; /* eslint-disable-line camelcase */
+}
+
+export function hasParallelLines(diffFile) {
+  return diffFile?.parallel_diff_lines?.length > 0; /* eslint-disable-line camelcase */
+}
+
+export function isSingleViewStyle(diffFile) {
+  return !hasParallelLines(diffFile) || !hasInlineLines(diffFile);
+}
+
+export function hasDiff(diffFile) {
+  return (
+    hasInlineLines(diffFile) ||
+    hasParallelLines(diffFile) ||
+    !diffFile?.blob?.readable_text /* eslint-disable-line camelcase */
+  );
+}

app/assets/javascripts/ide/components/commit_sidebar/list.vue

@@ -41,10 +41,6 @@ export default {
       type: String,
       required: true,
     },
-    itemActionComponent: {
-      type: String,
-      required: true,
-    },
     stagedList: {
       type: Boolean,
       required: false,
@@ -142,7 +138,6 @@ export default {
       <li v-for="file in fileList" :key="file.key">
         <list-item
           :file="file"
-          :action-component="itemActionComponent"
           :key-prefix="keyPrefix"
           :staged-list="stagedList"
           :active-file-key="activeFileKey"

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -19,10 +19,6 @@ export default {
       type: Object,
       required: true,
     },
-    actionComponent: {
-      type: String,
-      required: true,
-    },
     keyPrefix: {
       type: String,
       required: false,

app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue

-<script>
-import $ from 'jquery';
-import { mapActions } from 'vuex';
-import { sprintf, __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
-
-export default {
-  components: {
-    Icon,
-    GlModal: DeprecatedModal2,
-  },
-  directives: {
-    tooltip,
-  },
-  props: {
-    path: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    modalId() {
-      return `discard-file-${this.path}`;
-    },
-    modalTitle() {
-      return sprintf(__('Discard changes to %{path}?'), { path: this.path });
-    },
-  },
-  methods: {
-    ...mapActions(['stageChange', 'discardFileChanges']),
-    showDiscardModal() {
-      $(document.getElementById(this.modalId)).modal('show');
-    },
-  },
-};
-</script>
-
-<template>
-  <div v-once class="multi-file-discard-btn d-flex">
-    <button
-      v-tooltip
-      :aria-label="__('Stage changes')"
-      :title="__('Stage changes')"
-      type="button"
-      class="btn btn-blank align-items-center"
-      data-container="body"
-      data-boundary="viewport"
-      data-placement="bottom"
-      @click.stop.prevent="stageChange(path)"
-    >
-      <icon :size="16" name="mobile-issue-close" class="ml-auto mr-auto" />
-    </button>
-    <button
-      v-tooltip
-      :aria-label="__('Discard changes')"
-      :title="__('Discard changes')"
-      type="button"
-      class="btn btn-blank align-items-center"
-      data-container="body"
-      data-boundary="viewport"
-      data-placement="bottom"
-      @click.stop.prevent="showDiscardModal"
-    >
-      <icon :size="16" name="remove" class="ml-auto mr-auto" />
-    </button>
-    <gl-modal
-      :id="modalId"
-      :header-title-text="modalTitle"
-      :footer-primary-button-text="__('Discard changes')"
-      footer-primary-button-variant="danger"
-      @submit="discardFileChanges(path)"
-    >
-      {{ __("You will lose all changes you've made to this file. This action cannot be undone.") }}
-    </gl-modal>
-  </div>
-</template>

app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue

-<script>
-import { mapActions } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
-
-export default {
-  components: {
-    Icon,
-  },
-  directives: {
-    tooltip,
-  },
-  props: {
-    path: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    ...mapActions(['unstageChange']),
-  },
-};
-</script>
-
-<template>
-  <div v-once class="multi-file-discard-btn d-flex">
-    <button
-      v-tooltip
-      :aria-label="__('Unstage changes')"
-      :title="__('Unstage changes')"
-      type="button"
-      class="btn btn-blank align-items-center"
-      data-container="body"
-      data-boundary="viewport"
-      data-placement="bottom"
-      @click.stop.prevent="unstageChange(path)"
-    >
-      <icon :size="16" name="redo" class="ml-auto mr-auto" />
-    </button>
-  </div>
-</template>

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -67,8 +67,8 @@ export default {
       if (this.entryModal.type === modalTypes.rename) {
         if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
           flash(
-            sprintf(s__('The name %{entryName} is already taken in this directory.'), {
-              entryName: this.entryName,
+            sprintf(s__('The name "%{name}" is already taken in this directory.'), {
+              name: this.entryName,
             }),
             'alert',
             document,
@@ -81,22 +81,11 @@ export default {
           const entryName = parentPath.pop();
           parentPath = parentPath.join('/');
 
-          const createPromise =
-            parentPath && !this.entries[parentPath]
-              ? this.createTempEntry({ name: parentPath, type: 'tree' })
-              : Promise.resolve();
-
-          createPromise
-            .then(() =>
-              this.renameEntry({
-                path: this.entryModal.entry.path,
-                name: entryName,
-                parentPath,
-              }),
-            )
-            .catch(() =>
-              flash(__('Error creating a new path'), 'alert', document, null, false, true),
-            );
+          this.renameEntry({
+            path: this.entryModal.entry.path,
+            name: entryName,
+            parentPath,
+          });
         }
       } else {
         this.createTempEntry({

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -94,7 +94,6 @@ export default {
         :empty-state-text="__('There are no unstaged changes')"
         action="stageAllChanges"
         action-btn-icon="stage-all"
-        item-action-component="stage-button"
         class="is-first"
         icon-name="unstaged"
       />
@@ -108,7 +107,6 @@ export default {
         :empty-state-text="__('There are no staged changes')"
         action="unstageAllChanges"
         action-btn-icon="unstage-all"
-        item-action-component="unstage-button"
         icon-name="staged"
       />
     </template>