Revert "Feature/markdown team desc (#457)"

package.json

@@ -37,7 +37,7 @@
         "codemirror": "^6.0.1",
         "color-hash": "1.0.3",
         "date-fns": "2.9.0",
-        "dompurify":"^3.0.6",
+        "dompurify": "2.2.6",
         "file-saver": "2.0.2",
         "jest": "^29.7.0",
         "lodash": "^4.17.21",
@@ -50,11 +50,11 @@
         "react-dom": "^16.14.0",
         "react-foco": "1.2.0",
         "react-hot-loader": "4.13.0",
-        "react-markdown":"^8.0.7",
         "react-router": "5.1.2",
         "react-router-dom": "5.1.2",
         "react-virtualized-auto-sizer": "^1.0.20",
         "reflect-metadata": "^0.1.13",
+        "remarkable": "^2.0.1",
         "start-server-and-test": "1.14.0"
     },
     "devDependencies": {
@@ -76,9 +76,9 @@
         "@storybook/builder-webpack5": "6.4.22",
         "@storybook/manager-webpack5": "6.4.22",
         "@storybook/react": "6.4.22",
-        "@types/dompurify":"^3.0.4",
         "@types/classnames": "2.2.10",
         "@types/color-hash": "^1.0.0",
+        "@types/dompurify": "2.2.1",
         "@types/file-saver": "^2.0.1",
         "@types/jest": "26.0.9",
         "@types/jest-environment-puppeteer": "4.3.2",
@@ -89,6 +89,7 @@
         "@types/react-dom": "16.9.8",
         "@types/react-router-dom": "5.1.5",
         "@types/react-window": "^1.8.5",
+        "@types/remarkable": "^2.0.3",
         "@types/storybook-react-router": "1.0.4",
         "@typescript-eslint/eslint-plugin": "^6.9.0",
         "@typescript-eslint/parser": "^6.9.0",

src/Components/ContactEditForm/ContactEditForm.tsx

@@ -2,16 +2,18 @@ import * as React from "react";
 import { Input } from "@skbkontur/react-ui/components/Input";
 import { Select } from "@skbkontur/react-ui/components/Select";
 import { ValidationWrapperV1, tooltip, ValidationInfo } from "@skbkontur/react-ui-validations";
+import { Remarkable } from "remarkable";
 import { ContactConfig } from "../../Domain/Config";
 import { Contact } from "../../Domain/Contact";
 import ContactTypeIcon from "../ContactTypeIcon/ContactTypeIcon";
-import ReactMarkdown from "react-markdown";
 import classNames from "classnames/bind";
 
 import styles from "./ContactEditForm.less";
 
 const cn = classNames.bind(styles);
 
+const md = new Remarkable({ breaks: true });
+
 type Props = {
     contactDescriptions: Array<ContactConfig>;
     contactInfo: Partial<Contact> | null;
@@ -69,9 +71,13 @@ export default class ContactEditForm extends React.Component<Props> {
                     </ValidationWrapperV1>
                 </div>
                 {currentContactConfig?.help && (
-                    <ReactMarkdown className={cn("row", "comment")}>
-                        {currentContactConfig.help}
-                    </ReactMarkdown>
+                    /* ToDo избавиться от dangerouslySetInnerHTML */
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: md.render(currentContactConfig.help),
+                        }}
+                        className={cn("row", "comment")}
+                    />
                 )}
             </div>
         );

src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.less

@@ -1,5 +1,8 @@
 @import '../Styles/variables.less';
 
