improve the copy to clipboard flow

jsajal · jsajal · commit cc417f4810c0 · 2024-06-21T14:39:40.000-07:00
diff --git a/src/components/molecules/flow/nodes/RequestBody.js b/src/components/molecules/flow/nodes/RequestBody.js
@@ -1,7 +1,7 @@
 import React, { Fragment, useState, useRef } from 'react';
 import { PropTypes } from 'prop-types';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
-import { DocumentArrowUpIcon, ClipboardDocumentCheckIcon } from '@heroicons/react/24/outline';
+import { DocumentArrowUpIcon, ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
 import { Menu, Transition } from '@headlessui/react';
 import useCanvasStore from 'stores/CanvasStore';
 import { toast } from 'react-toastify';
@@ -22,9 +22,7 @@ const RequestBody = ({ nodeId, nodeData }) => {
   const setRequestNodeBody = useCanvasStore((state) => state.setRequestNodeBody);
   const [cachedValues, setCachedValues] = React.useState({});
 
-  const [textToCopy, setTextToCopy] = useState(nodeData.requestBody.body); // The text you want to copy
   const [copyStatus, setCopyStatus] = useState(false); // To indicate if the text was copied
-  const [showCopiedToClipboardToolTip, setShowCopiedToClipboardToolTip] = useState(false);
 
   const uploadFileForRequestNode = useRef(null);
 
@@ -73,7 +71,7 @@ const RequestBody = ({ nodeId, nodeData }) => {
     });
   };
 
