Skip to content

Commit

Permalink
Refactor the home view (#1198)
Browse files Browse the repository at this point in the history
* Refactor how call to action buttons on homepage are generated

* Fix test regressions

* Add comments and fix typo
  • Loading branch information
peterMuriuki authored Apr 4, 2023
1 parent 4ced953 commit a0ee1a7
Show file tree
Hide file tree
Showing 6 changed files with 236 additions and 555 deletions.
2 changes: 1 addition & 1 deletion app/src/App/tests/App.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ describe('App - authenticated', () => {
);
// before resolving get oauth state request, the user is logged out
expect(wrapper.text()).toMatchInlineSnapshot(
`"InventoryAdministrationdemoWelcome to OpenSRPUser Management"`
`"InventoryAdministrationdemoWelcome to OpenSRPInventoryProduct CatalogueQuestionnaire ManagementUser Management"`
);

await act(async () => {
Expand Down
95 changes: 49 additions & 46 deletions app/src/containers/pages/Home/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
import { Helmet } from 'react-helmet';
import { Col, Row, Button } from 'antd';
import { Col, Row, Button, Alert } from 'antd';
import { Link } from 'react-router-dom';
import './Home.css';
import { useTranslation } from '../../../mls';
import { URL_USER, URL_LOCATION_UNIT, URL_TEAM_ASSIGNMENT, URL_TEAMS } from '../../../constants';
import { ENABLE_TEAMS_ASSIGNMENT_MODULE } from '../../../configs/env';
import React from 'react';
import {
COMPOSITE_ENABLE_LOCATIONS_MANAGEMENT,
COMPOSITE_ENABLE_TEAM_MANAGEMENT,
COMPOSITE_ENABLE_USER_MANAGEMENT,
} from '../../../configs/settings';
import { useSelector } from 'react-redux';
import { getExtraData } from '@onaio/session-reducer';
import { getRoutesForHomepage } from '../../../routes';

export const Home = () => {
const { t } = useTranslation();
const extraData = useSelector((state) => {
return getExtraData(state);
});
const { roles } = extraData;
const routes = React.useMemo(() => getRoutesForHomepage(roles as string[], t), [roles, t]);

// home page has 2 columns by defualt
let columnNum = 2;
// then depending on enabled modules set the number of colums to either 3 or 4
if (routes.length < 5) {
columnNum = 2;
} else if (routes.length < 7) {
columnNum = 3;
} else {
columnNum = 4;
}

const normalSpanLength = 24 / columnNum;

return (
<div className="text-center home">
Expand All @@ -25,49 +39,38 @@ export const Home = () => {
<h3>{t('Welcome to OpenSRP')}</h3>
</Col>
</Row>
<Row gutter={16} className="links-box">
{COMPOSITE_ENABLE_USER_MANAGEMENT && (
<Col className="gutter-row" span={12}>
<Link to={URL_USER} className="admin-link">
<Button color="outline" className="btn-links">
{t('User Management')}
</Button>
</Link>
</Col>
<Row
gutter={[
{ xs: 8, sm: 16, md: 24, lg: 32 },
{ xs: 8, sm: 16, md: 24, lg: 32 },
]}
className="links-box"
>
{routes.length === 0 && (
<Alert
message="403"
description={t('Missing the required permissions to view data on this page')}
type="warning"
/>
)}
{COMPOSITE_ENABLE_TEAM_MANAGEMENT && (
<Col className="gutter-row" span={12}>
<Link to={URL_TEAMS} className="admin-link">
<Button color="outline" className="btn-links">
{t('Team Management')}
</Button>
</Link>
</Col>
)}
</Row>
<Row gutter={16} className="links-box">
{COMPOSITE_ENABLE_LOCATIONS_MANAGEMENT && (
<>
<Col className="gutter-row" span={12}>
<Link to={URL_LOCATION_UNIT} className="admin-link">
{routes.map((route) => {
return (
<Col
key={route.title}
className="gutter-row"
xl={normalSpanLength}
lg={8}
md={8}
sm={12}
>
<Link to={route.url as string} className="admin-link">
<Button color="outline" className="btn-links">
{t('Location Units')}
{route.title}
</Button>
</Link>
</Col>
</>
)}
</Row>
<Row gutter={16} className="links-box">
{ENABLE_TEAMS_ASSIGNMENT_MODULE && (
<Col className="gutter-row" span={12}>
<Link to={URL_TEAM_ASSIGNMENT} className="admin-link">
<Button color="outline" className="btn-links">
{t('Team Assignment')}
</Button>
</Link>
</Col>
)}
);
})}
</Row>
</div>
);
Expand Down
105 changes: 57 additions & 48 deletions app/src/containers/pages/Home/tests/Home.test.tsx
Original file line number Diff line number Diff line change
@@ -1,81 +1,90 @@
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import { history } from '@onaio/connected-reducer-registry';
import React from 'react';
import { Helmet } from 'react-helmet';
import { Router } from 'react-router';
import { Home } from '../Home';
import { store } from '@opensrp/store';
import { Provider } from 'react-redux';
import {
URL_LOCATION_UNIT,
URL_LOCATION_UNIT_GROUP,
URL_TEAMS,
URL_USER,
} from '../../../../constants';
import { cleanup, render, screen } from '@testing-library/react';
import { authenticateUser } from '@onaio/session-reducer';
import React from 'react';

jest.mock('../../../../configs/env');
jest.mock('../../../../configs/settings');

describe('containers/pages/Home', () => {
it('renders Home correctly & changes Title of page', () => {
const wrapper = mount(
<Router history={history}>
<Home />
</Router>
);

const helmet = Helmet.peek();
expect(helmet.title).toEqual('OpenSRP Web');
wrapper.find('.admin-link').forEach((adminLink) => {
expect(toJson(adminLink)).toMatchSnapshot('links on home page');
});
wrapper.unmount();
afterEach(() => {
cleanup();
});

it('displays links for user management module', () => {
const envModule = require('../../../../configs/env');
envModule.ENABLE_USER_MANAGEMENT = true;

const wrapper = mount(
it('renders Home correctly & changes Title of page', () => {
render(
<Provider store={store}>
<Router history={history}>
<Home />
</Router>
</Provider>
);

expect(wrapper.find(`Link[to="${URL_USER}"]`)).toHaveLength(1);
const helmet = Helmet.peek();
expect(helmet.title).toEqual('OpenSRP Web');
screen.getByText(/Missing the required permissions to view data on this page/i);
});

it('displays links for location unit module', () => {
const envModule = require('../../../../configs/env');
envModule.ENABLE_LOCATIONS = true;

const wrapper = mount(
<Provider store={store}>
<Router history={history}>
<Home />
</Router>
</Provider>
it('renders Home correctly & changes Title of page 2', () => {
store.dispatch(
authenticateUser(
true,
{ email: '[email protected]', name: 'Bobbie', username: 'RobertBaratheon' },
{
roles: ['ROLE_VIEW_KEYCLOAK_USERS'],
username: 'superset-user',
user_id: 'cab07278-c77b-4bc7-b154-bcbf01b7d35b',
}
)
);

expect(wrapper.find(`Link[to="${URL_LOCATION_UNIT}"]`)).toHaveLength(1);
expect(wrapper.find(`Link[to="${URL_LOCATION_UNIT_GROUP}"]`)).toHaveLength(0);
});

it('displays links for teams module', () => {
const envModule = require('../../../../configs/env');
envModule.ENABLE_LOCATIONS = true;
envModule.ENABLE_TEAMS = true;

const wrapper = mount(
envModule.ENABLE_INVENTORY = true;
envModule.ENABLE_FORM_CONFIGURATION = true;
envModule.ENABLE_TEAMS_ASSIGNMENT_MODULE = true;
envModule.ENABLE_PRODUCT_CATALOGUE = true;
envModule.ENABLE_PLANS = true;
envModule.ENABLE_CARD_SUPPORT = true;
envModule.ENABLE_USER_MANAGEMENT = true;
envModule.ENABLE_LOCATIONS = true;
envModule.ENABLE_TEAMS = true;
envModule.OPENSRP_ROLES = {
USERS: 'ROLE_EDIT_KEYCLOAK_USERS',
PLANS: 'ROLE_VIEW_KEYCLOAK_USERS',
CARD_SUPPORT: 'ROLE_VIEW_KEYCLOAK_USERS',
PRODUCT_CATALOGUE: 'ROLE_VIEW_KEYCLOAK_USERS',
FORM_CONFIGURATION: 'ROLE_VIEW_KEYCLOAK_USERS',
LOCATIONS: 'ROLE_VIEW_KEYCLOAK_USERS',
INVENTORY: 'ROLE_VIEW_KEYCLOAK_USERS',
TEAMS: 'ROLE_VIEW_KEYCLOAK_USERS',
};
render(
<Provider store={store}>
<Router history={history}>
<Home />
</Router>
</Provider>
);

expect(wrapper.find(`Link[to="${URL_TEAMS}"]`)).toHaveLength(1);
const helmet = Helmet.peek();
expect(helmet.title).toEqual('OpenSRP Web');
const links = [...screen.queryAllByRole('link')];
expect(links.map((x) => x.textContent)).toEqual([
'Card Support',
'Form Configuration',
'Inventory',
'Location Management',
'Plans',
'Product Catalogue',
'Team Management',
]);
links.forEach((link) => {
expect(link).toMatchSnapshot(link.textContent ?? undefined);
});
});
});
Loading

0 comments on commit a0ee1a7

Please sign in to comment.