External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-20 15:27:47 -02:30
Code Issues Packages Projects Releases Wiki Activity

Refactor breadcrumbs, tabs, routing.

Browse Source 
* Cleanup previous params logic from Notificaitons list
* Add shared breadcrumbs and tabs components
* Structure Organization screens to render only cardBody content
* Add styles
* Fetch organization when location changes
This commit is contained in:
Marliana Lara
2019-01-24 23:53:10 -05:00
parent dd522c240e
commit b820e411d3
18 changed files with 363 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
View File

@@ -1,115 +1,15 @@
import React, { Fragment } from 'react';
import { I18n } from '@lingui/react';
import { Trans, t } from '@lingui/macro';
import {
Card,
CardHeader,
CardBody,
} from '@patternfly/react-core';
import {
Switch,
Link,
Route
} from 'react-router-dom';
import React from 'react';
import { withRouter, Link } from 'react-router-dom';
import { Trans } from '@lingui/macro';
import { CardBody } from '@patternfly/react-core';
import OrganizationNotifications from './OrganizationNotifications';
const OrganizationDetail = ({ match, organization }) => (
<CardBody>
<h1><Trans>{`${organization && organization.name} Detail View`}</Trans></h1>
<Link to={`/organizations/${match.params.id}/edit`}>
<Trans>Edit Details</Trans>
</Link>
</CardBody>
);
import Tab from '../../../../components/Tabs/Tab';
import Tabs from '../../../../components/Tabs/Tabs';
import getTabName from '../../utils';
const OrganizationDetail = ({
location,
match,
parentBreadcrumbObj,
organization,
params,
currentTab,
api,
history
}) => {
// TODO: set objectName by param or through grabbing org detail get from api
const tabList = ['details', 'access', 'teams', 'notifications'];
const deleteResourceView = () => (
<Fragment>
<Trans>{`deleting ${currentTab} association with orgs `}</Trans>
<Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
<Trans>{`confirm removal of ${currentTab}/cancel and go back to ${currentTab} view.`}</Trans>
</Link>
</Fragment>
);
const addResourceView = () => (
<Fragment>
<Trans>{`adding ${currentTab} `}</Trans>
<Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
<Trans>{`save/cancel and go back to ${currentTab} view`}</Trans>
</Link>
</Fragment>
);
const resourceView = () => {
let relatedTemplate;
switch (currentTab) {
case 'notifications':
relatedTemplate = (
<OrganizationNotifications
api={api}
match={match}
location={location}
history={history}
/>
);
break;
default:
relatedTemplate = (
<Fragment>
<Trans>{`${currentTab} detail view `}</Trans>
<Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
<Trans>{`add ${currentTab}`}</Trans>
</Link>
{' '}
<Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
<Trans>{`delete ${currentTab}`}</Trans>
</Link>
</Fragment>
);
}
return relatedTemplate;
};
return (
<Card className="at-c-orgPane">
<CardHeader>
<I18n>
{({ i18n }) => (
<Tabs labelText={i18n._(t`Organization detail tabs`)}>
{tabList.map(tab => (
<Tab
key={tab}
tab={tab}
location={location}
match={match}
currentTab={currentTab}
breadcrumb={parentBreadcrumbObj}
>
<Trans>{getTabName(tab)}</Trans>
</Tab>
))}
</Tabs>
)}
</I18n>
</CardHeader>
<CardBody className="at-c-listCardBody">
<Switch>
<Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
<Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
<Route path={`${match.path}`} render={(props) => resourceView(props)} />
</Switch>
</CardBody>
</Card>
);
};
export default OrganizationDetail;
export default withRouter(OrganizationDetail);