Skip to content
This repository has been archived by the owner on Jan 16, 2025. It is now read-only.

Commit

Permalink
Migrate Rendition Buttons to MUI Buttons
Browse files Browse the repository at this point in the history 
Change-type: patch
  • Loading branch information
Andrea Rosci authored and Andrea Rosci committed Feb 26, 2024
1 parent 4dbe4c4 commit 6f7ec85
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 185 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"README.md"
],
"dependencies": {
"@balena/ui-shared-components": "^3.2.1",
"json-e": "^4.4.3",
"lodash": "^4.17.21",
"qs": "^6.10.3",
Expand Down
80 changes: 43 additions & 37 deletions src/AutoUI/Actions/Create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ import {
AutoUIBaseResource,
autoUIJsonSchemaPick,
} from '../schemaOps';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ActionData } from '../schemaOps';
import { getCreateDisabledReason } from '../utils';
import { faMagic } from '@fortawesome/free-solid-svg-icons/faMagic';
import { useTranslation } from '../../hooks/useTranslation';
import { Box, Button, Flex, Spinner } from 'rendition';
import { Spinner } from 'rendition';
import { ActionContent, LOADING_DISABLED_REASON } from './ActionContent';
import { Material, IconsMaterial, Tooltip } from '@balena/ui-shared-components';

const { Button, Box } = Material;
const { AutoFixNormal } = IconsMaterial;

