@gen-epix/ui 1.14.4 → 1.15.0

package/src/classes/managers/UserSettingsManager/UserSettingsManager.ts

@@ -0,0 +1,16 @@
+import { WindowManager } from '../WindowManager';
+
+export class UserSettingsManager {
+  public showShowUserFeedbackTooltip = true;
+
+  private constructor() {
+    //
+  }
+
+  public static get instance(): UserSettingsManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.userSettings = WindowManager.instance.window.managers.userSettings || new UserSettingsManager();
+    return WindowManager.instance.window.managers.userSettings;
+  }
+}

package/src/classes/managers/UserSettingsManager/index.ts

@@ -0,0 +1 @@
+export * from './UserSettingsManager';

package/src/classes/managers/WindowManager/WindowManager.test.ts

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+
+import { vi } from 'vitest';
+
+import { WindowManager } from './WindowManager';
+
+describe('WindowManager', () => {
+  let windowManager: WindowManager;
+
+  beforeEach(() => {
+    WindowManager['__instance'] = undefined;
+    windowManager = WindowManager.instance;
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('getWindow', () => {
+    it('should expose the window', () => {
+      expect(windowManager.window).toBe(window);
+    });
+  });
+});

package/src/classes/managers/WindowManager/WindowManager.ts

@@ -0,0 +1,26 @@
+export class WindowManager {
+  private static __instance: WindowManager;
+
+  private constructor() {
+    this.window.managers = this.window.managers || {};
+  }
+
+  public static get instance(): WindowManager {
+    // All other managers store the instance on the window, except this, the WindowManager itself. This is because the WindowManager is responsible for storing the instances of all other managers, so it cannot store itself on the window. Instead, we store the instance in a static property on the class.
+
+    WindowManager.__instance = WindowManager.__instance || new WindowManager();
+    return WindowManager.__instance;
+  }
+
+  public get window(): Window & typeof globalThis {
+    return globalThis as Window & typeof globalThis;
+  }
+
+  public get document(): Document {
+    return this.window ? this.window.document : null;
+  }
+
+  public get body(): HTMLBodyElement {
+    return this.document ? this.document.body as HTMLBodyElement : null;
+  }
+}

package/src/classes/managers/WindowManager/index.ts

@@ -0,0 +1 @@
+export * from './WindowManager';

package/src/components/app/App/App.tsx

@@ -0,0 +1,58 @@
+import { CacheProvider } from '@emotion/react';
+import {
+  CssBaseline,
+  ThemeProvider,
+} from '@mui/material';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ErrorBoundary } from 'react-error-boundary';
+import { RouterProvider } from 'react-router-dom';
+
+import { BaseAPI } from '../../../api';
+import { AuthenticationManager } from '../../../classes/managers/AuthenticationManager';
+import { BackendVersionManager } from '../../../classes/managers/BackendVersionManager';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { LogManager } from '../../../classes/managers/LogManager';
+import { QueryClientManager } from '../../../classes/managers/QueryClientManager';
+import { RouterManager } from '../../../classes/managers/RouterManager';
+import { ErrorPage } from '../../../pages/ErrorPage';
+import { EmotionCacheManager } from '../../../classes/managers/EmotionCacheManager';
+
+export const App = () => {
+  const { config } = ConfigManager.instance;
+  const touchIconUrl = config.getTouchIconUrl();
+  if (touchIconUrl) {
+    document.querySelector('link[rel="icon"]')?.setAttribute('href', touchIconUrl);
+  }
+
+  BaseAPI.baseUrl = config.getAPIBaseUrl();
+  BaseAPI.defaultRequestTimeout = config.defaultRequestTimeout;
+  BaseAPI.onRequest = [
+    AuthenticationManager.instance.onRequest.bind(AuthenticationManager.instance),
+    LogManager.instance.onRequest.bind(LogManager.instance),
+  ];
+  BaseAPI.onResponseFulfilled = [
+    LogManager.instance.onResponseFulfilled.bind(LogManager.instance),
+    BackendVersionManager.instance.onResponseFulfilled.bind(BackendVersionManager.instance),
+  ];
+  BaseAPI.onResponseRejected = [
+    LogManager.instance.onResponseRejected.bind(LogManager.instance),
+    AuthenticationManager.instance.onResponseRejected.bind(AuthenticationManager.instance),
+  ];
+
+  const queryQueryManager = QueryClientManager.instance;
+  const routerManager = RouterManager.instance;
+  const emotionCacheManager = EmotionCacheManager.instance;
+
+  return (
+    <QueryClientProvider client={queryQueryManager.queryClient}>
+      <CacheProvider value={emotionCacheManager.emotionCache}>
+        <ThemeProvider theme={ConfigManager.instance.config.theme}>
+          <CssBaseline />
+          <ErrorBoundary FallbackComponent={ErrorPage}>
+            <RouterProvider router={routerManager.router} />
+          </ErrorBoundary>
+        </ThemeProvider>
+      </CacheProvider>
+    </QueryClientProvider>
+  );
+};

package/src/components/app/App/index.ts

@@ -0,0 +1 @@
+export * from './App';

package/src/components/app/ApplicationBootstrap/ApplicationBootstrap.tsx

@@ -0,0 +1,223 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+  type PropsWithChildren,
+  useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import {
+  Box,
+  Button,
+} from '@mui/material';
+
+import { SystemApi } from '../../../api';
+import { WindowManager } from '../../../classes/managers/WindowManager';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+import { QUERY_KEY } from '../../../models/query';
+import { outagesStore } from '../../../stores/outagesStore';
+import { OutageUtil } from '../../../utils/OutageUtil';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import { OutageList } from '../../ui/OutageList';
+import { PageContainer } from '../../ui/PageContainer';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { useArray } from '../../../hooks/useArray';
+import { FeatureFlagsManager } from '../../../classes/managers/FeatureFlagsManager';
+import { I18nManager } from '../../../classes/managers/I18nManager';
+import type { ConfirmationRefMethods } from '../../ui/Confirmation';
+import { Confirmation } from '../../ui/Confirmation';
+import { Spinner } from '../../ui/Spinner';
+
+
+export const ApplicationBootstrap = ({ children }: PropsWithChildren): ReactNode => {
+  const { t } = useTranslation();
+
+  const setCategorizedOutages = useStore(outagesStore, (state) => state.setCategorizedOutages);
+  const [shouldContinue, setShouldContinue] = useState(false);
+  const [buttonsEnabled, setButtonsEnabled] = useState(false);
+  const confirmationRef = useRef<ConfirmationRefMethods>(null);
+  const newLanguageCode = useRef<string>(null);
+  const [isLanguageChanging, setIsLanguageChanging] = useState(false);
+
+  useEffect(() => {
+    I18nManager.instance.addEventListener('onUserLanguageChange', (code) => {
+      newLanguageCode.current = code;
+      confirmationRef.current?.open();
+    });
+  });
+
+  const outagesQuery = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.OUTAGES),
+    queryFn: async ({ signal }) => (await SystemApi.instance.retrieveOutages({ signal })).data,
+    gcTime: Infinity,
+    staleTime: Infinity,
+    refetchInterval: 5 * 60 * 1000,
+  });
+
+  const outagesLoadables = useArray([outagesQuery]);
+
+  const categorizedOutages = useMemo(() => {
+    return OutageUtil.getCategorizedOutages(outagesQuery.data ?? []);
+  }, [outagesQuery.data]);
+
+  const onContinuButtonClick = useCallback(() => {
+    setShouldContinue(true);
+  }, []);
+
+  const onRetryButtonClick = useCallback(() => {
+    WindowManager.instance.window.location.reload();
+  }, []);
+
+  const onLanguageChangeConfirm = useCallback(async () => {
+    if (newLanguageCode.current) {
+      setIsLanguageChanging(true);
+      await I18nManager.instance.switchLanguageConfig(newLanguageCode.current);
+      WindowManager.instance.window.location.reload();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (categorizedOutages) {
+      setCategorizedOutages(categorizedOutages);
+    }
+
+    const timeout = WindowManager.instance.window.setTimeout(() => {
+      setButtonsEnabled(true);
+    }, 5000);
+
+    return () => {
+      WindowManager.instance.window.clearTimeout(timeout);
+    };
+  }, [categorizedOutages, setCategorizedOutages]);
+
+  const shouldShowChildren = shouldContinue || (!outagesQuery.isLoading && !outagesQuery.error && categorizedOutages.activeOutages?.length === 0);
+  const shouldShowOutagePage = !shouldContinue && !outagesQuery.isLoading && !outagesQuery.error && categorizedOutages.activeOutages?.length > 0;
+
+  const featureFlagsQuery = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.FEATURE_FLAGS),
+    queryFn: async ({ signal }) => (await SystemApi.instance.retrieveFeatureFlags({ signal })).data,
+    gcTime: Infinity,
+    staleTime: Infinity,
+    enabled: shouldShowChildren,
+  });
+
+  const featureFlagsLoadables = useArray([featureFlagsQuery]);
+
+  useEffect(() => {
+    if (featureFlagsQuery.data) {
+      FeatureFlagsManager.instance.featureFlags = featureFlagsQuery.data.feature_flags;
+    }
+  }, [featureFlagsQuery.data]);
+
+  if (featureFlagsQuery.error) {
+    return (
+      <PageContainer
+        singleAction
+        testIdAttributes={TestIdUtil.createAttributes('FeatureFlagsErrorPage')}
+        title={t`Error`}
+      >
+        <ResponseHandler
+          loadables={featureFlagsLoadables}
+          loadingMessage={t`Loading`}
+        >
+          {children}
+        </ResponseHandler>
+      </PageContainer>
+    );
+  }
+
+  if (isLanguageChanging) {
+    return (
+      <PageContainer
+        singleAction
+        testIdAttributes={TestIdUtil.createAttributes('LanguageChangingPage')}
+        title={t`Changing language`}
+      >
+        <Spinner
+          inline
+          label={t`Changing language...`}
+        />
+      </PageContainer>
+    );
+  }
+
+
+  if (shouldShowChildren) {
+    return (
+      <ResponseHandler
+        loadables={featureFlagsLoadables}
+        loadingMessage={t`Loading`}
+      >
+        {children}
+        <Confirmation
+          ref={confirmationRef}
+          body={t`Changing language will reload the application. Do you want to continue?`}
+          cancelLabel={t`Cancel`}
+          confirmLabel={t`Change language`}
+          maxWidth={'xs'}
+          title={t`Are you sure?`}
+          onConfirm={onLanguageChangeConfirm}
+        />
+      </ResponseHandler>
+    );
+  }
+
+  if (shouldShowOutagePage) {
+    return (
+      <PageContainer
+        singleAction
+        testIdAttributes={TestIdUtil.createAttributes('OutagePage')}
+        title={t`Outages`}
+      >
+        <OutageList
+          activeOutages={categorizedOutages.activeOutages}
+          soonActiveOutages={categorizedOutages.soonActiveOutages}
+          visibleOutages={categorizedOutages.visibleOutages}
+        />
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 1,
+          }}
+        >
+          <Button
+            disabled={!buttonsEnabled}
+            variant={'outlined'}
+            onClick={onContinuButtonClick}
+          >
+            {t`Continue anyway`}
+          </Button>
+          <Button
+            disabled={!buttonsEnabled}
+            variant={'contained'}
+            onClick={onRetryButtonClick}
+          >
+            {t`Retry`}
+          </Button>
+        </Box>
+      </PageContainer>
+    );
+  }
+
+  return (
+    <PageContainer
+      ignorePageEvent
+      singleAction
+      testIdAttributes={TestIdUtil.createAttributes('OutagesLoadingPage')}
+      title={t`Outages`}
+    >
+      <ResponseHandler
+        loadables={outagesLoadables}
+        loadingMessage={t`Loading`}
+      >
+        {children}
+      </ResponseHandler>
+    </PageContainer>
+  );
+
+};

