chore: Added logging statements for 'Edit Prompt' and 'Preview' butto…

…ns (#219) * chore: Added logging statements 'Edit Prompt' and 'Preview' buttons * fix: Renamed Tracking.js to MetricsHelper.js
adobe · Mar 15, 2024 · ef4dc2d · ef4dc2d
1 parent 495011f
commit ef4dc2d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/web-src/src/components/PromptEditor.js b/web-src/src/components/PromptEditor.js
@@ -20,13 +20,14 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { css, injectGlobal } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { motion, AnimatePresence } from 'framer-motion';
-
 import Close from '@spectrum-icons/workflow/Close';
-import { NO_VALUE_STRING, renderPrompt } from '../helpers/PromptRenderer.js';
-import PreviewIcon from '../icons/PreviewIcon.js';
 
 import { parametersState } from '../state/ParametersState.js';
 import { promptState } from '../state/PromptState.js';
+import { NO_VALUE_STRING, renderPrompt } from '../helpers/PromptRenderer.js';
+import { log } from '../helpers/MetricsHelper.js';
+
+import PreviewIcon from '../icons/PreviewIcon.js';
 
 languages.custom = {
   function: /{{[^@#]([^{}]+)}}/,
@@ -107,6 +108,12 @@ function PromptEditor({ isOpen, onClose, ...props }) {
     }
   }, [viewSource]);
 
+  useEffect(() => {
+    if (!viewSource) {
+      log('prompt:editor:previewed');
+    }
+  }, [viewSource]);
+
   const handleKeyDown = useCallback((event) => {
     if (event.key === 'Escape') {
       onClose();

diff --git a/web-src/src/components/PromptSessionPanel.js b/web-src/src/components/PromptSessionPanel.js
@@ -10,16 +10,23 @@
  * governing permissions and limitations under the License.
  */
 import { Flex, Grid } from '@adobe/react-spectrum';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 import { PromptSessionSideView } from './PromptSessionSideView.js';
 import { PromptResultListView } from './PromptResultListView.js';
 import PromptEditor from './PromptEditor.js';
 import { promptEditorState } from '../state/PromptEditorState.js';
+import { log } from '../helpers/MetricsHelper.js';
 
 export function PromptSessionPanel() {
   const [isOpenPromptEditor, setIsOpenPromptEditor] = useRecoilState(promptEditorState);
 
+  useEffect(() => {
+    if (isOpenPromptEditor) {
+      log('prompt:editor:opened');
+    }
+  }, [isOpenPromptEditor]);
+
   return (
     <Grid
       columns={['1fr', '2fr']}

diff --git a/web-src/src/components/PromptSessionSideView.js b/web-src/src/components/PromptSessionSideView.js
@@ -92,7 +92,6 @@ export function PromptSessionSideView({ isOpenPromptEditor, onTogglePrompt, ...p
           <ActionButton
             isQuiet
             UNSAFE_className="hover-cursor-pointer"
-            // width={'size-1500'}
             onPress={onTogglePrompt}
             UNSAFE_style={isOpenPromptEditor ? { background: 'var(--spectrum-gray-200)' } : undefined}
           >