convert OAuthAppExpanderBody to a functional component
@@ -15,28 +15,36 @@ export interface IOAuthAppExpanderBodyProps {
i18nAlertDetail: string;
}
-export class OAuthAppExpanderBody extends React.Component<
+export const OAuthAppExpanderBody: React.FC<
IOAuthAppExpanderBodyProps
-> {
- constructor(props: IOAuthAppExpanderBodyProps) {
- super(props);
- }
- public render() {
+> = (
+ {
+ children,
+ disableRemove,
+ disableSave,
+ i18nAlertDetail,
+ i18nAlertTitle,
+ i18nRemoveButtonText,
+ i18nSaveButtonText,
+ onRemove,
+ onSave,
+ showSuccess
+ }) => {
return (
<>
- {this.props.showSuccess && (
+ {showSuccess && (
<Row>
<Col xs={11}>
<Alert type={'success'}>
- <strong>{this.props.i18nAlertTitle}</strong>&nbsp;
- {this.props.i18nAlertDetail}
+ <strong>{i18nAlertTitle}</strong>&nbsp;
+ {i18nAlertDetail}
</Alert>
</Col>
</Row>
)}
<Row>
<Col xs={12} md={8}>
- <Form isHorizontal={true}>{this.props.children}</Form>
+ <Form isHorizontal={true}>{children}</Form>
</Col>
</Row>
<Row>
@@ -45,22 +53,21 @@ export class OAuthAppExpanderBody extends React.Component<
<Button
data-testid={'o-auth-app-expander-body-save-button'}
bsStyle="primary"
- onClick={this.props.onSave}
- disabled={this.props.disableSave}
+ onClick={onSave}
+ disabled={disableSave}
>
- {this.props.i18nSaveButtonText}
+ {i18nSaveButtonText}
</Button>{' '}
<Button
data-testid={'o-auth-app-expander-body-remove-button'}
- onClick={this.props.onRemove}
- disabled={this.props.disableRemove}
+ onClick={onRemove}
+ disabled={disableRemove}
>
- {this.props.i18nRemoveButtonText}
+ {i18nRemoveButtonText}
</Button>
</>
</Col>
</Row>
</>
);
- }
-}
+};
