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

upgrade to patternfly 2.x, pf/react-core 3.x (#184)

Browse Source
This commit is contained in:
Keith Grant
2019-04-30 08:19:19 -04:00
committed by GitHub
parent 6fe93f474f
commit ffade973a9
13 changed files with 1317 additions and 904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/pages/Organizations/components/OrganizationAccessItem.jsx
View File

@@ -4,6 +4,8 @@ import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell,
Text,
TextContent,
@@ -86,79 +88,84 @@ class OrganizationAccessItem extends React.Component {
<I18n>
{({ i18n }) => (
<DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
<DataListCell>
{accessRecord.username && (
<TextContent style={detailWrapperStyle}>
{accessRecord.url ? (
<Link to={{ pathname: accessRecord.url }}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{accessRecord.username}
</Text>
</Link>
) : (
<Text component={TextVariants.h6} style={detailLabelStyle}>
{accessRecord.username}
</Text>
<DataListItemRow>
<DataListItemCells dataListCells={[
<DataListCell key="name">
{accessRecord.username && (
<TextContent style={detailWrapperStyle}>
{accessRecord.url ? (
<Link to={{ pathname: accessRecord.url }}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{accessRecord.username}
</Text>
</Link>
) : (
<Text component={TextVariants.h6} style={detailLabelStyle}>
{accessRecord.username}
</Text>
)}
</TextContent>
)}
</TextContent>
)}
{accessRecord.first_name || accessRecord.last_name ? (
<Detail
label={i18n._(t`Name`)}
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
url={null}
customStyles={null}
/>
) : (
null
)}
</DataListCell>
<DataListCell>
{userRoles.length > 0 && (
<ul style={userRolesWrapperStyle}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{i18n._(t`User Roles`)}
</Text>
{userRoles.map(role => (
role.user_capabilities.unattach ? (
<Chip
key={role.id}
className="awx-c-chip"
onClick={() => { onRoleDelete(role, accessRecord); }}
>
{role.name}
</Chip>
) : (
<BasicChip key={role.id}>
{role.name}
</BasicChip>
)
))}
</ul>
)}
{teamRoles.length > 0 && (
<ul style={userRolesWrapperStyle}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{i18n._(t`Team Roles`)}
</Text>
{teamRoles.map(role => (
role.user_capabilities.unattach ? (
<Chip
key={role.id}
className="awx-c-chip"
onClick={() => { onRoleDelete(role, accessRecord); }}
>
{role.name}
</Chip>
) : (
<BasicChip key={role.id}>
{role.name}
</BasicChip>
)
))}
</ul>
)}
</DataListCell>
{accessRecord.first_name || accessRecord.last_name ? (
<Detail
label={i18n._(t`Name`)}
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
url={null}
customStyles={null}
/>
) : (
null
)}
</DataListCell>,
<DataListCell key="roles">
{userRoles.length > 0 && (
<ul style={userRolesWrapperStyle}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{i18n._(t`User Roles`)}
</Text>
{userRoles.map(role => (
role.user_capabilities.unattach ? (
<Chip
key={role.id}
className="awx-c-chip"
onClick={() => { onRoleDelete(role, accessRecord); }}
>
{role.name}
</Chip>
) : (
<BasicChip key={role.id}>
{role.name}
</BasicChip>
)
))}
</ul>
)}
{teamRoles.length > 0 && (
<ul style={userRolesWrapperStyle}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{i18n._(t`Team Roles`)}
</Text>
{teamRoles.map(role => (
role.user_capabilities.unattach ? (
<Chip
key={role.id}
className="awx-c-chip"
onClick={() => { onRoleDelete(role, accessRecord); }}
>
{role.name}
</Chip>
) : (
<BasicChip key={role.id}>
{role.name}
</BasicChip>
)
))}
</ul>
)}
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
)}
</I18n>

86
src/pages/Organizations/components/OrganizationListItem.jsx
View File

@@ -1,9 +1,12 @@
import React from 'react';
import { I18n } from '@lingui/react';
import { Trans, t } from '@lingui/macro';
import { Trans } from '@lingui/macro';
import {
Badge,
Checkbox,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCheck,
DataListCell,
} from '@patternfly/react-core';
import {
Link
@@ -22,44 +25,47 @@ class OrganizationListItem extends React.Component {
onSelect,
detailUrl,
} = this.props;
const labelId = `check-action-${itemId}`;
return (
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
<I18n>
{({ i18n }) => (
<Checkbox
checked={isSelected}
onChange={onSelect}
aria-label={i18n._(t`select organization ${itemId}`)}
id={`select-organization-${itemId}`}
/>
)}
</I18n>
<VerticalSeparator />
<div className="pf-c-data-list__cell">
<span id="check-action-item1">
<Link
to={`${detailUrl}`}
>
<b>{name}</b>
</Link>
</span>
</div>
<div className="pf-c-data-list__cell">
<span className="awx-c-list-group">
<Trans>Members</Trans>
<Badge className="awx-c-list-group--badge" isRead>
{memberCount}
</Badge>
</span>
<span className="awx-c-list-group">
<Trans>Teams</Trans>
<Badge className="awx-c-list-group--badge" isRead>
{teamCount}
</Badge>
</span>
</div>
<div className="pf-c-data-list__cell" />
</li>
<DataListItem key={itemId} aria-labelledby={labelId}>
<DataListItemRow>
<DataListCheck
id={`select-organization-${itemId}`}
checked={isSelected}
onChange={onSelect}
aria-labelledby={labelId}
/>
<DataListItemCells dataListCells={[
<DataListCell key="divider" className="pf-c-data-list__cell--divider">
<VerticalSeparator />
</DataListCell>,
<DataListCell key="org-name">
<span id={labelId}>
<Link
to={`${detailUrl}`}
>
<b>{name}</b>
</Link>
</span>
</DataListCell>,
<DataListCell key="org-members">
<span className="awx-c-list-group">
<Trans>Members</Trans>
<Badge className="awx-c-list-group--badge" isRead>
{memberCount}
</Badge>
</span>
<span className="awx-c-list-group">
<Trans>Teams</Trans>
<Badge className="awx-c-list-group--badge" isRead>
{teamCount}
</Badge>
</span>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
);
}
}