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