Hide comments, linked issues/MRs on other tabs

Show only in summary tab

Add feature specs to test this behaviour

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

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <template>
-  <small class="edited-text">
+  <small class="edited-text js-issue-widgets">
     Edited
     <time-ago-tooltip v-if="updatedAt" :time="updatedAt" tooltip-placement="bottom" />
     <span v-if="hasUpdatedBy">

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

@@ -63,13 +63,32 @@ export default {
       const { category, action } = trackIncidentDetailsViewsOptions;
       Tracking.event(category, action);
     },
+    handleTabChange(tabIndex) {
+      const parent = document.querySelector('.js-issue-details');
+
+      if (parent !== null) {
+        const itemsToHide = parent.querySelectorAll('.js-issue-widgets');
+        const lineSeparator = parent.querySelector('.js-detail-page-description');
+
+        lineSeparator.classList.toggle('gl-border-b-0', tabIndex > 0);
+
+        itemsToHide.forEach(function hide(item) {
+          item.classList.toggle('gl-display-none', tabIndex > 0);
+        });
+      }
+    },
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-tabs content-class="gl-reset-line-height" class="gl-mt-n3" data-testid="incident-tabs">
+    <gl-tabs
+      content-class="gl-reset-line-height"
+      class="gl-mt-n3"
+      data-testid="incident-tabs"
+      @input="handleTabChange"
+    >
       <gl-tab :title="s__('Incident|Summary')">
         <highlight-bar :alert="alert" />
         <description-component v-bind="$attrs" />

app/controllers/projects/issues_controller.rb

@@ -43,6 +43,8 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:iteration_cadences, project&.group, default_enabled: :yaml)
     push_frontend_feature_flag(:contacts_autocomplete, project&.group, default_enabled: :yaml)
     push_frontend_feature_flag(:markdown_continue_lists, project, default_enabled: :yaml)
+    push_frontend_feature_flag(:incident_timeline, project, default_enabled: :yaml)
+    push_licensed_feature(:incident_timeline_events) if project.licensed_feature_available?(:incident_timeline_events)
   end
 
   before_action only: :show do

app/views/shared/issue_type/_details_content.html.haml

 - related_branches_path = related_branches_project_issue_path(@project, issuable)
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
 
-.issue-details.issuable-details
-  .detail-page-description.content-block
+.issue-details.issuable-details.js-issue-details
+  .detail-page-description.content-block.js-detail-page-description
     #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json, full_path: @project.full_path } }
       .title-container
         %h1.title= markdown_field(issuable, :title)
@@ -12,6 +12,7 @@
 
       = edited_time_ago_with_tooltip(issuable, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
 
+  .js-issue-widgets
     = render 'shared/issue_type/sentry_stack_trace', issuable: issuable
 
     = render 'projects/issues/design_management'
@@ -28,8 +29,9 @@
       #related-branches{ data: { url: related_branches_path } }
         -# This element is filled in using JavaScript.
 
-  = render 'shared/issue_type/emoji_block', issuable: issuable, api_awards_path: api_awards_path
+  .js-issue-widgets
+    = render 'shared/issue_type/emoji_block', issuable: issuable, api_awards_path: api_awards_path
 
-  = render 'projects/issues/discussion'
+    = render 'projects/issues/discussion'
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @issue.assignees

ee/spec/features/issues/incident_issue_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Incident Detail', :js do
+  let_it_be(:project) { create(:project, :public) }
+
+  let_it_be(:user) { create(:user) }
+  let_it_be(:started_at) { Time.now.rfc3339 }
+  let_it_be(:incident) { create(:incident, project: project, description: 'hello') }
+
+  context 'when user displays the incident' do
+    before do
+      stub_licensed_features(incident_timeline_events: true)
+      stub_feature_flags(incident_timeline_event_tab: true)
+      project.add_developer(user)
+      sign_in(user)
+    end
+
+    context 'when on timeline events tab from incident route' do
+      before do
+        visit project_issues_incident_path(project, incident)
+        wait_for_requests
+        click_link 'Timeline'
+      end
+
+      it 'does not show the linked issues and notes/comment components' do
+        page.within('.issuable-details') do
+          hidden_items = find_all('.js-issue-widgets')
+
+          # Linked Issues/MRs and comment box are hidden on page
+          expect(hidden_items.count).to eq(0)
+        end
+      end
+    end
+
+    context 'when on timeline events tab from issue route' do
+      before do
+        visit project_issue_path(project, incident)
+        wait_for_requests
+        click_link 'Timeline'
+      end
+
+      it 'does not show the linked issues and notes/comment commponents' do
+        page.within('.issuable-details') do
+          hidden_items = find_all('.js-issue-widgets')
+
+          # Linked Issues/MRs and comment box are hidden on page
+          expect(hidden_items.count).to eq(0)
+        end
+      end
+    end
+  end
+end

spec/features/issues/incident_issue_spec.rb

@@ -56,5 +56,39 @@ RSpec.describe 'Incident Detail', :js do
         end
       end
     end
+
+    context 'when on summary tab' do
+      before do
+        click_link 'Summary'
+      end
+
+      it 'shows the summary tab with all components' do
+        page.within('.issuable-details') do
+          hidden_items = find_all('.js-issue-widgets')
+
+          # Linked Issues/MRs and comment box
+          expect(hidden_items.count).to eq(2)
+
+          hidden_items.each do |hidden_item|
+            expect(hidden_item).not_to have_selector('.gl-display-none')
+          end
+        end
+      end
+    end
+
+    context 'when on alert details tab' do
+      before do
+        click_link 'Alert details'
+      end
+
+      it 'does not show the linked issues and notes/comment components' do
+        page.within('.issuable-details') do
+          hidden_items = find_all('.js-issue-widgets')
+
+          # Linked Issues/MRs and comment box are hidden on page
+          expect(hidden_items.count).to eq(0)
+        end
+      end
+    end
   end
 end