Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unify buttons look in the application #1227

Merged
merged 5 commits into from
Jul 11, 2023
Merged

Unify buttons look in the application #1227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eb93c72
Remove nesting of button and links in app fhir-client fhir-location a…
mutuajames Jul 5, 2023
14549ed
Remove nesting of button and links
mutuajames Jul 5, 2023
30e07e9
Update snapshots
mutuajames Jul 6, 2023
e1f6a4c
Remove nesting of buttons
mutuajames Jul 6, 2023
5e462ec
Fix linting issues
mutuajames Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 7 additions & 21 deletions app/src/components/page/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { User } from '@onaio/session-reducer';
import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router';
import { RouteComponentProps, withRouter, useHistory } from 'react-router';
import { Layout, Avatar, Button, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { Link } from 'react-router-dom';
import './Header.css';
import { URL_LOGOUT, URL_USER_EDIT } from '../../../constants';
import { Dictionary } from '@onaio/utils';
Expand All @@ -14,6 +13,7 @@ import { ENABLE_LANGUAGE_SWITCHER, SUPPORTED_LANGUAGES } from '../../../configs/
import { useTranslation } from '../../../mls';
import { getConfig, LanguageCode, setConfig } from '@opensrp/pkg-config';
import { APP_LOGIN_URL } from '../../../configs/dispatchConfig';
import { ButtonLink } from '@opensrp/react-utils';

/** interface for HeaderProps */
export interface HeaderProps extends RouteComponentProps {
Expand Down Expand Up @@ -56,6 +56,7 @@ export const HeaderComponent: React.FC<HeaderProps> = (props: HeaderProps) => {
const { authenticated, user, extraData } = props;
const { user_id } = extraData;
const { t, i18n } = useTranslation();
const history = useHistory();

/** default enum of all possible language options */

Expand All @@ -71,27 +72,13 @@ export const HeaderComponent: React.FC<HeaderProps> = (props: HeaderProps) => {
{
key: '1',
label: (
<Button
type='link'
data-testid="logout"
>
<Link to={URL_LOGOUT}>
{t('Logout')}
</Link>
</Button>
<ButtonLink name={t('Logout')} route={URL_LOGOUT} />
)
},
{
key: '2',
label: (
<Button
type='link'
data-testid="manageaccount"
>
<Link to={`${URL_USER_EDIT}/${user_id}`}>
{t('Manage account')}
</Link>
</Button>
<ButtonLink name={t('Manage account')} route={`${URL_USER_EDIT}/${user_id}`} />
)
}
]
Expand Down Expand Up @@ -124,10 +111,9 @@ export const HeaderComponent: React.FC<HeaderProps> = (props: HeaderProps) => {
icon={<BellOutlined />}
className="bg-transparent border-0"
type="primary"
onClick={() => history.push(APP_LOGIN_URL)}
>
<Link data-index="login-link" to={APP_LOGIN_URL}>
{t('Login')}
</Link>
{t('Login')}
</Button>
)}
{ENABLE_LANGUAGE_SWITCHER && <LanguageSwitcher {...languageSwitcherProps} />}
Expand Down
103 changes: 97 additions & 6 deletions app/src/containers/ConnectedHeader/tests/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,10 @@ exports[`components/ConnectedHeader renders the ConnectedHeader component: child
className="bg-transparent border-0"
data-index="login-button"
icon={<ForwardRef(BellOutlined) />}
onClick={[Function]}
type="primary"
>
<Link
data-index="login-link"
to="/login"
>
Login
</Link>
Login
</Button>
`;

Expand All @@ -34,3 +30,98 @@ exports[`components/ConnectedHeader renders the ConnectedHeader component: child
value="en-en"
/>
`;

exports[`components/ConnectedHeader renders the ConnectedHeader component: login button 1`] = `
<button
className="ant-btn css-dev-only-do-not-override-k7429z ant-btn-primary bg-transparent border-0"
data-index="login-button"
disabled={false}
onClick={[Function]}
type="button"
>
<ForwardRef
prefixCls="ant-btn"
>
<span
className="ant-btn-icon"
>
<ForwardRef(BellOutlined)>
<AntdIcon
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M816 768h-24V428c0-141.1-104.3-257.7-240-277.1V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.9c-135.7 19.4-240 136-240 277.1v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48zM304 768V428c0-55.6 21.6-107.8 60.9-147.1S456.4 220 512 220c55.6 0 107.8 21.6 147.1 60.9S720 372.4 720 428v340H304z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "bell",
"theme": "outlined",
}
}
>
<span
aria-label="bell"
className="anticon anticon-bell"
role="img"
>
<IconReact
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M816 768h-24V428c0-141.1-104.3-257.7-240-277.1V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.9c-135.7 19.4-240 136-240 277.1v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48zM304 768V428c0-55.6 21.6-107.8 60.9-147.1S456.4 220 512 220c55.6 0 107.8 21.6 147.1 60.9S720 372.4 720 428v340H304z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "bell",
"theme": "outlined",
}
}
>
<svg
aria-hidden="true"
data-icon="bell"
fill="currentColor"
focusable="false"
height="1em"
key="svg-bell"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M816 768h-24V428c0-141.1-104.3-257.7-240-277.1V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.9c-135.7 19.4-240 136-240 277.1v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48zM304 768V428c0-55.6 21.6-107.8 60.9-147.1S456.4 220 512 220c55.6 0 107.8 21.6 147.1 60.9S720 372.4 720 428v340H304z"
key="svg-bell-svg-0"
/>
</svg>
</IconReact>
</span>
</AntdIcon>
</ForwardRef(BellOutlined)>
</span>
</ForwardRef>
<span
key=".0"
>
Login
</span>
</button>
`;
10 changes: 1 addition & 9 deletions app/src/containers/ConnectedHeader/tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,7 @@ describe('components/ConnectedHeader', () => {
expect(wrapper.find('LanguageSwitcher')).toHaveLength(1);
expect(wrapper.find('Header').props().children).toHaveLength(2);
expect(wrapper.text()).toMatchInlineSnapshot(`"Login"`);
expect(toJson(wrapper.find('a[data-index="login-link"]'))).toMatchInlineSnapshot(`
<a
data-index="login-link"
href="/login"
onClick={[Function]}
>
Login
</a>
`);
expect(toJson(wrapper.find('button[data-index="login-button"]'))).toMatchSnapshot('login button');
(wrapper.find('Header').props().children as any).forEach((child: any) => {
expect(child).toMatchSnapshot('child');
});
Expand Down
14 changes: 7 additions & 7 deletions app/src/containers/pages/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Helmet } from 'react-helmet';
import { Col, Row, Button, Alert } from 'antd';
import { Link } from 'react-router-dom';
import { Col, Row, Alert } from 'antd';
import './Home.css';
import { useTranslation } from '../../../mls';
import React from 'react';
import { useSelector } from 'react-redux';
import { getExtraData } from '@onaio/session-reducer';
import { getRoutesForHomepage } from '../../../routes';
import { ButtonLink } from '@opensrp/react-utils';

export const Home = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -63,11 +63,11 @@ export const Home = () => {
md={8}
sm={12}
>
<Link to={route.url as string} className="admin-link">
<Button color="outline" className="btn-links">
{route.title}
</Button>
</Link>
<ButtonLink
route={route.url as string}
name={route.title}
className="admin-link btn-links"
/>
</Col>
);
})}
Expand Down
4 changes: 2 additions & 2 deletions app/src/containers/pages/Home/tests/Home.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ describe('containers/pages/Home', () => {

const helmet = Helmet.peek();
expect(helmet.title).toEqual('OpenSRP Web');
const links = [...screen.queryAllByRole('link')];
expect(links.map((x) => x.textContent)).toEqual([
const links = document.querySelectorAll('.admin-link');
expect(Array.from(links).map((x) => x.textContent)).toEqual([
'Plans',
'Card Support',
'Inventory',
Expand Down
Loading