improve dialog and fix richTextEditorLink

Feature #14120

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/components/rich-text-editor-link/rich-text-editor-link.tsx b/src/components/rich-text-editor-link/rich-text-editor-link.tsx
index ca942d783297054cf5e4369c5756fb32a827de55..2d6a5b4fdaf0bd9cc67bb4cd50414d7de6b7a7e9 100644 (file)
--- a/src/components/rich-text-editor-link/rich-text-editor-link.tsx
+++ b/src/components/rich-text-editor-link/rich-text-editor-link.tsx
@@ -3,7 +3,8 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { DispatchProp } from 'react-redux';
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
 import { withStyles, StyleRulesCallback, WithStyles, Typography } from '@material-ui/core';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { openRichTextEditorDialog } from '~/store/rich-text-editor-dialog/rich-text-editor-dialog-actions';
@@ -23,13 +24,20 @@ interface RichTextEditorLinkData {
     content: string;
 }
 
-type RichTextEditorLinkProps = RichTextEditorLinkData & WithStyles<CssRules>;
+interface RichTextEditorLinkActions {
+    onClick: (title: string, content: string) => void;
+}
+
+type RichTextEditorLinkProps = RichTextEditorLinkData & RichTextEditorLinkActions & WithStyles<CssRules>;
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+    onClick: (title: string, content: string) => dispatch<any>(openRichTextEditorDialog(title, content))
+});
 
-export const RichTextEditorLink = withStyles(styles)(
-    ({ classes, title, content, label }: RichTextEditorLinkProps) =>
-        <Typography component='span' className={classes.root} 
-            // onClick={() => dispatch<any>(openRichTextEditorDialog(title, content))}
-            >
+export const RichTextEditorLink = connect(undefined, mapDispatchToProps)(
+    withStyles(styles)(({ classes, title, content, label, onClick }: RichTextEditorLinkProps) =>
+        <Typography component='span' className={classes.root}
+            onClick={() => onClick(title, content) }>
             {label}
         </Typography>
-);
\ No newline at end of file
+    ));
\ No newline at end of file

diff --git a/src/store/rich-text-editor-dialog/rich-text-editor-dialog-actions.tsx b/src/store/rich-text-editor-dialog/rich-text-editor-dialog-actions.tsx
index 39f3d840a9d8c867ff40474fc2d163e649f7b3f8..d8bb6fd1c226665251e8168388573aa74cf049fd 100644 (file)
--- a/src/store/rich-text-editor-dialog/rich-text-editor-dialog-actions.tsx
+++ b/src/store/rich-text-editor-dialog/rich-text-editor-dialog-actions.tsx
@@ -7,6 +7,6 @@ import { dialogActions } from "~/store/dialog/dialog-actions";
 
 export const RICH_TEXT_EDITOR_DIALOG_NAME = 'richTextEditorDialogName';
 export const openRichTextEditorDialog = (title: string, text: string) => 
-    (dispatch: Dispatch) => {
+    async (dispatch: Dispatch) => {
         dispatch(dialogActions.OPEN_DIALOG({ id: RICH_TEXT_EDITOR_DIALOG_NAME, data: { title, text } }));
     };
\ No newline at end of file

diff --git a/src/views-components/details-panel/project-details.tsx b/src/views-components/details-panel/project-details.tsx
index 0e8835affdb92f0231b216550cec8807738dfde7..331952f259e7ff357cd48a2e088007064e5a2a8d 100644 (file)
--- a/src/views-components/details-panel/project-details.tsx
+++ b/src/views-components/details-panel/project-details.tsx
@@ -29,10 +29,13 @@ export class ProjectDetails extends DetailsData<ProjectResource> {
             {/* Missing attr */}
             <DetailsAttribute label='File size' value='1.4 GB' />
             <DetailsAttribute label='Description'>
-                <RichTextEditorLink 
-                    title={`Description of ${this.item.name}`}
-                    content={this.item.description} 
-                    label='Show full description' />
+                {this.item.description ? 
+                    <RichTextEditorLink
+                        title={`Description of ${this.item.name}`}
+                        content={this.item.description} 
+                        label='Show full description' />
+                    : '---'
+                }
             </DetailsAttribute>
         </div>;
     }

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 4ac572f7670df86e0c4f53da0f9d6617f0fcc33a..a997355410dc1f6eab0711142c23a6f27862e1c2 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
@@ -22,12 +22,9 @@ export const RichTextEditorDialog = withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
             maxWidth='sm'>
             <DialogTitle>{props.data.title}</DialogTitle>
             <DialogContent>
-                <DialogContentText>
-                    <RichTextEditor 
-                        value={RichTextEditor.createValueFromString(props.data.text, 'html')}
-                        readOnly={true}
-                        onChange={() => { return; }} />
-                </DialogContentText>
+                <RichTextEditor 
+                    value={RichTextEditor.createValueFromString(props.data.text, 'html')}
+                    readOnly={true} />
             </DialogContent>
             <DialogActions>
                 <Button