upgrade OAuthAppListItem
-import { ListViewItem } from 'patternfly-react';
+import {
+ DataListCell,
+ DataListContent,
+ DataListItem,
+ DataListItemCells,
+ DataListItemRow,
+ DataListToggle
+} from '@patternfly/react-core';
import * as React from 'react';
+import { useState } from 'react';
import { toValidHtmlId } from '../../helpers';
export interface IOAuthAppListItemProps {
@@ -12,30 +20,55 @@ export interface IOAuthAppListItemProps {
name: string;
}
-export class OAuthAppListItem extends React.Component<IOAuthAppListItemProps> {
- constructor(props: IOAuthAppListItemProps) {
- super(props);
- }
- public render() {
+export const OAuthAppListItem: React.FC<IOAuthAppListItemProps> = (
+ {
+ children,
+ configured,
+ i18nNotConfiguredText,
+ icon,
+ name
+ }) => {
+ const [rowExpanded, setRowExpanded] = useState(false);
+
+ const doExpand = () => {
+ setRowExpanded(!rowExpanded);
+ };
+
return (
- <ListViewItem
- data-testid={`o-auth-app-list-item-${toValidHtmlId(
- this.props.name
- )}-list-item`}
- key={this.props.id}
- hideCloseIcon={true}
- initExpanded={this.props.expanded}
- heading={this.props.name}
- leftContent={this.props.icon}
- description={''}
- additionalInfo={[
- !this.props.configured && (
- <i key={0}>{this.props.i18nNotConfiguredText}</i>
- ),
+ <DataListItem aria-labelledby={'app item'}
+ isExpanded={rowExpanded}
+ className={'oauth-app-list-item'}>
+ <DataListItemRow data-testid={`o-auth-app-list-item-${toValidHtmlId(
+ name
+ )}-list-item`}>
+ <DataListToggle
+ onClick={doExpand}
+ isExpanded={rowExpanded}
+ id={'app-item-toggle'}
+ />
+ <DataListItemCells
+ dataListCells={[
+ <DataListCell id={'app-icon'} key={'icon'} width={1}>
+ {icon}
+ </DataListCell>,
+ <DataListCell id={'app-name'} key={'name'} width={4}>
+ <b>{name}</b>
+ </DataListCell>,
+ <DataListCell id={'app-configured'} key={'configured'} width={5}>
+ {!configured && (
+ <i key={0}>{i18nNotConfiguredText}</i>
+ )}
+ </DataListCell>,
]}
+ />
+ </DataListItemRow>
+ <DataListContent
+ aria-label={'App Item Content'}
+ id={'app-item'}
+ isHidden={!rowExpanded}
>
- {this.props.children}
- </ListViewItem>
+ {children}
+ </DataListContent>
+ </DataListItem>
);
- }
-}
+};
