Merge branch 'cngo-make-issues-show-constants-consistent' into 'master'

Make ~/issues/show/constants consistent

See merge request gitlab-org/gitlab!77594

app/assets/javascripts/issues/show/components/app.vue

@@ -6,7 +6,7 @@ import { IssuableStatus, IssuableStatusText, IssuableType } from '~/issues/const
 import Poll from '~/lib/utils/poll';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, sprintf } from '~/locale';
-import { IssueTypePath, IncidentTypePath, IncidentType, POLLING_DELAY } from '../constants';
+import { ISSUE_TYPE_PATH, INCIDENT_TYPE_PATH, INCIDENT_TYPE, POLLING_DELAY } from '../constants';
 import eventHub from '../event_hub';
 import getIssueStateQuery from '../queries/get_issue_state.query.graphql';
 import Service from '../services/index';
@@ -378,15 +378,15 @@ export default {
         .then((data) => {
           if (
             !window.location.pathname.includes(data.web_url) &&
-            issueState.issueType !== IncidentType
+            issueState.issueType !== INCIDENT_TYPE
           ) {
             visitUrl(data.web_url);
           }
 
           if (issueState.isDirty) {
             const URI =
-              issueState.issueType === IncidentType
-                ? data.web_url.replace(IssueTypePath, IncidentTypePath)
+              issueState.issueType === INCIDENT_TYPE
+                ? data.web_url.replace(ISSUE_TYPE_PATH, INCIDENT_TYPE_PATH)
                 : data.web_url;
             visitUrl(URI);
           }

app/assets/javascripts/issues/show/components/fields/type.vue

@@ -2,7 +2,7 @@
 import { GlFormGroup, GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { capitalize } from 'lodash';
 import { __ } from '~/locale';
-import { IssuableTypes, IncidentType } from '../../constants';
+import { issuableTypes, INCIDENT_TYPE } from '../../constants';
 import getIssueStateQuery from '../../queries/get_issue_state.query.graphql';
 import updateIssueStateMutation from '../../queries/update_issue_state.mutation.graphql';
 
@@ -12,7 +12,7 @@ export const i18n = {
 
 export default {
   i18n,
-  IssuableTypes,
+  issuableTypes,
   components: {
     GlFormGroup,
     GlIcon,
@@ -45,7 +45,7 @@ export default {
       return capitalize(issueType);
     },
     shouldShowIncident() {
-      return this.issueType === IncidentType || this.canCreateIncident;
+      return this.issueType === INCIDENT_TYPE || this.canCreateIncident;
     },
   },
   methods: {
@@ -59,7 +59,7 @@ export default {
       });
     },
     isShown(type) {
-      return type.value !== IncidentType || this.shouldShowIncident;
+      return type.value !== INCIDENT_TYPE || this.shouldShowIncident;
     },
   },
 };
@@ -81,7 +81,7 @@ export default {
       toggle-class="dropdown-menu-toggle"
     >
       <gl-dropdown-item
-        v-for="type in $options.IssuableTypes"
+        v-for="type in $options.issuableTypes"
         v-show="isShown(type)"
         :key="type.value"
         :is-checked="issueState.issueType === type.value"

app/assets/javascripts/issues/show/components/header_actions.vue

@@ -13,7 +13,7 @@ import createFlash, { FLASH_TYPES } from '~/flash';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import { IssuableType } from '~/vue_shared/issuable/show/constants';
 import { IssuableStatus } from '~/issues/constants';
-import { IssueStateEvent } from '~/issues/show/constants';
+import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN } from '~/issues/show/constants';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, __, sprintf } from '~/locale';
@@ -163,7 +163,7 @@ export default {
             input: {
               iid: this.iid.toString(),
               projectPath: this.projectPath,
-              stateEvent: this.isClosed ? IssueStateEvent.Reopen : IssueStateEvent.Close,
+              stateEvent: this.isClosed ? ISSUE_STATE_EVENT_REOPEN : ISSUE_STATE_EVENT_CLOSE,
             },
           },
         })

app/assets/javascripts/issues/show/constants.js

 import { __ } from '~/locale';
 
