[Feature] Incident Details Modal

src/App.js

@@ -24,6 +24,7 @@ import ReassignModalComponent from 'components/ReassignModal/ReassignModalCompon
 import AddResponderModalComponent from 'components/AddResponderModal/AddResponderModalComponent';
 import MergeModalComponent from 'components/MergeModal/MergeModalComponent';
 import ConfirmQueryModalComponent from 'components/ConfirmQueryModal/ConfirmQueryModalComponent';
+import IncidentDetailsModalComponent from 'components/IncidentDetailsModal/IncidentDetailsModalComponent';
 
 import {
   refreshIncidentsAsync as refreshIncidentsAsyncConnected,
@@ -238,6 +239,7 @@ const App = ({
         <AddResponderModalComponent />
         <MergeModalComponent />
         <ConfirmQueryModalComponent />
+        <IncidentDetailsModalComponent />
       </Container>
     </div>
   );

src/components/IncidentDetailsModal/IncidentDetailsModalComponent.js

@@ -0,0 +1,87 @@
+import {
+  useState,
+} from 'react';
+import {
+  connect,
+} from 'react-redux';
+
+import {
+  Modal, Container, Row, Col, Tabs, Tab,
+} from 'react-bootstrap';
+
+import {
+  useTranslation,
+} from 'react-i18next';
+
+import {
+  toggleDisplayIncidentDetailsModal as toggleDisplayIncidentDetailsModalConnected,
+} from 'redux/incident_details/actions';
+
+import AlertsTableComponent from './subcomponents/AlertsTableComponent';
+import IncidentTimelineComponent from './subcomponents/IncidentTimelineComponent';
+
+import './IncidentDetailsModalComponent.scss';
+
+const IncidentDetailsModalComponent = ({
+  toggleDisplayIncidentDetailsModal, incidentDetails,
+}) => {
+  const {
+    displayIncidentDetailsModal,
+  } = incidentDetails;
+  const {
+    t,
+  } = useTranslation();
+
+  const [currentTab, setCurrentTab] = useState('alerts');
+
+  return (
+    <div className="incident-details-modal-ctr">
+      <Modal
+        backdrop="static"
+        dialogClassName="modal-fullscreen"
+        show={displayIncidentDetailsModal}
+        onHide={toggleDisplayIncidentDetailsModal}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>[#99999] Incident Summary Here</Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="modal-body-fullscreen">
+          <Container fluid>
+            <Row>
+              <Col>High Level Details Placeholder</Col>
+            </Row>
+            <Row>
+              <Col>Incident Actions Placeholder</Col>
+            </Row>
+            <Row>
+              <Col>Incident Fields Placeholder</Col>
+              <Col>Notes Placeholder</Col>
+            </Row>
+            <Row>
+              <Col>
+                <Tabs activeKey={currentTab} onSelect={(k) => setCurrentTab(k)}>
+                  <Tab eventKey="alerts" title={t('Alerts')}>
+                    <AlertsTableComponent />
+                  </Tab>
+                  <Tab eventKey="timeline" title={t('Timeline')}>
+                    <IncidentTimelineComponent />
+                  </Tab>
+                </Tabs>
+              </Col>
+            </Row>
+          </Container>
+        </Modal.Body>
+      </Modal>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  incidentDetails: state.incidentDetails,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleDisplayIncidentDetailsModal: () => dispatch(toggleDisplayIncidentDetailsModalConnected()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(IncidentDetailsModalComponent);

src/components/IncidentDetailsModal/IncidentDetailsModalComponent.scss

@@ -0,0 +1,8 @@
+/* Bootstrap */
+.modal-fullscreen {
+  min-width: 98%;
+}
+
+.modal-body-fullscreen {
+  min-height: 89vh;
+}

src/components/IncidentDetailsModal/subcomponents/AlertsTableComponent.js

@@ -0,0 +1,27 @@
+import {
+  connect,
+} from 'react-redux';
+
+const AlertsTableComponent = ({
+  incidentDetails,
+}) => {
+  const {
+    incident,
+  } = incidentDetails;
+  if (incident) console.log('hacking eslint for now');
+  return (
+    <div>
+      <p>AlertsTableComponent Placeholder</p>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  incidentDetails: state.incidentDetails,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  placeholder: () => dispatch(() => {}),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AlertsTableComponent);

src/components/IncidentDetailsModal/subcomponents/IncidentTimelineComponent.js

@@ -0,0 +1,27 @@
+import {
+  connect,
+} from 'react-redux';
+
+const IncidentTimelineComponent = ({
+  incidentDetails,
+}) => {
+  const {
+    incident,
+  } = incidentDetails;
+  if (incident) console.log('hacking eslint for now');
+  return (
+    <div>
+      <p>IncidentTimelineComponent Placeholder</p>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  incidentDetails: state.incidentDetails,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  placeholder: () => dispatch(() => {}),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(IncidentTimelineComponent);

src/redux/incident_details/actions.js

@@ -0,0 +1,17 @@
+/* eslint-disable max-len */
+// Define Action Types
+export const TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED = 'TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED';
+export const TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED = 'TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED';
+
+export const UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED = 'UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED';
+export const UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED = 'UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED';
+
+// Define Actions
+export const toggleDisplayIncidentDetailsModal = () => ({
+  type: TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED,
+});
+
+export const updateIncidentDetailsModal = (incident) => ({
+  type: UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED,
+  incident,
+});

src/redux/incident_details/reducers.js

@@ -0,0 +1,44 @@
+import produce from 'immer';
+
+import {
+  TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED,
+  TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED,
+  UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED,
+  UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED,
+} from './actions';
+
+const incidentDetails = produce(
+  (draft, action) => {
+    switch (action.type) {
+      case TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED:
+        draft.status = TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED;
+        break;
+
+      case TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED:
+        draft.displayIncidentDetailsModal = action.displayIncidentDetailsModal;
+        draft.status = TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED;
+        break;
+
+      case UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED:
+        draft.status = UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED;
+        break;
+
+      case UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED:
+        draft.incident = action.incident;
+        draft.status = UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED;
+        break;
+
+      default:
+        break;
+    }
+  },
+  {
+    displayIncidentDetailsModal: true,
+    incident: null,
+    status: null,
+    fetchingData: false,
+    error: null,
+  },
+);
+
+export default incidentDetails;

src/redux/incident_details/sagas.js

@@ -0,0 +1,43 @@
+import {
+  put, select, takeLatest,
+} from 'redux-saga/effects';
+
+import {
+  TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED,
+  TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED,
+  UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED,
+  UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED,
+} from './actions';
+
+import selectIncidentDetailsData from './selectors';
+
+export function* toggleDisplayIncidentDetailsModal() {
+  yield takeLatest(
+    TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED,
+    toggleDisplayIncidentDetailsModalImpl,
+  );
+}
+
+export function* toggleDisplayIncidentDetailsModalImpl() {
+  const {
+    displayIncidentDetailsModal,
+  } = yield select(selectIncidentDetailsData);
+  yield put({
+    type: TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED,
+    displayIncidentDetailsModal: !displayIncidentDetailsModal,
+  });
+}
+
+export function* updateIncidentDetailsModal() {
+  yield takeLatest(UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED, updateIncidentDetailsModalImpl);
+}
+
+export function* updateIncidentDetailsModalImpl(action) {
+  const {
+    incident,
+  } = action;
+  yield put({
+    type: UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED,
+    incident,
+  });
+}

src/redux/incident_details/sagas.test.js

@@ -0,0 +1,61 @@
+import {
+  select,
+} from 'redux-saga/effects';
+import {
+  expectSaga,
+} from 'redux-saga-test-plan';
+
+import {
+  TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED,
+  TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED,
+  UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED,
+  UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED,
+} from './actions';
+import incidentDetails from './reducers';
+import selectIncidentDetails from './selectors';
+import {
+  toggleDisplayIncidentDetailsModal, updateIncidentDetailsModal,
+} from './sagas';
+
+describe('Sagas: Incident Details', () => {
+  it('toggleIncidentDetailsModal', () => {
+    const expectedDisplayIncidentDetailsModal = true;
+    return expectSaga(toggleDisplayIncidentDetailsModal)
+      .withReducer(incidentDetails)
+      .provide([[select(selectIncidentDetails), { displayIncidentDetailsModal: false }]])
+      .dispatch({ type: TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_REQUESTED })
+      .put({
+        type: TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED,
+        displayIncidentDetailsModal: expectedDisplayIncidentDetailsModal,
+      })
+      .hasFinalState({
+        displayIncidentDetailsModal: expectedDisplayIncidentDetailsModal,
+        incident: null,
+        status: TOGGLE_DISPLAY_INCIDENT_DETAILS_MODAL_COMPLETED,
+        fetchingData: false,
+        error: null,
+      })
+      .silentRun();
+  });
+  it('updateIncidentDetailsModal', () => {
+    const incident = {};
+    return expectSaga(updateIncidentDetailsModal)
+      .withReducer(incidentDetails)
+      .dispatch({
+        type: UPDATE_INCIDENT_DETAILS_MODAL_REQUESTED,
+        incident,
+      })
+      .put({
+        type: UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED,
+        incident,
+      })
+      .hasFinalState({
+        displayIncidentDetailsModal: false,
+        incident,
+        status: UPDATE_INCIDENT_DETAILS_MODAL_COMPLETED,
+        fetchingData: false,
+        error: null,
+      })
+      .silentRun();
+  });
+});

src/redux/incident_details/selectors.js

@@ -0,0 +1,2 @@
+const selectIncidentDetails = (state) => state.incidentDetails;
+export default selectIncidentDetails;

src/redux/persistence/config.js

@@ -9,6 +9,7 @@ export const persistConfig = {
     'logEntries',
     'querySettings',
     'incidentActions',
+    'incidentDetails',
     'services',
     'teams',
     'users',

src/redux/rootReducer.js

@@ -15,6 +15,7 @@ import logEntries from './log_entries/reducers';
 import querySettings from './query_settings/reducers';
 import incidentTable from './incident_table/reducers';
 import incidentActions from './incident_actions/reducers';
+import incidentDetails from './incident_details/reducers';
 import services from './services/reducers';
 import teams from './teams/reducers';
 import priorities from './priorities/reducers';
@@ -33,6 +34,7 @@ export default combineReducers({
   querySettings: persistReducer(querySettingsPersistConfig, querySettings),
   incidentTable,
   incidentActions,
+  incidentDetails,
   services,
   teams,
   priorities,

src/redux/rootSaga.js

@@ -71,6 +71,11 @@ import {
   syncWithExternalSystemAsync,
 } from './incident_actions/sagas';
 
+import {
+  toggleDisplayIncidentDetailsModal,
+  updateIncidentDetailsModal,
+} from './incident_details/sagas';
+
 import {
   toggleActionAlertsModal, updateActionAlertsModal,
 } from './action_alerts/sagas';
@@ -187,6 +192,10 @@ export default function* rootSaga() {
     runCustomIncidentActionAsync(),
     syncWithExternalSystemAsync(),
 
+    // Incident Details
+    toggleDisplayIncidentDetailsModal(),
+    updateIncidentDetailsModal(),
+
     // Action Alerts Modal
     toggleActionAlertsModal(),
     updateActionAlertsModal(),