Merge pull request #5773 from thornbill/add-plugin-redesign

src/components/ConfirmDialog.tsx

@@ -0,0 +1,56 @@
+import Button from '@mui/material/Button/Button';
+import Dialog, { type DialogProps } from '@mui/material/Dialog/Dialog';
+import DialogActions from '@mui/material/DialogActions/DialogActions';
+import DialogContent from '@mui/material/DialogContent/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle/DialogTitle';
+import React, { type FC } from 'react';
+
+import globalize from 'scripts/globalize';
+
+interface ConfirmDialogProps extends DialogProps {
+    confirmButtonColor?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
+    confirmButtonText?: string
+    title: string
+    text: string
+    onCancel: () => void
+    onConfirm: () => void
+}
+
+/** Convenience wrapper for a simple MUI Dialog component for displaying a prompt that needs confirmation. */
+const ConfirmDialog: FC<ConfirmDialogProps> = ({
+    confirmButtonColor = 'primary',
+    confirmButtonText,
+    title,
+    text,
+    onCancel,
+    onConfirm,
+    ...dialogProps
+}) => (
+    <Dialog {...dialogProps}>
+        <DialogTitle>
+            {title}
+        </DialogTitle>
+        <DialogContent>
+            <DialogContentText>
+                {text}
+            </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+            <Button
+                variant='text'
+                onClick={onCancel}
+            >
+                {globalize.translate('ButtonCancel')}
+            </Button>
+            <Button
+                color={confirmButtonColor}
+                onClick={onConfirm}
+            >
+                {confirmButtonText || globalize.translate('ButtonOk')}
+            </Button>
+        </DialogActions>
+    </Dialog>
+);
+
+export default ConfirmDialog;

src/components/MarkdownBox.tsx

@@ -0,0 +1,37 @@
+import Box from '@mui/material/Box/Box';
+import DOMPurify from 'dompurify';
+import markdownIt from 'markdown-it';
+import React, { type FC } from 'react';
+
+interface MarkdownBoxProps {
+    markdown?: string | null
+    fallback?: string
+}
+
+/** A component to render Markdown content within a MUI Box component. */
+const MarkdownBox: FC<MarkdownBoxProps> = ({
+    markdown,
+    fallback
+}) => (
+    <Box
+        dangerouslySetInnerHTML={
+            markdown ?
+                { __html: DOMPurify.sanitize(markdownIt({ html: true }).render(markdown)) } :
+                undefined
+        }
+        sx={{
+            '> :first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
+                marginTop: 0,
+                paddingTop: 0
+            },
+            '> :last-child': {
+                marginBottom: 0,
+                paddingBottom: 0
+            }
+        }}
+    >
+        {markdown ? undefined : fallback}
+    </Box>
+);
+
+export default MarkdownBox;