External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-11 03:17:38 -02:30
Code Issues Packages Projects Releases Wiki Activity

Moves TemplateListItem to a functional component

Browse Source
This commit is contained in:
Alex Corey
2020-01-23 11:00:50 -05:00
parent 21890efca6
commit 44db9ad033
1 changed files with 89 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

@@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
DataListItem, DataListItem,
@@ -22,7 +22,6 @@ import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Sparkline } from '@components/Sparkline'; import { Sparkline } from '@components/Sparkline';
import { toTitleCase } from '@util/strings'; import { toTitleCase } from '@util/strings';
import styled from 'styled-components'; import styled from 'styled-components';
const rightStyle = ` const rightStyle = `
@@ -51,110 +50,104 @@ const LeftDataListCell = styled(DataListCell)`
} }
} }
`; `;
const RightDataListCell = styled(DataListCell)` const RightDataListCell = styled(DataListCell)`
${rightStyle} ${rightStyle}
`; `;
const RightActionButtonCell = styled(ActionButtonCell)` const RightActionButtonCell = styled(ActionButtonCell)`
${rightStyle} ${rightStyle}
`; `;
class TemplateListItem extends Component { function TemplateListItem({ i18n, template, isSelected, onSelect }) {
render() { const canLaunch = template.summary_fields.user_capabilities.start;
const { i18n, template, isSelected, onSelect } = this.props;
const canLaunch = template.summary_fields.user_capabilities.start;
const missingResourceIcon =
template.type === 'job_template' &&
(!template.summary_fields.project ||
(!template.summary_fields.inventory &&
!template.ask_inventory_on_launch));
return ( const missingResourceIcon =
<DataListItem template.type === 'job_template' &&
aria-labelledby={`check-action-${template.id}`} (!template.summary_fields.project ||
css="--pf-c-data-list__expandable-content--BoxShadow: none;" (!template.summary_fields.inventory &&
id={`${template.id}`} !template.ask_inventory_on_launch));
>
<DataListItemRow> return (
<DataListCheck <DataListItem
id={`select-jobTemplate-${template.id}`} aria-labelledby={`check-action-${template.id}`}
checked={isSelected} css="--pf-c-data-list__expandable-content--BoxShadow: none;"
onChange={onSelect} id={`${template.id}`}
aria-labelledby={`check-action-${template.id}`} >
/> <DataListItemRow>
<DataListItemCells <DataListCheck
dataListCells={[ id={`select-jobTemplate-${template.id}`}
<LeftDataListCell key="divider"> checked={isSelected}
<VerticalSeparator /> onChange={onSelect}
aria-labelledby={`check-action-${template.id}`}
/>
<DataListItemCells
dataListCells={[
<LeftDataListCell key="divider">
<VerticalSeparator />
<span>
<Link to={`/templates/${template.type}/${template.id}`}>
<b>{template.name}</b>
</Link>
</span>
{missingResourceIcon && (
<span> <span>
<Link to={`/templates/${template.type}/${template.id}`}> <Tooltip
<b>{template.name}</b> content={i18n._(
</Link> t`Resources are missing from this template.`
)}
position="right"
>
<ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
</Tooltip>
</span> </span>
{missingResourceIcon && ( )}
<span> </LeftDataListCell>,
<Tooltip <RightDataListCell
content={i18n._( css="padding-left: 40px;"
t`Resources are missing from this template.` righthalf="true"
)} key="type"
position="right" >
> {toTitleCase(template.type)}
<ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" /> </RightDataListCell>,
</Tooltip> <RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
</span> <Sparkline jobs={template.summary_fields.recent_jobs} />
)} </RightDataListCell>,
</LeftDataListCell>, <RightActionButtonCell
<RightDataListCell css="max-width: 80px;"
css="padding-left: 40px;" righthalf="true"
righthalf="true" lastcolumn="true"
key="type" key="launch"
> >
{toTitleCase(template.type)} {canLaunch && template.type === 'job_template' && (
</RightDataListCell>, <Tooltip content={i18n._(t`Launch Template`)} position="top">
<RightDataListCell <LaunchButton resource={template}>
css="flex: 1;" {({ handleLaunch }) => (
righthalf="true" <ListActionButton variant="plain" onClick={handleLaunch}>
key="sparkline" <RocketIcon />
> </ListActionButton>
<Sparkline jobs={template.summary_fields.recent_jobs} /> )}
</RightDataListCell>, </LaunchButton>
<RightActionButtonCell </Tooltip>
css="max-width: 80px;" )}
righthalf="true" {template.summary_fields.user_capabilities.edit && (
lastcolumn="true" <Tooltip content={i18n._(t`Edit Template`)} position="top">
key="launch" <ListActionButton
> variant="plain"
{canLaunch && template.type === 'job_template' && ( component={Link}
<Tooltip content={i18n._(t`Launch Template`)} position="top"> to={`/templates/${template.type}/${template.id}/edit`}
<LaunchButton resource={template}> >
{({ handleLaunch }) => ( <PencilAltIcon />
<ListActionButton </ListActionButton>
variant="plain" </Tooltip>
onClick={handleLaunch} )}
> </RightActionButtonCell>,
<RocketIcon /> ]}
</ListActionButton> />
)} </DataListItemRow>
</LaunchButton> </DataListItem>
</Tooltip> );
)}
{template.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<ListActionButton
variant="plain"
component={Link}
to={`/templates/${template.type}/${template.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Tooltip>
)}
</RightActionButtonCell>,
]}
/>
</DataListItemRow>
</DataListItem>
);
}
} }
export { TemplateListItem as _TemplateListItem }; export { TemplateListItem as _TemplateListItem };
export default withI18n()(TemplateListItem); export default withI18n()(TemplateListItem);