convert class component to functional
@@ -24,53 +24,62 @@ export interface IApiConnectorListViewProps extends IListViewToolbarProps {
linkCreateApiConnector: string;
}
-export class ApiConnectorListView extends React.Component<
- IApiConnectorListViewProps
-> {
- public render() {
+export const ApiConnectorListView: React.FunctionComponent<IApiConnectorListViewProps> = (
+ {
+ children,
+ i18nDescription,
+ i18nEmptyStateInfo,
+ i18nEmptyStateTitle,
+ i18nLinkCreateApiConnector,
+ i18nLinkCreateApiConnectorTip,
+ i18nName,
+ i18nTitle,
+ linkCreateApiConnector,
+ ...rest
+ }) => {
return (
<PageSection>
- <ListViewToolbar {...this.props}>
+ <ListViewToolbar {...rest}>
<div className={'form-group'}>
<ButtonLink data-testid={'api-connector-list-view-create-button'}
- href={this.props.linkCreateApiConnector}
+ href={linkCreateApiConnector}
as={'primary'}>
- {this.props.i18nLinkCreateApiConnector}
+ {i18nLinkCreateApiConnector}
</ButtonLink>
</div>
</ListViewToolbar>
- {this.props.i18nTitle !== '' && (
- <Title size="xl">{this.props.i18nTitle}</Title>
+ {i18nTitle !== '' && (
+ <Title size="xl">{i18nTitle}</Title>
)}
- {this.props.i18nDescription !== '' && (
+ {i18nDescription !== '' && (
<Text
- dangerouslySetInnerHTML={{ __html: this.props.i18nDescription }}
+ dangerouslySetInnerHTML={{ __html: i18nDescription }}
/>
)}
- {this.props.children ? (
- <DataList aria-label={'api connector list'}>{this.props.children}</DataList>
+ {children ? (
+ <DataList aria-label={'api connector list'}>{children}</DataList>
) : (
<EmptyState variant={EmptyStateVariant.full}>
<EmptyStateIcon icon={AddCircleOIcon}/>
<Title headingLevel={'h5'} size={'lg'}>
- {this.props.i18nEmptyStateTitle}
+ {i18nEmptyStateTitle}
</Title>
- <EmptyStateBody>{this.props.i18nEmptyStateInfo}</EmptyStateBody>
+ <EmptyStateBody>{i18nEmptyStateInfo}</EmptyStateBody>
<Tooltip
position={'top'}
content={
- this.props.i18nLinkCreateApiConnectorTip
- ? this.props.i18nLinkCreateApiConnectorTip
- : this.props.i18nLinkCreateApiConnector
+ i18nLinkCreateApiConnectorTip
+ ? i18nLinkCreateApiConnectorTip
+ : i18nLinkCreateApiConnector
}
enableFlip={true}
>
<>
<br/>
<ButtonLink data-testid={'api-connector-list-view-empty-state-create-button'}
- href={this.props.linkCreateApiConnector}
+ href={linkCreateApiConnector}
as={'primary'}>
- {this.props.i18nLinkCreateApiConnector}
+ {i18nLinkCreateApiConnector}
</ButtonLink>
</>
</Tooltip>
@@ -78,5 +87,4 @@ export class ApiConnectorListView extends React.Component<
)}
</PageSection>
);
- }
-}
+};
