Restructure dashboard codebase

.github/CODEOWNERS

@@ -2,13 +2,13 @@
 CHANGELOG.md
 
 # The repository settings
-/.github/ @jdunkerley  @AdRiley @hubertp @Frizi
+/.github/ @jdunkerley @AdRiley @hubertp @Frizi
 /.github/CODEOWNERS @jdunkerley @jaroslavtulach @farmaazon @AdRiley @PabloBuchu @wdanilo
 
 # Build script & utilities
-/run @jdunkerley  @AdRiley @hubertp @Frizi
-/run.bat @jdunkerley  @AdRiley @hubertp @Frizi
-/build @jdunkerley  @AdRiley @hubertp @Frizi
+/run @jdunkerley @AdRiley @hubertp @Frizi
+/run.bat @jdunkerley @AdRiley @hubertp @Frizi
+/build @jdunkerley @AdRiley @hubertp @Frizi
 
 # Rust Libraries and Related Files
 rust-toolchain.toml @vitvakatu @Frizi @kazcw @farmaazon @AdRiley
@@ -31,19 +31,16 @@ tsconfig.json
 
 # GUI/Dashboard
 /app @Frizi @farmaazon @vitvakatu @kazcw @AdRiley @PabloBuchu @indiv0 @somebody1234
-/app/gui/integration-test @Frizi @farmaazon @vitvakatu @kazcw @AdRiley @PabloBuchu @indiv0 @somebody1234
-/app/gui/src/dashboard @Frizi @farmaazon @vitvakatu @kazcw @AdRiley @PabloBuchu @indiv0 @somebody1234
-/app/gui/src/project-view @Frizi @farmaazon @vitvakatu @kazcw @AdRiley @PabloBuchu @indiv0 @somebody1234
+/app/gui @Frizi @farmaazon @vitvakatu @kazcw @AdRiley @PabloBuchu @indiv0 @somebody1234
 /app/ide-desktop/ @Frizi @farmaazon @vitvakatu @kazcw @AdRiley @PabloBuchu @indiv0 @somebody1234
 /app/ide-desktop/client/tasks/signArchivesMacOs.ts @jdunkerley @hubertp
-/app/ide-desktop/client/tests @Frizi @farmaazon @vitvakatu @kazcw @AdRiley @PabloBuchu @indiv0 @somebody1234
 /app/ydoc-server/ @Frizi @farmaazon @vitvakatu @kazcw @AdRiley
 /app/ydoc-server-nodejs/ @Frizi @farmaazon @vitvakatu @kazcw @AdRiley
 /app/ydoc-server-polyglot/ @Frizi @farmaazon @vitvakatu @kazcw @AdRiley
 /app/ydoc-shared/ @Frizi @farmaazon @vitvakatu @kazcw @AdRiley
 # The data-link schema is owned by the libraries team
-/app/gui/src/dashboard/data/datalinkSchema.json @radeusgd @jdunkerley @GregoryTravis @AdRiley
-/app/gui/src/dashboard/data/__tests__ @radeusgd @jdunkerley @GregoryTravis @AdRiley @PabloBuchu @indiv0 @somebody1234
+/app/gui/src/data/datalinkSchema.json @radeusgd @jdunkerley @GregoryTravis @AdRiley
+/app/gui/src/data/__tests__ @radeusgd @jdunkerley @GregoryTravis @AdRiley @PabloBuchu @indiv0 @somebody1234
 
 # Engine (old)
 # This section should be removed once the engine moves to /app/engine

app/gui/.storybook/preview.tsx

@@ -6,7 +6,7 @@ import type { Preview as VuePreview } from '@storybook/vue3'
 import isChromatic from 'chromatic/isChromatic'
 import { StrictMode, useLayoutEffect, useState } from 'react'
 
-import UIProviders from '#/components/UIProviders'
+import UIProviders from '$/react-components/UIProviders'
 import invariant from 'tiny-invariant'
 
 import '#/tailwind.css'

app/gui/env.d.ts

@@ -172,11 +172,11 @@ declare global {
   }
 }
 
