chore: custom message for no variables

Author: kevinkim-ogp

packages/backend/src/apps/toolbox/actions/for-each/index.ts

@@ -39,6 +39,8 @@ const action: IRawAction = {
       variables: true,
       variableTypes: ['array', 'table'],
       singleVariableSelection: true,
+      noVariablesMessage:
+        ' No variables available - add one of the following steps above: Find multiple rows, Find multiple table rows, or include a checkbox/table field in your FormSG.',
     },
   ],
 

packages/backend/src/graphql/schema.graphql

@@ -207,6 +207,7 @@ type ActionSubstepArgument {
   hiddenIf: FieldVisibilityCondition
   addRowButtonText: String
   tooltipText: String
+  noVariablesMessage: String
 
   # Only for string and multiline
   singleVariableSelection: Boolean

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

@@ -43,6 +43,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
     type,
     placeholder,
     tooltipText,
+    noVariablesMessage,
   } = schema
 
   const computedName = namePrefix ? `${namePrefix}.${name}` : name
@@ -119,6 +120,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         placeholder={placeholder}
         variablesEnabled={variables}
         isRich
+        noVariablesMessage={noVariablesMessage}
       />
     )
   }
@@ -139,6 +141,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           parentType={parentType}
           autoFocus={autoFocus}
           singleVariableSelection={schema.singleVariableSelection}
+          noVariablesMessage={noVariablesMessage}
         />
       )
     }

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

@@ -9,10 +9,11 @@ import SuggestionsWrapper from '../SuggestionsWrapper'
 interface SuggestionsProps {
   data: StepWithVariables[]
   onSuggestionClick: (variable: Variable) => void
+  noVariablesMessage?: string
 }
 
 function Suggestions(props: SuggestionsProps) {
-  const { data, onSuggestionClick = () => null } = props
+  const { data, onSuggestionClick = () => null, noVariablesMessage } = props
   const [current, setCurrent] = useState<number>(0)
 
   const isEmpty = data.reduce(
@@ -23,7 +24,8 @@ function Suggestions(props: SuggestionsProps) {
   if (isEmpty) {
     return (
       <Text p={4} opacity={0.5} textStyle="body-1" color="base.content.medium">
-        No variables available - complete earlier steps to use them here
+        {noVariablesMessage ??
+          'No variables available - complete earlier steps to use them here'}
       </Text>
     )
   }

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

@@ -99,6 +99,7 @@ interface EditorProps {
   parentType?: string
   autoFocus?: boolean
   singleVariableSelection?: boolean
+  noVariablesMessage?: string
 }
 const Editor = ({
   onChange,
@@ -112,6 +113,7 @@ const Editor = ({
   parentType,
   singleVariableSelection,
   autoFocus = false,
+  noVariablesMessage,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
   const { allApps } = useContext(EditorContext)
@@ -319,6 +321,7 @@ const Editor = ({
                 <Suggestions
                   data={stepsWithVariables}
                   onSuggestionClick={(v) => editable && handleVariableClick(v)}
+                  noVariablesMessage={noVariablesMessage}
                 />
               </PopoverContent>
             </Portal>
@@ -344,6 +347,7 @@ interface RichTextEditorProps {
   parentType?: string
   autoFocus?: boolean
   singleVariableSelection?: boolean
+  noVariablesMessage?: string
 }
 const RichTextEditor = ({
   required,
@@ -360,6 +364,7 @@ const RichTextEditor = ({
   parentType,
   autoFocus,
   singleVariableSelection,
+  noVariablesMessage,
 }: RichTextEditorProps) => {
   const { readOnly } = useContext(EditorContext)
   const { control, getValues } = useFormContext()
@@ -407,6 +412,7 @@ const RichTextEditor = ({
             parentType={parentType}
             autoFocus={shouldAutoFocus}
             singleVariableSelection={singleVariableSelection}
+            noVariablesMessage={noVariablesMessage}
           />
         )}
       />

packages/frontend/src/graphql/queries/get-apps.ts

@@ -195,6 +195,7 @@ export const GET_APPS = gql`
             customStyle
             tooltipText
             value
+            noVariablesMessage
             options {
               label
               description

packages/types/index.d.ts

@@ -318,6 +318,9 @@ export interface IBaseField {
    * other array elements).
    */
   hiddenIf?: IFieldVisibilityCondition
+
+  // message to show when no variables are available
+  noVariablesMessage?: string
 }
 
 export type DropdownAddNewType = 'modal' | 'inline'