Fix JsonSchema input sizing (#11097)

* Fix closing delete dialog

* FIx json schema input

* Fix input

* Remove test line

app/dashboard/src/components/Autocomplete.tsx

@@ -8,7 +8,7 @@ import Input from '#/components/styled/Input'
 
 import { Button, Text } from '#/components/AriaComponents'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
-import { twMerge } from 'tailwind-merge'
+import { twJoin, twMerge } from 'tailwind-merge'
 
 // =================
 // === Constants ===
@@ -100,16 +100,6 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
     }
   }, [])
 
-  React.useEffect(() => {
-    const onClick = () => {
-      setIsDropdownVisible(false)
-    }
-    document.addEventListener('click', onClick)
-    return () => {
-      document.removeEventListener('click', onClick)
-    }
-  }, [])
-
   const fallbackInputRef = React.useRef<HTMLInputElement>(null)
   const inputRef = rawInputRef ?? fallbackInputRef
 
@@ -186,7 +176,7 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
   }
 
   return (
-    <div className="relative h-6 w-full">
+    <div className={twJoin('relative isolate h-6 w-full', isDropdownVisible && 'z-1')}>
       <div
         onKeyDown={onKeyDown}
         className={twMerge(
@@ -223,7 +213,7 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
               />
             : <div
                 tabIndex={-1}
-                className="text grow cursor-pointer whitespace-nowrap bg-transparent px-button-x"
+                className="text w-full grow cursor-pointer overflow-auto whitespace-nowrap bg-transparent px-button-x scroll-hidden"
                 onClick={() => {
                   setIsDropdownVisible(true)
                 }}

app/dashboard/src/components/JSONSchemaInput.tsx

@@ -63,7 +63,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
             children.push(
               <div
                 className={twMerge(
-                  'w-60 rounded-default border-0.5',
+                  'w-full rounded-default border-0.5',
                   getValidator(path)(value) ? 'border-primary/20' : 'border-red-700/60',
                 )}
               >
@@ -115,7 +115,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                 value={typeof value === 'number' ? value : ''}
                 size={1}
                 className={twMerge(
-                  'focus-child text w-60 grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
+                  'focus-child text w-full grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
                   getValidator(path)(value) ? 'border-primary/20' : 'border-red-700/60',
                 )}
                 placeholder={getText('enterNumber')}
@@ -177,7 +177,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
           )
           if (constantValueOfSchema(defs, schema).length !== 1) {
             children.push(
-              <div className="grid items-center gap-json-schema rounded-default border-0.5 border-primary/20 p-json-schema-object-input">
+              <div className="grid auto-cols-[max-content_auto] items-center gap-json-schema rounded-default border-0.5 border-primary/20 p-json-schema-object-input">
                 {propertyDefinitions.map((definition) => {
                   const { key, schema: childSchema } = definition
                   const isOptional = !requiredProperties.includes(key)

app/dashboard/src/layouts/AssetProperties.tsx

@@ -253,6 +253,7 @@ export default function AssetProperties(props: AssetPropertiesProps) {
           </table>
         </div>
       )}
+
       {isDatalink && (
         <div className="pointer-events-auto flex flex-col items-start gap-side-panel-section">
           <aria.Heading

app/dashboard/src/modals/ConfirmDeleteModal.tsx

@@ -1,7 +1,8 @@
 /** @file Modal for confirming delete of any type of asset. */
 import * as z from 'zod'
 
-import { Button, ButtonGroup, Dialog, Form, Text } from '#/components/AriaComponents'
+import { ButtonGroup, Dialog, Form, Text } from '#/components/AriaComponents'
+import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
 
 // ==========================
@@ -21,23 +22,25 @@ export interface ConfirmDeleteModalProps {
 /** A modal for confirming the deletion of an asset. */
 export default function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
   const { defaultOpen, actionText, actionButtonLabel = 'Delete', doDelete } = props
+
+  const { unsetModal } = useSetModal()
   const { getText } = useText()
 
   return (
     <Dialog title={getText('areYouSure')} modalProps={defaultOpen == null ? {} : { defaultOpen }}>
-      {({ close }) => (
-        <Form schema={z.object({})} method="dialog" tabIndex={-1} onSubmit={doDelete}>
-          <Text className="relative">{getText('confirmPrompt', actionText)}</Text>
-          <ButtonGroup className="relative">
-            <Form.Submit variant="delete" className="relative">
-              {actionButtonLabel}
-            </Form.Submit>
-            <Button size="medium" variant="outline" autoFocus className="relative" onPress={close}>
-              {getText('cancel')}
-            </Button>
-          </ButtonGroup>
-        </Form>
-      )}
+      <Form schema={z.object({})} method="dialog" onSubmit={doDelete} onSubmitSuccess={unsetModal}>
+        <Text className="relative">{getText('confirmPrompt', actionText)}</Text>
+
+        <ButtonGroup>
+          <Form.Submit variant="delete" className="relative">
+            {actionButtonLabel}
+          </Form.Submit>
+
+          <Form.Submit formnovalidate variant="outline">
+            {getText('cancel')}
+          </Form.Submit>
+        </ButtonGroup>
+      </Form>
     </Dialog>
   )
 }

app/dashboard/src/modals/UpsertDatalinkModal.tsx

@@ -1,7 +1,5 @@
 /** @file A modal for creating a Datalink. */
-import * as z from 'zod'
-
-import { Button, ButtonGroup, Dialog, Form, Input } from '#/components/AriaComponents'
+import { ButtonGroup, Dialog, Form, Input } from '#/components/AriaComponents'
 import { DatalinkFormInput } from '#/components/dashboard/DatalinkInput'
 import SCHEMA from '#/data/datalinkSchema.json' with { type: 'json' }
 import { validateDatalink } from '#/data/datalinkValidator'
@@ -15,11 +13,6 @@ import { constantValueOfSchema } from '#/utilities/jsonSchema'
 const DEFS: Record<string, object> = SCHEMA.$defs
 const INITIAL_DATALINK_VALUE = constantValueOfSchema(DEFS, SCHEMA.$defs.DataLink, true)[0] ?? null
 
-/** Create the schema for this form. */
-function createUpsertDatalinkSchema() {
-  return z.object({ name: z.string().min(1), value: z.unknown().refine(validateDatalink) })
-}
-
 // ===========================
 // === UpsertDataLinkModal ===
 // ===========================
@@ -32,48 +25,40 @@ export interface UpsertDatalinkModalProps {
 /** A modal for creating a Datalink. */
 export default function UpsertDatalinkModal(props: UpsertDatalinkModalProps) {
   const { doCreate } = props
+
   const { getText } = useText()
 
   return (
-    <Dialog
-      fitContent
-      title={getText('createDatalink')}
-      className="min-w-max"
-      isDismissable={false}
-    >
-      {({ close }) => (
-        <Form
-          method="dialog"
-          schema={createUpsertDatalinkSchema()}
-          defaultValues={{ value: INITIAL_DATALINK_VALUE }}
-          className="min-w-max"
-          onSubmit={async ({ name, value }) => {
-            await doCreate(name, value)
-          }}
-        >
-          {({ form }) => (
-            <>
-              <Input
-                form={form}
-                name="name"
-                autoFocus
-                label={getText('name')}
-                placeholder={getText('datalinkNamePlaceholder')}
-              />
-              <div className="relative w-full">
-                <DatalinkFormInput form={form} name="value" dropdownTitle={getText('type')} />
-              </div>
-              <ButtonGroup className="relative">
-                <Form.Submit>{getText('create')}</Form.Submit>
-                <Button size="medium" variant="outline" onPress={close}>
-                  {getText('cancel')}
-                </Button>
-              </ButtonGroup>
-              <Form.FormError />
-            </>
-          )}
-        </Form>
-      )}
+    <Dialog size="xlarge" title={getText('createDatalink')} isDismissable={false}>
+      <Form
+        method="dialog"
+        schema={(z) =>
+          z.object({
+            name: z.string().min(1),
+            value: z.unknown().refine(validateDatalink),
+          })
+        }
+        defaultValues={{ value: INITIAL_DATALINK_VALUE }}
+        onSubmit={({ name, value }) => doCreate(name, value)}
+      >
+        <Input
+          name="name"
+          autoFocus
+          label={getText('name')}
+          placeholder={getText('datalinkNamePlaceholder')}
+        />
+
+        <div className="relative w-full">
+          <DatalinkFormInput name="value" dropdownTitle={getText('type')} />
+        </div>
+
+        <ButtonGroup>
+          <Form.Submit>{getText('create')}</Form.Submit>
+          <Form.Submit formnovalidate>{getText('cancel')}</Form.Submit>
+        </ButtonGroup>
+
+        <Form.FormError />
+      </Form>
     </Dialog>
   )
 }