-  const handleRawJson = async (value) => {
+  const handleRawJson = (value) => {
     setRequestNodeBody(nodeId, 'raw-json', value);
   };
 
@@ -114,13 +112,6 @@ const RequestBody = ({ nodeId, nodeData }) => {
     return [];
   };
 
-  const onCopyText = () => {
-    setCopyStatus(true);
-    setShowCopiedToClipboardToolTip(true);
-    setTimeout(() => setCopyStatus(false), 2000); // Reset status after 2 seconds
-    setTimeout(() => setShowCopiedToClipboardToolTip(false), 2000); // Reset status after 2 seconds
-  };
-
   return (
     <>
       <div className='flex items-center justify-between bg-background p-4'>
@@ -164,26 +155,30 @@ const RequestBody = ({ nodeId, nodeData }) => {
               <div className='relative bg-background-lighter'>
                 <Editor
                   name='request-body-json'
-                  onChange={async (e) => {
-                    await handleRawJson(e);
-                    setTextToCopy(e);
-                  }}
+                  onChange={(e) => handleRawJson(e)}
                   value={nodeData.requestBody.body}
                   classes={'w-full max-h-96'}
                   completionOptions={getActiveVariables()}
                 />
 
                 <div className='absolute right-5 top-0 cursor-pointer text-slate-400 hover:text-cyan-900'>
-                  <CopyToClipboard text={textToCopy} onCopy={onCopyText}>
+                  <CopyToClipboard
+                    text={nodeData.requestBody.body}
+                    onCopy={() => {
+                      setCopyStatus(true);
+                      setTimeout(() => setCopyStatus(false), 2000); // Reset status after 2 seconds
+                    }}
+                  >
                     <button>
-                      <Tippy
-                        content='Copied to Clipboard'
-                        placement='top'
-                        visible={showCopiedToClipboardToolTip}
-                        onClickOutside={() => setShowCopiedToClipboardToolTip(false)}
-                      >
-                        <ClipboardDocumentCheckIcon className='h-6 w-6' />
-                      </Tippy>
+                      {copyStatus ? (
+                        <Tippy content='Copied to Clipboard' placement='top'>
+                          <ClipboardDocumentCheckIcon className='h-6 w-6' />
+                        </Tippy>
+                      ) : (
+                        <Tippy content='Copy to Clipboard' placement='top'>
+                          <ClipboardDocumentIcon className='h-6 w-6' />
+                        </Tippy>
+                      )}
                     </button>
                   </CopyToClipboard>
                 </div>
diff --git a/src/components/molecules/headers/TabPanelHeader.js b/src/components/molecules/headers/TabPanelHeader.js
@@ -16,6 +16,7 @@ import HorizontalDivider from 'components/atoms/common/HorizontalDivider';
 import { JsonView, allExpanded, collapseAllNested, darkStyles, defaultStyles } from 'react-json-view-lite';
 import 'react-json-view-lite/dist/index.css';
 import { LogLevel } from '../flow/graph/GraphLogger';
+import { ShieldCheckIcon, BarsArrowUpIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import GenAIUsageDisclaimer from '../modals/GenAIUsageDisclaimer';
 import { getLocalStorageItem } from 'utils/common';
 
@@ -37,6 +38,34 @@ const TabPanelHeader = () => {
   const [genAiUsageDisclaimerModalOpen, setGenAiUsageDisclaimerModalOpen] = useState(false);
   const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
 
+  const renderFlowScan = (flowScan) => {
+    if (flowScan.upload === 'disabled') {
+      return (
+        <div className='flex flex-col items-start'>
+          <Tippy content={flowScan.message} placement='top'>
+            <BarsArrowUpIcon className='h-4 w-4' />
+          </Tippy>
+          {'Activate Flow Scan'}
+        </div>
+      );
+    } else if (flowScan.upload === 'success') {
+      return (
+        <div className='flex flex-col items-start'>
+          <ShieldCheckIcon className='h-4 w-4' />
+          {flowScan.url}
+        </div>
+      );
+    } else if (flowScan.upload === 'fail') {
+      return (
+        <div className='flex flex-col items-start'>
+          <ExclamationTriangleIcon className='h-4 w-4' />
+          {flowScan.message}
+          {flowScan?.reason}
+        </div>
+      );
+    }
+  };
+
   const renderLog = (log) => {
     if (log.logLevel === LogLevel.INFO) {
       let message = '';
@@ -47,28 +76,30 @@ const TabPanelHeader = () => {
 
       if (log.node != undefined) {
         const type = log.node.type;
+        const data = log.node.data;
         if (type === 'outputNode') {
           json = {
-            output: log.node.data,
+            output: data.output,
           };
         }
 
+        if (type === 'authNode') {
+          message = `${data.authType}`;
+        }
+
         if (type === 'assertNode') {
-          const data = log.node.data;
           message = `Assert : ${data.var1} of type ${typeof data.var1} ${data.operator} ${data.var2} of type ${typeof data.var2} = ${data.result}`;
         }
 
         if (type === 'delayNode') {
-          message = `Waiting for ${log.node.data} ms`;
+          message = `Waiting for ${data.delay} ms`;
         }
 
         if (type === 'setVarNode') {
-          const data = log.node.data;
           message = `Setting Variable:  ${data.name} = ${data.value}`;
         }
 
         if (type === 'requestNode') {
-          const data = log.node.data;
           message = `${data.request.type.toUpperCase()} ${data.request.url}`;
           json = data;
         }
@@ -142,7 +173,7 @@ const TabPanelHeader = () => {
               <div className='flex h-12 items-center justify-center'>
                 <SaveFlowModal tab={focusTab} />
               </div>
-              {focusTab.type === OBJ_TYPES.flowtest && graphRunLogs.length != 0 ? (
+              {focusTab.type === OBJ_TYPES.flowtest && focusTab.run.logs && focusTab.run.logs.length != 0 ? (
                 <div>
                   <Button
                     id='graph-logs-side-sheet'
@@ -186,7 +217,8 @@ const TabPanelHeader = () => {
                       className='drawer-overlay'
                     ></label>
                     <ul className='menu min-h-full bg-base-200 p-4 text-base-content'>
-                      {graphRunLogs.map((item, index) => (
+                      <li key='scan'>{renderFlowScan(focusTab.run.scan)}</li>
+                      {focusTab.run.logs.map((item, index) => (
                         <li key={index}>{renderLog(item)}</li>
                       ))}
                     </ul>
diff --git a/src/components/molecules/modals/GenerateFlowTestModal.js b/src/components/molecules/modals/GenerateFlowTestModal.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
 import { PropTypes } from 'prop-types';
 import { Dialog, Transition, Listbox } from '@headlessui/react';
 import Button from 'components/atoms/common/Button';
@@ -35,9 +35,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
   const [bedrockSecretAccessKey, setBedrockSecretAccessKey] = useState('');
 
   const [flowtestName, setFlowtestName] = useState('');
-  const [selectedCollection, setSelectionCollection] = useState(
-    collectionId ? collections.find((c) => c.id === collectionId) : {},
-  );
+  const [selectedCollection, setSelectionCollection] = useState({});
   const [selectedFolder, setSelectedFolder] = useState('');
 
   // Error flags
@@ -50,6 +48,10 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
   const [showBedrockSecretAccessKeyError, setShowBedrockSecretAccessKeyError] = useState(false);
   //const [showFolderSelectionError, setShowFolderSelectionError] = useState(false);
 
+  useEffect(() => {
+    setSelectionCollection(collectionId ? collections.find((c) => c.id === collectionId) : {});
+  }, [collectionId]);
+
   const resetFields = () => {
     if (!collectionId) {
       setFlowtestName('');
