Merge branch '349949-fix-incident-sidebar-in-issue-boards' into 'master'

Fix Incident sidebar on issue boards

See merge request gitlab-org/gitlab!78021

app/assets/javascripts/boards/components/board_content_sidebar.vue

@@ -6,11 +6,12 @@ import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdow
 import { __, sprintf } from '~/locale';
 import BoardSidebarTimeTracker from '~/boards/components/sidebar/board_sidebar_time_tracker.vue';
 import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
-import { ISSUABLE } from '~/boards/constants';
+import { ISSUABLE, INCIDENT } from '~/boards/constants';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
 import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
 import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue';
+import SidebarSeverity from '~/sidebar/components/severity/sidebar_severity.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import SidebarLabelsWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
@@ -29,6 +30,7 @@ export default {
     SidebarSubscriptionsWidget,
     SidebarDropdownWidget,
     SidebarTodoWidget,
+    SidebarSeverity,
     MountingPortal,
     SidebarWeightWidget: () =>
       import('ee_component/sidebar/components/weight/sidebar_weight_widget.vue'),
@@ -69,9 +71,15 @@ export default {
     isIssuableSidebar() {
       return this.sidebarType === ISSUABLE;
     },
+    isIncidentSidebar() {
+      return this.activeBoardItem.type === INCIDENT;
+    },
     showSidebar() {
       return this.isIssuableSidebar && this.isSidebarOpen;
     },
+    sidebarTitle() {
+      return this.isIncidentSidebar ? __('Incident details') : __('Issue details');
+    },
     fullPath() {
       return this.activeBoardItem?.referencePath?.split('#')[0] || '';
     },
@@ -138,7 +146,7 @@ export default {
       @close="handleClose"
     >
       <template #title>
-        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ __('Issue details') }}</h2>
+        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ sidebarTitle }}</h2>
       </template>
       <template #header>
         <sidebar-todo-widget
