17782: Fixes almost all tests (4 left) mostly by fixing namespace-type imports.

[arvados-workbench2.git] / src / views-components / rich-text-editor-dialog / rich-text-editor-dialog.tsx

diff --git a/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx b/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx
index 86422bafde731b5a36a288bb040934cf6a3fc84e..95ae6d45b7239f2bf58add9f6a0dbb2e6cf4b38f 100644 (file)
--- a/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx
+++ b/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx
@@ -2,37 +2,66 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@material-ui/core";
-import { WithDialogProps } from "~/store/dialog/with-dialog";
-import { withDialog } from '~/store/dialog/with-dialog';
-import { RICH_TEXT_EDITOR_DIALOG_NAME } from "~/store/rich-text-editor-dialog/rich-text-editor-dialog-actions";
+import React from "react";
+import {
+    Dialog, 
+    DialogTitle, 
+    DialogContent, 
+    DialogActions, 
+    Button,
+    StyleRulesCallback,
+    WithStyles,
+    withStyles
+} from "@material-ui/core";
+import { ArvadosTheme } from 'common/custom-theme';
+import { WithDialogProps } from "store/dialog/with-dialog";
+import { withDialog } from 'store/dialog/with-dialog';
+import { RICH_TEXT_EDITOR_DIALOG_NAME } from "store/rich-text-editor-dialog/rich-text-editor-dialog-actions";
 import RichTextEditor from 'react-rte';
 
+type CssRules = 'rte';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    rte: {
+        fontFamily: 'Arial',
+        '& a': {
+            textDecoration: 'none',
+            color: theme.palette.primary.main,
+            '&:hover': {
+                cursor: 'pointer',
+                textDecoration: 'underline'
+            }
+        }
+    },
+
+});
+
 export interface RichTextEditorDialogDataProps {
     title: string;
     text: string;
 }
 
-export const RichTextEditorDialog = withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
-    (props: WithDialogProps<RichTextEditorDialogDataProps>) =>
+export const RichTextEditorDialog = withStyles(styles)(withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
+    (props: WithDialogProps<RichTextEditorDialogDataProps> & WithStyles<CssRules>) =>
         <Dialog open={props.open}
             onClose={props.closeDialog}
             fullWidth
-            maxWidth='sm'>
+            maxWidth='md'>
             <DialogTitle>{props.data.title}</DialogTitle>
             <DialogContent>
-                <RichTextEditor 
-                    value={RichTextEditor.createValueFromString(props.data.text, 'html')}
+                <RichTextEditor
+                    className={props.classes.rte}
+                    value={props.data.text ?
+                        RichTextEditor.createValueFromString(props.data.text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&'), 'html') : ''}
                     readOnly={true} />
             </DialogContent>
             <DialogActions>
                 <Button
-                    variant='flat'
+                    variant='text'
                     color='primary'
                     onClick={props.closeDialog}>
                     Close
                 </Button>
             </DialogActions>
-        </Dialog>
+        </Dialog>)
 );
\ No newline at end of file