Line data    Source code

       1              : import * as React from 'react';
       2              : 
       3              : import * as baseStyles from '../ui/foundations/banner_page.module.css';
       4              : import * as pageStyles from './app_loading_page.module.css';
       5              : 
       6              : import { IndicatorStatus, StatusIndicator } from '../ui/foundations/status_indicator.js';
       7              : import { ParticleFlowBackground } from '../ui/particle_flow/particle_flow_background.js';
       8              : import { CompactNavBar } from './navbar.js';
       9              : 
      10              : /// The steps of the setup of the app, in the order they are shown
      11            1 : const APP_SETUP_STEPS = {
      12            1 :     applyMigrations: 'Apply Migrations',
      13            1 :     initializeCore: 'Initialize Core',
      14            1 :     initializeHyperDB: 'Initialize HyperDB',
      15            1 :     discoverSessions: 'Discover Sessions',
      16            1 :     loadSessionScripts: 'Load Session Scripts',
      17            1 : };
      18              : 
      19              : /// The status of every step of the setup of the app
      20              : export type AppSetupStatus = Record<keyof typeof APP_SETUP_STEPS, IndicatorStatus>;
      21              : 
      22              : /// The status of a setup that has not started any step
      23            1 : export const APP_SETUP_NOT_STARTED: AppSetupStatus = {
      24            1 :     applyMigrations: IndicatorStatus.None,
      25            1 :     initializeCore: IndicatorStatus.None,
      26            1 :     initializeHyperDB: IndicatorStatus.None,
      27            1 :     discoverSessions: IndicatorStatus.None,
      28            1 :     loadSessionScripts: IndicatorStatus.None,
      29            1 : };
      30              : 
      31              : interface AppSetupPageProps {
      32              :     /// The status of every step
      33              :     status: AppSetupStatus;
      34              :     /// Why the setup failed, shown below the steps
      35              :     error?: string | null;
      36              :     /// Show the internals button in the navbar? Its providers may not be set up yet
      37              :     showInternals?: boolean;
      38              :     /// The actions at the bottom of the card
      39              :     actions?: React.ReactNode;
      40              : }
      41              : 
      42              : /// The page that shows the steps of the setup of the app.
      43              : /// It needs no app providers, the storage shows it while it is migrated.
      44            1 : export const AppSetupPage: React.FC<AppSetupPageProps> = (props: AppSetupPageProps) => (
      45            1 :     <div className={`${baseStyles.page} ${pageStyles.page}`} data-electron-drag-region>
      46            1 :         <ParticleFlowBackground />
      47            1 :         <CompactNavBar showInternals={props.showInternals} />
      48            1 :         <div className={`${baseStyles.banner_and_content_container} ${pageStyles.foreground}`} data-electron-drag-region>
      49            1 :             <div className={baseStyles.content_container} data-electron-drag-region>
      50            1 :                 <div className={baseStyles.card}>
      51            1 :                     <div className={baseStyles.card_header} data-electron-drag-region>
      52            1 :                         <div className={baseStyles.card_header_left_container}>
      53            1 :                             <div className={baseStyles.card_header_left_title}>
      54              :                                 Setup
      55            1 :                             </div>
      56            1 :                         </div>
      57            1 :                     </div>
      58            1 :                     <div className={baseStyles.card_section}>
      59            1 :                         <div className={baseStyles.section_entries}>
      60            1 :                             <div className={pageStyles.detail_entries}>
      61            1 :                                 {(Object.keys(APP_SETUP_STEPS) as (keyof typeof APP_SETUP_STEPS)[]).map(step => (
      62            1 :                                     <React.Fragment key={step}>
      63            1 :                                         <div className={pageStyles.detail_entry_key}>
      64            1 :                                             {APP_SETUP_STEPS[step]}
      65            1 :                                         </div>
      66            1 :                                         <div className={pageStyles.detail_entry_value} data-testid={`app-setup-${step}`} data-status={IndicatorStatus[props.status[step]]}>
      67            1 :                                             <StatusIndicator
      68            1 :                                                 className={pageStyles.loading_status_indicator}
      69            1 :                                                 fill="var(--color_fg)"
      70            1 :                                                 width={"14px"}
      71            1 :                                                 height={"14px"}
      72            1 :                                                 status={props.status[step]}
      73            1 :                                             />
      74            1 :                                         </div>
      75            1 :                                     </React.Fragment>
      76            1 :                                 ))}
      77            1 :                             </div>
      78            1 :                             {props.error != null && (
      79            1 :                                 <div className={pageStyles.detail_error} data-testid="app-setup-error">{props.error}</div>
      80              :                             )}
      81            1 :                         </div>
      82            1 :                         {props.actions}
      83            1 :                     </div>
      84            1 :                 </div>
      85            1 :             </div>
      86            1 :         </div>
      87            1 :     </div>
      88              : );