mirror of
https://github.com/ansible/awx.git
synced 2026-04-06 18:49:21 -02:30
update organizations structure and add unstyled sub routes and breadcrumbs
This commit is contained in:
John Mitchell
@@ -0,0 +1,78 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
Link
|
||||
} from 'react-router-dom';
|
||||
|
||||
import getTabName from '../utils';
|
||||
|
||||
const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location }) => {
|
||||
const { light } = PageSectionVariants;
|
||||
let breadcrumb = '';
|
||||
if (parentObj !== 'loading') {
|
||||
const generateCrumb = (noLastLink = false) => (
|
||||
<Fragment>
|
||||
{parentObj
|
||||
.map(({ url, name }, index) => {
|
||||
let elem;
|
||||
if (noLastLink && parentObj.length - 1 === index) {
|
||||
elem = (<Fragment key={name}>{name}</Fragment>);
|
||||
} else {
|
||||
elem = (
|
||||
<Link
|
||||
key={name}
|
||||
to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return elem;
|
||||
})
|
||||
.reduce((prev, curr) => [prev, ' > ', curr])}
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
if (currentTab && currentTab !== 'details') {
|
||||
breadcrumb = (
|
||||
<Fragment>
|
||||
{generateCrumb()}
|
||||
{' > '}
|
||||
{getTabName(currentTab)}
|
||||
</Fragment>
|
||||
);
|
||||
} else if (location.pathname.indexOf('edit') > -1) {
|
||||
breadcrumb = (
|
||||
<Fragment>
|
||||
{generateCrumb()}
|
||||
{' > edit'}
|
||||
</Fragment>
|
||||
);
|
||||
} else if (location.pathname.indexOf('add') > -1) {
|
||||
breadcrumb = (
|
||||
<Fragment>
|
||||
{generateCrumb()}
|
||||
{' > add'}
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
breadcrumb = (
|
||||
<Fragment>
|
||||
{generateCrumb(true)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PageSection variant={light} className="pf-m-condensed">
|
||||
<Title size="2xl">{breadcrumb}</Title>
|
||||
</PageSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrganizationBreadcrumb;
|
||||
140
src/pages/Organizations/components/OrganizationDetail.jsx
Normal file
140
src/pages/Organizations/components/OrganizationDetail.jsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
ToolbarGroup,
|
||||
ToolbarItem,
|
||||
ToolbarSection,
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
Switch,
|
||||
Link,
|
||||
Route
|
||||
} from 'react-router-dom';
|
||||
|
||||
import getTabName from '../utils';
|
||||
|
||||
import '../tabs.scss';
|
||||
|
||||
const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
|
||||
const tabClasses = () => {
|
||||
let classes = 'at-c-tabs__tab';
|
||||
if (tab === currentTab) {
|
||||
classes += ' at-m-selected';
|
||||
}
|
||||
|
||||
return classes;
|
||||
};
|
||||
|
||||
const updateTab = () => {
|
||||
const params = new URLSearchParams(location.search);
|
||||
if (params.get('tab') !== undefined) {
|
||||
params.set('tab', tab);
|
||||
} else {
|
||||
params.append('tab', tab);
|
||||
}
|
||||
|
||||
return `?${params.toString()}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<ToolbarItem className={tabClasses()}>
|
||||
<Link to={{ pathname: `${match.url}`, search: updateTab(), state: { breadcrumb } }}>
|
||||
{children}
|
||||
</Link>
|
||||
</ToolbarItem>
|
||||
);
|
||||
};
|
||||
|
||||
const OrganizationDetail = ({
|
||||
location,
|
||||
match,
|
||||
parentBreadcrumbObj,
|
||||
organization,
|
||||
params,
|
||||
currentTab
|
||||
}) => {
|
||||
// TODO: set objectName by param or through grabbing org detail get from api
|
||||
const { medium } = PageSectionVariants;
|
||||
|
||||
const deleteResourceView = () => (
|
||||
<Fragment>
|
||||
{`deleting ${currentTab} association with orgs `}
|
||||
<Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
|
||||
{`confirm removal of ${currentTab}/cancel and go back to ${currentTab} view.`}
|
||||
</Link>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
const addResourceView = () => (
|
||||
<Fragment>
|
||||
{`adding ${currentTab} `}
|
||||
<Link to={{ pathname: `${match.url}`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
|
||||
{`save/cancel and go back to ${currentTab} view`}
|
||||
</Link>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
const resourceView = () => (
|
||||
<Fragment>
|
||||
{`${currentTab} detail view `}
|
||||
<Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
|
||||
{`add ${currentTab}`}
|
||||
</Link>
|
||||
{' '}
|
||||
<Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
|
||||
{`delete ${currentTab}`}
|
||||
</Link>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
const detailTabs = (tabs) => (
|
||||
<ToolbarSection aria-label="Organization detail tabs">
|
||||
<ToolbarGroup className="at-c-tabs">
|
||||
{tabs.map(tab => (
|
||||
<DetailTab
|
||||
key={tab}
|
||||
tab={tab}
|
||||
location={location}
|
||||
match={match}
|
||||
currentTab={currentTab}
|
||||
breadcrumb={parentBreadcrumbObj}
|
||||
>
|
||||
{getTabName(tab)}
|
||||
</DetailTab>
|
||||
))}
|
||||
</ToolbarGroup>
|
||||
</ToolbarSection>
|
||||
);
|
||||
|
||||
return (
|
||||
<PageSection variant={medium}>
|
||||
<Card className="at-c-orgPane">
|
||||
<CardHeader>
|
||||
{detailTabs(['details', 'users', 'teams', 'admins', 'notifications'])}
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{(currentTab && currentTab !== 'details') ? (
|
||||
<Switch>
|
||||
<Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
|
||||
<Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
|
||||
<Route path={`${match.path}`} component={() => resourceView()} />
|
||||
</Switch>
|
||||
) : (
|
||||
<Fragment>
|
||||
{'detail view '}
|
||||
<Link to={{ pathname: `${match.url}/edit`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
|
||||
{'edit'}
|
||||
</Link>
|
||||
</Fragment>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</PageSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrganizationDetail;
|
||||
29
src/pages/Organizations/components/OrganizationEdit.jsx
Normal file
29
src/pages/Organizations/components/OrganizationEdit.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
PageSection,
|
||||
PageSectionVariants
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
Link
|
||||
} from 'react-router-dom';
|
||||
|
||||
const OrganizationEdit = ({ match, parentBreadcrumbObj, organization }) => {
|
||||
const { medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<PageSection variant={medium}>
|
||||
<Card className="at-c-orgPane">
|
||||
<CardBody>
|
||||
{'edit view '}
|
||||
<Link to={{ pathname: `/organizations/${match.params.id}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
|
||||
{'save/cancel and go back to view'}
|
||||
</Link>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</PageSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrganizationEdit;
|
||||
70
src/pages/Organizations/components/OrganizationListItem.jsx
Normal file
70
src/pages/Organizations/components/OrganizationListItem.jsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Badge,
|
||||
Checkbox,
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
Link
|
||||
} from 'react-router-dom';
|
||||
|
||||
export default ({
|
||||
itemId,
|
||||
name,
|
||||
userCount,
|
||||
teamCount,
|
||||
adminCount,
|
||||
isSelected,
|
||||
onSelect,
|
||||
detailUrl,
|
||||
parentBreadcrumb
|
||||
}) => (
|
||||
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
|
||||
<div className="pf-c-data-list__check">
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-label={`select organization ${itemId}`}
|
||||
id={`select-organization-${itemId}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="pf-c-data-list__cell">
|
||||
<span id="check-action-item1">
|
||||
<Link
|
||||
to={{
|
||||
pathname: detailUrl,
|
||||
state: { breadcrumb: [parentBreadcrumb, { name, url: detailUrl }] }
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pf-c-data-list__cell">
|
||||
<Link to={`${detailUrl}?tab=users`}>
|
||||
Users
|
||||
</Link>
|
||||
<Badge isRead>
|
||||
{' '}
|
||||
{userCount}
|
||||
{' '}
|
||||
</Badge>
|
||||
<Link to={`${detailUrl}?tab=teams`}>
|
||||
Teams
|
||||
</Link>
|
||||
<Badge isRead>
|
||||
{' '}
|
||||
{teamCount}
|
||||
{' '}
|
||||
</Badge>
|
||||
<Link to={`${detailUrl}?tab=admins`}>
|
||||
Admins
|
||||
</Link>
|
||||
<Badge isRead>
|
||||
{' '}
|
||||
{adminCount}
|
||||
{' '}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="pf-c-data-list__cell" />
|
||||
</li>
|
||||
);
|
||||
Reference in New Issue
Block a user