package/src/components/app/ApplicationBootstrap/index.ts

@@ -0,0 +1 @@
+export * from './ApplicationBootstrap';

package/src/components/app/RouterRoot/RouterRoot.tsx

@@ -0,0 +1,187 @@
+import {
+  StrictMode,
+  useCallback,
+  useEffect,
+  useMemo,
+} from 'react';
+import {
+  Outlet,
+  useLocation,
+} from 'react-router-dom';
+import { AuthProvider } from 'react-oidc-context';
+import { UserManager } from 'oidc-client-ts';
+import axios from 'axios';
+import {
+  Box,
+  Button,
+  Typography,
+} from '@mui/material';
+import { t } from 'i18next';
+
+import {
+  AuthApi,
+  LogLevel,
+} from '../../../api';
+import { AuthenticationManager } from '../../../classes/managers/AuthenticationManager';
+import { LogManager } from '../../../classes/managers/LogManager';
+import { NavigationHistoryManager } from '../../../classes/managers/NavigationHistoryManager';
+import { useSubscribable } from '../../../hooks/useSubscribable';
+import { QUERY_KEY } from '../../../models/query';
+import { ChooseIdentityProviderPage } from '../../../pages/ChooseIdentityProviderPage';
+import { HomePage } from '../../../pages/HomePage';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { UserManagerUtil } from '../../../utils/UserManagerUtil';
+import { AuthenticationWrapper } from '../../ui/AuthenticationWrapper';
+import { AuthorizationWrapper } from '../../ui/AuthorizationWrapper';
+import { NotificationsStack } from '../../ui/Notifications';
+import { Spinner } from '../../ui/Spinner';
+import { UserInactivityConfirmation } from '../../ui/UserInactivityConfirmation';
+import type { IdentityProviderWithAvailability } from '../../../models/auth';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import { PageContainer } from '../../ui/PageContainer';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+import { ApplicationBootstrap } from '../ApplicationBootstrap';
+
+
+export const RouterRoot = () => {
+  const location = useLocation();
+
+  const oidcConfiguration = useSubscribable(AuthenticationManager.instance);
+
+  const { isLoading: isIdentityProvidersLoading, error: identityProvidersError, data: identityProvidersWithAvailability } = useQueryMemo<IdentityProviderWithAvailability[], Error, IdentityProviderWithAvailability[]>({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.IDENTITY_PROVIDERS),
+    queryFn: async ({ signal }) => {
+      const providers = (await AuthApi.instance.identityProvidersGetAll({ signal })).data;
+      const providersWithAvailability: IdentityProviderWithAvailability[] = [];
+      for (const provider of providers) {
+        let isAvailable = false;
+        try {
+          await axios.get(provider.discovery_url, {
+            signal,
+            timeout: 3000,
+          });
+          isAvailable = true;
+        } catch {
+          if (oidcConfiguration?.name === provider.name) {
+            AuthenticationManager.instance.next(undefined);
+          }
+          isAvailable = false;
+        }
+        providersWithAvailability.push({
+          provider,
+          isAvailable,
+        });
+      }
+      return providersWithAvailability;
+    },
+    gcTime: Infinity,
+    staleTime: Infinity,
+  });
+
+  const availableIdentityProviders = useMemo<IdentityProviderWithAvailability[]>(() => {
+    return identityProvidersWithAvailability?.filter(x => x.isAvailable) ?? [];
+  }, [identityProvidersWithAvailability]);
+
+  const onSignin = useCallback(() => {
+    LogManager.instance.log([{
+      topic: 'USER_LOGIN',
+      level: LogLevel.INFO,
+    }]);
+  }, []);
+
+  useEffect(() => {
+    NavigationHistoryManager.instance.navigationHistory.push(location.pathname);
+    LogManager.instance.log([{
+      topic: 'USER_NAVIGATION',
+      level: LogLevel.INFO,
+      detail: {
+        pathname: location.pathname,
+      },
+    }]);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (identityProvidersWithAvailability?.length === 1 && availableIdentityProviders.length === 1) {
+      AuthenticationManager.instance.next(identityProvidersWithAvailability[0].provider);
+    }
+  }, [availableIdentityProviders.length, identityProvidersWithAvailability]);
+
+  const onTryAgainButtonClick = useCallback(() => {
+    window.location.reload();
+  }, []);
+
+  const userManager = useMemo<UserManager>(() => {
+    if (!oidcConfiguration || !availableIdentityProviders?.length) {
+      return null;
+    }
+
+    // Validate the storage
+    const identityProvider = identityProvidersWithAvailability.find(x => x.provider.name === oidcConfiguration.name)?.provider;
+    if (!identityProvider || JSON.stringify(oidcConfiguration) !== JSON.stringify(identityProvider)) {
+      AuthenticationManager.instance.next(undefined);
+      return null;
+    }
+    window.userManager = new UserManager(UserManagerUtil.getSettings(oidcConfiguration));
+    return window.userManager;
+  }, [availableIdentityProviders?.length, identityProvidersWithAvailability, oidcConfiguration]);
+
+  if (isIdentityProvidersLoading) {
+    return <Spinner />;
+  }
+
+
+  if (identityProvidersError) {
+    return (
+      <PageContainer
+        singleAction
+        title={'Error'}
+        testIdAttributes={TestIdUtil.createAttributes('ErrorPage')}
+      >
+        <Box
+          marginY={2}
+          sx={{
+            textAlign: 'center',
+          }}
+        >
+          <Typography>
+            {t('{{applicationName}} is currently unavailable. Please try again later.', { applicationName: ConfigManager.instance.config.applicationName })}
+          </Typography>
+          <Box sx={{ marginTop: 2 }}>
+            <Button
+              variant={'outlined'}
+              onClick={onTryAgainButtonClick}
+            >
+              {t`Try again`}
+            </Button>
+          </Box>
+        </Box>
+      </PageContainer>
+    );
+  }
+
+  if (!oidcConfiguration) {
+    return (
+      <ChooseIdentityProviderPage identityProvidersWithAvailability={identityProvidersWithAvailability} />
+    );
+  }
+
+  return (
+    <AuthProvider
+      userManager={userManager}
+      onSigninCallback={onSignin}
+    >
+      <AuthenticationWrapper>
+        <ApplicationBootstrap>
+          <AuthorizationWrapper>
+            <UserInactivityConfirmation />
+            <NotificationsStack />
+            <StrictMode>
+              {location?.pathname === '/' ? <HomePage /> : <Outlet /> }
+            </StrictMode>
+          </AuthorizationWrapper>
+        </ApplicationBootstrap>
+      </AuthenticationWrapper>
+    </AuthProvider>
+  );
+};

package/src/components/app/RouterRoot/index.ts

@@ -0,0 +1 @@
+export * from './RouterRoot';