fix: variables not clickable in dialog in if-then branch (#784)

## Problem

1. SuggestionsPopper in Menubar dialog closes pre-emptively on click.
This happens when RichTextEditors are rendered within a If-Then branch
modal.
2. SuggestionsPopper in RichTextEditor does not reappear when the
Menubar dialog closes.
3. Hyperlinks clicked in RichTextEditor are not substituted with test
values resulting in links such as
https://example.com/{{step.1.123123.answer}}

## Solution

1. To prevent z-index issues, migrate the dialog over to Chakra library
to ensure consistency.
2. Remove onFocus handler with improperly keeps the SuggestionsPopper
open
3. Prevent links from being clicked directly. Instead allow users to
test their links in the Set Link Dialog
<img width="687" alt="image"
src="https://github.com/user-attachments/assets/0f291a45-dbc5-4fcb-a446-000c49942f53">

Author: pregnantboy

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

@@ -32,14 +32,3 @@
     background-color: #303030;
   }
 }
-
-.menubar-dialog {
-  .MuiDialog-container {
-    // so that the variable drop down will have enough space even in small screen
-    // to show "See all"
-    align-items: flex-start;
-  }
-  .MuiDialogContentText-root .MuiButton-root {
-    margin-top: 16px;
-  }
-}

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

@@ -1,6 +1,6 @@
 import './MenuBar.scss'
 
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { LuHeading1, LuHeading2, LuHeading3, LuHeading4 } from 'react-icons/lu'
 import {
   RiArrowGoBackLine,
@@ -20,18 +20,25 @@ import {
   RiTableLine,
   RiUnderline,
 } from 'react-icons/ri'
-import { LoadingButton } from '@mui/lab'
 import {
-  Dialog,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@mui/material'
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Box,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { Button, Link } from '@opengovsg/design-system-react'
 import { Editor } from '@tiptap/react'
 import { parse } from 'node-html-parser'
 
 import Form from '@/components/Form'
+import { makeExternalLink } from '@/helpers/urls'
 
+import { simpleSubstitute, type VariableInfoMap } from './utils'
 import { BareEditor } from '.'
 
 enum MenuLabels {
@@ -221,76 +228,98 @@ const menuButtons = [
   },
 ]
 
+const dialogPlaceholders: Partial<Record<MenuLabels, string>> = {
+  [MenuLabels.LinkSet]: 'Enter a full URL with http prefix',
+  [MenuLabels.ImageAdd]:
+    'Enter direct image link (e.g. https://file.go.gov.sg/clipplumber.png)',
+}
+
 interface MenuBarProps {
   editor: Editor | null
+  variableMap: VariableInfoMap
 }
-export const MenuBar = ({ editor }: MenuBarProps) => {
-  const [showValueDialog, setShowValueDialog] = useState(false)
+
+export const MenuBar = ({ editor, variableMap }: MenuBarProps) => {
+  const {
+    isOpen: isDialogOpen,
+    onClose,
+    onOpen: onDialogOpen,
+  } = useDisclosure()
+  const cancelRef = useRef(null)
   const [dialogValue, setDialogValue] = useState('')
   const [dialogLabel, setDialogLabel] = useState<MenuLabels | null>(null)
-  const onClickOverrides: { [key: string]: () => void } = {
-    [MenuLabels.LinkSet]: useCallback(() => {
-      if (!editor) {
-        return
-      }
-      const previousUrl = editor.getAttributes('link').href
-      setDialogLabel(MenuLabels.LinkSet)
-      setDialogValue(previousUrl)
-      setShowValueDialog(true)
-    }, [editor]),
-    [MenuLabels.ImageAdd]: useCallback(() => {
-      if (!editor) {
-        return
-      }
-      setDialogLabel(MenuLabels.ImageAdd)
-      setDialogValue('')
-      setShowValueDialog(true)
-    }, [editor]),
-  }
-  const dialogOnSubmits: { [key: string]: () => void } = {
-    [MenuLabels.LinkSet]: useCallback(() => {
-      if (!editor) {
-        return
-      }
-      const url = dialogValue
-      // cancelled
-      if (url === null) {
-        return
-      }
 
-      // empty
-      if (url === '') {
-        editor.chain().focus().extendMarkRange('link').unsetLink().run()
+  const onDialogClose = useCallback(() => {
+    setDialogLabel(null)
+    setDialogValue('')
+    onClose()
+  }, [onClose])
 
-        return
-      }
+  const onClickOverrides: Partial<Record<MenuLabels, () => void>> = useMemo(
+    () => ({
+      [MenuLabels.LinkSet]: () => {
+        if (!editor) {
+          return
+        }
+        const previousUrl = editor.getAttributes('link').href
+        setDialogLabel(MenuLabels.LinkSet)
+        setDialogValue(previousUrl)
+        onDialogOpen()
+      },
+      [MenuLabels.ImageAdd]: () => {
+        if (!editor) {
+          return
+        }
+        setDialogLabel(MenuLabels.ImageAdd)
+        setDialogValue('')
+        onDialogOpen()
+      },
+    }),
+    [editor, onDialogOpen],
+  )
+
+  const dialogOnSubmits: Partial<Record<MenuLabels, () => void>> = useMemo(
+    () => ({
+      [MenuLabels.LinkSet]: () => {
+        if (!editor) {
+          return
+        }
+        const url = dialogValue
+        // cancelled
+        if (url === null) {
+          return
+        }
+
+        // empty
+        if (url === '') {
+          editor.chain().focus().extendMarkRange('link').unsetLink().run()
+          return
+        }
+
+        // update link
+        editor
+          .chain()
+          .focus()
+          .extendMarkRange('link')
+          .setLink({ href: url })
+          .run()
+        onDialogClose()
+      },
+      [MenuLabels.ImageAdd]: () => {
+        if (!editor) {
+          return
+        }
+        const url = dialogValue
+        if (url === null) {
+          return
+        }
+        editor.chain().focus().setImage({ src: url }).run()
+        onDialogClose()
+      },
+    }),
+    [editor, dialogValue, onDialogClose],
+  )
 
-      // update link
-      editor
-        .chain()
-        .focus()
-        .extendMarkRange('link')
-        .setLink({ href: url })
-        .run()
-      setShowValueDialog(false)
-    }, [editor, dialogValue, setShowValueDialog]),
-    [MenuLabels.ImageAdd]: useCallback(() => {
-      if (!editor) {
-        return
-      }
-      const url = dialogValue
-      if (url === null) {
-        return
-      }
-      editor.chain().focus().setImage({ src: url }).run()
-      setShowValueDialog(false)
-    }, [editor, dialogValue]),
-  }
-  const dialogPlaceholders: { [key: string]: string } = {
-    [MenuLabels.LinkSet]: 'Enter a full URL with http prefix',
-    [MenuLabels.ImageAdd]:
-      'Enter direct image link (e.g. https://file.go.gov.sg/clipplumber.png)',
-  }
   if (!editor) {
     return null
   }
@@ -316,8 +345,9 @@ export const MenuBar = ({ editor }: MenuBarProps) => {
               }}
               className={`menu-item${isActive?.(editor) ? ' is-active' : ''}`}
               onClick={() => {
-                if (onClickOverrides && onClickOverrides[label]) {
-                  onClickOverrides[label]()
+                const clickOverride = onClickOverrides[label]
+                if (clickOverride) {
+                  clickOverride()
                   return
                 }
                 onClick(editor)
@@ -328,25 +358,20 @@ export const MenuBar = ({ editor }: MenuBarProps) => {
           )
         })}
       </div>
-      <Dialog
-        open={showValueDialog}
-        className="menubar-dialog"
-        onClose={() => setShowValueDialog(false)}
-        sx={{ alignItems: 'flex-start', overflow: 'scroll' }}
-        PaperProps={{
-          // so that the variable selector float can overlay
-          sx: { display: 'inline-table' },
-        }}
-      >
-        <DialogTitle>{dialogLabel}</DialogTitle>
-        <DialogContent>
-          <DialogContentText
-            tabIndex={-1}
-            component="div"
-            className="menubar-dialog-content"
-          >
-            {dialogLabel && (
-              <Form onSubmit={() => dialogOnSubmits[dialogLabel]()}>
+      {isDialogOpen && dialogLabel && (
+        <AlertDialog
+          leastDestructiveRef={cancelRef}
+          motionPreset="none"
+          returnFocusOnClose={true}
+          onClose={onDialogClose}
+          isOpen={true}
+        >
+          <AlertDialogOverlay />
+          <Form onSubmit={() => dialogOnSubmits[dialogLabel]?.()}>
+            <AlertDialogContent>
+              <AlertDialogHeader>{dialogLabel}</AlertDialogHeader>
+              <AlertDialogCloseButton />
+              <AlertDialogBody ref={cancelRef}>
                 <BareEditor
                   // val is in HTML, need to parse back to plain text
                   onChange={(val) => setDialogValue(parse(val).textContent)}
@@ -355,19 +380,33 @@ export const MenuBar = ({ editor }: MenuBarProps) => {
                   variablesEnabled
                   placeholder={dialogPlaceholders[dialogLabel]}
                 />
-                <LoadingButton
-                  type="submit"
-                  variant="contained"
-                  color="primary"
-                  sx={{ boxShadow: 2 }}
-                >
-                  Submit
-                </LoadingButton>
-              </Form>
-            )}
-          </DialogContentText>
-        </DialogContent>
-      </Dialog>
+                <Box p={2}>
+                  <Link
+                    isExternal
+                    referrerPolicy="no-referrer"
+                    isDisabled={!dialogValue}
+                    target="_blank"
+                    href={
+                      dialogValue
+                        ? makeExternalLink(
+                            simpleSubstitute(dialogValue, variableMap),
+                          )
+                        : undefined
+                    }
+                  >
+                    Open link
+                  </Link>
+                </Box>
+              </AlertDialogBody>
+              <AlertDialogFooter>
+                <Button colorScheme="primary" type="submit">
+                  Done
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </Form>
+        </AlertDialog>
+      )}
     </>
   )
 }

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

@@ -7,7 +7,8 @@ const PLACEHOLDER_TEMPLATE_STEP_ID = '00000000-0000-0000-0000-000000000000'
 
 export const VariableBadge = ({ node }: { node: Node }) => {
   // this happens when there is no value mapped properly
-  const isEmpty = node.attrs.value === ''
+  const isEmpty = node.attrs.value === '' || node.attrs.value == null
+  const value = String(node.attrs.value)
   const isTemplate = String(node.attrs.id).includes(
     PLACEHOLDER_TEMPLATE_STEP_ID,
   )
@@ -42,9 +43,9 @@ export const VariableBadge = ({ node }: { node: Node }) => {
           >
             {node.attrs.label}
           </Text>
-          {node.attrs.value && (
+          {!isEmpty && (
             <Text isTruncated maxW="50ch" color="base.content.medium">
-              {node.attrs.value}
+              {value}
             </Text>
           )}
         </Badge>

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

@@ -53,6 +53,7 @@ const RICH_TEXT_EXTENSIONS = [
   }),
   Link.configure({
     HTMLAttributes: { rel: null, target: '_blank' },
+    openOnClick: false,
   }),
   Underline,
   Table.configure({
@@ -207,6 +208,7 @@ const Editor = ({
       matchWidth={true}
       isLazy
       lazyBehavior="unmount"
+      onClose={closeSuggestions}
       isOpen={isSuggestionsOpen && variablesEnabled}
     >
       <div
@@ -218,14 +220,12 @@ const Editor = ({
           if (e.currentTarget.contains(e.relatedTarget)) {
             return
           }
-
           closeSuggestions()
         }}
-        onFocus={openSuggestions}
       >
         <PopoverTrigger>
           <Box>
-            {isRich && <MenuBar editor={editor} />}
+            {isRich && <MenuBar editor={editor} variableMap={varInfo} />}
             <EditorContent className="editor__content" editor={editor} />
             <PopoverContent
               w="100%"

packages/frontend/src/components/RichTextEditor/utils.ts

@@ -12,6 +12,20 @@ export type VariableInfoMap = Map<
 
 const VARIABLE_REGEX =
   /({{step\.[\da-f]{8}-(?:[\da-f]{4}-){3}[\da-f]{12}(?:\.[\da-zA-Z-_ ]+)+}})/
+const GLOBAL_VARIABLE_REGEX = new RegExp(VARIABLE_REGEX, 'g')
+/**
+ * Used to generate substituted string for hyperlink checking
+ */
+export function simpleSubstitute(
+  original: string,
+  varInfo: VariableInfoMap,
+): string {
+  return original.replaceAll(GLOBAL_VARIABLE_REGEX, (match) => {
+    const id = match.replace('{{', '').replace('}}', '')
+    const varInfoForNode = varInfo.get(`{{${id}}}`)
+    return varInfoForNode?.testRunValue || ''
+  })
+}
 
 export function genVariableInfoMap(
   stepsWithVariables: StepWithVariables[],