chore: update interactions on readonly state (#1041)

## Problem
* Cannot select options in SingleSelect in edit mode (e.g., Tiles
column)
* Cannot open Suggestions Popover in edit mode

## Solution
**Bug Fixes**:
- Fix onChange in SingleSelect in edit mode
- Allow Suggestions Popover to open in readonly, but disable selection
  - Autofocus on the Popover in readonly to close the popover on blur 

## Tests
- [ ] Can select options in SingleSelect fields, e.g., Tiles find single
row column or filter selector
- [ ] Popover opens in PUBLISHED pipe (both RTE and attachments)
  - [ ] Cannot select any variable in Popover
  - [ ] Cannot delete attachment in Popover

---------

Co-authored-by: Ian Chen <[email protected]>

Author: kevinkim-ogp

packages/frontend/src/components/AttachmentSuggestions/components/Suggestions.tsx

@@ -97,7 +97,7 @@ export default function Suggestions(props: SuggestionsProps) {
                           values.includes(`{{${name}}}`)
                         }
                         onClick={(variable, checked) => {
-                          onSuggestionClick(variable, checked)
+                          !readOnly && onSuggestionClick(variable, checked)
                         }}
                         onDelete={onDelete}
                       />
@@ -121,7 +121,7 @@ export default function Suggestions(props: SuggestionsProps) {
 
   return (
     <ChakraPopover
-      autoFocus={false}
+      autoFocus={readOnly ? true : false}
       gutter={0}
       matchWidth={true}
       isLazy
@@ -130,15 +130,12 @@ export default function Suggestions(props: SuggestionsProps) {
       isOpen={isSuggestionsOpen}
       onClose={closeSuggestions}
     >
-      <div
-        style={divWrapperStyles}
-        onClick={() => !readOnly && openSuggestions()}
-      >
+      <div style={divWrapperStyles} onClick={openSuggestions}>
         <PopoverTrigger>
-          <Box sx={boxStyles} onClick={() => !readOnly && openSuggestions()}>
+          <Box sx={boxStyles} onClick={openSuggestions}>
             <TagList
               onClick={(option) => {
-                onSuggestionClick(option, false)
+                !readOnly && onSuggestionClick(option, false)
               }}
               tags={tags}
             />

packages/frontend/src/components/ControlledAutocomplete/index.tsx

@@ -93,12 +93,13 @@ function ControlledAutocomplete(
   const freeSolo = useMemo(() => {
     if (
       options.length &&
-      options.every((option) => typeof option.value !== 'string')
+      options.every((option) => typeof option.value !== 'string') &&
+      !readOnly
     ) {
       return false
     }
     return rawFreeSolo
-  }, [options, rawFreeSolo])
+  }, [options, rawFreeSolo, readOnly])
 
   /**
    * useController is used here instead of the Controller component
@@ -172,7 +173,7 @@ function ControlledAutocomplete(
             colorScheme="secondary"
             isClearable={!required}
             items={items}
-            onChange={() => !readOnly && fieldOnChange}
+            onChange={(e) => !readOnly && fieldOnChange(e)}
             value={fieldValue ?? defaultValue}
             placeholder={placeholder}
             ref={ref}
@@ -182,7 +183,7 @@ function ControlledAutocomplete(
             freeSolo={freeSolo}
             isSearchable={isSearchable}
             addNew={
-              addNewOption
+              addNewOption && !readOnly
                 ? {
                     type: addNewOption.type,
                     label: addNewOption.label,

packages/frontend/src/components/FlowStepTestController/index.tsx

@@ -112,6 +112,9 @@ export default function FlowStepTestController(
     'down',
   )
 
+  // isLastTestExecutionCurrent is used to determine if the last test execution corresponds
+  // to the values in the form.
+  // isLastTestExecutionCurrent is false if the form values are saved but not tested
   const isLastTestExecutionCurrent = useMemo(() => {
     const formValues = formContext.getValues()
     return matchParamsToDataIn(
@@ -136,8 +139,9 @@ export default function FlowStepTestController(
   }, [testExecutionSteps, step, substeps])
 
   const shouldAllowCheckStep = isValid && !readOnly && !isSaving
+
   const shouldShowSaveButton =
-    !isLastTestExecutionCurrent || (isTestSuccessful && isDirty)
+    !readOnly && (!isLastTestExecutionCurrent || (isTestSuccessful && isDirty))
   const shouldShowTestResults =
     currentTestExecutionStep && !lastErrorDetails && !shouldTestStepAgain
 
@@ -229,6 +233,7 @@ export default function FlowStepTestController(
       isTestExecuting,
       isValid,
       readOnly,
+      isMobile,
     ],
   )
 
@@ -322,13 +327,11 @@ export default function FlowStepTestController(
                           size="sm"
                           colorScheme="black"
                           onClick={handleSave}
-                          isDisabled={!isLastTestExecutionCurrent && !isDirty}
+                          isDisabled={!isDirty}
                           mr={2}
                         >
                           <Text noOfLines={1}>
-                            {!isLastTestExecutionCurrent && !isDirty
-                              ? 'Saved'
-                              : 'Save without checking'}
+                            {!isDirty ? 'Saved' : 'Save without checking'}
                           </Text>
                         </Button>
                       </GridItem>

packages/frontend/src/components/RichTextEditor/MenuBar.tsx

@@ -237,9 +237,10 @@ const dialogPlaceholders: Partial<Record<MenuLabels, string>> = {
 interface MenuBarProps {
   editor: Editor | null
   variableMap: VariableInfoMap
+  editable: boolean
 }
 
-export const MenuBar = ({ editor, variableMap }: MenuBarProps) => {
+export const MenuBar = ({ editor, variableMap, editable }: MenuBarProps) => {
   const {
     isOpen: isDialogOpen,
     onClose,
@@ -329,19 +330,30 @@ export const MenuBar = ({ editor, variableMap }: MenuBarProps) => {
       <div className="editor__header">
         {menuButtons.map(({ onClick, label, icon, isActive }, index) => {
           if (!onClick) {
-            return <div className="divider" key={`${label}${index}`} />
+            return (
+              <div
+                className="divider"
+                style={{
+                  opacity: editable ? 1 : 0.5,
+                }}
+                key={`${label}${index}`}
+              />
+            )
           }
           return (
             <button
               key={`${label}${index}`}
               title={label}
+              disabled={!editable}
               style={{
                 borderRadius: '0.25rem',
                 width: 'auto',
                 minWidth: 0,
                 backgroundColor: isActive?.(editor)
                   ? 'rgba(0,0,0,0.1)'
                   : 'transparent',
+                opacity: editable ? 1 : 0.5,
+                cursor: editable ? 'pointer' : 'default',
               }}
               className={`menu-item${isActive?.(editor) ? ' is-active' : ''}`}
               onClick={() => {

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -88,7 +88,7 @@ const RICH_TEXT_EXTENSIONS = [
 interface EditorProps {
   onChange: (...event: any[]) => void
   initialValue: string
-  editable?: boolean
+  editable: boolean
   placeholder?: string
   variablesEnabled?: boolean
   isRich?: boolean
@@ -235,22 +235,20 @@ const Editor = ({
 
   return (
     <Popover
-      autoFocus={false}
+      autoFocus={editable ? false : true}
       gutter={2}
       matchWidth={isMulticol ? false : true}
       isLazy
       lazyBehavior="unmount"
       onClose={closeSuggestions}
-      isOpen={isSuggestionsOpen && variablesEnabled && editable}
+      isOpen={isSuggestionsOpen && variablesEnabled}
       placement={getPopoverPlacement(editor)}
     >
       <div
         className="editor"
         onClick={(e) => {
-          if (editable) {
-            e.stopPropagation()
-            openSuggestions()
-          }
+          e.stopPropagation()
+          openSuggestions()
         }}
         onBlur={(e) => {
           // Focus might shift to menu bar or other children, where we do _not_
@@ -268,7 +266,13 @@ const Editor = ({
       >
         <PopoverTrigger>
           <Box className={isMulticol ? 'single-line-editor' : undefined}>
-            {isRich && <MenuBar editor={editor} variableMap={varInfo} />}
+            {isRich && (
+              <MenuBar
+                editor={editor}
+                variableMap={varInfo}
+                editable={editable ?? false}
+              />
+            )}
             <EditorContent className="editor__content" editor={editor} />
             <Portal>
               <PopoverContent
@@ -280,10 +284,14 @@ const Editor = ({
                     e.relatedTarget?.focus()
                   }
                 }}
+                _focus={{
+                  boxShadow: 'none',
+                  borderColor: 'inherit',
+                }}
               >
                 <Suggestions
                   data={stepsWithVariables}
-                  onSuggestionClick={handleVariableClick}
+                  onSuggestionClick={(v) => editable && handleVariableClick(v)}
                 />
               </PopoverContent>
             </Portal>