interface CreateProps<T extends AutoUIBaseResource<T>> {
model: AutoUIModel<T>;
Expand Down Expand Up @@ -55,42 +57,46 @@ export const Create = <T extends AutoUIBaseResource<T>>({
disabledReasonsByAction[action.title];

return (
<Box>
<Button
data-action={`create-${model.resource}`}
onClick={() =>
onActionTriggered({
action,
schema: autoUIJsonSchemaPick(
model.schema,
model.permissions.create,
),
})
}
icon={<FontAwesomeIcon icon={faMagic} />}
tooltip={
typeof disabledReason === 'string' ? disabledReason : undefined
}
disabled={!!disabledReason}
primary
<Box display="flex">
<Tooltip
title={typeof disabledReason === 'string' ? disabledReason : undefined}
>
<ActionContent<T>
getDisabledReason={action.isDisabled}
affectedEntries={undefined}
checkedState={undefined}
onDisabledReady={(result) => {
setDisabledReasonsByAction((disabledReasonsState) => ({
...disabledReasonsState,
[action.title]: result,
}));
}}
<Button
data-action={`create-${model.resource}`}
variant="contained"
onClick={() =>
onActionTriggered({
action,
schema: autoUIJsonSchemaPick(
model.schema,
model.permissions.create,
),
})
}
startIcon={<AutoFixNormal />}
disabled={!!disabledReason}
>
<Flex justifyContent="space-between">
{action.title}
<Spinner ml={2} show={disabledReason === LOADING_DISABLED_REASON} />
</Flex>
</ActionContent>
</Button>
<ActionContent<T>
getDisabledReason={action.isDisabled}
affectedEntries={undefined}
checkedState={undefined}
onDisabledReady={(result) => {
setDisabledReasonsByAction((disabledReasonsState) => ({
...disabledReasonsState,
[action.title]: result,
}));
}}
>
<Box display="flex" justifyContent="space-between">
{action.title}
<Spinner
ml={2}
show={disabledReason === LOADING_DISABLED_REASON}
/>
</Box>
</ActionContent>
</Button>
</Tooltip>
</Box>
);
};
244 changes: 120 additions & 124 deletions src/AutoUI/Actions/Update.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
AutoUIContext,
AutoUIModel,
Expand All @@ -8,25 +7,18 @@ import {
} from '../schemaOps';
import { ActionData } from '../schemaOps';
import { autoUIGetDisabledReason } from '../utils';
import { faPenToSquare } from '@fortawesome/free-solid-svg-icons/faPenToSquare';
import groupBy from 'lodash/groupBy';
import map from 'lodash/map';
import { useTranslation } from '../../hooks/useTranslation';
import { CheckedState, Spinner } from 'rendition';
import { ActionContent, LOADING_DISABLED_REASON } from './ActionContent';
import {
Box,
Button,
CheckedState,
DropDownButton,
Flex,
Spinner,
} from 'rendition';
import styled from 'styled-components';
import { ActionContent, LOADING_DISABLED_REASON } from './ActionContent';

const Wrapper = styled(Box)`
align-self: flex-start;
z-index: 10;
`;
DropDownButtonProps,
Material,
IconsMaterial,
Tooltip,
} from '@balena/ui-shared-components';
const { Box, Button } = Material;
const { Edit } = IconsMaterial;

interface UpdateProps<T extends AutoUIBaseResource<T>> {
model: AutoUIModel<T>;
Expand Down Expand Up @@ -69,64 +61,69 @@ export const Update = <T extends AutoUIBaseResource<T>>({
);
});

const groupedActions = React.useMemo(
() => groupBy(updateActions, (action) => action.section),
[updateActions],
);

const actionHandlers = React.useMemo(
() =>
map(groupedActions, (actions) =>
actions.map((action) => {
const disabledReason =
autoUIGetDisabledReason(
selected,
checkedState,
hasOngoingAction,
action.type as 'update' | 'delete',
t,
) ?? disabledReasonsByAction[action.title];
const actionHandlers = React.useMemo<
DropDownButtonProps<{ section?: string }>['items']
>(() => {
if (!updateActions) {
return [];
}
return updateActions.map((action) => {
const disabledReason =
autoUIGetDisabledReason(
selected,
checkedState,
hasOngoingAction,
action.type as 'update' | 'delete',
t,
) ?? disabledReasonsByAction[action.title];

return {
content: (
<ActionContent<T>
getDisabledReason={action.isDisabled}
affectedEntries={selected}
checkedState={checkedState}
onDisabledReady={(result) => {
setDisabledReasonsByAction((disabledReasonsState) => ({
...disabledReasonsState,
[action.title]: result,
}));
}}
>
<Flex justifyContent="space-between">
{action.title}
<Spinner show={disabledReason === LOADING_DISABLED_REASON} />
</Flex>
</ActionContent>
),
onClick: () =>
onActionTriggered({
action,
schema:
action.type === 'delete'
? {}
: autoUIJsonSchemaPick(
model.schema,
model.permissions[action.type],
),
affectedEntries: selected,
}),
tooltip:
typeof disabledReason === 'string' ? disabledReason : undefined,
disabled: !!disabledReason,
danger: action.isDangerous,
};
}),
),
[groupedActions, disabledReasonsByAction],
);
return {
eventName: `${model.resource} ${action.title}`,
children: (
<ActionContent<T>
getDisabledReason={action.isDisabled}
affectedEntries={selected}
checkedState={checkedState}
onDisabledReady={(result) => {
setDisabledReasonsByAction((disabledReasonsState) => ({
...disabledReasonsState,
[action.title]: result,
}));
}}
>
<Box
display="flex"
justifyContent="space-between"
color={
action.isDangerous && !disabledReasonsByAction[action.title]
? 'error.main'
: undefined
}
>
{action.title}
<Spinner show={disabledReason === LOADING_DISABLED_REASON} />
</Box>
</ActionContent>
),
onClick: () =>
onActionTriggered({
action,
schema:
action.type === 'delete'
? {}
: autoUIJsonSchemaPick(
model.schema,
model.permissions[action.type],
),
affectedEntries: selected,
}),
tooltip:
typeof disabledReason === 'string' ? disabledReason : undefined,
disabled: !!disabledReason,
section: action.section,
};
});
}, [updateActions, disabledReasonsByAction]);

if (!updateActions || updateActions.length < 1) {
return null;
Expand All @@ -144,50 +141,51 @@ export const Update = <T extends AutoUIBaseResource<T>>({
) ?? disabledReasonsByAction[action.title];
return (
<Box alignSelf="flex-start">
<Button
key={action.title}
data-action={`${action.type}-${model.resource}`}
onClick={() =>
onActionTriggered({
action,
schema:
action.type === 'delete'
? {}
: autoUIJsonSchemaPick(
model.schema,
model.permissions[action.type],
),
affectedEntries: selected,
})
}
tooltip={
<Tooltip
title={
typeof disabledReason === 'string' ? disabledReason : undefined
}
disabled={!!disabledReason}
plain={updateActions.length > 1}
danger={action.isDangerous}
secondary
>
<ActionContent<T>
getDisabledReason={action.isDisabled}
affectedEntries={selected}
checkedState={checkedState}
onDisabledReady={(result) => {
setDisabledReasonsByAction((disabledReasonsState) => ({
...disabledReasonsState,
[action.title]: result,
}));
}}
<Button
key={action.title}
data-action={`${action.type}-${model.resource}`}
onClick={() =>
onActionTriggered({
action,
schema:
action.type === 'delete'
? {}
: autoUIJsonSchemaPick(
model.schema,
model.permissions[action.type],
),
affectedEntries: selected,
})
}
disabled={!!disabledReason}
color={action.isDangerous ? 'error' : 'secondary'}
>
<Flex justifyContent="space-between">
{action.title}
<Spinner
ml={2}
show={disabledReason === LOADING_DISABLED_REASON}
/>
</Flex>
</ActionContent>
</Button>
<ActionContent<T>
getDisabledReason={action.isDisabled}
affectedEntries={selected}
checkedState={checkedState}
onDisabledReady={(result) => {
setDisabledReasonsByAction((disabledReasonsState) => ({
...disabledReasonsState,
[action.title]: result,
}));
}}
>
<Box display="flex" justifyContent="space-between">
{action.title}
<Spinner
ml={2}
show={disabledReason === LOADING_DISABLED_REASON}
/>
</Box>
</ActionContent>
</Button>
</Tooltip>
</Box>
);
}
Expand All @@ -201,17 +199,15 @@ export const Update = <T extends AutoUIBaseResource<T>>({
);

return (
<Wrapper>
<DropDownButton
joined
alignRight
secondary
disabled={!!disabledReason}
tooltip={disabledReason}
icon={<FontAwesomeIcon icon={faPenToSquare} />}
label={t('labels.modify')}
<Tooltip title={disabledReason}>
<DropDownButton<{ section?: string }>
items={actionHandlers}
disabled={!!disabledReason}
startIcon={<Edit />}
children={t('labels.modify')}
color="secondary"
groupByProp="section"
/>
</Wrapper>
</Tooltip>
);
};
Loading

0 comments on commit 6f7ec85

Please sign in to comment.