enso-org · mergify · Jun 12, 2024 · May 8, 2024 · May 8, 2024 · May 8, 2024
@@ -50,8 +50,7 @@ const NOT_CONSTANT_CASE = `/^(?!${WHITELISTED_CONSTANTS}$|_?[A-Z][A-Z0-9]*(_[A-Z
 /** @type {{ selector: string; message: string; }[]} */
 const RESTRICTED_SYNTAXES = [
     {
-        selector:
-            ':matches(ImportDeclaration:has(ImportSpecifier), ExportDeclaration, ExportSpecifier)',
+        selector: ':matches(ImportDeclaration:has(ImportSpecifier))',
         message: 'No {} imports and exports',
     },
     {
@@ -214,6 +213,11 @@ const RESTRICTED_SYNTAXES = [
         )`,
         message: 'Use a `getText()` from `useText` instead of a literal string',
     },
+    {
+        selector: `JSXAttribute[name.name=/^(?:className)$/] TemplateLiteral`,
+        message:
+            'Use `tv` from `tailwind-variants` or `twMerge` from `tailwind-merge` instead of template strings for classes',
+    },
     {
         selector: 'JSXOpeningElement[name.name=button] > JSXIdentifier',
         message: 'Use `Button` or `UnstyledButton` instead of `button`',

@@ -36,7 +36,6 @@
     <script type="module" src="./src/entrypoint.ts" defer></script>
   </head>
   <body>
-    <div id="app"></div>
     <div id="enso-dashboard" class="enso-dashboard"></div>
     <div id="enso-chat" class="enso-chat"></div>
     <div id="enso-portal-root" class="enso-portal-root"></div>

@@ -167,9 +167,14 @@ export function locateLabelsPanelLabels(page: test.Page) {
   )
 }
 
