yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-11 18:46:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding markdown support for service description (#254)

Browse Source
This commit is contained in:
Sachin Chaurasiya 2021-08-20 14:41:02 +05:30 committed by GitHub
parent e9b7777855
commit be64ebff6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx
View File

@ -16,8 +16,9 @@
*/ */
import classNames from 'classnames'; import classNames from 'classnames';
import React, { FunctionComponent, useState } from 'react'; import React, { FunctionComponent, useRef, useState } from 'react';
import { Button } from '../../buttons/Button/Button'; import { Button } from '../../buttons/Button/Button';
import MarkdownWithPreview from '../../common/editor/MarkdownWithPreview';
// import { serviceType } from '../../../constants/services.const'; // import { serviceType } from '../../../constants/services.const';
export type DatabaseObj = { export type DatabaseObj = {
@ -71,6 +72,9 @@ type ErrorMsg = {
// password: boolean; // password: boolean;
driverClass: boolean; driverClass: boolean;
}; };
type EditorContentRef = {
getEditorContent: () => string;
};
const requiredField = (label: string) => ( const requiredField = (label: string) => (
<> <>
@ -166,7 +170,6 @@ export const AddServiceModal: FunctionComponent<Props> = ({
const [name, setName] = useState(data?.name || ''); const [name, setName] = useState(data?.name || '');
// const [userName, setUserName] = useState(parseUrl?.userName || ''); // const [userName, setUserName] = useState(parseUrl?.userName || '');
// const [password, setPassword] = useState(parseUrl?.password || ''); // const [password, setPassword] = useState(parseUrl?.password || '');
const [description, setDescription] = useState(data?.description || '');
// const [tags, setTags] = useState(''); // const [tags, setTags] = useState('');
const [url, setUrl] = useState(parseUrl?.connectionUrl || ''); const [url, setUrl] = useState(parseUrl?.connectionUrl || '');
// const [port, setPort] = useState(parseUrl?.port || ''); // const [port, setPort] = useState(parseUrl?.port || '');
@ -185,7 +188,7 @@ export const AddServiceModal: FunctionComponent<Props> = ({
driverClass: false, driverClass: false,
}); });
const [sameNameError, setSameNameError] = useState(false); const [sameNameError, setSameNameError] = useState(false);
const markdownRef = useRef<EditorContentRef>();
const handleChangeFrequency = ( const handleChangeFrequency = (
event: React.ChangeEvent<HTMLSelectElement> event: React.ChangeEvent<HTMLSelectElement>
) => { ) => {
@ -278,7 +281,7 @@ export const AddServiceModal: FunctionComponent<Props> = ({
const { day, hour, minute } = frequency; const { day, hour, minute } = frequency;
const date = new Date(); const date = new Date();
const databaseObj: DatabaseObj = { const databaseObj: DatabaseObj = {
description: description || undefined, description: markdownRef.current?.getEditorContent(),
ingestionSchedule: ingestion ingestionSchedule: ingestion
? { ? {
repeatFrequency: `P${day}DT${hour}H${minute}M`, 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"> <label className="tw-block tw-form-label" htmlFor="description">
Description: Description:
</label> </label>
<textarea <MarkdownWithPreview
className="tw-form-inputs tw-px-3 tw-py-1 " ref={markdownRef}
id="description" value={data?.description || ''}
name="description"
rows={4}
value={description}
onChange={(e) => setDescription(e.target.value)}
/> />
</div> </div>
{/* <div className="tw-mt-4"> {/* <div className="tw-mt-4">

8
catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx
View File

@ -27,6 +27,7 @@ import {
postService, postService,
updateService, updateService,
} from '../../axiosAPIs/serviceAPI'; } from '../../axiosAPIs/serviceAPI';
import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
import PageContainer from '../../components/containers/PageContainer'; import PageContainer from '../../components/containers/PageContainer';
import Loader from '../../components/Loader/Loader'; import Loader from '../../components/Loader/Loader';
import { import {
@ -38,7 +39,6 @@ import {
import { getServiceDetailsPath } from '../../constants/constants'; import { getServiceDetailsPath } from '../../constants/constants';
import { NOSERVICE, PLUS } from '../../constants/services.const'; import { NOSERVICE, PLUS } from '../../constants/services.const';
import { serviceTypeLogo } from '../../utils/ServiceUtils'; import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { stringToHTML } from '../../utils/StringsUtils';
import SVGIcons from '../../utils/SvgUtils'; import SVGIcons from '../../utils/SvgUtils';
export type ApiData = { export type ApiData = {
@ -203,7 +203,11 @@ const ServicesPage = () => {
</button> </button>
</Link> </Link>
<div className="tw-text-grey-body tw-pb-1"> <div className="tw-text-grey-body tw-pb-1">
{stringToHTML(service.description) || ( {service.description ? (
<RichTextEditorPreviewer
markdown={service.description}
/>
) : (
<span className="tw-no-description"> <span className="tw-no-description">
No description added No description added
</span> </span>