Skip to content

Commit b563377

Browse files
AbhishekA1509AbhishekA1509
committed
feat: update GenericDescription component with new toolbar commands and improved state management
1 parent 5858229 commit b563377

4 files changed

Lines changed: 99 additions & 88 deletions

File tree

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Common/GenericDescription/GenericDescription.tsx‎

Lines changed: 17 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,10 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { useMemo, useState } from 'react'
17+
import { useEffect, useMemo, useState } from 'react'
1818
import MDEditor, { commands, MDEditorProps } from '@uiw/react-md-editor'
1919

20-
import { ReactComponent as BoldIcon } from '@Icons/ic-bold.svg'
21-
import { ReactComponent as CheckedListIcon } from '@Icons/ic-checked-list.svg'
22-
import { ReactComponent as CodeIcon } from '@Icons/ic-code.svg'
23-
import { ReactComponent as HeaderIcon } from '@Icons/ic-header.svg'
24-
import { ReactComponent as ImageIcon } from '@Icons/ic-image.svg'
25-
import { ReactComponent as ItalicIcon } from '@Icons/ic-italic.svg'
26-
import { ReactComponent as LinkIcon } from '@Icons/ic-link.svg'
27-
import { ReactComponent as OrderedListIcon } from '@Icons/ic-ordered-list.svg'
2820
import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
29-
import { ReactComponent as QuoteIcon } from '@Icons/ic-quote.svg'
30-
import { ReactComponent as StrikethroughIcon } from '@Icons/ic-strikethrough.svg'
3121
import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
3222

