PLU-466: fix: prevent input edit on published pipes (#956)

## Problem

Users can modify the frontend input for published pipes but it does not
affect the backend

## Solution
- Add readonly attribute to all inputs

## Tests
Check that inputs can be edited when unpublished and cannot be edited
when published
- [ ] BooleanRadio type: telegram
- [ ] DragDropInput type: formsg connection
- [ ] Dropdown: tiles
- [ ] RichTextEditor: postman email
- [ ] TextField: `readOnly: true` is for slack auth only, everything
else e.g. aisay prompt is false
- [ ] Attachment: postman email attachment
- [ ] MultiSelect: old postman email attachment, not used anywhere now
(manually change to test)
- [ ] MultiRow: aisay, tiles
- [ ] MultiRow-MultiCol: custom-api headers

Author: m0nggh

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 import {
   Box,
   Collapse,
@@ -11,6 +11,7 @@ import {
 import FileUpload from '@/components/FileUpload'
 import PrimarySpinner from '@/components/PrimarySpinner'
 import SuggestionsWrapper from '@/components/SuggestionsWrapper'
+import { EditorContext } from '@/contexts/Editor'
 import { StepWithVariables, Variable } from '@/helpers/variables'
 import { POPOVER_MOTION_PROPS } from '@/theme/constants'
 
@@ -53,6 +54,8 @@ export default function Suggestions(props: SuggestionsProps) {
     setCurrentTab,
   } = props
 
+  const { readOnly } = useContext(EditorContext)
+
   const SuggestionsRightPanel = ({ values }: { values: any }) => {
     if (suggestions.length === 0) {
       return <Text style={noVariablesTextStyles}>No variables available</Text>
@@ -73,7 +76,7 @@ export default function Suggestions(props: SuggestionsProps) {
                   <FileUpload
                     accept={ACCEPTED_FILE_TYPES.join(',')}
                     buttonType="textButton"
-                    disabled={isUploading}
+                    disabled={isUploading || readOnly}
                     loading={isUploading}
                     processFile={processFile}
                   />
@@ -88,7 +91,7 @@ export default function Suggestions(props: SuggestionsProps) {
                           ...variable,
                           source: option.name,
                         }}
-                        allowDelete={addNew}
+                        allowDelete={addNew && !readOnly}
                         isChecked={
                           values.includes(name) ||
                           values.includes(`{{${name}}}`)
@@ -127,9 +130,12 @@ export default function Suggestions(props: SuggestionsProps) {
       isOpen={isSuggestionsOpen}
       onClose={closeSuggestions}
     >
-      <div style={divWrapperStyles} onClick={openSuggestions}>
+      <div
+        style={divWrapperStyles}
+        onClick={() => !readOnly && openSuggestions()}
+      >
         <PopoverTrigger>
-          <Box sx={boxStyles} onClick={openSuggestions}>
+          <Box sx={boxStyles} onClick={() => !readOnly && openSuggestions()}>
             <TagList
               onClick={(option) => {
                 onSuggestionClick(option, false)

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

@@ -1,12 +1,16 @@
+import { useContext } from 'react'
 import { Tag, TagCloseButton, TagLabel, Tooltip } from '@chakra-ui/react'
 
+import { EditorContext } from '@/contexts/Editor'
+
 interface TagsProps {
   tags: any[]
   onClick: (option: any) => void
 }
 
 function TagList(props: TagsProps) {
   const { onClick, tags } = props
+  const { readOnly } = useContext(EditorContext)
 
   const getLabel = (option: any, tooltip?: boolean) => {
     const { displayedValue, label, source, uploaded } = option
@@ -36,13 +40,17 @@ function TagList(props: TagsProps) {
             minW="40px"
             maxW="200px"
             flex="0 1 auto"
+            h="100%"
           >
             <Tooltip hasArrow label={getLabel(tag, true)}>
               <TagLabel isTruncated flex="1 1 auto" minW="0">
                 {getLabel(tag)}
               </TagLabel>
             </Tooltip>
-            <TagCloseButton onClick={() => onClick(tag)} />
+            <TagCloseButton
+              onClick={() => !readOnly && onClick(tag)}
+              isDisabled={readOnly}
+            />
           </Tag>
         )
       })}

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

@@ -11,6 +11,7 @@ import { Box, Flex, FormControl, useDisclosure } from '@chakra-ui/react'
 import { FormErrorMessage, FormLabel } from '@opengovsg/design-system-react'
 
 import { ComboboxItem, SingleSelect } from '@/components/SingleSelect'
+import { EditorContext } from '@/contexts/Editor'
 import { StepExecutionsContext } from '@/contexts/StepExecutions'
 
 import extractVariablesAsItems from '../MultiSelect/helpers/extract-variables-as-items'
@@ -74,6 +75,7 @@ function ControlledAutocomplete(
     isSearchable,
     variableTypes = null,
   } = props
+  const { readOnly } = useContext(EditorContext)
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
 
   /**
@@ -170,15 +172,14 @@ function ControlledAutocomplete(
             colorScheme="secondary"
             isClearable={!required}
             items={items}
-            onChange={fieldOnChange}
+            onChange={() => !readOnly && fieldOnChange}
             value={fieldValue ?? defaultValue}
             placeholder={placeholder}
             ref={ref}
             data-test={`${name}-autocomplete`}
             onRefresh={onRefresh}
             isRefreshLoading={loading}
             freeSolo={freeSolo}
-            isReadOnly={isCreatingNewOption}
             isSearchable={isSearchable}
             addNew={
               addNewOption

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

@@ -1,10 +1,11 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useContext, useState } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import Markdown from 'react-markdown'
 import { FormControl, Input, Stack } from '@chakra-ui/react'
 import { FormErrorMessage, FormLabel } from '@opengovsg/design-system-react'
 
 import FileUpload from '@/components/FileUpload'
+import { EditorContext } from '@/contexts/Editor'
 import { usePreventDrop } from '@/hooks/useDisableDragDrop'
 
 const SECRET_KEY_REGEX = /^[a-zA-Z0-9/+]+={0,2}$/
@@ -29,6 +30,7 @@ function DragDropInput(props: DragDropInputProps) {
     required,
     ...inputProps
   } = props
+  const { readOnly } = useContext(EditorContext)
   const [dragging, setDragging] = useState(false)
 
   // Disable drag drop anywhere else
@@ -107,7 +109,7 @@ function DragDropInput(props: DragDropInputProps) {
       }) => {
         return (
           <>
-            <FormControl isInvalid={!!error}>
+            <FormControl isInvalid={!!error} isReadOnly={readOnly}>
               {label && (
                 <FormLabel
                   isRequired={required}
@@ -138,18 +140,22 @@ function DragDropInput(props: DragDropInputProps) {
                     : undefined)}
                   type="password"
                   onChange={(...args) => controllerOnChange(...args)}
-                  onDragEnter={handleDragEnter}
-                  onDragLeave={handleDragLeave}
-                  onDragOver={handleDragOver}
-                  onDrop={handleDrop}
+                  onDragEnter={readOnly ? undefined : handleDragEnter}
+                  onDragLeave={readOnly ? undefined : handleDragLeave}
+                  onDragOver={readOnly ? undefined : handleDragOver}
+                  onDrop={readOnly ? undefined : handleDrop}
                   placeholder={
                     dragging
                       ? 'Drop your file here'
                       : placeholder ?? 'Enter or drop your file here'
                   }
                   transition="padding 0.2s ease-out"
                 />
-                <FileUpload accept="text/plain" processFile={processFile} />
+                <FileUpload
+                  accept="text/plain"
+                  processFile={processFile}
+                  disabled={readOnly}
+                />
               </Stack>
               {error && <FormErrorMessage>{error?.message}</FormErrorMessage>}
             </FormControl>

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

@@ -27,7 +27,6 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
   const { flags } = useContext(LaunchDarklyContext)
   const formContext = useFormContext()
   const {
-    readOnly,
     executeTestStep,
     onUpdateStep,
     setShouldWarnOnLeave,
@@ -150,7 +149,6 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
                 schema={argument}
                 namePrefix="parameters"
                 stepId={step.id}
-                disabled={readOnly || isSaving}
               />
             ))}
           </Stack>

packages/frontend/src/components/InputCreator/BooleanRadio.tsx

@@ -1,5 +1,6 @@
 import type { IFieldBooleanRadioOptions } from '@plumber/types'
 
+import { useContext } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import Markdown from 'react-markdown'
 import { FormControl, RadioGroup, Stack } from '@chakra-ui/react'
@@ -9,6 +10,8 @@ import {
   Radio,
 } from '@opengovsg/design-system-react'
 
+import { EditorContext } from '@/contexts/Editor'
+
 interface BooleanRadioProps {
   name: string
   label?: string
@@ -55,6 +58,7 @@ export default function BooleanRadio(props: BooleanRadioProps) {
   } = props
   const { control } = useFormContext()
   const [firstOption, secondOption] = options ?? defaultLabelOptions
+  const { readOnly } = useContext(EditorContext)
 
   return (
     <Controller
@@ -86,7 +90,7 @@ export default function BooleanRadio(props: BooleanRadioProps) {
             <RadioGroup
               onChange={
                 (selectedValue) =>
-                  onChange(convertStringToBoolean(selectedValue)) // store null in db for backwards compat
+                  !readOnly && onChange(convertStringToBoolean(selectedValue)) // store null in db for backwards compat
               }
               // value will be empty if not provided on backend, null if user did not select
               value={value === '' ? value : convertBooleanToString(value)}

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

@@ -16,7 +16,6 @@ export type InputCreatorProps = {
   schema: IField
   namePrefix?: string
   stepId?: string
-  disabled?: boolean
   parentType?: string
   autoFocus?: boolean
 }
@@ -30,7 +29,7 @@ const optionGenerator = (options: RawOption[]): IFieldDropdownOption[] =>
   options?.map(({ name, value }) => ({ label: name as string, value: value }))
 
 export default function InputCreator(props: InputCreatorProps): JSX.Element {
-  const { schema, namePrefix, stepId, disabled, parentType, autoFocus } = props
+  const { schema, namePrefix, stepId, parentType, autoFocus } = props
 
   const {
     key: name,
@@ -116,7 +115,6 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         required={required}
         label={label}
         description={description}
-        disabled={disabled}
         placeholder={placeholder}
         variablesEnabled={variables}
         isRich
@@ -132,7 +130,6 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           required={required}
           label={label}
           description={description}
-          disabled={disabled}
           placeholder={placeholder}
           isSingleLine={parentType === 'multicol'}
           variablesEnabled
@@ -149,7 +146,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         defaultValue={value}
         required={required}
         placeholder={placeholder}
-        readOnly={readOnly || disabled}
+        readOnly={readOnly}
         name={computedName}
         label={label}
         multiline={type === 'multiline'}
@@ -195,7 +192,6 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         type={type}
         // These are InputCreatorProps which MultiRow will forward.
         stepId={stepId}
-        disabled={disabled}
       />
     )
   }

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

@@ -10,6 +10,7 @@ import {
   MultiSelect as DSMultiSelect,
 } from '@opengovsg/design-system-react'
 
+import { EditorContext } from '@/contexts/Editor'
 import { StepExecutionsContext } from '@/contexts/StepExecutions'
 
 import extractVariablesAsItems from './helpers/extract-variables-as-items'
@@ -38,6 +39,7 @@ function MultiSelect(props: MultiSelectProps): React.ReactElement {
   } = props
   const { control } = useFormContext()
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
+  const { readOnly } = useContext(EditorContext)
 
   const items = useMemo(
     () => extractVariablesAsItems(priorExecutionSteps, variableTypes),
@@ -91,6 +93,7 @@ function MultiSelect(props: MultiSelectProps): React.ReactElement {
               //      changed.
               onChange(newValues.sort())
             }
+            isReadOnly={readOnly}
           />
           {error && <FormErrorMessage>{error.message}</FormErrorMessage>}
         </FormControl>

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

@@ -29,6 +29,7 @@ import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import escapeHtml from 'escape-html'
 
+import { EditorContext } from '@/contexts/Editor'
 import { StepExecutionsContext } from '@/contexts/StepExecutions'
 import {
   extractVariables,
@@ -240,14 +241,16 @@ const Editor = ({
       isLazy
       lazyBehavior="unmount"
       onClose={closeSuggestions}
-      isOpen={isSuggestionsOpen && variablesEnabled}
+      isOpen={isSuggestionsOpen && variablesEnabled && editable}
       placement={getPopoverPlacement(editor)}
     >
       <div
         className="editor"
         onClick={(e) => {
-          e.stopPropagation()
-          openSuggestions()
+          if (editable) {
+            e.stopPropagation()
+            openSuggestions()
+          }
         }}
         onBlur={(e) => {
           // Focus might shift to menu bar or other children, where we do _not_
@@ -297,7 +300,6 @@ interface RichTextEditorProps {
   name: string
   label?: string
   description?: string
-  disabled?: boolean
   placeholder?: string
   variablesEnabled?: boolean
   isRich?: boolean
@@ -313,7 +315,6 @@ const RichTextEditor = ({
   name,
   label,
   description,
-  disabled,
   placeholder,
   variablesEnabled,
   isRich,
@@ -323,6 +324,7 @@ const RichTextEditor = ({
   parentType,
   autoFocus,
 }: RichTextEditorProps) => {
+  const { readOnly } = useContext(EditorContext)
   const { control, getValues } = useFormContext()
   const { shouldAutoFocus, isNewRow, rowData } = checkAutoFocus(
     name,
@@ -359,7 +361,7 @@ const RichTextEditor = ({
           <Editor
             onChange={onChange}
             initialValue={value}
-            editable={!disabled}
+            editable={!readOnly}
             placeholder={placeholder}
             variablesEnabled={variablesEnabled}
             isRich={isRich}

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

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useContext } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import { BiCopy } from 'react-icons/bi'
 import Markdown from 'react-markdown'
@@ -11,6 +11,8 @@ import {
 } from '@opengovsg/design-system-react'
 import copy from 'clipboard-copy'
 
+import { EditorContext } from '@/contexts/Editor'
+
 type TextFieldProps = {
   shouldUnregister?: boolean
   name: string
@@ -48,6 +50,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
   } = props
 
   const SelectedComponent = multiline ? Textarea : Input
+  const { readOnly: disabled } = useContext(EditorContext)
 
   return (
     <Controller
@@ -88,7 +91,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
                 controllerOnBlur()
                 onBlur?.(...args)
               }}
-              isReadOnly={readOnly}
+              isReadOnly={readOnly || disabled}
             />
             {clickToCopy && (
               <InputRightElement>