Dmirano/3775 dashboard restructure

web/src/containers/Dashboard.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { getIsFederal } from '../reducers/user.selector';
-import FederalDashboard from './FederalDashboard';
-import StateDashboard from './StateDashboard';
+import FederalDashboard from '../pages/dashboard/fed-dashboard/FederalDashboard';
+import StateDashboard from '../pages/dashboard/state-dashboard/StateDashboard';
 
 const Dashboard = ({ isFederal, ...rest }) =>
   isFederal ? <FederalDashboard {...rest} /> : <StateDashboard {...rest} />;

web/src/containers/FederalDashboard.js → web/src/pages/dashboard/fed-dashboard/FederalDashboard.js

@@ -2,26 +2,29 @@ import PropType from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import FederalAdmin from "./admin/FederalAdmin";
-import { ApprovalStatus } from '../components/AffiliationStatus';
+import FederalAdmin from '../../../containers/admin/FederalAdmin';
+import { ApprovalStatus } from '../state-dashboard/AffiliationStatus';
 
-import { getUserStateOrTerritoryStatus } from '../reducers/user.selector';
-import { AFFILIATION_STATUSES } from '../constants';
+import { getUserStateOrTerritoryStatus } from '../../../reducers/user.selector';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
-const FederalDashboard = ({ approvalStatus }) => {  
+const FederalDashboard = ({ approvalStatus }) => {
   const isApproved = approvalStatus === AFFILIATION_STATUSES.APPROVED;
-  
+
   return (
     <main
       id="start-main-content"
       className="ds-l-container--fluid ds-u-margin-x--5 ds-u-margin-bottom--5"
     >
       <h1>Federal Administrator Portal</h1>
-      {isApproved && <FederalAdmin /> }
-      {!isApproved && <ApprovalStatus 
-                        status={approvalStatus}
-                        mailTo='CMS-EAPD@cms.hhs.gov'
-                        administratorType='Federal' />}
+      {isApproved && <FederalAdmin />}
+      {!isApproved && (
+        <ApprovalStatus
+          status={approvalStatus}
+          mailTo="CMS-EAPD@cms.hhs.gov"
+          administratorType="Federal"
+        />
+      )}
     </main>
   );
 };

web/src/containers/FederalDashboard.test.js → web/src/pages/dashboard/fed-dashboard/FederalDashboard.test.js

@@ -1,9 +1,9 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import { AFFILIATION_STATUSES } from '../constants';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
-import FederalAdmin from './admin/FederalAdmin';
-import { ApprovalStatus } from '../components/AffiliationStatus';
+import FederalAdmin from '../../../containers/admin/FederalAdmin';
+import { ApprovalStatus } from '../state-dashboard/AffiliationStatus';
 
 import { plain as FederalDashboard } from './FederalDashboard';
 

web/src/components/AffiliationStatus.js → web/src/pages/dashboard/state-dashboard/AffiliationStatus.js

@@ -2,14 +2,14 @@ import PropType from 'prop-types';
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 
-import Instruction from './Instruction';
+import Instruction from '../../../components/Instruction';
 import {
   getUserStateOrTerritory,
   getUserStateOrTerritoryStatus
-} from '../reducers/user.selector';
-import { AFFILIATION_STATUSES } from '../constants';
-import UpgradeBrowser from './UpgradeBrowser';
-import axios from '../util/api';
+} from '../../../reducers/user.selector';
+import { AFFILIATION_STATUSES } from '../../../constants';
+import UpgradeBrowser from '../../../components/UpgradeBrowser';
+import axios from '../../../util/api';
 
 const ApprovalStatus = ({ status, mailTo, administratorType }) => {
   const options = {

web/src/components/AffiliationStatus.test.js → web/src/pages/dashboard/state-dashboard/AffiliationStatus.test.js

@@ -5,7 +5,7 @@ import {
   plain as AffiliationStatus,
   ApprovalStatus
 } from './AffiliationStatus';
-import { AFFILIATION_STATUSES } from '../constants';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
 const { DENIED, REQUESTED, REVOKED } = AFFILIATION_STATUSES;
 
@@ -63,7 +63,11 @@ describe('<ApprovalStatus />', () => {
 
   it('displays a mailto link', () => {
     render(
-      <ApprovalStatus status={REQUESTED} mailTo="em@il.com,admin@mo.gov" administratorType='State' />
+      <ApprovalStatus
+        status={REQUESTED}
+        mailTo="em@il.com,admin@mo.gov"
+        administratorType="State"
+      />
     );
     const aTag = screen.getByText('State Administrator', { selector: 'a' });
     expect(aTag).toBeInTheDocument();
@@ -72,19 +76,32 @@ describe('<ApprovalStatus />', () => {
 
   it('displays the status text', () => {
     render(
-      <ApprovalStatus status={REQUESTED} mailTo="em@il.com,admin@mo.gov" administratorType='State' />
+      <ApprovalStatus
+        status={REQUESTED}
+        mailTo="em@il.com,admin@mo.gov"
+        administratorType="State"
+      />
     );
-    const statusText = screen.getByText(requestedStatusOptions.status, { selector: 'h3' });
+    const statusText = screen.getByText(requestedStatusOptions.status, {
+      selector: 'h3'
+    });
     expect(statusText).toBeInTheDocument();
   });
 
   it('displays the img correctly', () => {
     render(
-      <ApprovalStatus status={REQUESTED} mailTo="em@il.com,admin@mo.gov" administratorType='State' />
+      <ApprovalStatus
+        status={REQUESTED}
+        mailTo="em@il.com,admin@mo.gov"
+        administratorType="State"
+      />
     );
     const img = screen.getByAltText(requestedStatusOptions.alt);
     expect(img).toBeInTheDocument();
     expect(img).toHaveAttribute('src', requestedStatusOptions.src);
-    expect(img).toHaveAttribute('width', requestedStatusOptions.width.toString());
+    expect(img).toHaveAttribute(
+      'width',
+      requestedStatusOptions.width.toString()
+    );
   });
 });

web/src/components/ApdList.js → web/src/pages/dashboard/state-dashboard/ApdList.js

@@ -3,14 +3,17 @@ import PropType from 'prop-types';
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 
-import Icon, { File, faPlusCircle } from './Icons';
-import Instruction from './Instruction';
-import DeleteModal from './DeleteModal';
-import { createApd, deleteApd, selectApd } from '../actions/app';
-import { t } from '../i18n';
-import { selectApdDashboard, selectApds } from '../reducers/apd.selectors';
-import UpgradeBrowser from './UpgradeBrowser';
-import Loading from './Loading';
+import Icon, { File, faPlusCircle } from '../../../components/Icons';
+import Instruction from '../../../components/Instruction';
+import DeleteModal from '../../../components/DeleteModal';
+import { createApd, deleteApd, selectApd } from '../../../actions/app';
+import { t } from '../../../i18n';
+import {
+  selectApdDashboard,
+  selectApds
+} from '../../../reducers/apd.selectors';
+import UpgradeBrowser from '../../../components/UpgradeBrowser';
+import Loading from '../../../components/Loading';
 
 const ApdList = ({
   apds,

web/src/components/ApdList.test.js → web/src/pages/dashboard/state-dashboard/ApdList.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ApdList from './ApdList';
-import { renderWithConnection } from '../shared/apd-testing-library';
-import mockAxios from '../util/api';
-import { AFFILIATION_STATUSES } from '../constants';
+import { renderWithConnection } from '../../../shared/apd-testing-library';
+import mockAxios from '../../../util/api';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
-jest.mock('../util/api', () => ({
+jest.mock('../../../util/api', () => ({
   get: jest.fn(),
   post: jest.fn(),
   patch: jest.fn(),
@@ -48,11 +48,8 @@ describe('<ApdList />', () => {
             user: {
               data: {
                 state: { id: 'mo' },
-                states: { 'mo': AFFILIATION_STATUSES.APPROVED },
-                activities: [
-                  "view-document",
-                  "edit-document",
-                ]
+                states: { mo: AFFILIATION_STATUSES.APPROVED },
+                activities: ['view-document', 'edit-document']
               }
             }
           }
@@ -102,10 +99,7 @@ describe('<ApdList />', () => {
               data: {
                 state: { id: 'mo' },
                 states: { state_id: AFFILIATION_STATUSES.APPROVED },
-                activities: [
-                  "view-document",
-                  "edit-document",
-                ]
+                activities: ['view-document', 'edit-document']
               }
             },
             apd: {
@@ -149,10 +143,7 @@ describe('<ApdList />', () => {
               affiliations: [
                 { state_id: 'mo', status: AFFILIATION_STATUSES.APPROVED }
               ],
-              activities: [
-                "not-view-document",
-                "not-edit-document",
-              ]
+              activities: ['not-view-document', 'not-edit-document']
             }
           }
         }
@@ -165,6 +156,6 @@ describe('<ApdList />', () => {
     });
   });
 
-// Deleted tests here because the role is not the relevant factor.  This is driven by
-// activities, so changing those is more important than a specific role.
+  // Deleted tests here because the role is not the relevant factor.  This is driven by
+  // activities, so changing those is more important than a specific role.
 });

web/src/containers/StateDashboard.js → web/src/pages/dashboard/state-dashboard/StateDashboard.js

@@ -3,10 +3,10 @@ import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import TagManager from 'react-gtm-module';
 
-import ApdList from '../components/ApdList';
-import AffiliationStatus from '../components/AffiliationStatus';
-import { getUserStateOrTerritoryStatus } from '../reducers/user.selector';
-import { AFFILIATION_STATUSES } from '../constants';
+import ApdList from './ApdList';
+import AffiliationStatus from './AffiliationStatus';
+import { getUserStateOrTerritoryStatus } from '../../../reducers/user.selector';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
 const StateDashboard = ({ state, role, approvalStatus }) => {
   TagManager.dataLayer({
@@ -34,7 +34,7 @@ StateDashboard.propTypes = {
 
 const mapStateToProps = state => ({
   // Todo: Update this to have a better default state
-  state: state.user.data.state || {name: 'Loading', id: ''},
+  state: state.user.data.state || { name: 'Loading', id: '' },
   role: state.user.data.role || 'Pending Role',
   approvalStatus:
     getUserStateOrTerritoryStatus(state) || AFFILIATION_STATUSES.REQUESTED

web/src/containers/StateDashboard.test.js → web/src/pages/dashboard/state-dashboard/StateDashboard.test.js

@@ -1,9 +1,9 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import { AFFILIATION_STATUSES } from '../constants';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
-import ApdList from '../components/ApdList';
-import AffiliationStatus from '../components/AffiliationStatus';
+import ApdList from './ApdList';
+import AffiliationStatus from './AffiliationStatus';
 
 import { plain as StateDashboard } from './StateDashboard';