From be64ebff6ce81ffd9e075cea61a670c76ea31464 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 20 Aug 2021 14:41:02 +0530
Subject: [PATCH] adding markdown support for service description (#254)

---
 .../AddServiceModal/AddServiceModal.tsx       | 21 +++++++++----------
 .../resources/ui/src/pages/services/index.tsx |  8 +++++--
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx
index c49f2208fe6..1ff050aa323 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx
@@ -16,8 +16,9 @@
 */
 
 import classNames from 'classnames';
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useRef, useState } from 'react';
 import { Button } from '../../buttons/Button/Button';
+import MarkdownWithPreview from '../../common/editor/MarkdownWithPreview';
 // import { serviceType } from '../../../constants/services.const';
 
 export type DatabaseObj = {
@@ -71,6 +72,9 @@ type ErrorMsg = {
   // password: boolean;
   driverClass: boolean;
 };
+type EditorContentRef = {
+  getEditorContent: () => string;
+};
 
 const requiredField = (label: string) => (
   <>
@@ -166,7 +170,6 @@ export const AddServiceModal: FunctionComponent<Props> = ({
   const [name, setName] = useState(data?.name || '');
   // const [userName, setUserName] = useState(parseUrl?.userName || '');
   // const [password, setPassword] = useState(parseUrl?.password || '');
-  const [description, setDescription] = useState(data?.description || '');
   // const [tags, setTags] = useState('');
   const [url, setUrl] = useState(parseUrl?.connectionUrl || '');
   // const [port, setPort] = useState(parseUrl?.port || '');
@@ -185,7 +188,7 @@ export const AddServiceModal: FunctionComponent<Props> = ({
     driverClass: false,
   });
   const [sameNameError, setSameNameError] = useState(false);
-
+  const markdownRef = useRef<EditorContentRef>();
   const handleChangeFrequency = (
     event: React.ChangeEvent<HTMLSelectElement>
   ) => {
@@ -278,7 +281,7 @@ export const AddServiceModal: FunctionComponent<Props> = ({
       const { day, hour, minute } = frequency;
       const date = new Date();
       const databaseObj: DatabaseObj = {
-        description: description || undefined,
+        description: markdownRef.current?.getEditorContent(),
         ingestionSchedule: ingestion
           ? {
               repeatFrequency: `P${day}DT${hour}H${minute}M`,
@@ -478,13 +481,9 @@ export const AddServiceModal: FunctionComponent<Props> = ({
               <label className="tw-block tw-form-label" htmlFor="description">
                 Description:
               </label>
-              <textarea
-                className="tw-form-inputs tw-px-3 tw-py-1 "
-                id="description"
-                name="description"
-                rows={4}
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
+              <MarkdownWithPreview
+                ref={markdownRef}
+                value={data?.description || ''}
               />
             </div>
             {/* <div className="tw-mt-4">
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx
index 70539233595..ff519766642 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx
@@ -27,6 +27,7 @@ import {
   postService,
   updateService,
 } from '../../axiosAPIs/serviceAPI';
+import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainer from '../../components/containers/PageContainer';
 import Loader from '../../components/Loader/Loader';
 import {
@@ -38,7 +39,6 @@ import {
 import { getServiceDetailsPath } from '../../constants/constants';
 import { NOSERVICE, PLUS } from '../../constants/services.const';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
-import { stringToHTML } from '../../utils/StringsUtils';
 import SVGIcons from '../../utils/SvgUtils';
 
 export type ApiData = {
@@ -203,7 +203,11 @@ const ServicesPage = () => {
                         </button>
                       </Link>
                       <div className="tw-text-grey-body tw-pb-1">
-                        {stringToHTML(service.description) || (
+                        {service.description ? (
+                          <RichTextEditorPreviewer
+                            markdown={service.description}
+                          />
+                        ) : (
                           <span className="tw-no-description">
                             No description added
                           </span>