Add Tag, TagManagementDialog and SimpleConfirmationDialog components

Change-type: minor

Author: Andrea Rosci

src/components/Form/Widgets/FileWidget.tsx

@@ -138,7 +138,7 @@ export const FileWidget = ({
 	const mobile = useMediaQuery(theme.breakpoints.down('md'));
 	const formId = useRandomUUID();
 
-	const fileUploadId = useMemo(() => `file-upload-${formId}`, []);
+	const fileUploadId = useMemo(() => `file-upload-${formId}`, [formId]);
 
 	const options = uiSchema?.['ui:options'] as UIOptions | undefined;
 	const accept = options?.accept;

src/components/Map/index.tsx

@@ -206,5 +206,4 @@ export interface MapProps<T> extends React.HTMLAttributes<HTMLElement> {
 	mapClick?: (e: google.maps.MapMouseEvent) => void;
 }
 
-/** [View story source](https://github.com/balena-io-modules/rendition/blob/master/src/components/Map/Map.stories.tsx) */
 export const Map = BaseMap;

src/components/SimpleConfirmationDialog/SimpleConfirmationDialog.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { SimpleConfirmationDialogProps } from '.';
+import { SimpleConfirmationDialog } from '.';
+import { Button } from '@mui/material';
+
+const SimpleConfirmationDialogTemplate = (
+	props: Omit<SimpleConfirmationDialogProps, 'onClose'>,
+) => {
+	const [demoShow, setDemoShow] = React.useState(false);
+	return (
+		<>
+			<Button
+				onClick={() => {
+					setDemoShow(!demoShow);
+				}}
+			>
+				Show
+			</Button>
+			{demoShow && (
+				<SimpleConfirmationDialog
+					{...props}
+					onClose={() => {
+						setDemoShow(false);
+					}}
+				/>
+			)}
+		</>
+	);
+};
+
+const meta = {
+	title: 'Other/SimpleConfirmationDialog',
+	component: SimpleConfirmationDialogTemplate,
+	tags: ['autodocs'],
+} satisfies Meta<typeof SimpleConfirmationDialogTemplate>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		title: 'Simple confirmation dialog demo',
+		action: 'Demo',
+	},
+};

src/components/SimpleConfirmationDialog/index.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useTranslation } from '../../hooks/useTranslations';
+import {
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogTitle,
+} from '@mui/material';
+import { Spinner } from '../Spinner';
+import { ButtonWithTracking } from '../ButtonWithTracking';
+
+export interface SimpleConfirmationDialogProps {
+	children?: React.ReactNode;
+	title: string | JSX.Element;
+	cancel?: string;
+	action: string;
+	onClose: (confirmed: boolean) => MaybePromise<void>;
+	danger?: boolean;
+}
+
+export const SimpleConfirmationDialog = ({
+	title,
+	onClose,
+	cancel,
+	action,
+	children,
+	danger,
+}: SimpleConfirmationDialogProps) => {
+	const { t } = useTranslation();
+	const [isSubmitting, setIsSubmitting] = React.useState(false);
+	return (
+		<Dialog
+			onClose={async () => {
+				await onClose(false);
+			}}
+			open
+		>
+			<Spinner show={isSubmitting}>
+				<DialogTitle>{title ?? t('actions_messages.confirmation')}</DialogTitle>
+				<DialogContent>{children}</DialogContent>
+				<DialogActions>
+					<ButtonWithTracking
+						eventName="Confirmation dialog cancel click"
+						aria-label={t('aria_labels.execute_action', {
+							actionName: cancel ?? t('actions.cancel'),
+						})}
+						onClick={async () => {
+							await onClose(false);
+						}}
+						variant="outlined"
+						color="secondary"
+						autoFocus={danger}
+					>
+						{cancel ?? t('actions.cancel')}
+					</ButtonWithTracking>
+					<ButtonWithTracking
+						eventName={`Confirmation dialog ${action} click`}
+						aria-label={t('aria_labels.execute_action', { actionName: action })}
+						onClick={async () => {
+							try {
+								const result = onClose(true);
+								if (result != null && result instanceof Promise) {
+									setIsSubmitting(true);
+								}
+								await result;
+							} finally {
+								setIsSubmitting(false);
+							}
+						}}
+						variant="contained"
+						color={danger ? 'error' : 'primary'}
+						autoFocus={!danger}
+					>
+						{action}
+					</ButtonWithTracking>
+				</DialogActions>
+			</Spinner>
+		</Dialog>
+	);
+};

