Skip to content

Commit

Permalink
Finalize defect comment extension
Browse files Browse the repository at this point in the history
  • Loading branch information
AmsterGet committed Dec 18, 2023
1 parent 020e425 commit 77ffeca
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 110 deletions.
14 changes: 0 additions & 14 deletions app/src/components/main/markdown/markdownEditor/markdownEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand All @@ -132,7 +124,6 @@ export class MarkdownEditor extends React.Component {
hint: { hintText: () => '', hintCondition: () => true },
provideErrorHint: false,
controlled: false,
// toolbarItems: [],
};

state = {
Expand All @@ -154,7 +145,6 @@ export class MarkdownEditor extends React.Component {
mode,
manipulateEditorOutside,
eventsInfo,
// toolbarItems,
} = this.props;
this.holder.value = value;

Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const LoaderBlock = ({ text, className }) => {
return (
<div className={cx('loader-block', className)}>
<div className={cx('loader')}>
<BubblesPreloader color={'topaz'} />
<BubblesPreloader />
</div>
<div className={cx('loader-text')}>{text}</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const MakeDecisionTabs = ({
{loadingMLSuggest && (
<div className={cx('central-block-default')}>
<div className={cx('preloader')}>
<BubblesPreloader color={'topaz'} />
<BubblesPreloader />
</div>
<p className={cx('suggest-text')}>{formatMessage(messages.analyzingSuggestions)}</p>
</div>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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 (
<div className={cx('defect-comment-addon', { applied: !!appliedSuggestion })}>
{llmSuggestLoading ? (
<span className={cx('loader')}>
<BubblesPreloader color="#eabcff" />
</span>
) : (
<button
className={cx('ask-ai-button')}
onClick={loadLlmSuggestion}
disabled={!!appliedSuggestion}
>
<span className={cx('ai-icon')}>{Parser(AiIcon)}</span>
{appliedSuggestion ? 'Pasted' : 'Ask AI to generate a comment'}
</button>
)}
</div>
);
};
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { DefectCommentAddon } from './defectCommentAddon';
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);

Expand All @@ -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;

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -249,28 +232,24 @@ export const SelectDefectManually = ({
}}
placeholder={formatMessage(messages.comment)}
mode="dark"
controlled
controlled={extensions.length !== 0 || true}
/>
<div className={cx('llm-suggestion-control', { applied: suggestionApplied })}>
{llmSuggestLoading ? (
<span className={cx('loader')}>
<BubblesPreloader color="#eabcff" />
</span>
) : (
<button className={cx('ask-ai-button')} onClick={loadLlmSuggestion}>
<span className={cx('ai-icon')}>{Parser(AiIcon)}</span>
{suggestionApplied ? 'Pasted' : 'Ask AI to generate a comment'}
</button>
)}
</div>
{extensions.map((extensionComponent) => (
<extensionComponent.component
key={extensionComponent.name}
{!isBulkOperation && (
<DefectCommentAddon
onChangeComment={handleDefectCommentChange}
comment={source.issue.comment}
item={itemData}
/>
))}
)}
{!isBulkOperation &&
extensions.map((extensionComponent) => (
<extensionComponent.component
key={extensionComponent.name}
onChangeComment={handleDefectCommentChange}
comment={source.issue.comment}
item={itemData}
/>
))}
</div>
{!debugMode && (
<ActionButtonsBar
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,62 +34,3 @@
margin-top: 20px;
max-width: 567px;
}

.llm-suggestion-control {
height: 22px;
margin: 10px 0;
font-size: 13px;
color: #eabcff;

&.applied {
color: #515151;
path {
fill: #515151;
}
}
}

.ask-ai-button {
display: inline-flex;
align-items: center;
height: 22px;
gap: 8px;
padding: 0;
background: none;
border: none;
color: inherit;
cursor: pointer;

&:hover {
opacity: 0.8;
}
}

.ai-icon {
display: inline-block;
width: 19px;
height: 20px;
}

//:global {
// .ai-icon-embedded {
// display: inline-block;
// width: 19px;
// height: 20px;
// background-image: url(./ai.svg);
//
// &:hover {
// opacity: 0.8;
// }
//
// &:before {
// content: 'Generate with AI'
// }
// }
//}

.loader {
display: inline-block;
width: 50px;
height: 6px;
}

0 comments on commit 77ffeca

Please sign in to comment.