-// Add additional types for svg imports from `#/assets/*.svg`
+// Add additional types for svg imports from `$/assets/*.svg`
 declare module 'vite/client' {
-  declare module '#/assets/*.svg' {
+  declare module '$/assets/*.svg' {
     /**
-     * @deprecated Prefer defined keys over importing from `#/assets/*.svg
+     * @deprecated Prefer defined keys over importing from `$/assets/*.svg
      */
     const src: string
     export default src

app/gui/integration-test/dashboard/actions/api.ts

@@ -1,23 +1,23 @@
 /** @file The mock API. */
 import * as test from '@playwright/test'
 
-import * as backend from '#/services/Backend'
-import type * as remoteBackend from '#/services/RemoteBackend'
-import * as remoteBackendPaths from '#/services/remoteBackendPaths'
+import * as backend from '$/services/Backend'
+import type * as remoteBackend from '$/services/RemoteBackend'
+import * as remoteBackendPaths from '$/services/remoteBackendPaths'
 
 import * as object from '#/utilities/object'
-import * as permissions from '#/utilities/permissions'
 import * as dateTime from 'enso-common/src/utilities/data/dateTime'
 import * as uniqueString from 'enso-common/src/utilities/uniqueString'
 
 import * as actions from '.'
 
-import type { FeatureFlags } from '#/providers/FeatureFlagsProvider'
+import { PermissionAction } from '#/utilities/permissions'
+import type { FeatureFlags } from '$/providers/featureFlags'
 import {
   organizationIdToDirectoryId,
   userGroupIdToDirectoryId,
   userIdToDirectoryId,
-} from '#/services/RemoteBackend'
+} from '$/services/RemoteBackend'
 import { readFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -393,7 +393,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
 
   const createUserPermission = (
     user: backend.User,
-    permission: permissions.PermissionAction = permissions.PermissionAction.own,
+    permission: PermissionAction = PermissionAction.own,
     rest: Partial<backend.UserPermission> = {},
   ): backend.UserPermission =>
     object.merge(
@@ -406,7 +406,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
 
   const createUserGroupPermission = (
     userGroup: backend.UserGroupInfo,
-    permission: permissions.PermissionAction = permissions.PermissionAction.own,
+    permission: PermissionAction = PermissionAction.own,
     rest: Partial<backend.UserGroupPermission> = {},
   ): backend.UserGroupPermission => object.merge({ userGroup, permission }, rest)
 
@@ -423,7 +423,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
       description: rest.description ?? '',
       labels: [],
       parentId: defaultDirectoryId,
-      permissions: [createUserPermission(defaultUser, permissions.PermissionAction.own)],
+      permissions: [createUserPermission(defaultUser, PermissionAction.own)],
       get parentsPath() {
         return getParentPath(this.parentId)
       },
@@ -1269,7 +1269,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
               name: defaultUsername,
               email: defaultEmail,
             },
-            permission: permissions.PermissionAction.own,
+            permission: PermissionAction.own,
           },
         ],
         projectState: state,

app/gui/src/dashboard/test/setup.ts → app/gui/setupDashboardTests.ts

@@ -1,7 +1,4 @@
-/**
- * @file Global setup for dashboard tests.
- */
-
+/** @file Global setup for dashboard tests. */
 import * as matchers from '@testing-library/jest-dom/matchers'
 import { cleanup } from '@testing-library/react'
 import { MotionGlobalConfig } from 'framer-motion'

app/gui/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LoadingScreenReact from '#/pages/authentication/LoadingScreen'
+import LoadingScreenReact from '$/authentication/ui/LoadingScreen'
 import RightPanel from '$/components/AppContainer/RightPanel.vue'
 import { provideOpenedProjects } from '$/providers/openedProjects'
 import { ContextsForReactProvider } from '$/providers/react/globalProvider'

app/gui/src/ReactRoot.tsx

@@ -1,16 +1,16 @@
 /** @file A file containing setup for React part of application. */
 
 import App from '#/App.tsx'
-import { ReactQueryDevtools } from '#/components/Devtools'
-import { ErrorBoundary } from '#/components/ErrorBoundary'
-import { OfflineNotificationManager } from '#/components/OfflineNotificationManager'
-import { Suspense } from '#/components/Suspense'
-import UIProviders from '#/components/UIProviders'
 import { useMount } from '#/hooks/mountHooks'
-import LoadingScreen from '#/pages/authentication/LoadingScreen'
 import LoggerProvider from '#/providers/LoggerProvider'
+import LoadingScreen from '$/authentication/ui/LoadingScreen'
+import { ReactQueryDevtools } from '$/devtools'
 import { useBackends } from '$/providers/backends'
 import { useSetFeatureFlag } from '$/providers/react/featureFlags'
+import { ErrorBoundary } from '$/react-components/ErrorBoundary'
+import { OfflineNotificationManager } from '$/react-components/OfflineNotificationManager'
+import { Suspense } from '$/react-components/Suspense'
+import UIProviders from '$/react-components/UIProviders'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { QueryClient } from '@tanstack/vue-query'
 import { PropsWithChildren, StrictMode } from 'react'

app/gui/src/dashboard/pages/authentication/schemas.ts → app/gui/src/authentication/schemas.ts

@@ -9,15 +9,11 @@ import { z } from 'zod'
 
 /** A schema for validating passwords. */
 export function passwordSchema(getText: GetText) {
-  return (
-    z
-      .string()
-      .trim()
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      .min(6, { message: getText('passwordLengthError') })
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      .max(256, { message: getText('passwordLengthError') })
-  )
+  return z
+    .string()
+    .trim()
+    .min(6, { message: getText('passwordLengthError') })
+    .max(256, { message: getText('passwordLengthError') })
 }
 
 /** A schema for validating passwords that match the required pattern. */

app/gui/src/dashboard/modals/AgreementsModal.tsx → app/gui/src/authentication/ui/AgreementsModal.tsx

@@ -1,12 +1,12 @@
 /** @file Modal for accepting the terms of service. */
-import { Button } from '#/components/Button'
-import { Checkbox } from '#/components/Checkbox'
-import { Dialog } from '#/components/Dialog'
-import { Form } from '#/components/Form'
-import { Text } from '#/components/Text'
 import { useLocalStorageState } from '#/hooks/localStoreState'
 import LocalStorage from '#/utilities/LocalStorage'
 import { useText } from '$/providers/react'
+import { Button } from '$/react-components/Button'
+import { Checkbox } from '$/react-components/Checkbox'
+import { Dialog } from '$/react-components/Dialog'
+import { Form } from '$/react-components/Form'
+import { Text } from '$/react-components/Text'
 import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import * as React from 'react'
 import { memo } from 'react'

app/gui/src/dashboard/pages/authentication/AuthenticationPage.tsx → app/gui/src/authentication/ui/AuthenticationPage.tsx

@@ -3,12 +3,12 @@
  * This is a component, NOT a page, but it is here because it is related to the authentication pages
  * and nothing else.
  */
-import { DIALOG_BACKGROUND } from '#/components/Dialog'
-import { Form, type FormProps, type TSchema } from '#/components/Form'
-import Page from '#/components/Page'
-import { Text } from '#/components/Text'
 import { useOffline } from '#/hooks/offlineHooks'
 import { useText } from '$/providers/react'
+import { DIALOG_BACKGROUND } from '$/react-components/Dialog'
+import { Form, type FormProps, type TSchema } from '$/react-components/Form'
+import Page from '$/react-components/Page'
+import { Text } from '$/react-components/Text'
 import type { ReactNode } from 'react'
 import invariant from 'tiny-invariant'
 

app/gui/src/dashboard/pages/authentication/ConfirmRegistration.tsx → app/gui/src/authentication/ui/ConfirmRegistration.tsx

@@ -2,8 +2,6 @@
  * @file Registration confirmation page for when a user clicks the confirmation link set to their
  * email address.
  */
-import { Button } from '#/components/Button'
-import { Result } from '#/components/Result'
 import { useMounted } from '#/hooks/mountHooks'
 import { useTimeoutAPI } from '#/hooks/timeoutHooks'
 import { noop } from '#/utilities/functions'
@@ -12,6 +10,8 @@ import * as appUtils from '$/appUtils'
 import { useRouter, useSession, useText } from '$/providers/react'
 import { useVueValue } from '$/providers/react/common'
 import { useQueryParam } from '$/providers/react/queryParams'
+import { Button } from '$/react-components/Button'
+import { Result } from '$/react-components/Result'
 import { useMutation } from '@tanstack/react-query'
 import * as react from 'react'
 import { stringifyQuery } from 'vue-router'

app/gui/src/dashboard/pages/authentication/ForgotPassword.tsx → app/gui/src/authentication/ui/ForgotPassword.tsx

@@ -2,15 +2,15 @@
  * @file Container responsible for rendering and interactions in first half of forgot password
  * flow.
  */
-import AtIcon from '#/assets/at.svg'
-import GoBackIcon from '#/assets/go_back.svg'
-import { Form } from '#/components/Form'
-import { Input } from '#/components/Inputs/Input'
-import Link from '#/components/Link'
-import AuthenticationPage from '#/pages/authentication/AuthenticationPage'
 import { LOGIN_PATH } from '$/appUtils'
+import AtIcon from '$/assets/at.svg'
+import GoBackIcon from '$/assets/go_back.svg'
+import AuthenticationPage from '$/authentication/ui/AuthenticationPage'
 import { useBackends, useRouter, useSession, useText } from '$/providers/react'
 import { useQueryParam } from '$/providers/react/queryParams'
+import { Form } from '$/react-components/Form'
+import { Input } from '$/react-components/Inputs/Input'
+import Link from '$/react-components/Link'
 import { useState } from 'react'
 import { toast } from 'react-toastify'
 

app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx → app/gui/src/authentication/ui/InviteUsersModal/InviteUsersForm.tsx

@@ -1,14 +1,14 @@
 /** @file A modal with inputs for user email and permission level. */
-import { Form } from '#/components/Form'
-import { ResizableContentEditableInput } from '#/components/Inputs/ResizableInput'
-import * as paywallComponents from '#/components/Paywall'
-import { backendMutationOptions } from '#/hooks/backendHooks'
 import * as billingHooks from '#/hooks/billing'
 import * as eventCallbackHooks from '#/hooks/eventCallbackHooks'
-import type * as backendModule from '#/services/Backend'
 import * as parserUserEmails from '#/utilities/parseUserEmails'
+import { backendMutationOptions } from '$/data-catalog/hooks/backendHooks'
 import * as authProvider from '$/providers/react'
 import { useBackends, useText } from '$/providers/react'
+import { Form } from '$/react-components/Form'
+import { ResizableContentEditableInput } from '$/react-components/Inputs/ResizableInput'
+import * as paywallComponents from '$/react-components/Paywall'
+import type * as backendModule from '$/services/Backend'
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import * as React from 'react'
 import isEmail from 'validator/es/lib/isEmail'

app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx → app/gui/src/authentication/ui/InviteUsersModal/InviteUsersModal.tsx

@@ -1,13 +1,13 @@
 /** @file A modal with inputs for user email and permission level. */
-import { Dialog, Popover } from '#/components/Dialog'
-import { Stepper } from '#/components/Stepper'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import * as inviteUsersForm from '#/modals/InviteUsersModal/InviteUsersForm'
-import * as inviteUsersSuccess from '#/modals/InviteUsersModal/InviteUsersSuccess'
-import type * as backendModule from '#/services/Backend'
 import * as authProvider from '$/providers/react'
 import { useText } from '$/providers/react'
+import { Dialog, Popover } from '$/react-components/Dialog'
+import { Stepper } from '$/react-components/Stepper'
+import type * as backendModule from '$/services/Backend'
 import * as React from 'react'
+import * as inviteUsersForm from './InviteUsersForm'
+import * as inviteUsersSuccess from './InviteUsersSuccess'
 
 /** Props for an {@link InviteUsersModal}. */
 export interface InviteUsersModalProps {

app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersSuccess.tsx → app/gui/src/authentication/ui/InviteUsersModal/InviteUsersSuccess.tsx

@@ -1,8 +1,8 @@
 /** @file Success screen for the "invite users" modal. */
-import { Button } from '#/components/Button'
-import { CopyBlock } from '#/components/CopyBlock'
-import * as result from '#/components/Result'
 import { useRouter, useText } from '$/providers/react'
+import { Button } from '$/react-components/Button'
+import { CopyBlock } from '$/react-components/CopyBlock'
+import * as result from '$/react-components/Result'
 import * as React from 'react'
 
 /**

app/gui/src/dashboard/modals/InvitedToOrganizationModal.tsx → app/gui/src/authentication/ui/InvitedToOrganizationModal.tsx

@@ -1,17 +1,17 @@
 /** @file Modal for accepting or rejecting an invite to an organization. */
-import { Alert } from '#/components/Alert'
-import { Button } from '#/components/Button'
-import { Dialog } from '#/components/Dialog'
-import { Form } from '#/components/Form'
-import { Text } from '#/components/Text'
-import { backendMutationOptions } from '#/hooks/backendHooks'
 import { SUPPORT_EMAIL, SUPPORT_EMAIL_URL } from '$/appUtils'
+import { backendMutationOptions } from '$/data-catalog/hooks/backendHooks'
 import { useBackends, useFullUserSession, useText } from '$/providers/react'
+import { Alert } from '$/react-components/Alert'
+import { Button } from '$/react-components/Button'
+import { Dialog } from '$/react-components/Dialog'
+import { Form } from '$/react-components/Form'
+import { Text } from '$/react-components/Text'
 import { useMutation } from '@tanstack/react-query'
 import * as React from 'react'
 import * as z from 'zod'
 
-/** Modal for accepting the terms of service. */
+/** Modal for accepting or rejecting an invite to an organization. */
 export function InvitedToOrganizationModal({ children }: React.PropsWithChildren) {
   const { getText } = useText()
   const { remoteBackend: backend } = useBackends()

app/gui/src/dashboard/pages/authentication/LoadingScreen.tsx → app/gui/src/authentication/ui/LoadingScreen.tsx

@@ -1,7 +1,7 @@
 /** @file A loading screen, displayed while the user is logging in. */
-import { StatelessSpinner } from '#/components/StatelessSpinner'
-import { Text } from '#/components/Text'
 import { useText } from '$/providers/react'
+import { StatelessSpinner } from '$/react-components/StatelessSpinner'
+import { Text } from '$/react-components/Text'
 
 /** The diameter of the spinner. */
 const SPINNER_SIZE_PX = 64

app/gui/src/dashboard/pages/authentication/Login.tsx → app/gui/src/authentication/ui/Login.tsx

@@ -1,23 +1,23 @@
 /** @file Login component responsible for rendering and interactions in sign in flow. */
 
-import AtIcon from '#/assets/at.svg'
-import CreateAccountIcon from '#/assets/create_account.svg'
-import LockIcon from '#/assets/lock.svg'
-import { Button } from '#/components/Button'
-import { Form } from '#/components/Form'
-import { Input } from '#/components/Inputs/Input'
-import { OTPInput } from '#/components/Inputs/OTPInput'
-import { Password } from '#/components/Inputs/Password'
-import Link from '#/components/Link'
-import { Stepper } from '#/components/Stepper'
-import { Text } from '#/components/Text'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import AuthenticationPage from '#/pages/authentication/AuthenticationPage'
-import { passwordSchema } from '#/pages/authentication/schemas'
 import { DASHBOARD_PATH, FORGOT_PASSWORD_PATH, REGISTRATION_PATH } from '$/appUtils'
+import AtIcon from '$/assets/at.svg'
+import CreateAccountIcon from '$/assets/create_account.svg'
+import LockIcon from '$/assets/lock.svg'
 import type { CognitoUser } from '$/authentication/cognito'
+import { passwordSchema } from '$/authentication/schemas'
+import AuthenticationPage from '$/authentication/ui/AuthenticationPage'
 import { useRouter, useSession, useText } from '$/providers/react'
 import { useQueryParam } from '$/providers/react/queryParams'
+import { Button } from '$/react-components/Button'
+import { Form } from '$/react-components/Form'
+import { Input } from '$/react-components/Inputs/Input'
+import { OTPInput } from '$/react-components/Inputs/OTPInput'
+import { Password } from '$/react-components/Inputs/Password'
+import Link from '$/react-components/Link'
+import { Stepper } from '$/react-components/Stepper'
+import { Text } from '$/react-components/Text'
 import { isOnElectron } from 'enso-common/src/detect'
 import { useState } from 'react'