Actualize styles

reportportal · Dec 12, 2023 · 020e425 · 020e425
1 parent 0b3ca66
commit 020e425
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 30 deletions.
diff --git a/...nside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai-inline.svg b/...nside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai-inline.svg
diff --git a/...pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai.svg b/...pages/inside/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/ai.svg
diff --git a/...side/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx b/...side/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.jsx
@@ -72,7 +72,8 @@ export const SelectDefectManually = ({
   const [commentEditor, setCommentEditor] = useState(null);
   const defectFromTIGroup =
     itemData.issue && itemData.issue.issueType.startsWith(TO_INVESTIGATE_LOCATOR_PREFIX);
-  const [llmSuggestLoading, setLllmSuggestLoading] = useState(false);
+  const [llmSuggestLoading, setLlmSuggestLoading] = useState(false);
+  const [suggestionApplied, setSuggestionApplied] = useState(false);
 
   const source = modalState.selectManualChoice;
 
@@ -118,11 +119,12 @@ export const SelectDefectManually = ({
     const suggestedComment = "This defect is not a bug. It's a feature";
     const { comment: existingComment } = source.issue;
     const comment = existingComment ? `${existingComment}\n${suggestedComment}` : suggestedComment;
-    setLllmSuggestLoading(true);
+    setLlmSuggestLoading(true);
     // TODO: API request will be here instead of a timeout
     setTimeout(() => {
       handleDefectCommentChange(comment);
-      setLllmSuggestLoading(false);
+      setSuggestionApplied(true);
+      setLlmSuggestLoading(false);
     }, 1000);
   };
 
@@ -232,25 +234,6 @@ export const SelectDefectManually = ({
         isNarrowView={getDefectTypeNarrowView()}
       />
       <div className={cx('defect-comment')}>
-        {extensions.map((extensionComponent) => (
-          <extensionComponent.component
-            key={extensionComponent.name}
-            onChangeComment={handleDefectCommentChange}
-            comment={source.issue.comment}
-          />
-        ))}
-        <div className={cx('llm-suggestion-control')}>
-          {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>
-              Generate with AI
-            </button>
-          )}
-        </div>
         <MarkdownEditor
           value={
             modalState.decisionType === SELECT_DEFECT_MANUALLY
@@ -268,6 +251,26 @@ export const SelectDefectManually = ({
           mode="dark"
           controlled
         />
+        <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}
+            onChangeComment={handleDefectCommentChange}
+            comment={source.issue.comment}
+            item={itemData}
+          />
+        ))}
       </div>
       {!debugMode && (
         <ActionButtonsBar

diff --git a/...ide/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.scss b/...ide/stepPage/modals/makeDecisionModal/tabs/selectDefectManually/selectDefectManually.scss
@@ -36,21 +36,28 @@
 }
 
 .llm-suggestion-control {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  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: #eabcff;
+  color: inherit;
   cursor: pointer;
 
   &:hover {
@@ -82,6 +89,7 @@
 //}
 
 .loader {
+  display: inline-block;
   width: 50px;
   height: 6px;
 }