3323
import {
@@ -41,59 +31,12 @@ import {
4131
} from '../../Shared'
4232
import Markdown from '../Markdown/MarkDown'
4333
import { showError, Tooltip } from '..'
44-
import { DESCRIPTION_EMPTY_ERROR_MSG, DESCRIPTION_UNSAVED_CHANGES_MSG } from './constant'
34+
import { DESCRIPTION_EMPTY_ERROR_MSG, DESCRIPTION_UNSAVED_CHANGES_MSG, TOOLBAR_SECONDARY_COMMANDS } from './constant'
4535
import { GenericDescriptionProps } from './types'
4636
import { getParsedUpdatedOnDate } from './utils'
4737

4838
import './genericDescription.scss'
4939

50-
const extraCommands = [
51-
{
52-
...commands.bold,
53-
icon: <BoldIcon className="icon-dim-16 flex" />,
54-
},
55-
{
56-
...commands.italic,
57-
icon: <ItalicIcon className="icon-dim-16 flex" />,
58-
},
59-
{
60-
...commands.strikethrough,
61-
icon: <StrikethroughIcon className="icon-dim-16 flex" />,
62-
},
63-
{
64-
...commands.heading,
65-
icon: <HeaderIcon className="icon-dim-16 flex" />,
66-
},
67-
{
68-
...commands.quote,
69-
icon: <QuoteIcon className="icon-dim-16 flex" />,
70-
},
71-
{
72-
...commands.code,
73-
icon: <CodeIcon className="icon-dim-16 flex" />,
74-
},
75-
{
76-
...commands.link,
77-
icon: <LinkIcon className="icon-dim-16 flex" />,
78-
},
79-
{
80-
...commands.image,
81-
icon: <ImageIcon className="icon-dim-16 flex" />,
82-
},
83-
{
84-
...commands.orderedListCommand,
85-
icon: <OrderedListIcon className="icon-dim-16 flex" />,
86-
},
87-
{
88-
...commands.unorderedListCommand,
89-
icon: <UnorderedListIcon className="icon-dim-16 flex" />,
90-
},
91-
{
92-
...commands.checkedListCommand,
93-
icon: <CheckedListIcon className="icon-dim-16 flex" />,
94-
},
95-
]
96-
9740
const GenericDescription = ({
9841
text,
9942
updatedBy,
@@ -102,15 +45,22 @@ const GenericDescription = ({
10245
title,
10346
emptyStateConfig,
10447
}: GenericDescriptionProps) => {
48+
const parsedText = text || ''
49+
10550
const [isLoading, setIsLoading] = useState(false)
106-
const [modifiedValue, setModifiedValue] = useState(text || '')
51+
const [modifiedValue, setModifiedValue] = useState(parsedText)
10752
const [isEditView, setIsEditView] = useState(false)
10853

10954
const [editorViewState, setEditorViewState] = useState<'write' | 'preview'>('write')
11055

11156
const _date = getParsedUpdatedOnDate(updatedOn)
11257

113-
const myCommands = useMemo(
58+
useEffect(() => {
59+
setModifiedValue(parsedText)
60+
setIsEditView(false)
61+
}, [parsedText])
62+
63+
const toolbarPrimaryCommands = useMemo(
11464
() => [
11565
{
11666
...commands.codeEdit,
@@ -133,7 +83,7 @@ const GenericDescription = ({
13383
)
13484

13585
const handleCancel = () => {
136-
const isDescriptionModified = modifiedValue.trim() !== (text || '').trim()
86+
const isDescriptionModified = modifiedValue.trim() !== parsedText.trim()
13787
let isConfirmed = true
13888

13989
if (isDescriptionModified) {
@@ -142,7 +92,7 @@ const GenericDescription = ({
14292
}
14393

14494
if (isConfirmed) {
145-
setModifiedValue(text)
95+
setModifiedValue(parsedText)
14696
setIsEditView(false)
14797
}
14898
}
@@ -171,7 +121,7 @@ const GenericDescription = ({
171121
setIsEditView(true)
172122
}
173123

174-
if (!text && !isEditView) {
124+
if (!parsedText && !isEditView) {
175125
const { img, subtitle } = emptyStateConfig || {}
176126
return (
177127
<div className="flexbox w-100 bg__primary br-8 dc__border-dashed--n3">
@@ -265,15 +215,15 @@ const GenericDescription = ({
265215
</button>
266216
</div>
267217

268-
{renderMarkdown(text)}
218+
{renderMarkdown(parsedText)}
269219
</div>
270220
) : (
271221
<>
272222
<MDEditor
273223
value={modifiedValue}
274224
onChange={setModifiedValue}
275-
commands={myCommands}
276-
extraCommands={extraCommands}
225+
commands={toolbarPrimaryCommands}
226+
extraCommands={TOOLBAR_SECONDARY_COMMANDS}
277227
preview={editorViewState === 'preview' ? 'preview' : 'edit'}
278228
components={{
279229
preview: renderMarkdown,

‎src/Common/GenericDescription/constant.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/Common/GenericDescription/constant.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { commands } from '@uiw/react-md-editor'
18+
19+
import { ReactComponent as BoldIcon } from '@Icons/ic-bold.svg'
20+
import { ReactComponent as CheckedListIcon } from '@Icons/ic-checked-list.svg'
21+
import { ReactComponent as CodeIcon } from '@Icons/ic-code.svg'
22+
import { ReactComponent as HeaderIcon } from '@Icons/ic-header.svg'
23+
import { ReactComponent as ImageIcon } from '@Icons/ic-image.svg'
24+
import { ReactComponent as ItalicIcon } from '@Icons/ic-italic.svg'
25+
import { ReactComponent as LinkIcon } from '@Icons/ic-link.svg'
26+
import { ReactComponent as OrderedListIcon } from '@Icons/ic-ordered-list.svg'
27+
import { ReactComponent as QuoteIcon } from '@Icons/ic-quote.svg'
28+
import { ReactComponent as StrikethroughIcon } from '@Icons/ic-strikethrough.svg'
29+
import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
30+
31+
export const DESCRIPTION_EMPTY_ERROR_MSG = 'Readme cannot be empty. Please add some information or cancel the changes.'
32+
export const DESCRIPTION_UNSAVED_CHANGES_MSG = 'Are you sure you want to discard your changes?'
33+
34+
export const TOOLBAR_SECONDARY_COMMANDS = [
35+
{
36+
...commands.bold,
37+
icon: <BoldIcon className="icon-dim-16 flex" />,
38+
},
39+
{
40+
...commands.italic,
41+
icon: <ItalicIcon className="icon-dim-16 flex" />,
42+
},
43+
{
44+
...commands.strikethrough,
45+
icon: <StrikethroughIcon className="icon-dim-16 flex" />,
46+
},
47+
{
48+
...commands.heading,
49+
icon: <HeaderIcon className="icon-dim-16 flex" />,
50+
},
51+
{
52+
...commands.quote,
53+
icon: <QuoteIcon className="icon-dim-16 flex" />,
54+
},
55+
{
56+
...commands.code,
57+
icon: <CodeIcon className="icon-dim-16 flex" />,
58+
},
59+
{
60+
...commands.link,
61+
icon: <LinkIcon className="icon-dim-16 flex" />,
62+
},
63+
{
64+
...commands.image,
65+
icon: <ImageIcon className="icon-dim-16 flex" />,
66+
},
67+
{
68+
...commands.orderedListCommand,
69+
icon: <OrderedListIcon className="icon-dim-16 flex" />,
70+
},
71+
{
72+
...commands.unorderedListCommand,
73+
icon: <UnorderedListIcon className="icon-dim-16 flex" />,
74+
},
75+
{
76+
...commands.checkedListCommand,
77+
icon: <CheckedListIcon className="icon-dim-16 flex" />,
78+
},
79+
]

0 commit comments

Comments
 (0)