-/** Find a "home" button (if any) on the current page. */
-export function locateHomeButton(page: test.Locator | test.Page) {
-  return page.getByRole('button', { name: 'Home' }).getByText('Home')
+/** Find a "cloud" category button (if any) on the current page. */
+export function locateCloudButton(page: test.Locator | test.Page) {
+  return page.getByRole('button', { name: 'Cloud' }).getByText('Cloud')
+}
+
+/** Find a "local" category button (if any) on the current page. */
+export function locateLocalButton(page: test.Locator | test.Page) {
+  return page.getByRole('button', { name: 'Local' }).getByText('Local')
 }
 
 /** Find a "trash" button (if any) on the current page. */
@@ -331,9 +336,16 @@ export function locateUploadFilesButton(page: test.Locator | test.Page) {
   return page.getByRole('button', { name: 'Upload Files' }).getByText('Upload Files')
 }
 
+/** Find a "start modal" button (if any) on the current page. */
+export function locateStartModalButton(page: test.Locator | test.Page) {
+  return page
+    .getByRole('button', { name: 'Start with a template' })
+    .getByText('Start with a template')
+}
+
 /** Find a "new project" button (if any) on the current page. */
 export function locateNewProjectButton(page: test.Locator | test.Page) {
-  return page.getByRole('button', { name: 'New Project' }).getByText('New Project')
+  return page.getByRole('button', { name: 'New Empty Project' }).getByText('New Empty Project')
 }
 
 /** Find a "new folder" button (if any) on the current page. */
@@ -425,11 +437,6 @@ export function locateSortDescendingIcon(page: test.Locator | test.Page) {
 
 // === Page locators ===
 
-/** Find a "home page" icon (if any) on the current page. */
-export function locateHomePageIcon(page: test.Locator | test.Page) {
-  return page.getByRole('button').filter({ has: page.getByAltText('Home') })
-}
-
 /** Find a "drive page" icon (if any) on the current page. */
 export function locateDrivePageIcon(page: test.Locator | test.Page) {
   return page.getByRole('button').filter({ has: page.getByAltText('Catalog') })
@@ -803,23 +810,6 @@ export async function passTermsAndConditionsDialog({ page }: MockParams) {
   }
 }
 
-// ========================
-// === mockIDEContainer ===
-// ========================
-
-/** Make the IDE container have a non-zero size. */
-// This syntax is required for Playwright to work properly.
-// eslint-disable-next-line no-restricted-syntax
-export async function mockIDEContainer({ page }: MockParams) {
-  await page.evaluate(() => {
-    const ideContainer = document.getElementById('app')
-    if (ideContainer) {
-      ideContainer.style.height = '100vh'
-      ideContainer.style.width = '100vw'
-    }
-  })
-}
-
 // ===============
 // === mockApi ===
 // ===============
@@ -838,7 +828,6 @@ export const mockApi = apiModule.mockApi
 export async function mockAll({ page }: MockParams) {
   const api = await mockApi({ page })
   await mockDate({ page })
-  await mockIDEContainer({ page })
   return { api }
 }
 
@@ -852,12 +841,6 @@ export async function mockAll({ page }: MockParams) {
 export async function mockAllAndLogin({ page }: MockParams) {
   const mocks = await mockAll({ page })
   await login({ page })
-
   await passTermsAndConditionsDialog({ page })
-
-  // This MUST run after login, otherwise the element's styles are reset when the browser
-  // is navigated to another page.
-  await mockIDEContainer({ page })
-
   return mocks
 }
@@ -87,7 +87,7 @@ test.test('can drop onto root directory dropzone', async ({ page }) => {
   const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(0))
   const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
   test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft)
-  await assetRows.nth(1).dragTo(actions.locateRootDirectoryDropzone(page))
+  await assetRows.nth(1).dragTo(actions.locateRootDirectoryDropzone(page), { force: true })
   const firstLeft = await actions.getAssetRowLeftPx(assetRows.nth(0))
   const secondLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
   test.expect(firstLeft, 'siblings have same indentation').toEqual(secondLeft)

@@ -24,7 +24,7 @@ test.test('delete and restore', async ({ page }) => {
   await actions.locateRestoreFromTrashButton(contextMenu).click()
   await actions.expectTrashPlaceholderRow(page)
 
-  await actions.locateHomeButton(page).click()
+  await actions.locateCloudButton(page).click()
   await test.expect(assetRows).toHaveCount(1)
 })
 
@@ -45,6 +45,6 @@ test.test('delete and restore (keyboard)', async ({ page }) => {
   await actions.press(page, 'Mod+R')
   await actions.expectTrashPlaceholderRow(page)
 
-  await actions.locateHomeButton(page).click()
+  await actions.locateCloudButton(page).click()
   await test.expect(assetRows).toHaveCount(1)
 })
@@ -19,7 +19,6 @@ test.test('drive view', async ({ page }) => {
   await test.expect(assetRows).toHaveCount(1)
   await test.expect(actions.locateAssetsTable(page)).toBeVisible()
   await actions.locateNewProjectButton(page).click()
-  await test.expect(assetRows).toHaveCount(2)
   await test.expect(actions.locateEditor(page)).toBeVisible()
   await actions.locateDrivePageIcon(page).click()
   await test.expect(assetRows).toHaveCount(2)

@@ -12,16 +12,9 @@ test.test('page switcher', async ({ page }) => {
 
   await actions.locateDrivePageIcon(page).click()
   await test.expect(actions.locateDriveView(page)).toBeVisible()
-  await test.expect(actions.locateSamplesList(page)).not.toBeVisible()
-  await test.expect(actions.locateEditor(page)).not.toBeVisible()
-
-  await actions.locateHomePageIcon(page).click()
-  await test.expect(actions.locateDriveView(page)).not.toBeVisible()
-  await test.expect(actions.locateSamplesList(page)).toBeVisible()
   await test.expect(actions.locateEditor(page)).not.toBeVisible()
 
   await actions.locateEditorPageIcon(page).click()
   await test.expect(actions.locateDriveView(page)).not.toBeVisible()
-  await test.expect(actions.locateSamplesList(page)).not.toBeVisible()
   await test.expect(actions.locateEditor(page)).toBeVisible()
 })
@@ -5,16 +5,10 @@ import * as actions from './actions'
 
 test.test.beforeEach(actions.mockAllAndLogin)
 
-test.test('create empty project', async ({ page }) => {
-  await actions.locateHomePageIcon(page).click()
-  // The first "sample" is a button to create a new empty project.
-  await actions.locateSamples(page).nth(0).click()
-  await test.expect(actions.locateEditor(page)).toBeVisible()
-})
-
 test.test('create project from template', async ({ page }) => {
-  await actions.locateHomePageIcon(page).click()
+  await actions.locateStartModalButton(page).click()
   // The second "sample" is the first template.
   await actions.locateSamples(page).nth(1).click()
   await test.expect(actions.locateEditor(page)).toBeVisible()
+  await test.expect(actions.locateSamples(page).first()).not.toBeVisible()
 })
@@ -37,7 +37,6 @@
     <script type="module" src="./src/entrypoint.ts" defer></script>
   </head>
   <body>
-    <div id="app"></div>
     <div id="enso-dashboard" class="enso-dashboard"></div>
     <div id="enso-chat" class="enso-chat"></div>
     <div id="enso-portal-root" class="enso-portal-root"></div>

@@ -19,6 +19,7 @@
     "build": "vite build",
     "dev": "vite",
     "dev:e2e": "vite -c vite.test.config.ts",
+    "dev:e2e:ci": "vite -c vite.test.config.ts build && vite preview --port 8080 --strictPort",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "vitest run",
     "test:unit:debug": "vitest",
@@ -39,7 +40,6 @@
     "@sentry/react": "^7.74.0",
     "@tanstack/react-query": "5.37.1",
     "ajv": "^8.12.0",
-    "clsx": "^1.1.1",
     "enso-common": "^1.0.0",
     "is-network-error": "^1.0.1",
     "monaco-editor": "0.48.0",
@@ -53,11 +53,11 @@
     "react-stately": "^3.31.0",
     "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",
-    "tailwind-variants": "0.2.1"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/plugin-syntax-import-assertions": "^7.23.3",

@@ -16,7 +16,7 @@ export default test.defineConfig({
   testDir: './e2e',
   fullyParallel: true,
   forbidOnly: true,
-  workers: 1,
+  workers: process.env.PROD ? 8 : 1,
   repeatEach: process.env.CI ? 3 : 1,
   expect: {
     toHaveScreenshot: { threshold: 0 },
@@ -50,7 +50,7 @@ export default test.defineConfig({
     },
   },
   webServer: {
-    command: 'npm run dev:e2e',
+    command: process.env.CI || process.env.PROD ? 'npm run dev:e2e:ci' : 'npm run dev:e2e',
     port: 8080,
     reuseExistingServer: false,
   },

@@ -45,6 +45,8 @@ import * as appUtils from '#/appUtils'
 
 import * as inputBindingsModule from '#/configurations/inputBindings'
 
+import * as backendHooks from '#/hooks/backendHooks'
+
 import AuthProvider, * as authProvider from '#/providers/AuthProvider'
 import BackendProvider from '#/providers/BackendProvider'
 import InputBindingsProvider from '#/providers/InputBindingsProvider'
@@ -53,9 +55,7 @@ import LoggerProvider from '#/providers/LoggerProvider'
 import type * as loggerProvider from '#/providers/LoggerProvider'
 import ModalProvider, * as modalProvider from '#/providers/ModalProvider'
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
-import RemoteBackendProvider from '#/providers/RemoteBackendProvider'
 import SessionProvider from '#/providers/SessionProvider'
-import SupportsLocalBackendProvider from '#/providers/SupportsLocalBackendProvider'
 
 import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
 import ForgotPassword from '#/pages/authentication/ForgotPassword'
@@ -212,7 +212,7 @@ export interface AppRouterProps extends AppProps {
  * because the {@link AppRouter} relies on React hooks, which can't be used in the same React
  * component as the component that defines the provider. */
 function AppRouter(props: AppRouterProps) {
-  const { logger, supportsLocalBackend, isAuthenticationDisabled, shouldShowDashboard } = props
+  const { logger, isAuthenticationDisabled, shouldShowDashboard } = props
   const { onAuthenticated, projectManagerUrl, projectManagerRootDirectory } = props
   const { portalRoot } = props
   // `navigateHooks.useNavigate` cannot be used here as it relies on `AuthProvider`, which has not
@@ -222,6 +222,14 @@ function AppRouter(props: AppRouterProps) {
   const { localStorage } = localStorageProvider.useLocalStorage()
   const { setModal } = modalProvider.useSetModal()
   const navigator2D = navigator2DProvider.useNavigator2D()
+  const [remoteBackend, setRemoteBackend] = React.useState<Backend | null>(null)
+  const [localBackend] = React.useState(() =>
+    projectManagerUrl != null && projectManagerRootDirectory != null
+      ? new LocalBackend(projectManagerUrl, projectManagerRootDirectory)
+      : null
+  )
+  backendHooks.useObserveBackend(remoteBackend)
+  backendHooks.useObserveBackend(localBackend)
   if (detect.IS_DEV_MODE) {
     // @ts-expect-error This is used exclusively for debugging.
     window.navigate = navigate
@@ -246,6 +254,20 @@ function AppRouter(props: AppRouterProps) {
     }
   }, [/* should never change */ localStorage, /* should never change */ inputBindingsRaw])
 
+  React.useEffect(() => {
+    if (remoteBackend) {
+      void remoteBackend.logEvent('open_app')
+      const logCloseEvent = () => void remoteBackend.logEvent('close_app')
+      window.addEventListener('beforeunload', logCloseEvent)
+      return () => {
+        window.removeEventListener('beforeunload', logCloseEvent)
+        logCloseEvent()
+      }
+    } else {
+      return
+    }
+  }, [remoteBackend])
+
   const inputBindings = React.useMemo(() => {
     const updateLocalStorage = () => {
       localStorage.set(
@@ -305,12 +327,6 @@ function AppRouter(props: AppRouterProps) {
   const refreshUserSession =
     authService?.cognito.refreshUserSession.bind(authService.cognito) ?? null
   const registerAuthEventListener = authService?.registerAuthEventListener ?? null
-  const initialBackend: Backend =
-    isAuthenticationDisabled && projectManagerUrl != null && projectManagerRootDirectory != null
-      ? new LocalBackend(projectManagerUrl, projectManagerRootDirectory)
-      : // This is SAFE, because the backend is always set by the authentication flow.
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        null!
 
   React.useEffect(() => {
     if ('menuApi' in window) {
@@ -439,27 +455,22 @@ function AppRouter(props: AppRouterProps) {
   )
 
   let result = routes
-
+  result = <InputBindingsProvider inputBindings={inputBindings}>{result}</InputBindingsProvider>
   result = (
-    <SupportsLocalBackendProvider supportsLocalBackend={supportsLocalBackend}>
+    <BackendProvider remoteBackend={remoteBackend} localBackend={localBackend}>
       {result}
-    </SupportsLocalBackendProvider>
+    </BackendProvider>
   )
-  result = <InputBindingsProvider inputBindings={inputBindings}>{result}</InputBindingsProvider>
-  result = <RemoteBackendProvider>{result}</RemoteBackendProvider>
   result = (
     <AuthProvider
       shouldStartInOfflineMode={isAuthenticationDisabled}
-      supportsLocalBackend={supportsLocalBackend}
+      setRemoteBackend={setRemoteBackend}
       authService={authService}
       onAuthenticated={onAuthenticated}
-      projectManagerUrl={projectManagerUrl}
-      projectManagerRootDirectory={projectManagerRootDirectory}
     >
       {result}
     </AuthProvider>
   )
-  result = <BackendProvider initialBackend={initialBackend}>{result}</BackendProvider>
   result = (
     <SessionProvider
       mainPageUrl={mainPageUrl}