Merging with most recent develop and resolving clashes with #11419

CHANGELOG.md

@@ -9,12 +9,17 @@
 - [Copying and pasting in Table Editor Widget now works properly][11332]
 - [Fix invisible selection in Table Input Widget][11358]
 - [Enable cloud file browser in local projects][11383]
+- [Changed the way of adding new column in Table Input Widget][11388]. The
+  "virtual column" is replaced with an explicit (+) button.
+- [New dropdown-based component menu][11398].
 
 [11151]: https://github.com/enso-org/enso/pull/11151
 [11271]: https://github.com/enso-org/enso/pull/11271
 [11332]: https://github.com/enso-org/enso/pull/11332
 [11358]: https://github.com/enso-org/enso/pull/11358
 [11383]: https://github.com/enso-org/enso/pull/11383
+[11388]: https://github.com/enso-org/enso/pull/11388
+[11398]: https://github.com/enso-org/enso/pull/11398
 
 #### Enso Standard Library
 
@@ -23,10 +28,12 @@
 - [The user may set description and labels of an Enso Cloud asset
   programmatically.][11255]
 - [DB_Table may be saved as a Data Link.][11371]
+- [Support for dates before 1900 in Excel and signed AWS requests.][11373]
 
 [11235]: https://github.com/enso-org/enso/pull/11235
 [11255]: https://github.com/enso-org/enso/pull/11255
 [11371]: https://github.com/enso-org/enso/pull/11371
+[11373]: https://github.com/enso-org/enso/pull/11373
 
 #### Enso Language & Runtime
 

app/gui/e2e/project-view/componentBrowser.spec.ts

@@ -223,6 +223,7 @@ test('Editing existing nodes', async ({ page }) => {
 
   // Edit again, using "edit" button
   await locate.graphNodeIcon(node).click()
+  await node.getByTestId('more-button').click()
   await node.getByTestId('edit-button').click()
   await expect(locate.componentBrowser(page)).toBeVisible()
   await expect(input).toHaveValue(`Data.read ${ADDED_PATH}`)

app/gui/e2e/project-view/rightPanel.spec.ts

@@ -26,15 +26,16 @@ test('Doc panel focus (regression #10471)', async ({ page }) => {
   await page.keyboard.press(`${CONTROL_KEY}+D`)
   await page.keyboard.press(`${CONTROL_KEY}+\``)
   await expect(locate.rightDock(page)).toBeVisible()
-  await expect(locate.bottomDock(page)).toBeVisible()
+  const codeEditor = page.locator('.CodeEditor')
+  await expect(codeEditor).toBeVisible()
 
   // Focus code editor.
-  await locate.bottomDock(page).click()
+  await codeEditor.click()
 
   await page.evaluate(() => {
-    const codeEditor = (window as any).__codeEditorApi
-    const docStart = codeEditor.indexOf('The main method')
-    codeEditor.placeCursor(docStart + 8)
+    const codeEditorApi = (window as any).__codeEditorApi
+    const docStart = codeEditorApi.indexOf('The main method')
+    codeEditorApi.placeCursor(docStart + 8)
   })
   await page.keyboard.press('Space')
   await page.keyboard.press('T')

app/gui/e2e/project-view/tableVisualisation.spec.ts

@@ -58,6 +58,7 @@ test('Copy from Table Visualization', async ({ page, context }) => {
   const node = await actions.createTableNode(page)
   const widget = node.locator('.WidgetTableEditor')
   await expect(widget).toBeVisible()
+  await widget.getByRole('button', { name: 'Add new column' }).click()
   await widget.locator('.ag-cell', { hasNotText: /0/ }).first().click()
   await page.keyboard.press('Control+V')
   await expect(widget.locator('.ag-cell')).toHaveText([

app/gui/e2e/project-view/widgets.spec.ts

@@ -544,27 +544,32 @@ test('Table widget', async ({ page }) => {
   const node = await actions.createTableNode(page)
   const widget = node.locator('.WidgetTableEditor')
   await expect(widget).toBeVisible()
-  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'New Column'])
-  await expect(widget.locator('.ag-header-cell-text', { hasText: 'New Column' })).toHaveClass(
-    /(?<=^| )virtualColumn(?=$| )/,
-  )
-  // There are two cells, one with row number, second allowing creating first row and column
-  await expect(widget.locator('.ag-cell')).toHaveCount(2)
+  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#'])
+  await expect(widget.getByRole('button', { name: 'Add new column' })).toExist()
+  await expect(widget.locator('.ag-cell')).toHaveText(['0', ''])
+
+  // Create first column
+  await widget.getByRole('button', { name: 'Add new column' }).click()
+  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'Column #1'])
+  await expect(widget.locator('.ag-cell')).toHaveText(['0', '', ''])
 
   // Putting first value
-  await widget.locator('.ag-cell', { hasNotText: '0' }).click()
+  await widget.locator('.ag-cell', { hasNotText: '0' }).first().click()
   await page.keyboard.type('Value')
   await page.keyboard.press('Enter')
-  // There will be new blank column and new blank row allowing adding new columns and rows
-  // (so 4 cells in total)
-  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'Column #0', 'New Column'])
+  // There will be new blank row allowing adding new rows.
   await expect(widget.locator('.ag-cell')).toHaveText(['0', 'Value', '', '1', '', ''])
 
   // Renaming column
-  await widget.locator('.ag-header-cell-text', { hasText: 'Column #0' }).first().click()
+  await widget.locator('.ag-header-cell-text', { hasText: 'Column #1' }).first().click()
   await page.keyboard.type('Header')
   await page.keyboard.press('Enter')
-  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'Header', 'New Column'])
+  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'Header'])
+
+  // Adding next column
+  await widget.getByRole('button', { name: 'Add new column' }).click()
+  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'Header', 'Column #2'])
+  await expect(widget.locator('.ag-cell')).toHaveText(['0', 'Value', '', '', '1', '', '', ''])
 
   // Switching edit between cells and headers - check we will never edit two things at once.
   await expect(widget.locator('.ag-text-field-input')).toHaveCount(0)

