Merge branch 'isom-1653-global-search-backend' into feat/search-fe

apps/studio/public/assets/css/preview-tw.css

@@ -1766,6 +1766,10 @@ video {
   flex-shrink: 0;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grow {
   flex-grow: 1;
 }

apps/studio/src/components/PageEditor/LinkEditorModal.tsx

@@ -1,4 +1,4 @@
-import { useParams } from "next/navigation"
+import type { IconType } from "react-icons"
 import {
   Box,
   FormControl,
@@ -20,8 +20,12 @@ import {
 import { isEmpty } from "lodash"
 import { z } from "zod"
 
-import type { LinkTypeMapping } from "~/features/editing-experience/components/LinkEditor/constants"
+import type { LinkTypes } from "~/features/editing-experience/components/LinkEditor/constants"
 import { LinkHrefEditor } from "~/features/editing-experience/components/LinkEditor"
+import {
+  LinkEditorContextProvider,
+  useLinkEditor,
+} from "~/features/editing-experience/components/LinkEditor/LinkEditorContext"
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { useZodForm } from "~/lib/form"
 import { getReferenceLink, getResourceIdFromReferenceLink } from "~/utils/link"
@@ -33,6 +37,10 @@ const editSiteSchema = z.object({
   siteId: z.coerce.number(),
 })
 
+const linkSchema = z.object({
+  linkId: z.coerce.string().optional(),
+})
+
 interface PageLinkElementProps {
   value: string
   onChange: (value: string) => void
@@ -68,12 +76,10 @@ const PageLinkElement = ({ value, onChange }: PageLinkElementProps) => {
   )
 }
 
-interface LinkEditorModalContentProps {
-  linkText?: string
-  linkHref?: string
-  onSave: (linkText: string, linkHref: string) => void
-  linkTypes: LinkTypeMapping
-}
+type LinkEditorModalContentProps = Pick<
+  LinkEditorModalProps,
+  "linkText" | "linkHref" | "linkTypes" | "onSave"
+>
 
 const LinkEditorModalContent = ({
   linkText,
@@ -84,7 +90,6 @@ const LinkEditorModalContent = ({
   const {
     handleSubmit,
     setValue,
-    watch,
     register,
     formState: { errors },
   } = useZodForm({
@@ -99,7 +104,7 @@ const LinkEditorModalContent = ({
       linkText,
       linkHref,
     },
-    reValidateMode: "onBlur",
+    reValidateMode: "onChange",
   })
 
   const isEditingLink = !!linkText && !!linkHref
@@ -110,13 +115,12 @@ const LinkEditorModalContent = ({
     ({ linkText, linkHref }) => !!linkHref && onSave(linkText, linkHref),
   )
 
-  const { siteId } = useQueryParse(editSiteSchema)
   // TODO: This needs to be refactored urgently
   // This is a hacky way of seeing what to render
   // and ties the link editor to the url path.
   // we should instead just pass the component directly rather than using slots
 
-  const { linkId } = useParams()
+  const { linkId } = useQueryParse(linkSchema)
 
   return (
     <ModalContent>
@@ -153,33 +157,20 @@ const LinkEditorModalContent = ({
           )}
 
           <Box>
-            <LinkHrefEditor
+            <LinkEditorContextProvider
               linkTypes={linkTypes}
-              value={watch("linkHref") ?? ""}
-              onChange={(value) => setValue("linkHref", value)}
-              label="Link destination"
-              description="When this is clicked, open:"
-              isRequired
-              isInvalid={!!errors.linkHref}
-              pageLinkElement={
-                <PageLinkElement
-                  value={watch("linkHref") ?? ""}
-                  onChange={(value) => setValue("linkHref", value)}
-                />
-              }
-              fileLinkElement={
-                <FileAttachment
-                  siteId={siteId}
-                  setHref={(linkHref) => {
-                    setValue("linkHref", linkHref)
-                  }}
-                />
-              }
-            />
-
-            {errors.linkHref?.message && (
-              <FormErrorMessage>{errors.linkHref.message}</FormErrorMessage>
-            )}
+              linkHref={linkHref ?? ""}
+              onChange={(href) => setValue("linkHref", href)}
+              error={errors.linkHref?.message}
+            >
+              <ModalLinkEditor
+                onChange={(value) => setValue("linkHref", value)}
+              />
+
+              {errors.linkHref?.message && (
+                <FormErrorMessage>{errors.linkHref.message}</FormErrorMessage>
+              )}
+            </LinkEditorContextProvider>
           </Box>
         </ModalBody>
 
@@ -206,7 +197,13 @@ interface LinkEditorModalProps {
   onSave: (linkText: string, linkHref: string) => void
   isOpen: boolean
   onClose: () => void
-  linkTypes: LinkTypeMapping
+  linkTypes: Record<
+    string,
+    {
+      icon: IconType
+      label: Capitalize<LinkTypes>
+    }
+  >
 }
 export const LinkEditorModal = ({
   isOpen,
@@ -232,3 +229,34 @@ export const LinkEditorModal = ({
     )}
   </Modal>
 )
+
+const ModalLinkEditor = ({
+  onChange,
+}: {
+  onChange: (value: string) => void
+}) => {
+  const { error, curHref, setHref } = useLinkEditor()
+  const { siteId } = useQueryParse(editSiteSchema)
+  const handleChange = (value: string) => {
+    onChange(value)
+    setHref(value)
+  }
+
+  return (
+    <LinkHrefEditor
+      label="Link destination"
+      description="When this is clicked, open:"
+      isRequired
+      isInvalid={!!error}
+      pageLinkElement={
+        <PageLinkElement value={curHref} onChange={handleChange} />
+      }
+      fileLinkElement={
+        <FileAttachment
+          siteId={siteId}
+          setHref={(href) => handleChange(href ?? "")}
+        />
+      }
+    />
+  )
+}

apps/studio/src/components/PageEditor/MenuBar/AccordionMenuBar.tsx

@@ -72,22 +72,6 @@ export const AccordionMenuBar = ({ editor }: { editor: Editor }) => {
         action: () => editor.chain().focus().toggleStrike().run(),
         isActive: () => editor.isActive("strike"),
       },
-      {
-        type: "item",
-        icon: MdSuperscript,
-        title: "Superscript",
-        action: () =>
-          editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
-        isActive: () => editor.isActive("superscript"),
-      },
-      {
-        type: "item",
-        icon: MdSubscript,
-        title: "Subscript",
-        action: () =>
-          editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
-        isActive: () => editor.isActive("subscript"),
-      },
       {
         type: "divider",
       },
@@ -204,6 +188,28 @@ export const AccordionMenuBar = ({ editor }: { editor: Editor }) => {
           },
         ],
       },
+      // Lesser-used commands are kept inside the overflow items list
+      {
+        type: "overflow-list",
+        items: [
+          {
+            type: "item",
+            icon: MdSuperscript,
+            title: "Superscript",
+            action: () =>
+              editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
+            isActive: () => editor.isActive("superscript"),
+          },
+          {
+            type: "item",
+            icon: MdSubscript,
+            title: "Subscript",
+            action: () =>
+              editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
+            isActive: () => editor.isActive("subscript"),
+          },
+        ],
+      },
     ],
     [editor, onLinkModalOpen, onTableSettingsModalOpen],
   )

apps/studio/src/components/PageEditor/MenuBar/CalloutMenuBar.tsx

@@ -53,22 +53,6 @@ export const CalloutMenuBar = ({ editor }: { editor: Editor }) => {
         action: () => editor.chain().focus().toggleStrike().run(),
         isActive: () => editor.isActive("strike"),
       },
-      {
-        type: "item",
-        icon: MdSuperscript,
-        title: "Superscript",
-        action: () =>
-          editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
-        isActive: () => editor.isActive("superscript"),
-      },
-      {
-        type: "item",
-        icon: MdSubscript,
-        title: "Subscript",
-        action: () =>
-          editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
-        isActive: () => editor.isActive("subscript"),
-      },
       {
         type: "divider",
       },
@@ -104,6 +88,28 @@ export const CalloutMenuBar = ({ editor }: { editor: Editor }) => {
         action: onLinkModalOpen,
         isActive: () => editor.isActive("link"),
       },
+      // Lesser-used commands are kept inside the overflow items list
+      {
+        type: "overflow-list",
+        items: [
+          {
+            type: "item",
+            icon: MdSuperscript,
+            title: "Superscript",
+            action: () =>
+              editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
+            isActive: () => editor.isActive("superscript"),
+          },
+          {
+            type: "item",
+            icon: MdSubscript,
+            title: "Subscript",
+            action: () =>
+              editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
+            isActive: () => editor.isActive("subscript"),
+          },
+        ],
+      },
     ],
     [editor, onLinkModalOpen],
   )

apps/studio/src/components/PageEditor/MenuBar/MenubarItem/Factory.tsx

@@ -3,6 +3,7 @@ import { MenubarDetailedList } from "./DetailedList"
 import { MenubarDivider } from "./Divider"
 import { MenubarHorizontalList } from "./HorizontalList"
 import { MenubarItem } from "./Item"
+import { MenubarOverflowList } from "./OverflowList"
 import { MenubarVerticalList } from "./VerticalList"
 
 export const MenubarItemFactory = (
@@ -19,5 +20,10 @@ export const MenubarItemFactory = (
       return <MenubarDetailedList {...item} />
     case "item":
       return <MenubarItem {...item} />
+    case "overflow-list":
+      return <MenubarOverflowList {...item} />
+    default:
+      const _: never = item
+      return <></>
   }
 }

apps/studio/src/components/PageEditor/MenuBar/MenubarItem/OverflowList.tsx

@@ -0,0 +1,68 @@
+import {
+  HStack,
+  Icon,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from "@chakra-ui/react"
+import { IconButton } from "@opengovsg/design-system-react"
+import { BiDotsHorizontalRounded } from "react-icons/bi"
+
+import type { MenubarNestedItem } from "./types"
+import { MenuItem } from "../../MenuItem"
+
+export interface MenubarOverflowListProps {
+  type: "overflow-list"
+  items: MenubarNestedItem[]
+}
+
+export const MenubarOverflowList = ({
+  items,
+}: MenubarOverflowListProps): JSX.Element => {
+  return (
+    <Popover placement="bottom">
+      {({ isOpen }) => (
+        <>
+          <PopoverTrigger>
+            <IconButton
+              variant="clear"
+              colorScheme="neutral"
+              isActive={isOpen}
+              _active={{
+                bg: "interaction.muted.main.active",
+              }}
+              h="1.75rem"
+              w="1.75rem"
+              minH="1.75rem"
+              minW="1.75rem"
+              p="0.25rem"
+              aria-label="More options"
+            >
+              <Icon
+                as={BiDotsHorizontalRounded}
+                fontSize="1.25rem"
+                color="base.content.medium"
+              />
+            </IconButton>
+          </PopoverTrigger>
+          <PopoverContent w="fit-content">
+            <PopoverBody>
+              <HStack>
+                {items.map((subItem, index) => (
+                  <MenuItem
+                    key={index}
+                    icon={subItem.icon}
+                    title={subItem.title}
+                    action={subItem.action}
+                    isActive={subItem.isActive}
+                  />
+                ))}
+              </HStack>
+            </PopoverBody>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
+  )
+}

apps/studio/src/components/PageEditor/MenuBar/MenubarItem/types.ts

@@ -4,6 +4,7 @@ import type { MenubarDetailedListProps } from "./DetailedList"
 import type { MenubarDividerProps } from "./Divider"
 import type { MenubarHorizontalListProps } from "./HorizontalList"
 import type { MenubarItemProps } from "./Item"
+import type { MenubarOverflowListProps } from "./OverflowList"
 import type { MenubarVerticalListProps } from "./VerticalList"
 
 export interface MenubarNestedItem {
@@ -24,3 +25,4 @@ export type PossibleMenubarItemProps =
   | MenubarHorizontalListProps
   | MenubarDetailedListProps
   | MenubarItemProps
+  | MenubarOverflowListProps