Dashboard UX improvements

app/dashboard/e2e/actions.ts

@@ -65,12 +65,12 @@ export function locateNewLabelModalColorButtons(page: test.Page) {
 
 /** Find a "name" input for an "upsert secret" modal (if any) on the current page. */
 export function locateSecretNameInput(page: test.Page) {
-  return locateUpsertSecretModal(page).getByPlaceholder('Enter the name of the secret')
+  return locateUpsertSecretModal(page).getByPlaceholder(TEXT.secretNamePlaceholder)
 }
 
 /** Find a "value" input for an "upsert secret" modal (if any) on the current page. */
 export function locateSecretValueInput(page: test.Page) {
-  return locateUpsertSecretModal(page).getByPlaceholder('Enter the value of the secret')
+  return locateUpsertSecretModal(page).getByPlaceholder(TEXT.secretValuePlaceholder)
 }
 
 /** Find a search bar input (if any) on the current page. */
@@ -100,16 +100,6 @@ export function locateSetUsernameButton(page: test.Locator | test.Page) {
   return page.getByRole('button', { name: 'Set Username' }).getByText('Set Username')
 }
 
-/** Find a "delete" button (if any) on the current page. */
-export function locateDeleteButton(page: test.Locator | test.Page) {
-  return page.getByRole('button', { name: 'Delete' }).getByText('Delete')
-}
-
-/** Find a button to delete something (if any) on the current page. */
-export function locateDeleteIcon(page: test.Locator | test.Page) {
-  return page.getByAltText('Delete')
-}
-
 /** Find a "create" button (if any) on the current page. */
 export function locateCreateButton(page: test.Locator | test.Page) {
   return page.getByRole('button', { name: 'Create' }).getByText('Create')

app/dashboard/e2e/actions/NewDataLinkModalActions.ts

@@ -1,6 +1,7 @@
 /** @file Actions for a "new Data Link" modal. */
 import type * as test from 'playwright/test'
 
+import { TEXT } from '../actions'
 import type * as baseActions from './BaseActions'
 import BaseActions from './BaseActions'
 import DrivePageActions from './DrivePageActions'
@@ -11,7 +12,7 @@ import DrivePageActions from './DrivePageActions'
 
 /** Locate the "new data link" modal. */
 function locateNewDataLinkModal(page: test.Page) {
-  return page.getByRole('heading').and(page.getByText('Create Datalink')).locator('..')
+  return page.getByRole('dialog').filter({ has: page.getByText('Create Datalink') })
 }
 
 // ===============================
@@ -30,7 +31,7 @@ export default class NewDataLinkModalActions extends BaseActions {
   /** Interact with the "name" input - for example, to set the name using `.fill("")`. */
   withNameInput(callback: baseActions.LocatorCallback) {
     return this.step('Interact with "name" input', async (page) => {
-      const locator = locateNewDataLinkModal(page).getByLabel('Name')
+      const locator = locateNewDataLinkModal(page).getByPlaceholder(TEXT.datalinkNamePlaceholder)
       await callback(locator)
     })
   }

app/dashboard/e2e/labelsPanel.spec.ts

@@ -1,51 +1,64 @@
 /** @file Test the labels sidebar panel. */
 import * as test from '@playwright/test'
 
-import * as actions from './actions'
+import {
+  locateCreateButton,
+  locateLabelsPanel,
+  locateLabelsPanelLabels,
+  locateModalBackground,
+  locateNewLabelButton,
+  locateNewLabelModal,
+  locateNewLabelModalColorButtons,
+  locateNewLabelModalNameInput,
+  mockAllAndLogin,
+  TEXT,
+} from './actions'
 
-test.test.beforeEach(({ page }) => actions.mockAllAndLogin({ page }))
+test.test.beforeEach(({ page }) => mockAllAndLogin({ page }))
 
 test.test('labels', async ({ page }) => {
   // Empty labels panel
-  await test.expect(actions.locateLabelsPanel(page)).toBeVisible()
+  await test.expect(locateLabelsPanel(page)).toBeVisible()
 
   // "Create label" modal
-  await actions.locateNewLabelButton(page).click()
-  await test.expect(actions.locateNewLabelModal(page)).toBeVisible()
+  await locateNewLabelButton(page).click()
+  await test.expect(locateNewLabelModal(page)).toBeVisible()
   await page.press('body', 'Escape')
-  await test.expect(actions.locateNewLabelModal(page)).not.toBeVisible()
-  await actions.locateNewLabelButton(page).click()
-  await actions.locateModalBackground(page).click()
-  await test.expect(actions.locateNewLabelModal(page)).not.toBeVisible()
-  await actions.locateNewLabelButton(page).click()
+  await test.expect(locateNewLabelModal(page)).not.toBeVisible()
+  await locateNewLabelButton(page).click()
+  await locateModalBackground(page).click()
+  await test.expect(locateNewLabelModal(page)).not.toBeVisible()
+  await locateNewLabelButton(page).click()
 
   // "Create label" modal with name set
-  await actions.locateNewLabelModalNameInput(page).fill('New Label')
-  await test.expect(actions.locateNewLabelModal(page)).toHaveText(/^New Label/)
+  await locateNewLabelModalNameInput(page).fill('New Label')
+  await test.expect(locateNewLabelModal(page)).toHaveText(/^New Label/)
 
   await page.press('body', 'Escape')
 
   // "Create label" modal with color set
   // The exact number is allowed to vary; but to click the fourth color, there must be at least
   // four colors.
-  await actions.locateNewLabelButton(page).click()
-  test.expect(await actions.locateNewLabelModalColorButtons(page).count()).toBeGreaterThanOrEqual(4)
+  await locateNewLabelButton(page).click()
+  test.expect(await locateNewLabelModalColorButtons(page).count()).toBeGreaterThanOrEqual(4)
   // `force: true` is required because the `label` needs to handle the click event, not the
   // `button`.
-  await actions.locateNewLabelModalColorButtons(page).nth(4).click({ force: true })
-  await test.expect(actions.locateNewLabelModal(page)).toBeVisible()
+  await locateNewLabelModalColorButtons(page).nth(4).click({ force: true })
+  await test.expect(locateNewLabelModal(page)).toBeVisible()
 
   // "Create label" modal with name and color set
-  await actions.locateNewLabelModalNameInput(page).fill('New Label')
-  await test.expect(actions.locateNewLabelModal(page)).toHaveText(/^New Label/)
+  await locateNewLabelModalNameInput(page).fill('New Label')
+  await test.expect(locateNewLabelModal(page)).toHaveText(/^New Label/)
 
   // Labels panel with one entry
-  await actions.locateCreateButton(actions.locateNewLabelModal(page)).click()
-  await test.expect(actions.locateLabelsPanel(page)).toBeVisible()
+  await locateCreateButton(locateNewLabelModal(page)).click()
+  await test.expect(locateLabelsPanel(page)).toBeVisible()
 
   // Empty labels panel again, after deleting the only entry
-  await actions.locateLabelsPanelLabels(page).first().hover()
-  await actions.locateDeleteIcon(actions.locateLabelsPanel(page)).first().click()
-  await actions.locateDeleteButton(page).click()
-  test.expect(await actions.locateLabelsPanelLabels(page).count()).toBeGreaterThanOrEqual(1)
+  await locateLabelsPanelLabels(page).first().hover()
+
+  const labelsPanel = locateLabelsPanel(page)
+  await labelsPanel.getByRole('button').and(labelsPanel.getByLabel(TEXT.delete)).click()
+  await page.getByRole('button', { name: 'Delete' }).getByText('Delete').click()
+  test.expect(await locateLabelsPanelLabels(page).count()).toBeGreaterThanOrEqual(1)
 })

app/dashboard/package.json

@@ -31,6 +31,7 @@
     "@aws-amplify/auth": "5.6.5",
     "@aws-amplify/core": "5.8.5",
     "@hookform/resolvers": "^3.4.0",
+    "@internationalized/date": "^3.5.5",
     "@monaco-editor/react": "4.6.0",
     "@sentry/react": "^7.74.0",
     "@stripe/react-stripe-js": "^2.7.1",
@@ -40,26 +41,26 @@
     "ajv": "^8.12.0",
     "clsx": "^2.1.1",
     "enso-common": "workspace:*",
+    "framer-motion": "11.3.0",
     "is-network-error": "^1.0.1",
     "monaco-editor": "0.48.0",
     "react": "^18.3.1",
-    "react-aria": "^3.33.0",
-    "react-aria-components": "^1.2.0",
+    "react-aria": "^3.34.3",
+    "react-aria-components": "^1.3.3",
     "react-dom": "^18.3.1",
     "react-error-boundary": "4.0.13",
     "react-hook-form": "^7.51.4",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1",
-    "react-stately": "^3.31.0",
+    "react-stately": "^3.32.2",
     "react-toastify": "^9.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwind-variants": "0.2.1",
     "tiny-invariant": "^1.3.3",
     "ts-results": "^3.3.0",
     "validator": "^13.12.0",
     "zod": "^3.23.8",
-    "zustand": "^4.5.4",
-    "framer-motion": "11.3.0"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@fast-check/vitest": "^0.0.8",

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

@@ -1,14 +1,15 @@
 /** @file Alert component. */
-import * as React from 'react'
+import { type ForwardedRef, type HTMLAttributes, type PropsWithChildren } from 'react'
 
-import * as mergeRefs from '#/utilities/mergeRefs'
-import * as twv from '#/utilities/tailwindVariants'
+import { mergeRefs } from '#/utilities/mergeRefs'
+import { forwardRef } from '#/utilities/react'
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 
 // =================
 // === Constants ===
 // =================
 
-export const ALERT_STYLES = twv.tv({
+export const ALERT_STYLES = tv({
   base: 'flex flex-col items-stretch',
   variants: {
     fullWidth: { true: 'w-full' },
@@ -51,14 +52,14 @@ export const ALERT_STYLES = twv.tv({
 
 /** Props for an {@link Alert}. */
 export interface AlertProps
-  extends React.PropsWithChildren,
-    twv.VariantProps<typeof ALERT_STYLES>,
-    React.HTMLAttributes<HTMLDivElement> {}
+  extends PropsWithChildren,
+    VariantProps<typeof ALERT_STYLES>,
+    HTMLAttributes<HTMLDivElement> {}
 
 /** Alert component. */
-export const Alert = React.forwardRef(function Alert(
+export const Alert = forwardRef(function Alert(
   props: AlertProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const { children, className, variant, size, rounded, fullWidth, ...containerProps } = props
 
@@ -70,7 +71,7 @@ export const Alert = React.forwardRef(function Alert(
   return (
     <div
       className={ALERT_STYLES({ variant, size, className, rounded, fullWidth })}
-      ref={mergeRefs.mergeRefs(ref, (e) => {
+      ref={mergeRefs(ref, (e) => {
         if (variant === 'error') {
           e?.focus()
         }

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

@@ -10,7 +10,8 @@ import SvgMask from '#/components/SvgMask'
 
 import * as twv from '#/utilities/tailwindVariants'
 
-import * as text from '../Text'
+import { forwardRef } from '#/utilities/react'
+import { TEXT_STYLE } from '../Text'
 
 // ==============
 // === Button ===
@@ -106,7 +107,7 @@ export const BUTTON_STYLES = twv.tv({
       custom: { base: '', extraClickZone: '', icon: 'h-full' },
       hero: { base: 'px-8 py-4 text-lg font-bold', content: 'gap-[0.75em]' },
       large: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'semibold',
@@ -117,7 +118,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-6px]',
       },
       medium: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'semibold',
@@ -128,7 +129,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-8px]',
       },
       small: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'medium',
@@ -139,7 +140,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-10px]',
       },
       xsmall: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'medium',
@@ -151,7 +152,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-12px]',
       },
       xxsmall: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           className: 'flex px-[3px] pt-[0.5px] pb-[2.5px] leading-[16px]',
@@ -166,7 +167,7 @@ export const BUTTON_STYLES = twv.tv({
     },
     iconOnly: {
       true: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           disableLineHeightCompensation: true,
           className: 'border-0 outline-offset-[5px]',
         }),
@@ -202,6 +203,9 @@ export const BUTTON_STYLES = twv.tv({
       },
       ghost:
         'text-primary hover:text-primary/80 hover:bg-white focus-visible:text-primary/80 focus-visible:bg-white',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'ghost-fading':
+        'text-primary opacity-80 hover:opacity-100 hover:bg-white focus-visible:bg-white',
       submit: 'bg-invite text-white opacity-80 hover:opacity-100',
       outline: 'border-primary/20 text-primary hover:border-primary hover:bg-primary/5',
     },
@@ -280,7 +284,7 @@ export const BUTTON_STYLES = twv.tv({
 })
 
 /** A button allows a user to perform an action, with mouse, touch, and keyboard interactions. */
-export const Button = React.forwardRef(function Button(
+export const Button = forwardRef(function Button(
   props: ButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {