init rich test editor for project

Feature #14120

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

diff --git a/package.json b/package.json
index 620ff5a6d03a6d7d616ab9d32b0ec2f47c0530ac..175ef1760dde7889b5e098e02a2190a56e2759d0 100644 (file)
--- a/package.json
+++ b/package.json
@@ -12,14 +12,15 @@
     "axios": "0.18.0",
     "classnames": "2.2.6",
     "lodash": "4.17.10",
-    "react": "16.4.2",
+    "react": "16.5.2",
     "react-copy-to-clipboard": "5.0.1",
-    "react-dom": "16.4.2",
+    "react-dom": "16.5.2",
     "react-dropzone": "5.0.1",
     "react-redux": "5.0.7",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",
     "react-router-redux": "5.0.0-alpha.9",
+    "react-rte": "0.16.1",
     "react-scripts-ts": "2.17.0",
     "react-splitter-layout": "3.0.1",
     "react-transition-group": "2.4.0",

diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index b5671dbb08c962b8bae3458738fdf634b57bc382..beea2ba3360fa51d796f58693706073142900617 100644 (file)
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { WrappedFieldProps } from 'redux-form';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { TextField as MaterialTextField, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import RichTextEditor from 'react-rte';
 
 type CssRules = 'textField';
 
@@ -27,3 +28,32 @@ export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyl
         fullWidth={true}
         {...props.input}
     />);
+
+
+interface RichEditorTextFieldData {
+    label?: string;
+}
+
+type RichEditorTextFieldProps = RichEditorTextFieldData & WrappedFieldProps & WithStyles<CssRules>;
+
+export const RichEditorTextField = withStyles(styles)(
+    class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
+        state = {
+            value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
+        };
+
+        onChange = (value: any) => {
+            this.setState({ value });
+            this.props.input.onChange(value.toString('html'));
+        }
+
+        render() {
+            return (
+                <RichTextEditor 
+                    value={this.state.value}
+                    onChange={this.onChange}
+                    placeholder={this.props.label} />
+            );
+        }
+    }
+);
\ No newline at end of file

diff --git a/src/store/projects/project-update-actions.ts b/src/store/projects/project-update-actions.ts
index afa2e35e8d7c6555055ba053c0bfaeadb6145d84..34ea42f59bd93796bb355da70d3291cc91133906 100644 (file)
--- a/src/store/projects/project-update-actions.ts
+++ b/src/store/projects/project-update-actions.ts
@@ -10,6 +10,7 @@ import { getCommonResourceServiceError, CommonResourceServiceError } from "~/ser
 import { ServiceRepository } from "~/services/services";
 import { ProjectResource } from '~/models/project';
 import { ContextMenuResource } from "~/store/context-menu/context-menu-actions";
+import { getResource } from '~/store/resources/resources';
 
 export interface ProjectUpdateFormDialogData {
     uuid: string;
@@ -20,8 +21,9 @@ export interface ProjectUpdateFormDialogData {
 export const PROJECT_UPDATE_FORM_NAME = 'projectUpdateFormName';
 
 export const openProjectUpdateDialog = (resource: ContextMenuResource) =>
-    (dispatch: Dispatch) => {
-        dispatch(initialize(PROJECT_UPDATE_FORM_NAME, resource));
+    (dispatch: Dispatch, getState: () => RootState) => {
+        const project = getResource(resource.uuid)(getState().resources);
+        dispatch(initialize(PROJECT_UPDATE_FORM_NAME, project));
         dispatch(dialogActions.OPEN_DIALOG({ id: PROJECT_UPDATE_FORM_NAME, data: {} }));
     };
 

diff --git a/src/views-components/form-fields/project-form-fields.tsx b/src/views-components/form-fields/project-form-fields.tsx
index 6446c763a81300850c026ed3889ed4d86872837a..5bf59c7ea56c00d5b5d539780a41688593a16f08 100644 (file)
--- a/src/views-components/form-fields/project-form-fields.tsx
+++ b/src/views-components/form-fields/project-form-fields.tsx
@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import { Field } from "redux-form";
-import { TextField } from "~/components/text-field/text-field";
+import { TextField, RichEditorTextField } from "~/components/text-field/text-field";
 import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from "~/validators/validators";
 
 export const ProjectNameField = () =>
@@ -18,6 +18,6 @@ export const ProjectNameField = () =>
 export const ProjectDescriptionField = () =>
     <Field
         name='description'
-        component={TextField}
+        component={RichEditorTextField}
         validate={PROJECT_DESCRIPTION_VALIDATION}
         label="Description - optional" />;

diff --git a/typings/global.d.ts b/typings/global.d.ts
index da8e4415d1f6c2d863eb47cb8586ab9214a5ba32..b9f1cc627770e4061f08cccbf10db29e40fefbac 100644 (file)
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -12,4 +12,5 @@ declare interface System {
 }
 declare var System: System;
 
-declare module 'react-splitter-layout';
\ No newline at end of file
+declare module 'react-splitter-layout';
+declare module 'react-rte';
\ No newline at end of file