src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tag } from '.';
+
+const meta = {
+	title: 'Other/Tag',
+	component: Tag,
+	tags: ['autodocs'],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		name: 'Tag',
+		value: 'Value',
+	},
+};
+
+export const OnlyValue: Story = {
+	args: {
+		value: 'Value',
+	},
+};
+
+export const OnlyName: Story = {
+	args: {
+		value: 'Name',
+	},
+};
+
+export const Empty: Story = { args: {} };
+
+export const MultipleValues: Story = {
+	args: {
+		multiple: [
+			{ name: 'Tag1', operator: 'contains', value: 'value1' },
+			{
+				prefix: 'or',
+				name: 'Tag2',
+				operator: 'contains',
+				value: 'value2',
+			},
+		],
+	},
+};
+
+export const Overflow: Story = {
+	args: {
+		multiple: [
+			{ name: 'Tag1', operator: 'contains', value: 'value1' },
+			{
+				prefix: 'or',
+				name: 'Tag2',
+				operator: 'contains',
+				value: 'value2',
+			},
+			{
+				prefix: 'or',
+				name: 'Tag3',
+				operator: 'contains',
+				value: 'value3',
+			},
+			{
+				prefix: 'or',
+				name: 'Tag4',
+				operator: 'contains',
+				value: 'value4',
+			},
+		],
+	},
+};

src/components/Tag/index.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Box, type BoxProps, Button, Tooltip, Typography } from '@mui/material';
+
+// Prevent the tags taking up too much horizontal space
+const MAX_ITEMS_TO_DISPLAY = 3;
+
+const tagItemsToString = (items: TagItem[]) => {
+	return items
+		.map((item, index) => {
+			const prefix = index > 0 ? `${item.prefix ?? ','} ` : '';
+			const separator = item.operator ? ` ${item.operator} ` : ': ';
+			return (
+				prefix +
+				(item.value ? `${item.name}${separator}${item.value}` : item.name)
+			);
+		})
+		.join('\n');
+};
+
+export interface TagProps extends Omit<BoxProps, 'onClick'> {
+	/** The value part of the tag */
+	value?: string;
+	/** The name part of the tag, if not provided, only the value will be shown */
+	name?: string;
+	/** The operator that goes between the name and value of the tag */
+	operator?: string;
+	/** An array of name-value pairs, with an optional delimiter to be used between the previous and current tag entry */
+	multiple?: TagItem[];
+	/** Callback method, that if passed, a "close" button will be added to the right-hand side of the tag */
+	onClose?: (event: React.MouseEvent<HTMLElement>) => void;
+	/** Callback method, that if passed, the tag will become clickable */
+	onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+export const Tag = ({
+	name,
+	operator,
+	value,
+	multiple,
+	onClose,
+	onClick,
+	...props
+}: TagProps) => {
+	let tagArray = multiple ?? [{ name, operator, value }];
+
+	if (!tagArray.length) {
+		return null;
+	}
+	const overflow = tagArray.length > MAX_ITEMS_TO_DISPLAY;
+
+	if (overflow) {
+		tagArray = [tagArray[0], { name: `... and ${tagArray.length - 1} more` }];
+	}
+
+	const tagContent = (
+		<Tooltip title={overflow ? tagItemsToString(multiple ?? []) : undefined}>
+			<Box
+				sx={(theme) => ({
+					backgroundColor: theme.palette.blue.light,
+					border: `1px solid ${theme.palette.info.main}`,
+					borderRadius: '2px',
+					lineHeight: 1.5,
+					width: 'fit-content',
+					py: 1,
+					px: 2,
+				})}
+			>
+				{tagArray.map((tagEntry, index) => {
+					const nameValueSeparator = tagEntry.operator
+						? ` ${tagEntry.operator} `
+						: ': ';
+
+					return (
+						<React.Fragment key={index}>
+							{index > 0 && !overflow && (
+								<Typography
+									sx={{
+										whitespace: 'pre',
+										fontStyle: 'italic',
+										color: 'palette.primary',
+									}}
+								>{`  ${tagEntry.prefix ?? ','}  `}</Typography>
+							)}
+
+							{!tagEntry.value && !tagEntry.name && (
+								<Typography
+									sx={{
+										fontStyle: 'italic',
+										color: 'palette.primary',
+									}}
+								>
+									no value
+								</Typography>
+							)}
+
+							{tagEntry.name && (
+								<Typography
+									sx={{
+										whitespace: 'pre',
+										color: 'palette.primary',
+									}}
+								>
+									{`${tagEntry.name}${tagEntry.value ? nameValueSeparator : ''}`}
+								</Typography>
+							)}
+
+							{tagEntry.value && (
+								<Typography
+									sx={{
+										fontWeight: 'bold',
+										color: 'palette.primary',
+									}}
+								>
+									{tagEntry.value}
+								</Typography>
+							)}
+						</React.Fragment>
+					);
+				})}
+			</Box>
+		</Tooltip>
+	);
+
+	return (
+		<Box {...props}>
+			{onClick ? <Button onClick={onClick}>{tagContent}</Button> : tagContent}
+			{onClose && (
+				<Button
+					sx={(theme) => ({
+						py: 1,
+						pl: 2,
+						pr: 3,
+						fontSize: 1,
+						color: theme.palette.customGrey.main,
+					})}
+					onClick={onClose}
+				>
+					<FontAwesomeIcon icon={faTimes} />
+				</Button>
+			)}
+		</Box>
+	);
+};
+
+export interface TagItem {
+	value?: string;
+	name?: string;
+	operator?: string;
+	prefix?: string;
+}