app/gui/package.json

@@ -21,7 +21,8 @@
     "build": "vite build",
     "build-cloud": "cross-env CLOUD_BUILD=true corepack pnpm run build",
     "preview": "vite preview",
-    "lint": "eslint . --max-warnings=0",
+    "//": "max-warnings set to 41 to match the amount of warnings introduced by the new react compiler. Eventual goal is to remove all the warnings.",
+    "lint": "eslint . --max-warnings=41",
     "format": "prettier --version && prettier --write src/ && eslint . --fix",
     "dev:vite": "vite",
     "test": "corepack pnpm run /^^^^test:.*/",

app/gui/src/dashboard/App.tsx

@@ -519,13 +519,11 @@ function AppRouter(props: AppRouterProps) {
                     <LocalBackendPathSynchronizer />
                     <VersionChecker />
                     {routes}
-                    {detect.IS_DEV_MODE && (
-                      <suspense.Suspense>
-                        <errorBoundary.ErrorBoundary>
-                          <devtools.EnsoDevtools />
-                        </errorBoundary.ErrorBoundary>
-                      </suspense.Suspense>
-                    )}
+                    <suspense.Suspense>
+                      <errorBoundary.ErrorBoundary>
+                        <devtools.EnsoDevtools />
+                      </errorBoundary.ErrorBoundary>
+                    </suspense.Suspense>
                   </errorBoundary.ErrorBoundary>
                 </DriveProvider>
               </InputBindingsProvider>

app/gui/src/dashboard/components/AriaComponents/Alert/Alert.tsx

@@ -79,13 +79,13 @@ export const Alert = forwardRef(function Alert(
     fullWidth,
     icon,
     variants = ALERT_STYLES,
+    tabIndex: rawTabIndex,
+    role: rawRole,
     ...containerProps
   } = props
 
-  if (variant === 'error') {
-    containerProps.tabIndex = -1
-    containerProps.role = 'alert'
-  }
+  const tabIndex = variant === 'error' ? -1 : rawTabIndex
+  const role = variant === 'error' ? 'alert' : rawRole
 
   const classes = variants({
     variant,
@@ -95,7 +95,13 @@ export const Alert = forwardRef(function Alert(
   })
 
   return (
-    <div className={classes.base({ className })} ref={ref} {...containerProps}>
+    <div
+      className={classes.base({ className })}
+      ref={ref}
+      tabIndex={tabIndex}
+      role={role}
+      {...containerProps}
+    >
       {icon != null &&
         (() => {
           if (typeof icon === 'string') {
@@ -107,6 +113,7 @@ export const Alert = forwardRef(function Alert(
           }
           return <div className={classes.iconContainer()}>{icon}</div>
         })()}
+
       <div className={classes.children()}>{children}</div>
     </div>
   )

app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx

@@ -438,9 +438,10 @@ export const Button = forwardRef(function Button(
 
   const button = (
     <Tag
+      // @ts-expect-error ts errors are expected here because we are merging props with different types
+      ref={ref}
       // @ts-expect-error ts errors are expected here because we are merging props with different types
       {...aria.mergeProps<aria.ButtonProps>()(goodDefaults, ariaProps, focusChildProps, {
-        ref,
         isDisabled,
         // we use onPressEnd instead of onPress because for some reason react-aria doesn't trigger
         // onPress on EXTRA_CLICK_ZONE, but onPress{start,end} are triggered

app/gui/src/dashboard/components/AriaComponents/Checkbox/Checkbox.tsx

@@ -20,13 +20,7 @@ import type {
 } from 'react'
 import invariant from 'tiny-invariant'
 import { useStore } from 'zustand'
-import type {
-  FieldPath,
-  FieldStateProps,
-  FormInstance,
-  TSchema,
-  UseFormRegisterReturn,
-} from '../Form'
+import type { FieldPath, FieldStateProps, TSchema, UseFormRegisterReturn } from '../Form'
 import { Form } from '../Form'
 import { Text } from '../Text'
 import type { TestIdProps } from '../types'
@@ -138,8 +132,7 @@ export const Checkbox = forwardRef(function Checkbox<
 
   const { store, removeSelected, addSelected } = useCheckboxContext()
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks, no-restricted-syntax
-  const formInstance = (form ?? Form.useFormContext()) as unknown as FormInstance<Schema>
+  const formInstance = Form.useFormContext(form)
 
   const { isSelected, field, onChange, name } = useStore(store, (state) => {
     const { insideGroup } = state
@@ -199,7 +192,9 @@ export const Checkbox = forwardRef(function Checkbox<
 
   return (
     <AriaCheckbox
-      ref={mergeRefs(ref, field.ref)}
+      ref={(el) => {
+        mergeRefs(ref, field.ref)(el)
+      }}
       {...props}
       inputRef={useMergedRef(checkboxRef, (input) => {
         // Hack to remove the `data-testid` attribute from the input element

app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx

@@ -11,7 +11,7 @@ import { forwardRef } from '#/utilities/react'
 import type { VariantProps } from '#/utilities/tailwindVariants'
 import { tv } from '#/utilities/tailwindVariants'
 import type { CSSProperties, ForwardedRef, ReactElement } from 'react'
-import type { FieldVariantProps, FormInstance } from '../Form'
+import type { FieldVariantProps } from '../Form'
 import { Form, type FieldPath, type FieldProps, type FieldStateProps, type TSchema } from '../Form'
 import type { TestIdProps } from '../types'
 import { CheckboxGroupProvider } from './CheckboxContext'
@@ -58,8 +58,7 @@ export const CheckboxGroup = forwardRef(
       ...checkboxGroupProps
     } = props
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks,no-restricted-syntax
-    const formInstance = (form ?? Form.useFormContext()) as FormInstance<Schema>
+    const formInstance = Form.useFormContext(form)
 
     const styles = variants({ fullWidth, className })
     const testId = props['data-testid'] ?? props.testId

app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx

@@ -86,7 +86,7 @@ export function Popover(props: PopoverProps) {
   utlities.useInteractOutside({
     ref: dialogRef,
     id: dialogId,
-    onInteractOutside: closeRef.current,
+    onInteractOutside: () => closeRef.current?.(),
   })
 
   return (

app/gui/src/dashboard/components/AriaComponents/Form/components/FormProvider.tsx

@@ -39,6 +39,7 @@ export function useFormContext<Schema extends types.TSchema>(
   if (form != null && 'control' in form) {
     return form
   } else {
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const ctx = useContext(FormContext)
 
@@ -56,6 +57,7 @@ export function useOptionalFormContext<
   Schema extends types.TSchema,
 >(form?: Form): Form extends undefined ? FormInstance<Schema> | null : FormInstance<Schema> {
   try {
+    // eslint-disable-next-line react-compiler/react-compiler
     return useFormContext<Schema>(form)
   } catch {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts

@@ -137,7 +137,11 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
       return result
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // We need to disable the eslint rules here, because we call hooks conditionally
+    // but it's safe to do so, because we don't switch between the two types of arguments
+    // and if we do, we throw an error.
+    /* eslint-disable react-compiler/react-compiler */
+    /* eslint-disable react-hooks/rules-of-hooks */
     const formMutation = useMutation({
       // We use template literals to make the mutation key more readable in the devtools
       // This mutation exists only for debug purposes - React Query dev tools record the mutation,
@@ -184,10 +188,8 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,no-restricted-syntax,@typescript-eslint/no-unsafe-argument
     const formOnSubmit = formInstance.handleSubmit(formMutation.mutateAsync as any)
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { isOffline } = useOffline()
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useOfflineChange(
       (offline) => {
         if (offline) {
@@ -199,7 +201,6 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
       { isDisabled: canSubmitOffline },
     )
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const submit = useEventCallback(
       (event: React.FormEvent<HTMLFormElement> | null | undefined) => {
         event?.preventDefault()
@@ -218,7 +219,6 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
       },
     )
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const setFormError = useEventCallback((error: string) => {
       formInstance.setError('root.submit', { message: error })
     })
@@ -236,6 +236,8 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
 
     return form
   }
+  /* eslint-enable react-compiler/react-compiler */
+  /* eslint-enable react-hooks/rules-of-hooks */
 }
 
 /** Get the type of arguments passed to the useForm hook */

app/gui/src/dashboard/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx

@@ -169,7 +169,9 @@ export const Dropdown = forwardRef(function Dropdown<T>(
   return (
     <FocusRing placement="outset">
       <div
-        ref={mergeRefs(ref, rootRef)}
+        ref={(el) => {
+          mergeRefs(ref, rootRef)(el)
+        }}
         onMouseDown={() => {
           isSelfMouseDownRef.current = true
           // `isFocused` cannot be used as `isFocusWithin` is set to `false` immediately before

app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx

@@ -139,7 +139,9 @@ export const Input = forwardRef(function Input<
                 { className: classes.textArea(), type, name },
                 omit(fieldProps, 'isInvalid', 'isRequired', 'isDisabled', 'invalid'),
               )}
-              ref={mergeRefs(inputRef, privateInputRef, fieldProps.ref)}
+              ref={(el) => {
+                mergeRefs(inputRef, privateInputRef, fieldProps.ref)(el)
+              }}
             />
           </div>
 

app/gui/src/dashboard/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx

@@ -139,7 +139,9 @@ export const OTPInput = forwardRef(function OTPInput<
             },
           },
         )}
-        ref={mergeRefs(fieldProps.ref, inputRef, innerOtpInputRef)}
+        ref={(el) => {
+          mergeRefs(fieldProps.ref, inputRef, innerOtpInputRef)(el)
+        }}
         render={({ slots }) => {
           const sections = (() => {
             const items = []

app/gui/src/dashboard/components/AriaComponents/Radio/Radio.tsx

@@ -126,7 +126,9 @@ export const Radio = forwardRef(function Radio(
   return (
     <label
       {...aria.mergeProps<React.LabelHTMLAttributes<HTMLLabelElement>>()(hoverProps, labelProps)}
-      ref={mergeRefs.mergeRefs(labelRef, ref)}
+      ref={(el) => {
+        mergeRefs.mergeRefs(labelRef, ref)(el)
+      }}
       className={base()}
     >
       <input

app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx

@@ -38,7 +38,7 @@ export const RADIO_GROUP_STYLES = twv.tv({
 })
 
 /** A radio group component. */
-// eslint-disable-next-line no-restricted-syntax
+
 export const RadioGroup = forwardRef(function RadioGroup<
   Schema extends formComponent.TSchema,
   TFieldName extends formComponent.FieldPath<Schema>,
@@ -74,7 +74,9 @@ export const RadioGroup = forwardRef(function RadioGroup<
 
   return (
     <aria.RadioGroup
-      ref={mergeRefs.mergeRefs(ref, field.ref)}
+      ref={(el) => {
+        mergeRefs.mergeRefs(ref, field.ref)(el)
+      }}
       {...aria.mergeProps<aria.RadioGroupProps>()(omit(radioGroupProps, 'validate'), {
         name: field.name,
         value: field.value,

app/gui/src/dashboard/components/AriaComponents/Switch/Switch.tsx

@@ -120,7 +120,9 @@ export const Switch = forwardRef(function Switch<
       style={props.style}
     >
       <AriaSwitch
-        ref={mergeRefs(switchRef, fieldRef)}
+        ref={(el) => {
+          mergeRefs(switchRef, fieldRef)(el)
+        }}
         {...mergeProps<AriaSwitchProps>()(ariaSwitchProps, fieldProps, {
           defaultSelected: field.value,
           className: switchStyles(),