mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
Rework Button component to pass its label via children content
This commit is contained in:
@ -15,7 +15,6 @@ import ApplicationsList from './list';
|
||||
|
||||
const labels = defineMessages({
|
||||
addNew: 'Add new',
|
||||
authorization: 'Authorization',
|
||||
});
|
||||
|
||||
type Props = {
|
||||
@ -123,10 +122,11 @@ function Loader({ noApps }: { noApps: boolean }) {
|
||||
<LinkButton
|
||||
to="/dev/applications/new"
|
||||
data-e2e="newApp"
|
||||
label={labels.addNew}
|
||||
color={COLOR_GREEN}
|
||||
className={styles.emptyStateActionButton}
|
||||
/>
|
||||
>
|
||||
<Message {...labels.addNew} />
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -145,12 +145,9 @@ function Guest() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LinkButton
|
||||
to="/login"
|
||||
label={labels.authorization}
|
||||
color={COLOR_BLUE}
|
||||
className={styles.emptyStateActionButton}
|
||||
/>
|
||||
<LinkButton to="/login" color={COLOR_BLUE} className={styles.emptyStateActionButton}>
|
||||
<Message key="authorization" defaultMessage="Authorization" />
|
||||
</LinkButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -20,10 +20,7 @@ const messages = defineMessages({
|
||||
minecraftServer: 'Minecraft server',
|
||||
|
||||
creatingApplication: 'Creating an application',
|
||||
createApplication: 'Create application',
|
||||
|
||||
updatingApplication: 'Updating an application',
|
||||
updateApplication: 'Update application',
|
||||
});
|
||||
|
||||
type TypeToForm = Record<
|
||||
@ -115,12 +112,13 @@ export default class ApplicationForm extends React.Component<{
|
||||
</div>
|
||||
|
||||
{!!FormComponent && (
|
||||
<Button
|
||||
color={COLOR_GREEN}
|
||||
block
|
||||
label={isUpdate ? messages.updateApplication : messages.createApplication}
|
||||
type="submit"
|
||||
/>
|
||||
<Button color={COLOR_GREEN} block type="submit">
|
||||
{isUpdate ? (
|
||||
<Message key="updateApplication" defaultMessage="Update application" />
|
||||
) : (
|
||||
<Message key="createApplication" defaultMessage="Create application" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
|
@ -16,15 +16,15 @@ const ACTION_DELETE = 'delete';
|
||||
const actionButtons = [
|
||||
{
|
||||
type: ACTION_REVOKE_TOKENS,
|
||||
label: messages.revokeAllTokens,
|
||||
label: <Message {...messages.revokeAllTokens} />,
|
||||
},
|
||||
{
|
||||
type: ACTION_RESET_SECRET,
|
||||
label: messages.resetClientSecret,
|
||||
label: <Message {...messages.resetClientSecret} />,
|
||||
},
|
||||
{
|
||||
type: ACTION_DELETE,
|
||||
label: messages.delete,
|
||||
label: <Message {...messages.delete} />,
|
||||
},
|
||||
];
|
||||
|
||||
@ -122,13 +122,14 @@ export default class ApplicationItem extends React.Component<
|
||||
{actionButtons.map(({ type, label }) => (
|
||||
<Button
|
||||
key={type}
|
||||
label={label}
|
||||
color={COLOR_BLACK}
|
||||
className={styles.appActionButton}
|
||||
disabled={!!selectedAction && selectedAction !== type}
|
||||
onClick={this.onActionButtonClick(type)}
|
||||
small
|
||||
/>
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -160,12 +161,13 @@ export default class ApplicationItem extends React.Component<
|
||||
</div>
|
||||
<div className={styles.appActionsButtons}>
|
||||
<Button
|
||||
label={messages.cancel}
|
||||
color={COLOR_BLACK}
|
||||
className={styles.appActionButton}
|
||||
onClick={this.onActionButtonClick(null)}
|
||||
small
|
||||
/>
|
||||
>
|
||||
<Message {...messages.cancel} />
|
||||
</Button>
|
||||
<div className={styles.continueActionButtonWrapper}>
|
||||
{isActionPerforming ? (
|
||||
<div className={styles.performingAction}>
|
||||
@ -193,12 +195,13 @@ export default class ApplicationItem extends React.Component<
|
||||
</div>
|
||||
<div className={styles.appActionsButtons}>
|
||||
<Button
|
||||
label={messages.cancel}
|
||||
color={COLOR_BLACK}
|
||||
className={styles.appActionButton}
|
||||
onClick={this.onActionButtonClick(null)}
|
||||
small
|
||||
/>
|
||||
>
|
||||
<Message {...messages.cancel} />
|
||||
</Button>
|
||||
<div className={styles.continueActionButtonWrapper}>
|
||||
{isActionPerforming ? (
|
||||
<div className={styles.performingAction}>
|
||||
@ -206,13 +209,14 @@ export default class ApplicationItem extends React.Component<
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
label={messages.delete}
|
||||
color={COLOR_RED}
|
||||
className={styles.appActionButton}
|
||||
onClick={this.onSubmitDelete}
|
||||
data-testid="delete-app"
|
||||
small
|
||||
/>
|
||||
>
|
||||
<Message {...messages.delete} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -49,10 +49,11 @@ export default class ApplicationsList extends React.Component<Props, State> {
|
||||
<LinkButton
|
||||
to="/dev/applications/new"
|
||||
data-e2e="newApp"
|
||||
label={messages.addNew}
|
||||
color={COLOR_GREEN}
|
||||
className={styles.appsListAddNewAppBtn}
|
||||
/>
|
||||
>
|
||||
<Message {...messages.addNew} />
|
||||
</LinkButton>
|
||||
</div>
|
||||
<div className={styles.appsListContainer}>
|
||||
{applications.map((app) => (
|
||||
|
Reference in New Issue
Block a user