Fix Datalink inputs (#11376)

* Stop validating optional Data Link fields * Fix incorrect default value in Datalink input * Stop `Autocomplete` fields from opening automatically without `autoFocus` * Increase E2E test timeout * Fix E2E test race condition? * Fix error message for empty string input * Highlight active Datalink input * Show description when Datalink input is invalid * Fix Datalink input unfocusing when errors appear * Fix `enso://` path error text * Fix hover display of autocomplete items * Move `Autocomplete` tooltip above Dropdown container * Update Enso path validation * Update test file and Enso File datalink regex --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com> Bypassing failing tests.
2024-11-22 03:32:23 +03:00 · 2024-11-20 21:02:46 +10:00 · 2024-11-20 21:02:46 +10:00 · c72cef305d
commit c72cef305d
parent 7327df88c3
8 changed files with 141 additions and 97 deletions
--- a/app/common/src/text/english.json
+++ b/app/common/src/text/english.json
@ -804,8 +804,8 @@
  "arbitraryFieldInvalid": "This field is invalid",
  "arbitraryFieldTooShort": "This field is too short",
  "arbitraryFieldTooLong": "This field is too long",
-  "arbitraryFieldTooSmall": "The value is too small, the minimum is $0",
-  "arbitraryFieldTooLarge": "The value is too large, the maximum is $0",
+  "arbitraryFieldTooSmall": "The value must be greater than $0",
+  "arbitraryFieldTooLarge": "The value must be less than $0",
  "arbitraryFieldNotEqual": "This field is not equal to another field",
  "arbitraryFieldNotMatch": "This field does not match the pattern",
  "arbitraryFieldNotMatchAny": "This field does not match any of the patterns",
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
@ -85,7 +85,7 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
          errorMap: (issue) => {
            switch (issue.code) {
              case 'too_small':
-                if (issue.minimum === 0) {
+                if (issue.minimum === 1 && issue.type === 'string') {
                  return {
                    message: getText('arbitraryFieldRequired'),
                  }
--- a/app/gui/src/dashboard/components/AriaComponents/Text/Text.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Text/Text.tsx
@ -17,8 +17,11 @@ export interface TextProps
  readonly elementType?: keyof HTMLElementTagNameMap
  readonly lineClamp?: number
  readonly tooltip?: React.ReactElement | string | false | null
+  readonly tooltipTriggerRef?: React.RefObject<HTMLElement>
  readonly tooltipDisplay?: visualTooltip.VisualTooltipProps['display']
  readonly tooltipPlacement?: aria.Placement
+  readonly tooltipOffset?: number
+  readonly tooltipCrossOffset?: number
 }

 export const TEXT_STYLE = twv.tv({
@ -134,8 +137,11 @@ export const Text = forwardRef(function Text(props: TextProps, ref: React.Ref<HT
    balance,
    elementType: ElementType = 'span',
    tooltip: tooltipElement = children,
+    tooltipTriggerRef,
    tooltipDisplay = 'whenOverflowing',
    tooltipPlacement,
+    tooltipOffset,
+    tooltipCrossOffset,
    textSelection,
    disableLineHeightCompensation = false,
    ...ariaProps
@ -176,9 +182,18 @@ export const Text = forwardRef(function Text(props: TextProps, ref: React.Ref<HT
  const { tooltip, targetProps } = visualTooltip.useVisualTooltip({
    isDisabled: isTooltipDisabled(),
    targetRef: textElementRef,
+    triggerRef: tooltipTriggerRef,
    display: tooltipDisplay,
    children: tooltipElement,
-    ...(tooltipPlacement ? { overlayPositionProps: { placement: tooltipPlacement } } : {}),
+    ...(tooltipPlacement || tooltipOffset != null ?
+      {
+        overlayPositionProps: {
+          ...(tooltipPlacement && { placement: tooltipPlacement }),
+          ...(tooltipOffset != null && { offset: tooltipOffset }),
+          ...(tooltipCrossOffset != null && { crossOffset: tooltipCrossOffset }),
+        },
+      }
+    : {}),
  })

  return (
--- a/app/gui/src/dashboard/components/AriaComponents/Text/useVisualTooltip.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Text/useVisualTooltip.tsx
@ -18,10 +18,11 @@ export interface VisualTooltipProps
  readonly children: React.ReactNode
  readonly className?: string
  readonly targetRef: React.RefObject<HTMLElement>
+  readonly triggerRef?: React.RefObject<HTMLElement> | undefined
  readonly isDisabled?: boolean
  readonly overlayPositionProps?: Pick<
    aria.AriaPositionProps,
-    'containerPadding' | 'offset' | 'placement'
+    'containerPadding' | 'crossOffset' | 'offset' | 'placement'
  >
  /**
   * Determines when the tooltip should be displayed.
@ -56,6 +57,7 @@ export function useVisualTooltip(props: VisualTooltipProps): VisualTooltipReturn
  const {
    children,
    targetRef,
+    triggerRef = targetRef,
    className,
    isDisabled = false,
    overlayPositionProps = {},
@ -70,6 +72,7 @@ export function useVisualTooltip(props: VisualTooltipProps): VisualTooltipReturn
  const {
    containerPadding = 0,
    offset = DEFAULT_OFFSET,
+    crossOffset = 0,
    placement = 'bottom',
  } = overlayPositionProps

@ -115,8 +118,9 @@ export function useVisualTooltip(props: VisualTooltipProps): VisualTooltipReturn
  const { overlayProps, updatePosition } = aria.useOverlayPosition({
    isOpen: state.isOpen,
    overlayRef: popoverRef,
-    targetRef,
+    targetRef: triggerRef,
    offset,
+    crossOffset,
    placement,
    containerPadding,
  })
--- a/app/gui/src/dashboard/components/Autocomplete.tsx
+++ b/app/gui/src/dashboard/components/Autocomplete.tsx
@ -1,6 +1,5 @@
 /** @file A select menu with a dropdown. */
 import {
-  useEffect,
  useMemo,
  useRef,
  useState,
@ -92,22 +91,15 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
  const valuesSet = useMemo(() => new Set(values), [values])
  const canEditText = setText != null && values.length === 0
-  // We are only interested in the initial value of `canEditText` in effects.
-  const canEditTextRef = useRef(canEditText)
  const isMultipleAndCustomValue = multiple === true && text != null
  const matchingItems = useMemo(
    () => (text == null ? items : items.filter((item) => matches(item, text))),
    [items, matches, text],
  )

-  useEffect(() => {
-    if (!canEditTextRef.current) {
-      setIsDropdownVisible(true)
-    }
-  }, [])
-
  const fallbackInputRef = useRef<HTMLFieldSetElement>(null)
  const inputRef = rawInputRef ?? fallbackInputRef
+  const containerRef = useRef<HTMLDivElement>(null)

  // This type is a little too wide but it is unavoidable.
  /** Set values, while also changing the input text. */
@ -184,6 +176,7 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
  return (
    <div className={twJoin('relative isolate h-6 w-full', isDropdownVisible && 'z-1')}>
      <div
+        ref={containerRef}
        onKeyDown={onKeyDown}
        className={twMerge(
          'absolute w-full grow transition-colors',
@ -259,7 +252,7 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
              <div
                key={itemToKey(item)}
                className={twMerge(
-                  'text relative cursor-pointer whitespace-nowrap px-input-x last:rounded-b-xl hover:bg-hover-bg',
+                  'text relative min-w-max cursor-pointer whitespace-nowrap rounded-full px-input-x last:rounded-b-xl hover:bg-hover-bg',
                  valuesSet.has(item) && 'bg-hover-bg',
                  index === selectedIndex && 'bg-black/5',
                )}
@ -271,7 +264,12 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
                  toggleValue(item)
                }}
              >
-                <Text truncate="1" className="w-full" tooltipPlacement="left">
+                <Text
+                  truncate="1"
+                  className="w-full"
+                  tooltipPlacement="top"
+                  tooltipTriggerRef={containerRef}
+                >
                  {children(item)}
                </Text>
              </div>
--- a/app/gui/src/dashboard/components/JSONSchemaInput.tsx
+++ b/app/gui/src/dashboard/components/JSONSchemaInput.tsx
@ -51,8 +51,13 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
    schema.format === 'enso-secret'
  const { data: secrets } = useBackendQuery(remoteBackend, 'listSecrets', [], { enabled: isSecret })
  const autocompleteItems = isSecret ? secrets?.map((secret) => secret.path) ?? null : null
-  const validityClassName =
-    isAbsent || getValidator(path)(value) ? 'border-primary/20' : 'border-red-700/60'
+  const isInvalid = !isAbsent && !getValidator(path)(value)
+  const validationErrorClassName =
+    isInvalid && 'border border-danger focus:border-danger focus:outline-danger'
+  const errors =
+    isInvalid && 'description' in schema && typeof schema.description === 'string' ?
+      [<Text className="px-2 text-danger">{schema.description}</Text>]
+    : []

  // NOTE: `enum` schemas omitted for now as they are not yet used.
  if ('const' in schema) {
@ -66,7 +71,13 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
          if ('format' in schema && schema.format === 'enso-secret') {
            const isValid = typeof value === 'string' && value !== ''
            children.push(
-              <div className={twMerge('w-full rounded-default border-0.5', validityClassName)}>
+              <div className="flex flex-col">
+                <div
+                  className={twMerge(
+                    'w-full rounded-default border-0.5 border-primary/20 outline-offset-2 transition-[border-color,outline] duration-200 focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
+                    validationErrorClassName,
+                  )}
+                >
                  <Autocomplete
                    items={autocompleteItems ?? []}
                    itemToKey={(item) => item}
@ -81,10 +92,13 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                  >
                    {(item) => item}
                  </Autocomplete>
+                </div>
+                {...errors}
              </div>,
            )
          } else {
            children.push(
+              <div className="flex flex-col">
                <FocusRing>
                  <Input
                    type="text"
@ -92,8 +106,8 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                    value={typeof value === 'string' ? value : ''}
                    size={1}
                    className={twMerge(
-                    'focus-child h-6 w-full grow rounded-input border-0.5 bg-transparent px-2 read-only:read-only',
-                    validityClassName,
+                      'focus-child h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
+                      validationErrorClassName,
                    )}
                    placeholder={getText('enterText')}
                    onChange={(event) => {
@ -101,13 +115,16 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                      onChange(newValue)
                    }}
                  />
-              </FocusRing>,
+                </FocusRing>
+                {...errors}
+              </div>,
            )
          }
          break
        }
        case 'number': {
          children.push(
+            <div className="flex flex-col">
              <FocusRing>
                <Input
                  type="number"
@ -115,8 +132,8 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                  value={typeof value === 'number' ? value : ''}
                  size={1}
                  className={twMerge(
-                  'focus-child h-6 w-full grow rounded-input border-0.5 bg-transparent px-2 read-only:read-only',
-                  validityClassName,
+                    'focus-child h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
+                    validationErrorClassName,
                  )}
                  placeholder={getText('enterNumber')}
                  onChange={(event) => {
@ -126,12 +143,15 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                    }
                  }}
                />
-            </FocusRing>,
+              </FocusRing>
+              {...errors}
+            </div>,
          )
          break
        }
        case 'integer': {
          children.push(
+            <div className="flex flex-col">
              <FocusRing>
                <Input
                  type="number"
@ -139,8 +159,8 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                  value={typeof value === 'number' ? value : ''}
                  size={1}
                  className={twMerge(
-                  'focus-child h-6 w-full grow rounded-input border-0.5 bg-transparent px-2 read-only:read-only',
-                  validityClassName,
+                    'focus-child h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
+                    validationErrorClassName,
                  )}
                  placeholder={getText('enterInteger')}
                  onChange={(event) => {
@ -148,18 +168,23 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                    onChange(newValue)
                  }}
                />
-            </FocusRing>,
+              </FocusRing>
+              {...errors}
+            </div>,
          )
          break
        }
        case 'boolean': {
          children.push(
+            <div className="flex flex-col">
              <Checkbox
                name="input"
                isReadOnly={readOnly}
                isSelected={typeof value === 'boolean' && value}
                onChange={onChange}
-            />,
+              />
+              {...errors}
+            </div>,
          )
          break
        }
@ -186,7 +211,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
              >
                {propertyDefinitions.map((definition) => {
                  const { key, schema: childSchema } = definition
-                  const isOptional = !requiredProperties.includes(key)
+                  const isOptional = !requiredProperties.includes(key) || isAbsent
                  const isPresent = !isAbsent && value != null && key in value
                  return constantValueOfSchema(defs, childSchema).length === 1 ?
                      null
@ -250,7 +275,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                                newValue = unsafeValue!
                              }
                              const fullObject =
-                                value ?? constantValueOfSchema(defs, childSchema, true)[0]
+                                value ?? constantValueOfSchema(defs, schema, true)[0]
                              onChange(
                                (
                                  typeof fullObject === 'object' &&
@ -346,6 +371,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
              path={selectedChildPath}
              getValidator={getValidator}
              noBorder={noChildBorder}
+              isAbsent={isAbsent}
              value={value}
              onChange={onChange}
            />
@ -364,6 +390,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
          path={`${path}/allOf/${i}`}
          getValidator={getValidator}
          noBorder={noChildBorder}
+          isAbsent={isAbsent}
          value={value}
          onChange={onChange}
        />
--- a/app/gui/src/dashboard/data/datalinkSchema.json
+++ b/app/gui/src/dashboard/data/datalinkSchema.json
@ -117,9 +117,9 @@
        "libraryName": { "const": "Standard.Base" },
        "path": {
          "title": "Path",
-          "description": "Must start with \"enso://<organization-name>/\".",
+          "description": "Must start with \"enso://Users/<username>/\" or \"enso://Teams/<team name>/\".",
          "type": "string",
-          "pattern": "^enso://.+/.*$",
+          "pattern": "^enso://(?:Users|Teams)/.*/.*$",
          "format": "enso-file"
        },
        "format": { "title": "Format", "$ref": "#/$defs/Format" }
--- a/test/Base_Tests/data/datalinks/example-enso-file.datalink
+++ b/test/Base_Tests/data/datalinks/example-enso-file.datalink
@ -1,5 +1,5 @@
 {
    "type": "Enso_File",
    "libraryName": "Standard.Base",
-    "path": "enso://PLACEHOLDER_ORG_NAME/PLACEHOLDER_PATH"
+    "path": "enso://Teams/PLACEHOLDER_TEAM_NAME/PLACEHOLDER_PATH"
 }