8000 Roles and role namespaces - functional components, cleanup by himdel · Pull Request #4303 · ansible/ansible-hub-ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Roles and role namespaces - functional components, cleanup #4303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/index.ts
Original file line number D 10000 iff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export { PartnerHeader } from './headers/partner-header';
export { HelperText } from './helper-text/helper-text';
export { ImportModal } from './import-modal/import-modal';
export { LegacyNamespaceListItem } from './legacy-namespace-list/legacy-namespace-item';
export { ProviderLink } from './legacy-namespace-list/provider-link';
export { LegacyRoleListItem } from './legacy-role-list/legacy-role-item';
export { ListItemActions } from './list-item-actions/list-item-actions';
export { LoadingPageSpinner } from './loading/loading-page-spinner';
Expand Down
116 changes: 58 additions & 58 deletions src/components/legacy-namespace-list/legacy-namespace-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { LegacyNamespaceDetailType } from 'src/api';
import { Logo, StatefulDropdown } from 'src/components';
import { AppContext } from 'src/loaders/app-context';
import { useContext } from 'src/loaders/app-context';
import { Paths, formatPath } from 'src/paths';
import './legacy-namespace-item.scss';

Expand All @@ -19,72 +19,72 @@ interface LegacyNamespaceProps {
openModal: (namespace) => void;
}

export class LegacyNamespaceListItem extends React.Component<LegacyNamespaceProps> {
render() {
const { namespace } = this.props;
const namespace_url = formatPath(Paths.legacyNamespace, {
namespaceid: namespace.id,
});
export function LegacyNamespaceListItem({
namespace,
openModal,
}: LegacyNamespaceProps) {
const {
featureFlags: { ai_deny_index },
user: { username, is_superuser },
} = useContext();
const { id, avatar_url, name, summary_fields } = namespace;

const cells = [];
const namespace_url = formatPath(Paths.legacyNamespace, {
namespaceid: id,
});

cells.push(
<DataListCell isFilled={false} alignRight={false} key='ns'>
<Logo
alt='logo'
fallbackToDefault
image={namespace.avatar_url}
size='40px'
unlockWidth
width='97px'
/>
</DataListCell>,
);
const cells = [];

cells.push(
<DataListCell key='content' size={10}>
<div>
<Link to={namespace_url}>{namespace.name}</Link>
</div>
</DataListCell>,
);
cells.push(
<DataListCell isFilled={false} alignRight={false} key='ns'>
<Logo
alt='logo'
fallbackToDefault
image={avatar_url}
size='40px'
unlockWidth
width='97px'
/>
</DataListCell>,
);

const { ai_deny_index } = this.context.featureFlags;
const summary_fields = namespace.summary_fields;
const userOwnsLegacyNamespace = summary_fields?.owners?.filter(
(n) => n.username == this.context.user.username,
).length;
cells.push(
<DataListCell key='content' size={10}>
<div>
<Link to={namespace_url}>{name}</Link>
</div>
</DataListCell>,
);

const showWisdom =
ai_deny_index &&
(this.context.user.is_superuser || userOwnsLegacyNamespace);
const userOwnsLegacyNamespace = !!summary_fields.owners.find(
(n) => n.username == username,
);

const dropdownItems = [];
const showWisdom = ai_deny_index && (is_superuser || userOwnsLegacyNamespace);

dropdownItems.push(
<DropdownItem
=> this.props.openModal(namespace)}
>{t`Ansible Lightspeed settings`}</DropdownItem>,
);
const dropdownItems = [];

if (showWisdom) {
cells.push(
<DataListCell key='menu' alignRight={true}>
<div style={{ float: 'right' }}>
<StatefulDropdown items={dropdownItems} />
</div>
</DataListCell>,
);
}
dropdownItems.push(
<DropdownItem
=> openModal(namespace)}
>{t`Ansible Lightspeed settings`}</DropdownItem>,
);

return (
<DataListItem data-cy='LegacyNamespaceListItem'>
<DataListItemRow>
<DataListItemCells dataListCells={cells} />
</DataListItemRow>
</DataListItem>
if (showWisdom) {
cells.push(
<DataListCell key='menu' alignRight={true}>
<div style={{ float: 'right' }}>
<StatefulDropdown items={dropdownItems} />
</div>
</DataListCell>,
);
}
}

LegacyNamespaceListItem.contextType = AppContext;
return (
<DataListItem data-cy='LegacyNamespaceListItem'>
<DataListItemRow>
<DataListItemCells dataListCells={cells} />
</DataListItemRow>
</DataListItem>
);
}
26 changes: 0 additions & 26 deletions src/components/legacy-namespace-list/legacy-namespace-provider.tsx

This file was deleted.

21 changes: 21 additions & 0 deletions src/components/legacy-namespace-list/provider-link.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Trans } from '@lingui/macro';
import { Text, TextContent, TextVariants } from '@patternfly/react-core';
import React from 'react';
import { Link } from 'react-router-dom';

interface IProps {
name: string;
url: string;
}

