From 4c8c356e092c0ed425764ebd8dfbfdad103f8cc7 Mon Sep 17 00:00:00 2001 From: Tara Epp <102187683+taraepp@users.noreply.github.com> Date: Fri, 25 Oct 2024 20:23:27 +0000 Subject: [PATCH 1/5] remove align, video, from rich text toolbar. Style blockquote. Add cancel editing with confirmation. Change colour selection options --- .../components/forms/RenderRichTextEditor.tsx | 18 +++++++++++++++--- .../common/src/components/help/HelpGuide.tsx | 19 +++++++++++++++---- .../src/styles/components/HelpGuide.scss | 13 ++++++++++++- .../src/styles/components/HelpGuide.scss | 16 +++++++++++++++- 4 files changed, 57 insertions(+), 9 deletions(-) diff --git a/services/common/src/components/forms/RenderRichTextEditor.tsx b/services/common/src/components/forms/RenderRichTextEditor.tsx index 24e11ef82c..f7c659c362 100644 --- a/services/common/src/components/forms/RenderRichTextEditor.tsx +++ b/services/common/src/components/forms/RenderRichTextEditor.tsx @@ -2,10 +2,13 @@ import React, { FC, useContext, useMemo } from "react"; import { Form } from "antd"; import { BaseInputProps, BaseViewInput, getFormItemLabel } from "./BaseInput"; import { FormContext } from "./FormWrapper"; +import { useSelector } from "react-redux"; import ReactQuill from "react-quill"; import "react-quill/dist/quill.snow.css"; import parse from "html-react-parser"; import DOMPurify from "dompurify"; +import { getSystemFlag } from "@mds/common/redux/selectors/authenticationSelectors"; +import { SystemFlagEnum } from "@mds/common/constants"; const RenderRichTextEditor: FC = ({ label, @@ -20,20 +23,29 @@ const RenderRichTextEditor: FC = ({ placeholder, }) => { const { isEditMode } = useContext(FormContext); + const system = useSelector(getSystemFlag); + + const msTextColors = ["#003366", "#313132", "#ffffff", "#606060", "#BBBBBB", "#1A5A96"]; + const msBgColors = ["transparent", "#D9EAF7", "#EAF3EC", "#FEF9E8", "#FBEAEA", "#2E8540", "#FCBA19", "#D8292F"]; + + const coreTextColors = ["#5E46A1", "#313132", "#ffffff", "#6B6363", "#BBBBBB", "#3D6DE7"]; + const coreBgColors = ["transparent", "#F4F0F0", "#EAF3EC", "#FEF9E8", "#FBEAEA", "#2E8540", "#FCBA19", "#D8292F"]; const handleAddImage = (data) => { // just a click handler for the image button, // everything else will have to be implemented console.log("image data", data); }; - const colorOptions = ["#003366", "white", "#fcba19", "#d8292f", "#2e8540", "#313132", "black"]; + + const textColorOptions = system === SystemFlagEnum.core ? coreTextColors : msTextColors; + const bgColorOptions = system === SystemFlagEnum.core ? coreBgColors : msBgColors; const toolbarOptions = [ [{ header: [1, 2, 3, 4, 5, 6, false] }], ["bold", "italic", "underline", "strike"], ["blockquote"], [{ list: "ordered" }, { list: "bullet" }], - [{ color: colorOptions }, { background: colorOptions }, "font", "align"], - ["link", "video"], + ["link"], + [{ color: textColorOptions }, { background: bgColorOptions }, "font"], ]; const modules = useMemo( diff --git a/services/common/src/components/help/HelpGuide.tsx b/services/common/src/components/help/HelpGuide.tsx index 78f3df1c8d..f2f0d617c3 100644 --- a/services/common/src/components/help/HelpGuide.tsx +++ b/services/common/src/components/help/HelpGuide.tsx @@ -2,7 +2,7 @@ import { Alert, Button, Col, Drawer, Row, Typography } from "antd"; import React, { FC, useEffect, useState } from "react"; import { Route, Switch, useParams } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; -import { submit } from "redux-form"; +import { isDirty, submit } from "redux-form"; import { getSystemFlag, isAuthenticated, @@ -29,6 +29,7 @@ import { Feature } from "@mds/common/utils"; import Loading from "../common/Loading"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faQuestionCircle } from "@fortawesome/pro-regular-svg-icons"; +import { cancelConfirmWrapper } from "../forms/RenderCancelButton"; interface HelpGuideProps { helpKey: string; @@ -52,11 +53,15 @@ export const HelpGuideContent: FC = ({ helpKey }) => { const [isLoaded, setIsLoaded] = useState(hasHelpGuide); const unformattedTitle = pageTab ?? helpKey; const title = formatSnakeCaseToSentenceCase(unformattedTitle); + const isFormDirty = useSelector(isDirty(FORM.EDIT_HELP_GUIDE)); + + const cancelEdit = () => { + cancelConfirmWrapper(() => setIsEditMode(false), isFormDirty); + } const showDrawer = () => setOpen(true); const hideDrawer = () => { - setOpen(false); - setIsEditMode(false); + cancelConfirmWrapper(() => { setIsEditMode(false); setOpen(false) }, isFormDirty); }; const handleFetchData = () => { @@ -105,6 +110,11 @@ export const HelpGuideContent: FC = ({ helpKey }) => { {hasHelpGuide ? "Edit Help Guide" : "Create Help Guide"} ); + const cancelEditButton = ( + + ); const submitButton = ( + + + @@ -557,7 +590,7 @@ exports[`HelpGuide renders CORE properly 1`] = ` aria-controls="ql-picker-options-1" aria-expanded="false" class="ql-picker-label" - data-value="#003366" + data-value="#5E46A1" role="button" tabindex="0" > @@ -596,51 +629,44 @@ exports[`HelpGuide renders CORE properly 1`] = ` > - @@ -650,25 +676,22 @@ exports[`HelpGuide renders CORE properly 1`] = ` style="display: none;" >