Fix Incident sidebar on issue boards

Changelog: fixed

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

@@ -16,6 +16,8 @@ fragment IssueNode on Issue {
   hidden
   webUrl
   relativePosition
+  type
+  severity
   milestone {
     ...MilestoneFragment
   }

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

@@ -18,6 +18,8 @@ fragment IssueNode on Issue {
   blocked
   blockedByCount
   relativePosition
+  type
+  severity
   epic {
     id
   }

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ee/BoardContentSidebar matches the snapshot 1`] = `
+exports[`ee/BoardContentSidebar incident sidebar matches the snapshot 1`] = `
+<div
+  class="boards-sidebar gl-absolute"
+>
+  <h2
+    class="gl-my-0 gl-font-size-h2 gl-line-height-24"
+  >
+    Incident details
+  </h2>
+   
+  <sidebartodowidget-stub
+    class="gl-mt-3"
+    fullpath="gitlab-org/gitlab-test"
+    issuableid="gid://gitlab/Issue/436"
+    issuableiid="27"
+    issuabletype="issue"
+  />
+   
+  <boardsidebartitle-stub />
+   
+  <sidebarassigneeswidget-stub
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    initialassignees="[object Object],[object Object]"
+    issuabletype="issue"
+  />
+   
+  <!---->
+   
+  <div>
+    <sidebardropdownwidget-stub
+      attrworkspacepath="gitlab-org/gitlab-test"
+      data-testid="sidebar-milestones"
+      iid="27"
+      issuableattribute="milestone"
+      issuabletype="issue"
+      workspacepath="gitlab-org/gitlab-test"
+    />
+     
+    <!---->
+  </div>
+   
+  <boardsidebartimetracker-stub />
+   
+  <sidebardatewidget-stub
+    data-testid="sidebar-due-date"
+    datetype="dueDate"
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    issuabletype="issue"
+  />
+   
+  <sidebarlabelswidget-stub
+    allowmultiselect="true"
+    attrworkspacepath="gitlab-org/gitlab-test"
+    class="block labels"
+    dropdownbuttontext="Label"
+    footercreatelabeltitle="Create project label"
+    footermanagelabeltitle="Manage project labels"
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    issuabletype="issue"
+    labelcreatetype="project"
+    labelscreatetitle="Create project label"
+    labelsfilterbasepath=""
+    labelsfilterparam="label_name"
+    labelslisttitle="Assign labels"
+    variant="sidebar"
+    workspacetype="project"
+  >
+    
+        None
+      
+  </sidebarlabelswidget-stub>
+   
+  <div
+    class="block"
+  >
+    <div
+      class="sidebar-collapsed-icon"
+    >
+      <div
+        class="incident-severity gl-display-inline-flex gl-align-items-center gl-justify-content-between"
+      >
+        <svg
+          aria-hidden="true"
+          class="gl-icon s14 icon-unknown"
+          data-testid="severity-unknown-icon"
+          role="img"
+        >
+          <use
+            href="#severity-unknown"
+          />
+        </svg>
+         
+        <!---->
+      </div>
+       
+      <div
+        class="gl-tooltip"
+      >
+        Severity: 
+          Unknown
+        
+      </div>
+    </div>
+     
+    <div
+      class="hide-collapsed"
+    >
+      <p
+        class="gl-line-height-20 gl-mb-2 gl-text-gray-900 gl-display-flex gl-justify-content-space-between"
+      >
+        
+      Severity
+      
+        <button
+          class="btn btn-default btn-sm gl-button btn-default-tertiary"
+          data-testid="editButton"
+          type="button"
+        >
+          <!---->
+           
+          <!---->
+            
+          <span
+            class="gl-button-text"
+          >
+            
+        Edit
+      
+          </span>
+        </button>
+      </p>
+       
+      <div
+        class="dropdown b-dropdown gl-new-dropdown gl-display-none"
+        id="__BVID__39"
+      >
+        <!---->
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="btn dropdown-toggle btn-default btn-md btn-block dropdown-menu-toggle gl-mb-2 gl-button gl-dropdown-toggle"
+          id="__BVID__39__BV_toggle_"
+          type="button"
+        >
+          <!---->
+           
+          <!---->
+           
+          <span
+            class="gl-new-dropdown-button-text"
+          >
+            Unknown
+          </span>
+           
+          <svg
+            aria-hidden="true"
+            class="gl-button-icon dropdown-chevron gl-icon s16"
+            data-testid="chevron-down-icon"
+            role="img"
+          >
+            <use
+              href="#chevron-down"
+            />
+          </svg>
+        </button>
+        <ul
+          aria-labelledby="__BVID__39__BV_toggle_"
+          class="dropdown-menu"
+          role="menu"
+          tabindex="-1"
+        >
+          <div
+            class="gl-new-dropdown-inner"
+          >
+            <div
+              class="gl-new-dropdown-header gl-border-b-0!"
+            >
+              <p
+                class="gl-new-dropdown-header-top"
+              >
+                
+        Assign severity
+      
+              </p>
+               
+            </div>
+             
+            <!---->
+             
+            <div
+              class="gl-new-dropdown-contents"
+            >
+              <!---->
+               
+              <li
+                class="gl-new-dropdown-item"
+                role="presentation"
+              >
+                <button
+                  class="dropdown-item"
+                  data-testid="severityDropdownItem"
+                  role="menuitem"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden gl-mt-3 gl-align-self-start"
+                    data-testid="dropdown-item-checkbox"
+                    role="img"
+                  >
+                    <use
+                      href="#mobile-issue-close"
+                    />
+                  </svg>
+                   
+                  <!---->
+                   
+                  <!---->
+                   
+                  <div
+                    class="gl-new-dropdown-item-text-wrapper"
+                  >
+                    <p
+                      class="gl-new-dropdown-item-text-primary"
+                    >
+                      <div
+                        class="incident-severity gl-display-inline-flex gl-align-items-center gl-justify-content-between"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="gl-icon s12 icon-critical gl-mr-3"
+                          data-testid="severity-critical-icon"
+                          role="img"
+                        >
+                          <use
+                            href="#severity-critical"
+                          />
+                        </svg>
+                         
+                        <span>
+                          Critical - S1
+                        </span>
+                      </div>
+                    </p>
+                     
+                    <!---->
+                  </div>
+                   
+                  <!---->
+                </button>
+              </li>
+              <li
+                class="gl-new-dropdown-item"
+                role="presentation"
+              >
+                <button
+                  class="dropdown-item"
+                  data-testid="severityDropdownItem"
+                  role="menuitem"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden gl-mt-3 gl-align-self-start"
+                    data-testid="dropdown-item-checkbox"
+                    role="img"
+                  >
+                    <use
+                      href="#mobile-issue-close"
+                    />
+                  </svg>
+                   
+                  <!---->
+                   
+                  <!---->
+                   
+                  <div
+                    class="gl-new-dropdown-item-text-wrapper"
+                  >
+                    <p
+                      class="gl-new-dropdown-item-text-primary"
+                    >
+                      <div
+                        class="incident-severity gl-display-inline-flex gl-align-items-center gl-justify-content-between"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="gl-icon s12 icon-high gl-mr-3"
+                          data-testid="severity-high-icon"
+                          role="img"
+                        >
+                          <use
+                            href="#severity-high"
+                          />
+                        </svg>
+                         
+                        <span>
+                          High - S2
+                        </span>
+                      </div>
+                    </p>
+                     
+                    <!---->
+                  </div>
+                   
+                  <!---->
+                </button>
+              </li>
+              <li
+                class="gl-new-dropdown-item"
+                role="presentation"
+              >
+                <button
+                  class="dropdown-item"
+                  data-testid="severityDropdownItem"
+                  role="menuitem"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden gl-mt-3 gl-align-self-start"
+                    data-testid="dropdown-item-checkbox"
+                    role="img"
+                  >
+                    <use
+                      href="#mobile-issue-close"
+                    />
+                  </svg>
+                   
+                  <!---->
+                   
+                  <!---->
+                   
+                  <div
+                    class="gl-new-dropdown-item-text-wrapper"
+                  >
+                    <p
+                      class="gl-new-dropdown-item-text-primary"
+                    >
+                      <div
+                        class="incident-severity gl-display-inline-flex gl-align-items-center gl-justify-content-between"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="gl-icon s12 icon-medium gl-mr-3"
+                          data-testid="severity-medium-icon"
+                          role="img"
+                        >
+                          <use
+                            href="#severity-medium"
+                          />
+                        </svg>
+                         
+                        <span>
+                          Medium - S3
+                        </span>
+                      </div>
+                    </p>
+                     
+                    <!---->
+                  </div>
+                   
+                  <!---->
+                </button>
+              </li>
+              <li
+                class="gl-new-dropdown-item"
+                role="presentation"
+              >
+                <button
+                  class="dropdown-item"
+                  data-testid="severityDropdownItem"
+                  role="menuitem"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden gl-mt-3 gl-align-self-start"
+                    data-testid="dropdown-item-checkbox"
+                    role="img"
+                  >
+                    <use
+                      href="#mobile-issue-close"
+                    />
+                  </svg>
+                   
+                  <!---->
+                   
+                  <!---->
+                   
+                  <div
+                    class="gl-new-dropdown-item-text-wrapper"
+                  >
+                    <p
+                      class="gl-new-dropdown-item-text-primary"
+                    >
+                      <div
+                        class="incident-severity gl-display-inline-flex gl-align-items-center gl-justify-content-between"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="gl-icon s12 icon-low gl-mr-3"
+                          data-testid="severity-low-icon"
+                          role="img"
+                        >
+                          <use
+                            href="#severity-low"
+                          />
+                        </svg>
+                         
+                        <span>
+                          Low - S4
+                        </span>
+                      </div>
+                    </p>
+                     
+                    <!---->
+                  </div>
+                   
+                  <!---->
+                </button>
+              </li>
+              <li
+                class="gl-new-dropdown-item"
+                role="presentation"
+              >
+                <button
+                  class="dropdown-item"
+                  data-testid="severityDropdownItem"
+                  role="menuitem"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="gl-icon s16 gl-new-dropdown-item-check-icon gl-mt-3 gl-align-self-start"
+                    data-testid="dropdown-item-checkbox"
+                    role="img"
+                  >
+                    <use
+                      href="#mobile-issue-close"
+                    />
+                  </svg>
+                   
+                  <!---->
+                   
+                  <!---->
+                   
+                  <div
+                    class="gl-new-dropdown-item-text-wrapper"
+                  >
+                    <p
+                      class="gl-new-dropdown-item-text-primary"
+                    >
+                      <div
+                        class="incident-severity gl-display-inline-flex gl-align-items-center gl-justify-content-between"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="gl-icon s12 icon-unknown gl-mr-3"
+                          data-testid="severity-unknown-icon"
+                          role="img"
+                        >
+                          <use
+                            href="#severity-unknown"
+                          />
+                        </svg>
+                         
+                        <span>
+                          Unknown
+                        </span>
+                      </div>
+                    </p>
+                     
+                    <!---->
+                  </div>
+                   
+                  <!---->
+                </button>
+              </li>
+            </div>
+             
+            <!---->
+          </div>
+        </ul>
+      </div>
+       
+      <div
+        class="incident-severity gl-display-inline-flex gl-align-items-center gl-justify-content-between"
+      >
+        <svg
+          aria-hidden="true"
+          class="gl-icon s12 icon-unknown gl-mr-3"
+          data-testid="severity-unknown-icon"
+          role="img"
+        >
+          <use
+            href="#severity-unknown"
+          />
+        </svg>
+         
+        <span>
+          Unknown
+        </span>
+      </div>
+    </div>
+  </div>
+   
+  <!---->
+   
+  <sidebarconfidentialitywidget-stub
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    issuabletype="issue"
+  />
+   
+  <sidebarsubscriptionswidget-stub
+    data-testid="sidebar-notifications"
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    issuabletype="issue"
+  />
+</div>
+`;
+
+exports[`ee/BoardContentSidebar issue sidebar matches the snapshot 1`] = `
 <div
   class="boards-sidebar gl-absolute"
 >
@@ -90,6 +617,8 @@ exports[`ee/BoardContentSidebar matches the snapshot 1`] = `
       
   </sidebarlabelswidget-stub>
    
+  <!---->
+   
   <sidebarweightwidget-stub
     full-path="gitlab-org/gitlab-test"
     iid="27"

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

@@ -86,17 +86,31 @@ describe('ee/BoardContentSidebar', () => {
     });
   };
 
-  beforeEach(() => {
-    createStore();
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
-  it('matches the snapshot', () => {
-    expect(wrapper.find(GlDrawer).element).toMatchSnapshot();
+  describe('issue sidebar', () => {
+    beforeEach(() => {
+      createStore();
+      createComponent();
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.find(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();
+    });
   });
 });

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';
@@ -141,6 +142,10 @@ describe('BoardContentSidebar', () => {
     );
   });
 
+  it('does not render SidebarSeverity', () => {
+    expect(wrapper.find(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.find(SidebarSeverity).exists()).toBe(true);
+    });
+  });
 });