+.root {
+}
+
 .description {
     overflow: hidden;
     word-break: break-word;

src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { addMinutes, format, getUnixTime, startOfDay } from "date-fns";
+import { Remarkable } from "remarkable";
 import { Sticky } from "@skbkontur/react-ui/components/Sticky";
 import { Modal } from "@skbkontur/react-ui/components/Modal";
 import FlagSolidIcon from "@skbkontur/react-icons/FlagSolid";
@@ -18,14 +19,16 @@ import {
 import getStatusColor, { unknownColor } from "../Styles/StatusColor";
 import { getUTCDate, humanizeDuration } from "../../../helpers/DateUtil";
 import MobileHeader from "../MobileHeader/MobileHeader";
-import ReactMarkdown from "react-markdown";
+import { sanitize } from "dompurify";
 import { purifyConfig } from "../../../Domain/DOMPurify";
 import classNames from "classnames/bind";
 
 import styles from "./MobileTriggerInfo.less";
 
 const cn = classNames.bind(styles);
 
+const md = new Remarkable({ breaks: true });
+
 type Props = {
     data?: Trigger | null;
     triggerState?: TriggerState | null;
@@ -100,12 +103,12 @@ export default class MobileTriggerInfo extends React.Component<Props, State> {
                         {trigger != null && (
                             <div className={cn("info")}>
                                 {trigger.desc && (
-                                    <ReactMarkdown
+                                    <div
                                         className={cn("plain-row", "description")}
-                                        disallowedElements={purifyConfig}
-                                    >
-                                        {trigger.desc}
-                                    </ReactMarkdown>
+                                        dangerouslySetInnerHTML={{
+                                            __html: sanitize(md.render(trigger.desc), purifyConfig),
+                                        }}
+                                    />
                                 )}
                                 {sched != null && (
                                     <div className={cn("form-row")}>

src/Components/Teams/TeamDescription/TeamDescription.tsx → src/Components/Teams/TeamDescription.tsx

@@ -2,15 +2,9 @@ import React, { ReactElement, useState } from "react";
 import { Button } from "@skbkontur/react-ui";
 import EditIcon from "@skbkontur/react-icons/Edit";
 import AddIcon from "@skbkontur/react-icons/Add";
-import { Team } from "../../../Domain/Team";
-import { TeamEditor } from "../TeamEditor/TeamEditor";
-import ReactMarkdown from "react-markdown";
-import { purifyConfig } from "../../../Domain/DOMPurify";
-import classNames from "classnames/bind";
-
-import styles from "./TeamDescription.less";
-
-const cn = classNames.bind(styles);
+import { Team } from "../../Domain/Team";
+import { TeamEditor } from "./TeamEditor";
+import { Hovered, HoveredShow } from "./Hovered/Hovered";
 
 interface TeamDescriptionProps {
     team: Team;
@@ -26,21 +20,17 @@ export function TeamDescription(props: TeamDescriptionProps): ReactElement {
     };
 
     const description = props.team.description ? (
-        <>
-            <div className={cn("wysiwyg", "descriptionContainer")}>
-                <ReactMarkdown disallowedElements={purifyConfig}>
-                    {props.team.description}
-                </ReactMarkdown>
-            </div>
-            <Button
-                className={cn("editDescBtn")}
-                icon={<EditIcon />}
-                use={"link"}
-                onClick={() => setEdit(true)}
-            >
-                Edit Description
-            </Button>
-        </>
+        <Hovered>
+            {props.team.description}&nbsp;
+            <HoveredShow>
+                <Button
+                    icon={<EditIcon />}
+                    use={"link"}
+                    onClick={() => setEdit(true)}
+                    width="20px"
+                />
+            </HoveredShow>
+        </Hovered>
     ) : (
         <Button icon={<AddIcon />} use={"link"} onClick={() => setEdit(true)}>
             Add description

src/Components/Teams/TeamEditor.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { Team } from "../../Domain/Team";
+import {
+    ValidationContainer,
+    ValidationInfo,
+    ValidationWrapper,
+} from "@skbkontur/react-ui-validations";
+import { Button, Gapped, Input, Modal, Textarea } from "@skbkontur/react-ui";
+import { Grid } from "../Grid/Grid";
+import { isEmptyString } from "../../helpers/isEmptyString";
+import { GridCell } from "../Grid/GridCell";
+
+interface TeamEditorProps {
+    team?: Team;
+    onAddTeam?: (team: Partial<Team>) => void;
+    onSaveTeam?: (team: Team) => void;
+    onClose: () => void;
+}
+
+type TeamEditorState = {
+    name: string;
+    description: string;
+};
+
+export class TeamEditor extends React.Component<TeamEditorProps, TeamEditorState> {
+    private validation = React.createRef<ValidationContainer>();
+    public state: TeamEditorState = {
+        name: this.props.team?.name ?? "",
+        description: this.props.team?.description ?? "",
+    };
+
+    public render(): React.ReactElement {
+        return (
+            <ValidationContainer ref={this.validation}>
+                <Modal width={600} onClose={this.props.onClose}>
+                    <Modal.Header>
+                        {this.props.team ? `Edit team ${this.props.team.name} ` : "Add Team"}
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Grid columns="120px 400px" gap="16px">
+                            {this.props.team ? null : (
+                                <>
+                                    Name:
+                                    <ValidationWrapper validationInfo={this.validateName()}>
+                                        <Input
+                                            value={this.state.name}
+                                            onValueChange={this.handleNameChange}
+                                            width={"100%"}
+                                            disabled={Boolean(this.props.team)}
+                                        />
+                                    </ValidationWrapper>
+                                </>
+                            )}
+                            <GridCell align={"flex-start"} margin="8px 0 0">
+                                Description:
+                            </GridCell>
+                            <Textarea
+                                value={this.state.description}
+                                onValueChange={this.handleDescriptionChange}
+                                width="100%"
+                                autoResize
+                            />
+                        </Grid>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <Gapped gap={8}>
+                            {this.props.team ? (
+                                <Button use={"primary"} onClick={this.handleSaveTeam} width={100}>
+                                    Save
+                                </Button>
+                            ) : (
+                                <Button use={"primary"} onClick={this.handleAddTeam} width={100}>
+                                    Add
+                                </Button>
+                            )}
+                            <Button onClick={this.props.onClose}>Cancel</Button>
+                        </Gapped>
+                    </Modal.Footer>
+                </Modal>
+            </ValidationContainer>
+        );
+    }
+
+    private handleNameChange = (name: string) => {
+        this.setState({ name: name });
+    };
+    private handleDescriptionChange = (description: string) => {
+        this.setState({ description: description });
+    };
+
+    private handleAddTeam = async () => {
+        const isValid = await this.validation.current?.validate();
+        if (!isValid) {
+            return;
+        }
+
+        this.props.onAddTeam?.({
+            name: this.state.name,
+            description: this.state.description,
+        });
+    };
+
+    private handleSaveTeam = async () => {
+        const isValid = await this.validation.current?.validate();
+        if (!isValid || !this.props.team) {
+            return;
+        }
+
+        this.props.onSaveTeam?.({
+            ...this.props.team,
+            description: this.state.description,
+        });
+    };
+
+    private validateName = (): ValidationInfo | undefined => {
+        return isEmptyString(this.state.name)
+            ? {
+                  type: "submit",
+                  message: "Can't be empty",
+              }
+            : undefined;
+    };
+}