Rename issue button to incident

On alert details we rename the issue type to
incident to indicate that the user will
create a incident not a issue.

app/assets/javascripts/alert_management/components/alert_details.vue

@@ -113,8 +113,8 @@ export default {
       errored: false,
       sidebarStatus: false,
       isErrorDismissed: false,
-      createIssueError: '',
-      issueCreationInProgress: false,
+      createIncidentError: '',
+      incidentCreationInProgress: false,
       sidebarErrorMessage: '',
     };
   },
@@ -172,8 +172,8 @@ export default {
       this.errored = true;
       this.sidebarErrorMessage = errorMessage;
     },
-    createIssue() {
-      this.issueCreationInProgress = true;
+    createIncident() {
+      this.incidentCreationInProgress = true;
 
       this.$apollo
         .mutate({
@@ -185,18 +185,18 @@ export default {
         })
         .then(({ data: { createAlertIssue: { errors, issue } } }) => {
           if (errors?.length) {
-            [this.createIssueError] = errors;
-            this.issueCreationInProgress = false;
+            [this.createIncidentError] = errors;
+            this.incidentCreationInProgress = false;
           } else if (issue) {
-            visitUrl(this.issuePath(issue.iid));
+            visitUrl(this.incidentPath(issue.iid));
           }
         })
         .catch(error => {
-          this.createIssueError = error;
-          this.issueCreationInProgress = false;
+          this.createIncidentError = error;
+          this.incidentCreationInProgress = false;
         });
     },
-    issuePath(issueId) {
+    incidentPath(issueId) {
       return joinPaths(this.projectIssuesPath, issueId);
     },
     trackPageViews() {
@@ -213,12 +213,12 @@ export default {
       <p v-html="sidebarErrorMessage || $options.i18n.errorMsg"></p>
     </gl-alert>
     <gl-alert
-      v-if="createIssueError"
+      v-if="createIncidentError"
       variant="danger"
-      data-testid="issueCreationError"
-      @dismiss="createIssueError = null"
+      data-testid="incidentCreationError"
+      @dismiss="createIncidentError = null"
     >
-      {{ createIssueError }}
+      {{ createIncidentError }}
     </gl-alert>
     <div v-if="loading"><gl-loading-icon size="lg" class="gl-mt-5" /></div>
     <div
@@ -244,24 +244,24 @@ export default {
         </div>
         <gl-button
           v-if="alert.issueIid"
-          class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-issue-button"
-          data-testid="viewIssueBtn"
-          :href="issuePath(alert.issueIid)"
+          class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button"
+          data-testid="viewIncidentBtn"
+          :href="incidentPath(alert.issueIid)"
           category="primary"
           variant="success"
         >
-          {{ s__('AlertManagement|View issue') }}
+          {{ s__('AlertManagement|View incident') }}
         </gl-button>
         <gl-button
           v-else
-          class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-issue-button"
-          data-testid="createIssueBtn"
-          :loading="issueCreationInProgress"
+          class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button"
+          data-testid="createIncidentBtn"
+          :loading="incidentCreationInProgress"
           category="primary"
           variant="success"
-          @click="createIssue()"
+          @click="createIncident()"
         >
-          {{ s__('AlertManagement|Create issue') }}
+          {{ s__('AlertManagement|Create incident') }}
         </gl-button>
         <gl-button
           :aria-label="__('Toggle sidebar')"

app/assets/stylesheets/pages/alert_management/details.scss

@@ -35,7 +35,7 @@
   }
 
   @include media-breakpoint-down(xs) {
-    .alert-details-issue-button {
+    .alert-details-incident-button {
       width: 100%;
     }
   }

changelogs/unreleased/227678-create-incident-button-alert.yml

+---
+title: Rename create issue button to create incidents in ALert details
+merge_request: 39684
+author:
+type: changed

locale/gitlab.pot

@@ -2105,7 +2105,7 @@ msgstr ""
 msgid "AlertManagement|Authorize external service"
 msgstr ""
 
-msgid "AlertManagement|Create issue"
+msgid "AlertManagement|Create incident"
 msgstr ""
 
 msgid "AlertManagement|Critical"
@@ -2231,7 +2231,7 @@ msgstr ""
 msgid "AlertManagement|View alerts in Opsgenie"
 msgstr ""
 
-msgid "AlertManagement|View issue"
+msgid "AlertManagement|View incident"
 msgstr ""
 
 msgid "AlertManagement|You have enabled the Opsgenie integration. Your alerts will be visible directly in Opsgenie."

spec/frontend/alert_management/components/alert_details_spec.js

@@ -63,9 +63,9 @@ describe('AlertDetails', () => {
     mock.restore();
   });
 
-  const findCreateIssueBtn = () => wrapper.find('[data-testid="createIssueBtn"]');
-  const findViewIssueBtn = () => wrapper.find('[data-testid="viewIssueBtn"]');
-  const findIssueCreationAlert = () => wrapper.find('[data-testid="issueCreationError"]');
+  const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
+  const findViewIncidentBtn = () => wrapper.find('[data-testid="viewIncidentBtn"]');
+  const findIncidentCreationAlert = () => wrapper.find('[data-testid="incidentCreationError"]');
 
   describe('Alert details', () => {
     describe('when alert is null', () => {
@@ -135,18 +135,20 @@ describe('AlertDetails', () => {
       });
     });
 
-    describe('Create issue from alert', () => {
-      it('should display "View issue" button that links the issue page when issue exists', () => {
+    describe('Create incident from alert', () => {
+      it('should display "View incident" button that links the incident page when incident exists', () => {
         const issueIid = '3';
         mountComponent({
           data: { alert: { ...mockAlert, issueIid }, sidebarStatus: false },
         });
-        expect(findViewIssueBtn().exists()).toBe(true);
-        expect(findViewIssueBtn().attributes('href')).toBe(joinPaths(projectIssuesPath, issueIid));
-        expect(findCreateIssueBtn().exists()).toBe(false);
+        expect(findViewIncidentBtn().exists()).toBe(true);
+        expect(findViewIncidentBtn().attributes('href')).toBe(
+          joinPaths(projectIssuesPath, issueIid),
+        );
+        expect(findCreateIncidentBtn().exists()).toBe(false);
       });
 
-      it('should display "Create issue" button when issue doesn\'t exist yet', () => {
+      it('should display "Create incident" button when incident doesn\'t exist yet', () => {
         const issueIid = null;
         mountComponent({
           mountMethod: mount,
@@ -154,8 +156,8 @@ describe('AlertDetails', () => {
         });
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(findViewIssueBtn().exists()).toBe(false);
-          expect(findCreateIssueBtn().exists()).toBe(true);
+          expect(findViewIncidentBtn().exists()).toBe(false);
+          expect(findCreateIncidentBtn().exists()).toBe(true);
         });
       });
 
@@ -165,7 +167,7 @@ describe('AlertDetails', () => {
           .spyOn(wrapper.vm.$apollo, 'mutate')
           .mockResolvedValue({ data: { createAlertIssue: { issue: { iid: issueIid } } } });
 
-        findCreateIssueBtn().trigger('click');
+        findCreateIncidentBtn().trigger('click');
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: createIssueMutation,
           variables: {
@@ -175,7 +177,7 @@ describe('AlertDetails', () => {
         });
       });
 
-      it('shows error alert when issue creation fails ', () => {
+      it('shows error alert when incident creation fails ', () => {
         const errorMsg = 'Something went wrong';
         mountComponent({
           mountMethod: mount,
@@ -183,10 +185,10 @@ describe('AlertDetails', () => {
         });
 
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue(errorMsg);
-        findCreateIssueBtn().trigger('click');
+        findCreateIncidentBtn().trigger('click');
 
         setImmediate(() => {
-          expect(findIssueCreationAlert().text()).toBe(errorMsg);
+          expect(findIncidentCreationAlert().text()).toBe(errorMsg);
         });
       });
     });