From 77ffecad4ee6c4bf76be1d82782cc165ca76cff7 Mon Sep 17 00:00:00 2001 From: Ilya Hancharyk Date: Mon, 18 Dec 2023 17:39:00 +0300 Subject: [PATCH] Finalize defect comment extension --- .../markdownEditor/markdownEditor.jsx | 14 ----- .../modals/loaderBlock/loaderBlock.jsx | 2 +- .../makeDecisionTabs/makeDecisionTabs.jsx | 2 +- .../ai-inline.svg | 3 + .../defectCommentAddon.jsx | 62 +++++++++++++++++++ .../defectCommentAddon.scss | 48 ++++++++++++++ .../makeDecisionDefectCommentAddon/index.js | 1 + .../selectDefectManually.jsx | 49 +++++---------- .../selectDefectManually.scss | 59 ------------------ 9 files changed, 130 insertions(+), 110 deletions(-) create mode 100644 app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/ai-inline.svg create mode 100644 app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.jsx create mode 100644 app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.scss create mode 100644 app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/index.js diff --git a/app/src/components/main/markdown/markdownEditor/markdownEditor.jsx b/app/src/components/main/markdown/markdownEditor/markdownEditor.jsx index cfe4d0eacf..231fd8b807 100644 --- a/app/src/components/main/markdown/markdownEditor/markdownEditor.jsx +++ b/app/src/components/main/markdown/markdownEditor/markdownEditor.jsx @@ -110,14 +110,6 @@ export class MarkdownEditor extends React.Component { }), provideErrorHint: PropTypes.bool, controlled: PropTypes.bool, - // toolbarItems: PropTypes.arrayOf( - // PropTypes.shape({ - // name: PropTypes.string, - // action: PropTypes.func, - // className: PropTypes.string, - // title: PropTypes.string, - // }), - // ), }; static defaultProps = { value: '', @@ -132,7 +124,6 @@ export class MarkdownEditor extends React.Component { hint: { hintText: () => '', hintCondition: () => true }, provideErrorHint: false, controlled: false, - // toolbarItems: [], }; state = { @@ -154,7 +145,6 @@ export class MarkdownEditor extends React.Component { mode, manipulateEditorOutside, eventsInfo, - // toolbarItems, } = this.props; this.holder.value = value; @@ -260,10 +250,6 @@ export class MarkdownEditor extends React.Component { }, ]; - // if (toolbarItems.length) { - // toolbar = toolbar.concat(toolbarItems); - // } - if (eventsInfo.onClickToolbarIcon) { toolbar = toolbar.map((item) => typeof item === 'object' ? { ...item, action: toolbarActionWrapper(item.action) } : item, diff --git a/app/src/pages/inside/profilePage/modals/loaderBlock/loaderBlock.jsx b/app/src/pages/inside/profilePage/modals/loaderBlock/loaderBlock.jsx index 9a768fe2c3..1dc3ad8476 100644 --- a/app/src/pages/inside/profilePage/modals/loaderBlock/loaderBlock.jsx +++ b/app/src/pages/inside/profilePage/modals/loaderBlock/loaderBlock.jsx @@ -26,7 +26,7 @@ export const LoaderBlock = ({ text, className }) => { return (
- +
{text}
diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/makeDecisionTabs/makeDecisionTabs.jsx b/app/src/pages/inside/stepPage/modals/makeDecisionModal/makeDecisionTabs/makeDecisionTabs.jsx index ea0607a985..6b458a37e9 100644 --- a/app/src/pages/inside/stepPage/modals/makeDecisionModal/makeDecisionTabs/makeDecisionTabs.jsx +++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/makeDecisionTabs/makeDecisionTabs.jsx @@ -111,7 +111,7 @@ export const MakeDecisionTabs = ({ {loadingMLSuggest && (
- +

{formatMessage(messages.analyzingSuggestions)}

diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/ai-inline.svg b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/ai-inline.svg new file mode 100644 index 0000000000..f8fe8fee79 --- /dev/null +++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/ai-inline.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.jsx b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.jsx new file mode 100644 index 0000000000..cd386d178f --- /dev/null +++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.jsx @@ -0,0 +1,62 @@ +import React from 'react'; +import Parser from 'html-react-parser'; +import classNames from 'classnames/bind'; +import { BubblesPreloader } from 'components/preloaders/bubblesPreloader'; +import styles from './defectCommentAddon.scss'; +import AiIcon from './ai-inline.svg'; + +const cx = classNames.bind(styles); + +export const DefectCommentAddon = (props) => { + const { + // eslint-disable-next-line react/prop-types + comment: existingComment, + // eslint-disable-next-line react/prop-types + onChangeComment, + // eslint-disable-next-line react/prop-types + item, // TODO: use item id + // ...extensionProps + } = props; + // const { lib: { React, Parser, classNames }, components: { BubblesPreloader } } = extensionProps; + // const cx = React.useMemo(() => classNames.bind(styles), [classNames, styles]); + const [llmSuggestLoading, setLlmSuggestLoading] = React.useState(false); + const [appliedSuggestion, setAppliedSuggestion] = React.useState(''); + + React.useEffect(() => { + if (appliedSuggestion !== existingComment && appliedSuggestion !== '') { + setAppliedSuggestion(''); + } + }, [existingComment]); + + const loadLlmSuggestion = () => { + console.log('Item: ', item); + const suggestedComment = "This defect is not a bug. It's a feature"; + const comment = existingComment ? `${existingComment}\n${suggestedComment}` : suggestedComment; + setLlmSuggestLoading(true); + // TODO: API request will be here instead of a timeout + setTimeout(() => { + onChangeComment(comment); + setAppliedSuggestion(comment); + setLlmSuggestLoading(false); + }, 1500); + }; + + return ( +
+ {llmSuggestLoading ? ( + + + + ) : ( + + )} +
+ ); +}; diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.scss b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.scss new file mode 100644 index 0000000000..00c2216795 --- /dev/null +++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/defectCommentAddon.scss @@ -0,0 +1,48 @@ +.defect-comment-addon { + height: 22px; + margin: 10px 0; + font-size: 13px; + color: #eabcff; + + &.applied { + color: #515151; + path { + fill: #515151; + } + + .ask-ai-button { + &:hover { + cursor: default; + opacity: 1; + } + } + } +} + +.ask-ai-button { + display: inline-flex; + align-items: center; + height: 22px; + gap: 8px; + padding: 0; + background: none; + border: none; + color: inherit; + + &:hover { + cursor: pointer; + opacity: 0.8; + } +} + +.ai-icon { + display: inline-block; + width: 19px; + height: 20px; +} + +.loader { + display: inline-block; + width: 50px; + height: 6px; +} diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/index.js b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/index.js new file mode 100644 index 0000000000..e31783a6b6 --- /dev/null +++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/makeDecisionDefectCommentAddon/index.js @@ -0,0 +1 @@ +export { DefectCommentAddon } from './defectCommentAddon'; diff --git a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx index 0df9d1b402..f89073e706 100644 --- a/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx +++ b/app/src/pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx @@ -19,11 +19,9 @@ import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; import classNames from 'classnames/bind'; -import Parser from 'html-react-parser'; import { useTracking } from 'react-tracking'; import { actionMessages } from 'common/constants/localization/eventsLocalization'; import { LINK_ISSUE, POST_ISSUE, UNLINK_ISSUE } from 'common/constants/actionTypes'; -import { BubblesPreloader } from 'components/preloaders/bubblesPreloader'; import PlusIcon from 'common/img/plus-button-inline.svg'; import UnlinkIcon from 'common/img/unlink-inline.svg'; import { @@ -48,8 +46,8 @@ import { } from '../../constants'; import { messages } from '../../messages'; import { ActionButtonsBar } from './actionButtonsBar'; +import { DefectCommentAddon } from './makeDecisionDefectCommentAddon'; import styles from './selectDefectManually.scss'; -import AiIcon from './ai-inline.svg'; const cx = classNames.bind(styles); @@ -72,8 +70,6 @@ export const SelectDefectManually = ({ const [commentEditor, setCommentEditor] = useState(null); const defectFromTIGroup = itemData.issue && itemData.issue.issueType.startsWith(TO_INVESTIGATE_LOCATOR_PREFIX); - const [llmSuggestLoading, setLlmSuggestLoading] = useState(false); - const [suggestionApplied, setSuggestionApplied] = useState(false); const source = modalState.selectManualChoice; @@ -115,19 +111,6 @@ export const SelectDefectManually = ({ } }; - const loadLlmSuggestion = () => { - const suggestedComment = "This defect is not a bug. It's a feature"; - const { comment: existingComment } = source.issue; - const comment = existingComment ? `${existingComment}\n${suggestedComment}` : suggestedComment; - setLlmSuggestLoading(true); - // TODO: API request will be here instead of a timeout - setTimeout(() => { - handleDefectCommentChange(comment); - setSuggestionApplied(true); - setLlmSuggestLoading(false); - }, 1000); - }; - const getActionItems = () => { const issueTitle = getIssueTitle( formatMessage, @@ -249,28 +232,24 @@ export const SelectDefectManually = ({ }} placeholder={formatMessage(messages.comment)} mode="dark" - controlled + controlled={extensions.length !== 0 || true} /> -
- {llmSuggestLoading ? ( - - - - ) : ( - - )} -
- {extensions.map((extensionComponent) => ( - - ))} + )} + {!isBulkOperation && + extensions.map((extensionComponent) => ( + + ))} {!debugMode && (