Skip to content

Commit

Permalink
Revert "Feature/markdown team desc (#457)" (#459)
Browse files Browse the repository at this point in the history
This reverts commit 32b9cf7.
  • Loading branch information
EduardZaydler authored Nov 13, 2023
1 parent 32b9cf7 commit a1ec40b
Show file tree
Hide file tree
Showing 28 changed files with 227 additions and 737 deletions.
Binary file modified .creevey/images/Mobile/TriggerInfo/Default/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfo/Not everyday/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfo/With throttling/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfo/WithError/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfo/WithLogMessageError/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfo/WithLongDescription/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfoPage/Default/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfoPage/Not everyday/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfoPage/With throttling/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .creevey/images/Mobile/TriggerInfoPage/WithError/chrome.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand All @@ -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",
Expand All @@ -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",
Expand Down
14 changes: 10 additions & 4 deletions src/Components/ContactEditForm/ContactEditForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
@import '../Styles/variables.less';

.root {
}

.description {
overflow: hidden;
word-break: break-word;
Expand Down
15 changes: 9 additions & 6 deletions src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -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")}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down
7 changes: 0 additions & 7 deletions src/Components/Teams/TeamDescription/TeamDescription.less

This file was deleted.

123 changes: 123 additions & 0 deletions src/Components/Teams/TeamEditor.tsx
Original file line number Diff line number Diff line change
@@ -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;
};
}
4 changes: 0 additions & 4 deletions src/Components/Teams/TeamEditor/TeamEditor.less

This file was deleted.

Loading

0 comments on commit a1ec40b

Please sign in to comment.