wip

proofzero · Jun 7, 2023 · fbd4bf2 · fbd4bf2
1 parent dfeed93
commit fbd4bf2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 15 deletions.
diff --git a/apps/console/app/routes/apps/$clientId/auth.tsx b/apps/console/app/routes/apps/$clientId/auth.tsx
@@ -14,7 +14,7 @@ import {
 } from '@remix-run/react'
 import createStarbaseClient from '@proofzero/platform-clients/starbase'
 import { requireJWT } from '~/utilities/session.server'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { z } from 'zod'
 import { RollType } from '~/types'
 import { getAuthzHeaderConditionallyFromToken } from '@proofzero/utils'
@@ -242,6 +242,33 @@ export default function AppDetailIndexPage() {
   const { appContactAddress, paymaster } = outletContextData
   const { scopeMeta }: { scopeMeta: ScopeMeta } = useLoaderData()
 
+  const ref = useRef(null)
+  const [multiselectComponentWidth, setMultiselectComponentWidth] = useState(0)
+
+  useEffect(() => {
+    if (!ref || !ref.current) {
+      return
+    }
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+    const resizeObserver = new ResizeObserver(() => {
+      if (ref?.current) {
+        if (ref.current.offsetWidth !== multiselectComponentWidth) {
+          setMultiselectComponentWidth(ref.current.offsetWidth)
+        }
+      }
+    })
+
+    resizeObserver.observe(ref.current)
+
+    // if useEffect returns a function, it is called right before the
+    // component unmounts, so it is the right place to stop observing
+    // the div
+    return function cleanup() {
+      resizeObserver.disconnect()
+    }
+  }, [ref.current])
+
   const [isFormChanged, setIsFormChanged] = useState(false)
   const [isImgUploading, setIsImgUploading] = useState(false)
   const [rollKeyModalOpen, setRollKeyModalOpen] = useState(false)
@@ -435,13 +462,14 @@ export default function AppDetailIndexPage() {
                     <div className="sm:mb-[1.755rem]" />
                   </div>
 
-                  <div className="flex-1 lg:max-w-[50vw] max-w-full">
+                  <div ref={ref} className="flex-1">
                     <MultiSelect
                       label="Allowed scope*"
                       disabled={false}
                       onChange={() => {
                         setIsFormChanged(true)
                       }}
+                      width={multiselectComponentWidth}
                       learnMore="https://docs.rollup.id/reference/scopes"
                       fieldName="scopes"
                       items={Object.entries(scopeMeta).map(([key, value]) => {
@@ -467,7 +495,9 @@ export default function AppDetailIndexPage() {
                           experimental: value.experimental,
                         }
                       })}
-                      preselectedItems={appDetails.app.scopes?.map((scope) => {
+                      preselectedItems={(
+                        appDetails.app.scopes as Array<string>
+                      ).map((scope) => {
                         const meta = scopeMeta[scope]
                         return {
                           id: scope,

diff --git a/packages/design-system/src/atoms/form/MultiSelect.tsx b/packages/design-system/src/atoms/form/MultiSelect.tsx
@@ -26,7 +26,7 @@ import { ExperimentalFeaturePill } from '../pills/ExperimentalFeaturePill'
 type SelectItem = {
   id: string
   val: string
-  desc: string
+  desc?: string
   disabled?: boolean
   section?: string
   experimental?: boolean
@@ -35,6 +35,7 @@ export type MultiSelectProps = {
   label: string
   fieldName: string
   items: SelectItem[]
+  width: number
   preselectedItems?: SelectItem[]
   disabled?: boolean
   onChange?: () => void
@@ -108,10 +109,10 @@ const computeItemsToDisplay = (selectedItems, width) => {
     .forEach((item) => {
       if (
         // additional item + items left to display
-        artificialWidth + item.val.length * 10.5 + 10 + 40 <
+        artificialWidth + item.val.length * 10.5 + 10 + 42 <
         width
       ) {
-        artificialWidth += item.val.length * 10.5 + 10
+        artificialWidth += item.val.length * 10.5 + 42
         items.push(item)
       } else {
         itemsLeft += 1
@@ -135,20 +136,16 @@ export function MultiSelect({
   disabled = false,
   preselectedItems = [],
   onChange,
+  width,
   learnMore,
 }: MultiSelectProps) {
   const [query, setQuery] = useState('')
-  const [width, setWidth] = useState(0)
   const ref = useRef(null)
   const [selectedItems, setSelectedItems] = useState(preselectedItems)
   const [itemsToDisplay, setItemsToDisplay] = useState(() => {
     return computeItemsToDisplay(preselectedItems, width)
   })
 
-  useEffect(() => {
-    setWidth(ref.current.clientWidth)
-  }, [ref])
-
   useEffect(() => {
     const items = computeItemsToDisplay(selectedItems, width)
     setItemsToDisplay(items)
@@ -226,7 +223,7 @@ export function MultiSelect({
                             <div
                               className="bg-indigo-50 text-gray-800 px-2
                             py-[3px] m-1 rounded-md border border-indigo-300
-                            min-w-max z-998 min-w-max flex flex-row 
+                            z-998 flex flex-row 
                             items-center justify-start gap-x-1"
                             >
                               +
@@ -237,16 +234,18 @@ export function MultiSelect({
                           ${
                             +item.val > 1 ? '-m-6' : 'm-1'
                           } rounded-md border border-indigo-300
-                          min-w-max z-998 min-w-max flex flex-row items-center
+                          z-998 flex flex-row items-center
                           justify-start gap-x-1`}
                           >
                             +{item.val}
                           </div>
                         </div>
                       ) : (
                         <div
-                          className="bg-indigo-50 text-gray-800 px-1 py-[3px] m-1 rounded-md border border-indigo-300
-                     min-w-max z-998 min-w-max flex flex-row items-center justify-start gap-x-1"
+                          className="bg-indigo-50 text-gray-800 px-1
+                              py-[3px] m-1 rounded-md border 
+                              z-998 flex flex-row items-center
+                              justify-start gap-x-1 border-indigo-300"
                           onClick={(event) => {
                             event.stopPropagation()
                             event.preventDefault()