From eb909803c6fe3c99894ac402a88ea7cbc114f66b Mon Sep 17 00:00:00 2001 From: Janicki Artur Date: Wed, 26 Sep 2018 13:30:26 +0200 Subject: [PATCH] improve panel details - show modal description using rich text editor Feature #14120 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- .../rich-text-editor-link.tsx | 35 ++++++ .../rich-text-editor-dialog-actions.tsx | 12 ++ .../details-panel/project-details.tsx | 8 +- .../rich-text-editor-dialog.tsx | 41 +++++++ src/views/workbench/workbench.tsx | 2 + yarn.lock | 105 ++++++++++++++++-- 6 files changed, 190 insertions(+), 13 deletions(-) create mode 100644 src/components/rich-text-editor-link/rich-text-editor-link.tsx create mode 100644 src/store/rich-text-editor-dialog/rich-text-editor-dialog-actions.tsx create mode 100644 src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx 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 new file mode 100644 index 0000000000..ca942d7832 --- /dev/null +++ b/src/components/rich-text-editor-link/rich-text-editor-link.tsx @@ -0,0 +1,35 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { DispatchProp } 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'; + +type CssRules = "root"; + +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + root: { + color: theme.palette.primary.main, + cursor: 'pointer' + } +}); + +interface RichTextEditorLinkData { + title: string; + label: string; + content: string; +} + +type RichTextEditorLinkProps = RichTextEditorLinkData & WithStyles; + +export const RichTextEditorLink = withStyles(styles)( + ({ classes, title, content, label }: RichTextEditorLinkProps) => + dispatch(openRichTextEditorDialog(title, content))} + > + {label} + +); \ 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 new file mode 100644 index 0000000000..39f3d840a9 --- /dev/null +++ b/src/store/rich-text-editor-dialog/rich-text-editor-dialog-actions.tsx @@ -0,0 +1,12 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch } from "redux"; +import { dialogActions } from "~/store/dialog/dialog-actions"; + +export const RICH_TEXT_EDITOR_DIALOG_NAME = 'richTextEditorDialogName'; +export const openRichTextEditorDialog = (title: string, text: string) => + (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 1e65ec834b..0e8835affd 100644 --- a/src/views-components/details-panel/project-details.tsx +++ b/src/views-components/details-panel/project-details.tsx @@ -10,6 +10,7 @@ import { ResourceKind } from '~/models/resource'; import { resourceLabel } from '~/common/labels'; import { DetailsData } from "./details-data"; import { DetailsAttribute } from "~/components/details-attribute/details-attribute"; +import { RichTextEditorLink } from '~/components/rich-text-editor-link/rich-text-editor-link'; export class ProjectDetails extends DetailsData { @@ -27,7 +28,12 @@ export class ProjectDetails extends DetailsData { {/* Missing attr */} - + + + ; } } 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 new file mode 100644 index 0000000000..4ac572f767 --- /dev/null +++ b/src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx @@ -0,0 +1,41 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from "react"; +import { Dialog, DialogTitle, DialogContent, DialogActions, Button, DialogContentText } 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 RichTextEditor from 'react-rte'; + +export interface RichTextEditorDialogDataProps { + title: string; + text: string; +} + +export const RichTextEditorDialog = withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)( + (props: WithDialogProps) => + + {props.data.title} + + + { return; }} /> + + + + + + +); \ No newline at end of file diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 78918be0c6..b0d14f0907 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -11,6 +11,7 @@ import { ArvadosTheme } from '~/common/custom-theme'; import { ContextMenu } from "~/views-components/context-menu/context-menu"; import { FavoritePanel } from "../favorite-panel/favorite-panel"; import { CurrentTokenDialog } from '~/views-components/current-token-dialog/current-token-dialog'; +import { RichTextEditorDialog } from '~/views-components/rich-text-editor-dialog/rich-text-editor-dialog'; import { Snackbar } from '~/views-components/snackbar/snackbar'; import { CollectionPanel } from '../collection-panel/collection-panel'; import { RenameFileDialog } from '~/views-components/rename-file-dialog/rename-file-dialog'; @@ -117,6 +118,7 @@ export const WorkbenchPanel = + diff --git a/yarn.lock b/yarn.lock index 30e94bdefb..c2d357c1b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1119,7 +1119,7 @@ babel-register@^6.26.0: mkdirp "^0.5.1" source-map-support "^0.4.15" -babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.9.2: +babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.9.2: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" dependencies: @@ -1608,6 +1608,10 @@ clap@^1.0.9: dependencies: chalk "^1.1.3" +class-autobind@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/class-autobind/-/class-autobind-0.1.4.tgz#34516c49167cf8d3f639ddc186bcfa2268afff34" + class-utils@^0.3.5: version "0.3.6" resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463" @@ -2369,6 +2373,50 @@ dotenv@4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d" +draft-js-export-html@>=0.6.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/draft-js-export-html/-/draft-js-export-html-1.2.0.tgz#1cbe2b78e1fed74fc29c7cdcbfd7540468eca209" + dependencies: + draft-js-utils "^1.2.0" + +draft-js-export-markdown@>=0.3.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/draft-js-export-markdown/-/draft-js-export-markdown-1.2.0.tgz#c423d67389e1c70ddd13e956afe82fd1b72feea5" + dependencies: + draft-js-utils "^1.2.0" + +draft-js-import-element@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/draft-js-import-element/-/draft-js-import-element-1.2.1.tgz#9a6a56d74690d48d35d8d089564e6d710b4926eb" + dependencies: + draft-js-utils "^1.2.0" + synthetic-dom "^1.2.0" + +draft-js-import-html@>=0.4.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/draft-js-import-html/-/draft-js-import-html-1.2.1.tgz#88adb8ce5dbe1a5a777663b1893cee6a35239eaa" + dependencies: + draft-js-import-element "^1.2.1" + +draft-js-import-markdown@>=0.3.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/draft-js-import-markdown/-/draft-js-import-markdown-1.2.1.tgz#ec18eb15008bab13d9878d65db50e181dd64a5ce" + dependencies: + draft-js-import-element "^1.2.1" + synthetic-dom "^1.2.0" + +draft-js-utils@>=0.2.0, draft-js-utils@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/draft-js-utils/-/draft-js-utils-1.2.0.tgz#f5cb23eb167325ffed3d79882fdc317721d2fd12" + +draft-js@>=0.10.0: + version "0.10.5" + resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742" + dependencies: + fbjs "^0.8.15" + immutable "~3.7.4" + object-assign "^4.1.0" + duplexer3@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2" @@ -2858,7 +2906,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.1, fbjs@^0.8.16: +fbjs@^0.8.1, fbjs@^0.8.15, fbjs@^0.8.16: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -3545,6 +3593,14 @@ ignore-walk@^3.0.1: dependencies: minimatch "^3.0.4" +immutable@^3.8.1: + version "3.8.2" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3" + +immutable@~3.7.4: + version "3.7.6" + resolved "http://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b" + import-lazy@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43" @@ -6119,14 +6175,14 @@ react-dev-utils@^5.0.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@16.4.2: - version "16.4.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4" +react-dom@16.5.2: + version "16.5.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7" dependencies: - fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.0" + prop-types "^15.6.2" + schedule "^0.5.0" react-dropzone@5.0.1: version "5.0.1" @@ -6216,6 +6272,21 @@ react-router@4.3.1, react-router@^4.2.0, react-router@^4.3.1: prop-types "^15.6.1" warning "^4.0.1" +react-rte@0.16.1: + version "0.16.1" + resolved "https://registry.yarnpkg.com/react-rte/-/react-rte-0.16.1.tgz#e345664c87e992d15ec053b406f51ffac6e86622" + dependencies: + babel-runtime "^6.23.0" + class-autobind "^0.1.4" + classnames "^2.2.5" + draft-js ">=0.10.0" + draft-js-export-html ">=0.6.0" + draft-js-export-markdown ">=0.3.0" + draft-js-import-html ">=0.4.0" + draft-js-import-markdown ">=0.3.0" + draft-js-utils ">=0.2.0" + immutable "^3.8.1" + react-scripts-ts@2.17.0: version "2.17.0" resolved "https://registry.yarnpkg.com/react-scripts-ts/-/react-scripts-ts-2.17.0.tgz#398bae19a30c9b39b3dfe0720ebb40c60c2f6574" @@ -6282,14 +6353,14 @@ react-transition-group@2.4.0, react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react@16.4.2: - version "16.4.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f" +react@16.5.2: + version "16.5.2" + resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42" dependencies: - fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.0" + prop-types "^15.6.2" + schedule "^0.5.0" read-pkg-up@^1.0.1: version "1.0.1" @@ -6737,6 +6808,12 @@ sax@^1.2.4, sax@~1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" +schedule@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/schedule/-/schedule-0.5.0.tgz#c128fffa0b402488b08b55ae74bb9df55cc29cc8" + dependencies: + object-assign "^4.1.1" + schema-utils@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf" @@ -7281,6 +7358,10 @@ symbol-tree@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6" +synthetic-dom@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/synthetic-dom/-/synthetic-dom-1.2.0.tgz#f3589aafe2b5e299f337bb32973a9be42dd5625e" + tapable@^0.2.7: version "0.2.8" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22" -- 2.30.2