export function ProviderLink({ name, url }: IProps) {
return (
<TextContent>
<Text component={TextVariants.small}>
<Trans>
Provided by&nbsp;<Link to={url}>{name}</Link>
</Trans>
</Text>
</TextContent>
);
}
168 changes: 74 additions & 94 deletions src/components/legacy-role-list/legacy-role-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,113 +9,93 @@ import {
import React from 'react';
import { Link } from 'react-router-dom';
import { LegacyRoleDetailType } from 'src/api';
import { DateComponent, DownloadCount, Logo, Tag } from 'src/components';
import { ProviderLink } from 'src/components/legacy-namespace-list/legacy-namespace-provider';
import {
DateComponent,
DownloadCount,
Logo,
ProviderLink,
Tag,
} from 'src/components';
import { Paths, formatPath } from 'src/paths';
import { chipGroupProps } from 'src/utilities';
import { getProviderInfo } from 'src/utilities';
import { chipGroupProps, getProviderInfo } from 'src/utilities';
import './legacy-role-item.scss';

interface LegacyRoleProps {
role: LegacyRoleDetailType;
show_thumbnail: boolean;
}

export class LegacyRoleListItem extends React.Component<LegacyRoleProps> {
render() {
const { role, show_thumbnail } = this.props;
const namespace = role.summary_fields.namespace;
const role_url = formatPath(Paths.legacyRole, {
username: role.github_user,
name: role.name,
});

let release_date = null;
let release_name = null;
const lv = role.summary_fields.versions[0];
if (lv !== undefined && lv !== null) {
release_date = lv.release_date;
release_name = lv.name;
}
if (
release_date === undefined ||
release_date === null ||
release_date === ''
) {
release_date = role.modified;
}
if (
release_name === undefined ||
release_name === null ||
release_name === ''
) {
release_name = '';
}

const provider = getProviderInfo(role);
console.log('PROVIDER', provider);
export function LegacyRoleListItem({ role, show_thumbnail }: LegacyRoleProps) {
const {
description,
github_user,
modified,
name,
summary_fields: { namespace, versions, tags },
} = role;
const latest = versions[0];

const cells = [];

if (show_thumbnail !== false) {
cells.push(
<DataListCell isFilled={false} alignRight={false} key='ns'>
<Logo
alt={t`${role.github_user} logo`}
image={role.summary_fields.namespace.avatar_url}
size='70px'
unlockWidth
width='97px'
/>
</DataListCell>,
);
}
const role_url = formatPath(Paths.legacyRole, {
username: github_user,
name,
});
const release_date = latest?.release_date || modified;
const release_name = latest?.name || '';
const provider = getProviderInfo(role);
const cells = [];

if (show_thumbnail !== false) {
cells.push(
<DataListCell key='content'>
<div>
<Link to={role_url}>
{namespace.name}.{role.name}
</Link>
<ProviderLink
id={provider.id}
name={provider.name}
url={provider.url}
>
{provider.name}
</ProviderLink>
</div>
<div className='hub-entry'>{role.description}</div>
<div className='hub-entry'>
<LabelGroup {...chipGroupProps()}>
{role.summary_fields.tags.map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
</LabelGroup>
</div>
<DataListCell isFilled={false} alignRight={false} key='ns'>
<Logo
alt={t`${github_user} logo`}
image={namespace.avatar_url}
size='70px'
unlockWidth
width='97px'
/>
</DataListCell>,
);
}

cells.push(
<DataListCell isFilled={false} alignRight key='stats'>
<div className='hub-right-col hub-entry'>
<Trans>
Updated <DateComponent date={release_date} />
</Trans>
</div>
<div className='hub-entry'>{release_name}</div>
<div className='hub-entry'>
<DownloadCount item={role} />
</div>
</DataListCell>,
);
cells.push(
<DataListCell key='content'>
<div>
<Link to={role_url}>
{namespace.name}.{name}
</Link>
<ProviderLink {...provider} />
</div>
<div className='hub-entry'>{description}</div>
<div className='hub-entry'>
<LabelGroup {...chipGroupProps()}>
{tags.map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
</LabelGroup>
</div>
</DataListCell>,
);

return (
<DataListItem data-cy='LegacyRoleListItem'>
<DataListItemRow>
<DataListItemCells dataListCells={cells} />
</DataListItemRow>
</DataListItem>
);
}
cells.push(
<DataListCell isFilled={false} alignRight key='stats'>
<div className='hub-right-col hub-entry'>
<Trans>
Updated <DateComponent date={release_date} />
</Trans>
</div>
<div className='hub-entry'>{release_name}</div>
<div className='hub-entry'>
<DownloadCount item={role} />
</div>
</DataListCell>,
);

return (
<DataListItem data-cy='LegacyRoleListItem'>
<DataListItemRow>
<DataListItemCells dataListCells={cells} />
</DataListItemRow>
</DataListItem>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,6 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
});
})
.catch(({ response, message }) => {
// console.log(response, message);
if (message !== 'request-canceled') {
const { status, statusText } = response;
this.setState({
Expand Down
Loading
0