Add Tag, TagManagementDialog and SimpleConfirmationDialog components #166
Conversation
|
Website deployed to CF Pages, 👀 preview link https://36c7bf22.balena-design-system.pages.dev |
JSReds
force-pushed
the
add-tag-and-management-modal
branch
from
d199a93 to
1cc47e2
Compare
src/components/Tag/index.tsx
Outdated
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { Box, type BoxProps, Button, Tooltip, Typography } from '@mui/material'; | ||
|
|
||
| // Prevent the filters taking up too much horizontal space |
There was a problem hiding this comment.
This comment does not make much sense in the context of the library alone, is there something a bit more generic we can change it to?
src/components/Tag/index.tsx
Outdated
| {onClose && ( | ||
| <Button | ||
| sx={(theme) => ({ | ||
| p: 1, |
There was a problem hiding this comment.
| p: 1, | |
| py: 1, |
| pl: 2, | ||
| pr: 3, | ||
| fontSize: 1, | ||
| color: theme.palette.customGrey.main, |
There was a problem hiding this comment.
I think this is not one of our colors, is it?
| SimpleConfirmationDialog, | ||
| } from '../SimpleConfirmationDialog'; | ||
|
|
||
| const RESERVED_NAMESPACE = 'io.resin.'; |
There was a problem hiding this comment.
io.balena. is reserved as well
| itemType, | ||
| count, | ||
| })} | ||
| <br /> |
There was a problem hiding this comment.
What is the <br /> for? Can we just pass the paragraph prop to Typography?
| <SimpleConfirmationDialog {...confirmationDialogOptions} /> | ||
| )} | ||
| </Stack> | ||
| <Box>{error && <Callout severity="danger">{error.message}</Callout>}</Box> |
There was a problem hiding this comment.
What is the Box there for? Can we remove it so it's not in the DOM when there is no error?
There was a problem hiding this comment.
This component is not used. Should be able to delete it
| </TableRow> | ||
| ) : ( | ||
| tags.map((tag) => { | ||
| console.log(tag, items, tagDiffs); |
| /** | ||
| * Displays a Dialog to manage Tags. | ||
| * | ||
| * [View story source](https://github.com/balena-io-modules/rendition/blob/master/src/components/TagManagementDialog/TagManagementDialog.stories.tsx) | ||
| * | ||
| * | ||
| * | ||
| * Dialog Strings: | ||
| * | ||
| * | `Name |` Description | | ||
| * |------|-------------| | ||
| * | `labels.tags` | Tags | | ||
| * | `labels.shared` | Shared | | ||
| * | `labels.tag_name` | Tag name | | ||
| * | `labels.value` | Value | | ||
| * | `labels.tag_value` | Tag value | | ||
| * | `actions.ok` | OK | | ||
| * | `actions.cancel` | Cancel | | ||
| * | `actions.add_tag` | Add tag | | ||
| * | `actions.continue` | Continue | | ||
| * | `actions.undo_add` | Undo add | | ||
| * | `actions.undo_edit` | Undo edit | | ||
| * | `actions.undo_delete` | Undo delete | | ||
| * | `actions.apply_item_type_count` | Apply | | ||
| * | `actions.apply_item_type_count_plural` | Apply to {{count}} {{itemType}} | | ||
| * | `actions_messages.confirmation` | Are you sure? | | ||
| * | `actions_confirmations.confirm_to_proceed` | Do you want to proceed? | | ||
| * | `no_data.no_name_set` | No name set | |
There was a problem hiding this comment.
Is this comment necessary? We should just be referencing the translations file IMO
|
|
||
| return ( | ||
| <DialogWithCloseButton | ||
| open={true} |
There was a problem hiding this comment.
| open={true} | |
| open |
| {items.length > 1 && <span>{t('labels.shared')} </span>} | ||
| {t('labels.tags')} | ||
| </Typography> | ||
| <Box pl={1}> |
| <TableCell> | ||
| {showPreviousTagProperties && ( | ||
| <PreviousTagProperty state={tag.state}> | ||
| <Box>{tag.tag_key}</Box> |
There was a problem hiding this comment.
Is the Box wrapping necessary?
| )} | ||
| {tag.state !== 'deleted' && ( | ||
| <TagProperty state={tag.state}> | ||
| <Box>{tag.tag_key}</Box> |
| <TableCell> | ||
| {showPreviousTagProperties && ( | ||
| <PreviousTagProperty state={tag.state}> | ||
| <Box>{tag.initialValue ?? NBSP}</Box> |
| </TableCell> | ||
| <TableCell> | ||
| {tag.state && ( | ||
| <Box alignItems="center" justifyContent="flex-end"> |
There was a problem hiding this comment.
Don't these not do anything if the Box is not flex?
JSReds
force-pushed
the
add-tag-and-management-modal
branch
from
1cc47e2 to
651efdf
Compare
Change-type: minor
JSReds
force-pushed
the
add-tag-and-management-modal
branch
from
651efdf to
d0df74c
Compare
Change-type: minor