-export const IssueStateEvent = {
-  Close: 'CLOSE',
-  Reopen: 'REOPEN',
-};
-
-export const STATUS_PAGE_PUBLISHED = __('Published on status page');
+export const INCIDENT_TYPE = 'incident';
+export const INCIDENT_TYPE_PATH = 'issues/incident';
+export const ISSUE_STATE_EVENT_CLOSE = 'CLOSE';
+export const ISSUE_STATE_EVENT_REOPEN = 'REOPEN';
+export const ISSUE_TYPE_PATH = 'issues';
 export const JOIN_ZOOM_MEETING = __('Join Zoom meeting');
+export const POLLING_DELAY = 2000;
+export const STATUS_PAGE_PUBLISHED = __('Published on status page');
 
-export const IssuableTypes = [
+export const issuableTypes = [
   { value: 'issue', text: __('Issue'), icon: 'issue-type-issue' },
   { value: 'incident', text: __('Incident'), icon: 'issue-type-incident' },
 ];
 
-export const IssueTypePath = 'issues';
-export const IncidentTypePath = 'issues/incident';
-export const IncidentType = 'incident';
-
-export const issueState = { issueType: undefined, isDirty: false };
-
-export const POLLING_DELAY = 2000;
+export const issueState = {
+  issueType: undefined,
+  isDirty: false,
+};

app/assets/javascripts/issues/show/index.js

@@ -6,7 +6,7 @@ import IssueApp from './components/app.vue';
 import HeaderActions from './components/header_actions.vue';
 import IncidentTabs from './components/incidents/incident_tabs.vue';
 import SentryErrorStackTrace from './components/sentry_error_stack_trace.vue';
-import { IncidentType, issueState } from './constants';
+import { INCIDENT_TYPE, issueState } from './constants';
 import apolloProvider from './graphql';
 import getIssueStateQuery from './queries/get_issue_state.query.graphql';
 
@@ -45,7 +45,7 @@ export function initIncidentApp(issueData = {}) {
     el,
     apolloProvider,
     provide: {
-      issueType: IncidentType,
+      issueType: INCIDENT_TYPE,
       canCreateIncident,
       canUpdate,
       fullPath,
@@ -111,7 +111,7 @@ export function initHeaderActions(store, type = '') {
   bootstrapApollo({ ...issueState, issueType: el.dataset.issueType });
 
   const canCreate =
-    type === IncidentType ? el.dataset.canCreateIncident : el.dataset.canCreateIssue;
+    type === INCIDENT_TYPE ? el.dataset.canCreateIncident : el.dataset.canCreateIssue;
 
   return new Vue({
     el,

spec/frontend/issues/show/components/fields/type_spec.js

@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import IssueTypeField, { i18n } from '~/issues/show/components/fields/type.vue';
-import { IssuableTypes } from '~/issues/show/constants';
+import { issuableTypes } from '~/issues/show/constants';
 import {
   getIssueStateQueryResponse,
   updateIssueStateQueryResponse,
@@ -69,8 +69,8 @@ describe('Issue type field component', () => {
 
   it.each`
     at   | text                     | icon
-    ${0} | ${IssuableTypes[0].text} | ${IssuableTypes[0].icon}
-    ${1} | ${IssuableTypes[1].text} | ${IssuableTypes[1].icon}
+    ${0} | ${issuableTypes[0].text} | ${issuableTypes[0].icon}
+    ${1} | ${issuableTypes[1].text} | ${issuableTypes[1].icon}
   `(`renders the issue type $text with an icon in the dropdown`, ({ at, text, icon }) => {
     expect(findTypeFromDropDownItemIconAt(at).attributes('name')).toBe(icon);
     expect(findTypeFromDropDownItemAt(at).text()).toBe(text);
@@ -81,20 +81,20 @@ describe('Issue type field component', () => {
   });
 
   it('renders a form select with the `issue_type` value', () => {
-    expect(findTypeFromDropDown().attributes('value')).toBe(IssuableTypes.issue);
+    expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.issue);
   });
 
   describe('with Apollo cache mock', () => {
     it('renders the selected issueType', async () => {
       mockIssueStateData.mockResolvedValue(getIssueStateQueryResponse);
       await waitForPromises();
-      expect(findTypeFromDropDown().attributes('value')).toBe(IssuableTypes.issue);
+      expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.issue);
     });
 
     it('updates the `issue_type` in the apollo cache when the value is changed', async () => {
-      findTypeFromDropDownItems().at(1).vm.$emit('click', IssuableTypes.incident);
+      findTypeFromDropDownItems().at(1).vm.$emit('click', issuableTypes.incident);
       await wrapper.vm.$nextTick();
-      expect(findTypeFromDropDown().attributes('value')).toBe(IssuableTypes.incident);
+      expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.incident);
     });
 
     describe('when user is a guest', () => {
@@ -104,7 +104,7 @@ describe('Issue type field component', () => {
 
         expect(findTypeFromDropDownItemAt(0).isVisible()).toBe(true);
         expect(findTypeFromDropDownItemAt(1).isVisible()).toBe(false);
-        expect(findTypeFromDropDown().attributes('value')).toBe(IssuableTypes.issue);
+        expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.issue);
       });
 
       it('and incident is selected, includes incident in the dropdown', async () => {
@@ -113,7 +113,7 @@ describe('Issue type field component', () => {
 
         expect(findTypeFromDropDownItemAt(0).isVisible()).toBe(true);
         expect(findTypeFromDropDownItemAt(1).isVisible()).toBe(true);
-        expect(findTypeFromDropDown().attributes('value')).toBe(IssuableTypes.incident);
+        expect(findTypeFromDropDown().attributes('value')).toBe(issuableTypes.incident);
       });
     });
   });

spec/frontend/issues/show/components/header_actions_spec.js

@@ -8,7 +8,7 @@ import { IssuableType } from '~/vue_shared/issuable/show/constants';
 import DeleteIssueModal from '~/issues/show/components/delete_issue_modal.vue';
 import HeaderActions from '~/issues/show/components/header_actions.vue';
 import { IssuableStatus } from '~/issues/constants';
-import { IssueStateEvent } from '~/issues/show/constants';
+import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN } from '~/issues/show/constants';
 import promoteToEpicMutation from '~/issues/show/queries/promote_to_epic.mutation.graphql';
 import * as urlUtility from '~/lib/utils/url_utility';
 import eventHub from '~/notes/event_hub';
@@ -118,8 +118,8 @@ describe('HeaderActions component', () => {
     describe('close/reopen button', () => {
       describe.each`
         description                          | issueState               | buttonText               | newIssueState
-        ${`when the ${issueType} is open`}   | ${IssuableStatus.Open}   | ${`Close ${issueType}`}  | ${IssueStateEvent.Close}
-        ${`when the ${issueType} is closed`} | ${IssuableStatus.Closed} | ${`Reopen ${issueType}`} | ${IssueStateEvent.Reopen}
+        ${`when the ${issueType} is open`}   | ${IssuableStatus.Open}   | ${`Close ${issueType}`}  | ${ISSUE_STATE_EVENT_CLOSE}
+        ${`when the ${issueType} is closed`} | ${IssuableStatus.Closed} | ${`Reopen ${issueType}`} | ${ISSUE_STATE_EVENT_REOPEN}
       `('$description', ({ issueState, buttonText, newIssueState }) => {
         beforeEach(() => {
           dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
@@ -306,7 +306,7 @@ describe('HeaderActions component', () => {
             input: {
               iid: defaultProps.iid,
               projectPath: defaultProps.projectPath,
-              stateEvent: IssueStateEvent.Close,
+              stateEvent: ISSUE_STATE_EVENT_CLOSE,
             },
           },
         }),
@@ -345,7 +345,7 @@ describe('HeaderActions component', () => {
             input: {
               iid: defaultProps.iid.toString(),
               projectPath: defaultProps.projectPath,
-              stateEvent: IssueStateEvent.Close,
+              stateEvent: ISSUE_STATE_EVENT_CLOSE,
             },
           },
         }),