mirror of
https://github.com/ZwareBear/awx.git
synced 2026-05-01 04:11:56 -05:00
215 templates list skeleton (#251)
* adding package-lock.json * deleted unsured file * Removes and unused file * Fixes errant styling change * Fixes an error and uses a prop that PF recognizes * Updates PR to use API Modules * Fixes PR Issues * Addes tests to Templates * Addresses PR Issues * Revert package-lock.json
This commit is contained in:
Alex Corey
GitHub
@@ -1,28 +0,0 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Templates extends Component {
|
||||
render () {
|
||||
const { i18n } = this.props;
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light} className="pf-m-condensed">
|
||||
<Title size="2xl">
|
||||
{i18n._(t`Templates`)}
|
||||
</Title>
|
||||
</PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withI18n()(Templates);
|
||||
63
src/pages/Templates/Templates.jsx
Normal file
63
src/pages/Templates/Templates.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Route, withRouter, Switch } from 'react-router-dom';
|
||||
import { NetworkProvider } from '../../contexts/Network';
|
||||
import { withRootDialog } from '../../contexts/RootDialog';
|
||||
|
||||
import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
|
||||
import TemplatesList from './TemplatesList';
|
||||
|
||||
class Templates extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
const { i18n } = this.props;
|
||||
|
||||
this.state = {
|
||||
breadcrumbConfig: {
|
||||
'/templates': i18n._(t`Templates`)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render () {
|
||||
const { match, history, setRootDialogMessage, i18n } = this.props;
|
||||
const { breadcrumbConfig } = this.state;
|
||||
return (
|
||||
<Fragment>
|
||||
<Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
|
||||
<Switch>
|
||||
<Route
|
||||
path={`${match.path}/:templateType/:id`}
|
||||
render={({ match: newRouteMatch }) => (
|
||||
<NetworkProvider
|
||||
handle404={() => {
|
||||
history.replace('/templates');
|
||||
setRootDialogMessage({
|
||||
title: '404',
|
||||
bodyText: (
|
||||
<Fragment>
|
||||
{i18n._(t`Cannot find template with ID`)}
|
||||
<strong>{` ${newRouteMatch.params.id}`}</strong>
|
||||
</Fragment>
|
||||
),
|
||||
variant: 'warning'
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={`${match.path}`}
|
||||
render={() => (
|
||||
<TemplatesList />
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { Templates as _Templates };
|
||||
export default withI18n()(withRootDialog(withRouter(Templates)));
|
||||
149
src/pages/Templates/TemplatesList.jsx
Normal file
149
src/pages/Templates/TemplatesList.jsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import React, { Component } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Card,
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
} from '@patternfly/react-core';
|
||||
import { withNetwork } from '../../contexts/Network';
|
||||
import { UnifiedJobTemplatesAPI } from '../../api';
|
||||
|
||||
import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
|
||||
import DatalistToolbar from '../../components/DataListToolbar';
|
||||
import PaginatedDataList from '../../components/PaginatedDataList';
|
||||
import TemplateListItem from './components/TemplateListItem';
|
||||
|
||||
// The type value in const QS_CONFIG below does not have a space between job_template and
|
||||
// workflow_job_template so the params sent to the API match what the api expects.
|
||||
const QS_CONFIG = getQSConfig('template', {
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
order_by: 'name',
|
||||
type: 'job_template,workflow_job_template'
|
||||
});
|
||||
|
||||
class TemplatesList extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
error: null,
|
||||
isLoading: true,
|
||||
isInitialized: false,
|
||||
selected: [],
|
||||
templates: [],
|
||||
};
|
||||
this.readUnifiedJobTemplates = this.readUnifiedJobTemplates.bind(this);
|
||||
this.handleSelectAll = this.handleSelectAll.bind(this);
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.readUnifiedJobTemplates();
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
const { location } = this.props;
|
||||
if (location !== prevProps.location) {
|
||||
this.readUnifiedJobTemplates();
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectAll (isSelected) {
|
||||
const { templates } = this.state;
|
||||
const selected = isSelected ? [...templates] : [];
|
||||
this.setState({ selected });
|
||||
}
|
||||
|
||||
handleSelect (template) {
|
||||
const { selected } = this.state;
|
||||
if (selected.some(s => s.id === template.id)) {
|
||||
this.setState({ selected: selected.filter(s => s.id !== template.id) });
|
||||
} else {
|
||||
this.setState({ selected: selected.concat(template) });
|
||||
}
|
||||
}
|
||||
|
||||
async readUnifiedJobTemplates () {
|
||||
const { handleHttpError, location } = this.props;
|
||||
this.setState({ error: false, isLoading: true });
|
||||
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
|
||||
|
||||
try {
|
||||
const { data } = await UnifiedJobTemplatesAPI.read(params);
|
||||
const { count, results } = data;
|
||||
|
||||
const stateToUpdate = {
|
||||
itemCount: count,
|
||||
templates: results,
|
||||
selected: [],
|
||||
isInitialized: true,
|
||||
isLoading: false,
|
||||
};
|
||||
this.setState(stateToUpdate);
|
||||
} catch (err) {
|
||||
handleHttpError(err) || this.setState({ error: true, isLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
error,
|
||||
isInitialized,
|
||||
isLoading,
|
||||
templates,
|
||||
itemCount,
|
||||
selected,
|
||||
} = this.state;
|
||||
const {
|
||||
match,
|
||||
i18n
|
||||
} = this.props;
|
||||
const isAllSelected = selected.length === templates.length;
|
||||
const { medium } = PageSectionVariants;
|
||||
return (
|
||||
<PageSection variant={medium}>
|
||||
<Card>
|
||||
{isInitialized && (
|
||||
<PaginatedDataList
|
||||
items={templates}
|
||||
itemCount={itemCount}
|
||||
itemName={i18n._(t`Template`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
toolbarColumns={[
|
||||
{ name: i18n._(t`Name`), key: 'name', isSortable: true },
|
||||
{ name: i18n._(t`Modified`), key: 'modified', isSortable: true, isNumeric: true },
|
||||
{ name: i18n._(t`Created`), key: 'created', isSortable: true, isNumeric: true },
|
||||
]}
|
||||
renderToolbar={(props) => (
|
||||
<DatalistToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
showExpandCollapse
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={this.handleSelectAll}
|
||||
/>
|
||||
)}
|
||||
renderItem={(template) => (
|
||||
<TemplateListItem
|
||||
key={template.id}
|
||||
value={template.name}
|
||||
template={template}
|
||||
detailUrl={`${match.url}/${template.type}/${template.id}`}
|
||||
onSelect={() => this.handleSelect(template)}
|
||||
isSelected={selected.some(row => row.id === template.id)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{isLoading ? <div>loading....</div> : ''}
|
||||
{error ? <div>error</div> : '' }
|
||||
</Card>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
}
|
||||
export { TemplatesList as _TemplatesList };
|
||||
export default withI18n()(withNetwork(withRouter(TemplatesList)));
|
||||
61
src/pages/Templates/components/TemplateListItem.jsx
Normal file
61
src/pages/Templates/components/TemplateListItem.jsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCheck,
|
||||
DataListCell as PFDataListCell,
|
||||
} from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { toTitleCase } from '../../../util/strings';
|
||||
import VerticalSeparator from '../../../components/VerticalSeparator';
|
||||
|
||||
const DataListCell = styled(PFDataListCell)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media screen and (min-width: 768px) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
class TemplateListItem extends Component {
|
||||
render () {
|
||||
const {
|
||||
template,
|
||||
isSelected,
|
||||
onSelect,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<DataListItem
|
||||
aria-labelledby={`check-action-${template.id}`}
|
||||
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
|
||||
>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-jobTemplate-${template.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={`check-action-${template.id}`}
|
||||
/>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="divider">
|
||||
<VerticalSeparator />
|
||||
<span>
|
||||
<Link to="/home">
|
||||
<b>{template.name}</b>
|
||||
</Link>
|
||||
</span>
|
||||
</DataListCell>,
|
||||
<DataListCell key="type">{toTitleCase(template.type)}</DataListCell>
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
);
|
||||
}
|
||||
}
|
||||
export { TemplateListItem as _TemplateListItem };
|
||||
export default TemplateListItem;
|
||||
Reference in New Issue
Block a user