From aa1d24b97feff8fcd6d9e8a1c070c832a762404f Mon Sep 17 00:00:00 2001 From: Vladimir Filonov Date: Mon, 14 Oct 2024 11:46:06 +0400 Subject: [PATCH 1/3] feat: WYSIWYG and formatting support for incidents summary (#2191) --- keep-ui/app/incidents/[id]/incident-info.tsx | 15 +- .../incidents/create-or-update-incident.tsx | 37 +++- keep-ui/app/incidents/incidents-table.tsx | 12 +- keep-ui/package-lock.json | 194 ++++++++++++++++++ keep-ui/package.json | 1 + keep-ui/utils/hooks/useIncidents.ts | 2 - 6 files changed, 254 insertions(+), 7 deletions(-) diff --git a/keep-ui/app/incidents/[id]/incident-info.tsx b/keep-ui/app/incidents/[id]/incident-info.tsx index 2558b0057d..3649650106 100644 --- a/keep-ui/app/incidents/[id]/incident-info.tsx +++ b/keep-ui/app/incidents/[id]/incident-info.tsx @@ -20,6 +20,9 @@ import { IoChevronDown } from "react-icons/io5"; import IncidentChangeStatusModal from "@/app/incidents/incident-change-status-modal"; import ChangeSameIncidentInThePast from "@/app/incidents/incident-change-same-in-the-past"; import {STATUS_ICONS} from "@/app/incidents/statuses"; +import remarkRehype from "remark-rehype"; +import rehypeRaw from "rehype-raw"; +import Markdown from "react-markdown"; interface Props { incident: IncidentDto; @@ -45,6 +48,14 @@ function Summary({ collapsable?: boolean; className?: string; }) { + + const formatedSummary = + {summary} + + if (collapsable) { return ( @@ -60,7 +71,7 @@ function Summary({ - {summary} + {formatedSummary} ); @@ -70,7 +81,7 @@ function Summary({

{title}

{/*TODO: suggest generate summary if it's empty*/} - {summary ?

{summary}

:

No summary yet

} + {summary ?

{formatedSummary}

:

No summary yet

}
); } diff --git a/keep-ui/app/incidents/create-or-update-incident.tsx b/keep-ui/app/incidents/create-or-update-incident.tsx index 1492227061..2ae75422b0 100644 --- a/keep-ui/app/incidents/create-or-update-incident.tsx +++ b/keep-ui/app/incidents/create-or-update-incident.tsx @@ -18,6 +18,9 @@ import { IncidentDto } from "./models"; import { useIncidents } from "utils/hooks/useIncidents"; import { Session } from "next-auth"; import { useUsers } from "utils/hooks/useUsers"; +const ReactQuill = + typeof window === "object" ? require("react-quill") : () => false; +import "react-quill/dist/quill.snow.css"; interface Props { incidentToEdit: IncidentDto | null; @@ -157,6 +160,32 @@ export default function CreateOrUpdateIncident({ return !!incidentName; }; + const formats = [ + "header", + "bold", + "italic", + "underline", + "list", + "bullet", + "link", + "align", + "blockquote", + "code-block", + "color", + ]; + + const modules = { + toolbar: [ + [{ header: "1" }, { header: "2" }], + [{ list: "ordered" }, { list: "bullet" }], + ["bold", "italic", "underline"], + ["link"], + [{ align: [] }], + ["blockquote", "code-block"], // Add quote and code block options to the toolbar + [{ color: [] }], // Add color option to the toolbar + ], + }; + return (
Incident Metadata @@ -173,10 +202,14 @@ export default function CreateOrUpdateIncident({
Summary -