@@ -159,7 +167,7 @@ export default {
           @assignees-updated="setAssignees"
         />
         <sidebar-dropdown-widget
-          v-if="epicFeatureAvailable"
+          v-if="epicFeatureAvailable && !isIncidentSidebar"
           :iid="activeBoardItem.iid"
           issuable-attribute="epic"
           :workspace-path="projectPathForActiveIssue"
@@ -178,7 +186,7 @@ export default {
           />
           <template v-if="!glFeatures.iterationCadences">
             <sidebar-dropdown-widget
-              v-if="iterationFeatureAvailable"
+              v-if="iterationFeatureAvailable && !isIncidentSidebar"
               :iid="activeBoardItem.iid"
               issuable-attribute="iteration"
               :workspace-path="projectPathForActiveIssue"
@@ -190,7 +198,7 @@ export default {
           </template>
           <template v-else>
             <iteration-sidebar-dropdown-widget
-              v-if="iterationFeatureAvailable"
+              v-if="iterationFeatureAvailable && !isIncidentSidebar"
               :iid="activeBoardItem.iid"
               :workspace-path="projectPathForActiveIssue"
               :attr-workspace-path="groupPathForActiveIssue"
@@ -226,8 +234,14 @@ export default {
         >
           {{ __('None') }}
         </sidebar-labels-widget>
+        <sidebar-severity
+          v-if="isIncidentSidebar"
+          :iid="activeBoardItem.iid"
+          :project-path="fullPath"
+          :initial-severity="activeBoardItem.severity"
+        />
         <sidebar-weight-widget
-          v-if="weightFeatureAvailable"
+          v-if="weightFeatureAvailable && !isIncidentSidebar"
           :iid="activeBoardItem.iid"
           :full-path="fullPath"
           :issuable-type="issuableType"

app/assets/javascripts/boards/constants.js

@@ -54,6 +54,7 @@ export const inactiveId = 0;
 
 export const ISSUABLE = 'issuable';
 export const LIST = 'list';
+export const INCIDENT = 'INCIDENT';
 
 export const flashAnimationDuration = 2000;
 

app/assets/javascripts/boards/graphql/issue.fragment.graphql

-#import "~/graphql_shared/fragments/milestone.fragment.graphql"
-#import "~/graphql_shared/fragments/user.fragment.graphql"
+#import "~/graphql_shared/fragments/issue.fragment.graphql"
 
-fragment IssueNode on Issue {
+fragment Issue on Issue {
   id
-  iid
-  title
-  referencePath: reference(full: true)
-  dueDate
-  timeEstimate
-  totalTimeSpent
-  humanTimeEstimate
-  humanTotalTimeSpent
-  emailsDisabled
-  confidential
-  hidden
-  webUrl
-  relativePosition
-  milestone {
-    ...MilestoneFragment
-  }
-  assignees {
-    nodes {
-      ...User
-    }
-  }
-  labels {
-    nodes {
-      id
-      title
-      color
-      description
-    }
-  }
+  ...IssueNode
 }

app/assets/javascripts/boards/graphql/issue_create.mutation.graphql

@@ -3,7 +3,7 @@
 mutation CreateIssue($input: CreateIssueInput!) {
   createIssue(input: $input) {
     issue {
-      ...IssueNode
+      ...Issue
     }
     errors
   }

app/assets/javascripts/boards/graphql/issue_move_list.mutation.graphql

@@ -21,7 +21,7 @@ mutation issueMoveList(
     }
   ) {
     issue {
-      ...IssueNode
+      ...Issue
     }
     errors
   }

app/assets/javascripts/boards/graphql/lists_issues.query.graphql

@@ -22,7 +22,7 @@ query BoardListsEE(
           issues(first: $first, filters: $filters, after: $after) {
             edges {
               node {
-                ...IssueNode
+                ...Issue
               }
             }
             pageInfo {
@@ -46,7 +46,7 @@ query BoardListsEE(
           issues(first: $first, filters: $filters, after: $after) {
             edges {
               node {
-                ...IssueNode
+                ...Issue
               }
             }
             pageInfo {

app/assets/javascripts/graphql_shared/fragments/issue.fragment.graphql

+#import "~/graphql_shared/fragments/milestone.fragment.graphql"
+#import "~/graphql_shared/fragments/user.fragment.graphql"
+
+fragment IssueNode on Issue {
+  id
+  iid
+  title
+  referencePath: reference(full: true)
+  dueDate
+  timeEstimate
+  totalTimeSpent
+  humanTimeEstimate
+  humanTotalTimeSpent
+  emailsDisabled
+  confidential
+  hidden
+  webUrl
+  relativePosition
+  type
+  severity
+  milestone {
+    ...MilestoneFragment
+  }
+  assignees {
+    nodes {
+      ...User
+    }
+  }
+  labels {
+    nodes {
+      id
+      title
+      color
+      description
+    }
+  }
+}

ee/app/assets/javascripts/boards/graphql/issue.fragment.graphql

-#import "~/graphql_shared/fragments/milestone.fragment.graphql"
-#import "~/graphql_shared/fragments/user.fragment.graphql"
+#import "~/graphql_shared/fragments/issue.fragment.graphql"
 
-fragment IssueNode on Issue {
+fragment Issue on Issue {
+  ...IssueNode
   id
-  iid
-  title
-  referencePath: reference(full: true)
-  dueDate
-  timeEstimate
-  totalTimeSpent
-  humanTimeEstimate
-  humanTotalTimeSpent
   weight
-  confidential
-  hidden
-  webUrl
   blocked
   blockedByCount
-  relativePosition
   epic {
     id
   }
-  assignees {
-    nodes {
-      ...User
-    }
-  }
-  milestone {
-    ...MilestoneFragment
-  }
   iteration {
     id
     title
@@ -37,12 +17,4 @@ fragment IssueNode on Issue {
       title
     }
   }
-  labels {
-    nodes {
-      id
-      title
-      color
-      description
-    }
-  }
 }

ee/app/assets/javascripts/boards/graphql/issue_move_list.mutation.graphql

@@ -23,7 +23,7 @@ mutation issueMoveListEE(
     }
   ) {
     issue {
-      ...IssueNode
+      ...Issue
     }
     errors
   }

ee/spec/frontend/boards/components/board_content_sidebar_spec.js

@@ -86,17 +86,31 @@ describe('ee/BoardContentSidebar', () => {
     });
   };
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('issue sidebar', () => {
     beforeEach(() => {
       createStore();
       createComponent();
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
+    it('matches the snapshot', () => {
+      expect(wrapper.findComponent(GlDrawer).element).toMatchSnapshot();
+    });
+  });
+
+  describe('incident sidebar', () => {
+    beforeEach(() => {
+      createStore({
+        mockGetters: { activeBoardItem: () => ({ ...mockIssue, epic: null, type: 'INCIDENT' }) },
+      });
+      createComponent();
     });
 
     it('matches the snapshot', () => {
-    expect(wrapper.find(GlDrawer).element).toMatchSnapshot();
+      expect(wrapper.findComponent(GlDrawer).element).toMatchSnapshot();
+    });
   });
 });

locale/gitlab.pot

@@ -18654,6 +18654,9 @@ msgstr ""
 msgid "Incident Management Limits"
 msgstr ""
 
+msgid "Incident details"
+msgstr ""
+
 msgid "Incident template (optional)."
 msgstr ""
 

spec/frontend/boards/components/board_content_sidebar_spec.js

@@ -9,6 +9,7 @@ import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
 import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
 import { ISSUABLE } from '~/boards/constants';
 import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue';
+import SidebarSeverity from '~/sidebar/components/severity/sidebar_severity.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import SidebarLabelsWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
@@ -96,7 +97,7 @@ describe('BoardContentSidebar', () => {
   });
 
   it('confirms we render MountingPortal', () => {
-    expect(wrapper.find(MountingPortal).props()).toMatchObject({
+    expect(wrapper.findComponent(MountingPortal).props()).toMatchObject({
       mountTo: '#js-right-sidebar-portal',
       append: true,
       name: 'board-content-sidebar',
@@ -141,6 +142,10 @@ describe('BoardContentSidebar', () => {
     );
   });
 
+  it('does not render SidebarSeverity', () => {
+    expect(wrapper.findComponent(SidebarSeverity).exists()).toBe(false);
+  });
+
   describe('when we emit close', () => {
     let toggleBoardItem;
 
@@ -160,4 +165,17 @@ describe('BoardContentSidebar', () => {
       });
     });
   });
+
+  describe('incident sidebar', () => {
+    beforeEach(() => {
+      createStore({
+        mockGetters: { activeBoardItem: () => ({ ...mockIssue, epic: null, type: 'INCIDENT' }) },
+      });
+      createComponent();
+    });
+
+    it('renders SidebarSeverity', () => {
+      expect(wrapper.findComponent(SidebarSeverity).exists()).toBe(true);
+    });
+  });
 });