-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes #11185 Fixes #11923 I moved (and simplified) some setup. Mostly, the entry point sets up general behavior on page load, App.vue is the root, and the react-specific setups are now in `ReactRoot` component. The old App.vue is now just the ProjectView.vue. Removed some options which are no longer relevant since there's just a single GUI package. I tried to put the ProjectView component into dashboard layout, but unfortunately, veaury is not helpful here, as it unsets all styles in its wrapper. Also, GUI no longer displays Help view; if there's an unrecognized option we just print a warning and continue.
- Loading branch information
Showing
31 changed files
with
572 additions
and
685 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <script setup lang="ts"> | ||
| import '@/assets/base.css' | ||
| import TooltipDisplayer from '@/components/TooltipDisplayer.vue' | ||
| import ProjectView from '@/ProjectView.vue' | ||
| import { provideAppClassSet } from '@/providers/appClass' | ||
| import { provideGuiConfig } from '@/providers/guiConfig' | ||
| import { provideTooltipRegistry } from '@/providers/tooltipRegistry' | ||
| import { registerAutoBlurHandler } from '@/util/autoBlur' | ||
| import { baseConfig, configValue, mergeConfig, type ApplicationConfigValue } from '@/util/config' | ||
| import { urlParams } from '@/util/urlParams' | ||
| import { useQueryClient } from '@tanstack/vue-query' | ||
| import { applyPureReactInVue } from 'veaury' | ||
| import { computed, onMounted } from 'vue' | ||
| import { ComponentProps } from 'vue-component-type-helpers' | ||
| import ReactRoot from './ReactRoot' | ||
| const _props = defineProps<{ | ||
| // Used in Project View integration tests. Once both test projects will be merged, this should be | ||
| // removed | ||
| projectViewOnly?: { options: ComponentProps<typeof ProjectView> } | null | ||
| onAuthenticated?: (accessToken: string | null) => void | ||
| }>() | ||
| const classSet = provideAppClassSet() | ||
| const appTooltips = provideTooltipRegistry() | ||
| const appConfig = computed(() => { | ||
| const config = mergeConfig(baseConfig, urlParams(), { | ||
| onUnrecognizedOption: (p) => console.warn('Unrecognized option:', p), | ||
| }) | ||
| return config | ||
| }) | ||
| const appConfigValue = computed((): ApplicationConfigValue => configValue(appConfig.value)) | ||
| const ReactRootWrapper = applyPureReactInVue(ReactRoot) | ||
| const queryClient = useQueryClient() | ||
| provideGuiConfig(appConfigValue) | ||
| registerAutoBlurHandler() | ||
| onMounted(() => { | ||
| if (appConfigValue.value.window.vibrancy) { | ||
| document.body.classList.add('vibrancy') | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div :class="['App', ...classSet.keys()]"> | ||
| <ProjectView v-if="projectViewOnly" v-bind="projectViewOnly.options" /> | ||
| <ReactRootWrapper | ||
| v-else | ||
| :config="appConfigValue" | ||
| :queryClient="queryClient" | ||
| @authenticated="onAuthenticated ?? (() => {})" | ||
| /> | ||
| </div> | ||
| <TooltipDisplayer :registry="appTooltips" /> | ||
| </template> | ||
|
|
||
| <style> | ||
| .App { | ||
| width: 100%; | ||
| height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| /* | ||
| TODO [ao]: Veaury adds a wrapping elements which have `style="all: unset"`, which in turn breaks our layout. | ||
| See https://github.com/gloriasoft/veaury/issues/158 | ||
| */ | ||
| [__use_react_component_wrap], | ||
| [data-use-vue-component-wrap] { | ||
| display: contents !important; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| /** @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 LoadingScreen from '#/pages/authentication/LoadingScreen' | ||
| import { HttpClientProvider } from '#/providers/HttpClientProvider' | ||
| import LoggerProvider from '#/providers/LoggerProvider' | ||
| import HttpClient from '#/utilities/HttpClient' | ||
| import { ApplicationConfigValue } from '@/util/config' | ||
| import { QueryClientProvider } from '@tanstack/react-query' | ||
| import { QueryClient } from '@tanstack/vue-query' | ||
| import { IS_DEV_MODE, isOnElectron, isOnLinux } from 'enso-common/src/detect' | ||
| import { StrictMode } from 'react' | ||
| import invariant from 'tiny-invariant' | ||
|
|
||
| interface ReactRootProps { | ||
| config: ApplicationConfigValue | ||
| queryClient: QueryClient | ||
| classSet: Map<string, number> | ||
| onAuthenticated: (accessToken: string | null) => void | ||
| } | ||
|
|
||
| function resolveEnvUrl(url: string | undefined) { | ||
| return url?.replace('__HOSTNAME__', window.location.hostname) | ||
| } | ||
|
|
||
| /** | ||
| * A component gathering all views written currently in React with necessary contexts. | ||
| */ | ||
| export default function ReactRoot(props: ReactRootProps) { | ||
| const { config, queryClient, onAuthenticated } = props | ||
|
|
||
| const httpClient = new HttpClient() | ||
| const supportsDeepLinks = !IS_DEV_MODE && !isOnLinux() && isOnElectron() | ||
| const portalRoot = document.querySelector('#enso-portal-root') | ||
| const shouldUseAuthentication = config.authentication.enabled | ||
| const projectManagerUrl = | ||
| (config.engine.projectManagerUrl || resolveEnvUrl(PROJECT_MANAGER_URL)) ?? null | ||
| const ydocUrl = (config.engine.ydocUrl || resolveEnvUrl(YDOC_SERVER_URL)) ?? null | ||
| const initialProjectName = config.startup.project || null | ||
| invariant(portalRoot, 'PortalRoot element not found') | ||
|
|
||
| return ( | ||
| <StrictMode> | ||
| <QueryClientProvider client={queryClient}> | ||
| <ErrorBoundary> | ||
| <UIProviders locale="en-US" portalRoot={portalRoot}> | ||
| <Suspense fallback={<LoadingScreen />}> | ||
| <OfflineNotificationManager> | ||
| <LoggerProvider logger={console}> | ||
| <HttpClientProvider httpClient={httpClient}> | ||
| <App | ||
| supportsDeepLinks={supportsDeepLinks} | ||
| supportsLocalBackend={!IS_CLOUD_BUILD} | ||
| isAuthenticationDisabled={!shouldUseAuthentication} | ||
| projectManagerUrl={projectManagerUrl} | ||
| ydocUrl={ydocUrl} | ||
| initialProjectName={initialProjectName} | ||
| onAuthenticated={onAuthenticated} | ||
| /> | ||
| </HttpClientProvider> | ||
| </LoggerProvider> | ||
| </OfflineNotificationManager> | ||
| </Suspense> | ||
|
|
||
| <ReactQueryDevtools /> | ||
| </UIProviders> | ||
| </ErrorBoundary> | ||
| </QueryClientProvider> | ||
| </StrictMode> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.