handle update service fallback (#187)

* handle update service fallback

cache update service response

* add apple help modal to configure client page

Author: filipslezaklab

webnext/src/pages/ClientDownload/ClientDownloadPage.tsx

@@ -1,7 +1,9 @@
 import './style.scss';
-import { useLoaderData, useNavigate } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
 import { useMemo, useState } from 'react';
 import { m } from '../../paraglide/messages';
+import { AppleHelpModal } from '../../shared/components/AppleHelpModal/AppleHelpModal';
 import { Page } from '../../shared/components/Page/Page';
 import { PageNavigation } from '../../shared/components/PageNavigation/PageNavigation';
 import { EnrollmentStep } from '../../shared/components/Step/Step';
@@ -16,19 +18,16 @@ import { ModalControls } from '../../shared/defguard-ui/components/ModalControls
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
 import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
+import { getClientArtifactsQueryOptions } from '../../shared/query/queryOptions';
 import { openVirtualLink } from '../../shared/utils/openVirtualLink';
 import androidIcon from './assets/android.png';
-import apple_video_src from './assets/apple_hardware_help.mp4';
 import iosIcon from './assets/ios.png';
 import laptopIcon from './assets/laptop.png';
 import desktopIcon from './assets/pc-tower.png';
 
-// open link in onClick handler
-
 export const ClientDownloadPage = () => {
-  const pageData = useLoaderData({
-    from: '/download',
-  });
+  const { data: pageData } = useQuery(getClientArtifactsQueryOptions);
+
   const navigate = useNavigate();
 
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
@@ -163,6 +162,12 @@ export const ClientDownloadPage = () => {
           icon={iosIcon}
         />
       </div>
+      <AppleHelpModal
+        isOpen={appleHelpModalOpen}
+        onClose={() => {
+          setAppleHelpModalOpen(false);
+        }}
+      />
       <Modal
         title={m.client_download_modal_title()}
         size="small"
@@ -188,37 +193,6 @@ export const ClientDownloadPage = () => {
           }}
         />
       </Modal>
-      <Modal
-        title={m.client_download_apple_help_title()}
-        size="small"
-        isOpen={appleHelpModalOpen}
-        onClose={() => {
-          setAppleHelpModalOpen(false);
-        }}
-      >
-        <p>{m.client_download_apple_help_content_1()}</p>
-        <SizedBox height={ThemeSpacing.Xl} />
-        <video
-          controls
-          playsInline
-          preload="metadata"
-          src={apple_video_src}
-          style={{
-            width: '100%',
-            height: 'auto',
-          }}
-        />
-        <SizedBox height={ThemeSpacing.Xl} />
-        <p>{m.client_download_apple_help_content_2()}</p>
-        <ModalControls
-          submitProps={{
-            text: m.controls_got_it(),
-            onClick: () => {
-              setAppleHelpModalOpen(false);
-            },
-          }}
-        />
-      </Modal>
       <PageNavigation
         backText={m.controls_back()}
         onBack={() => {

webnext/src/pages/ClientDownload/style.scss

@@ -34,6 +34,7 @@
       & > img {
         width: 60px;
         height: 60px;
+        user-select: none;
       }
 
       .btn {

webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx

@@ -1,10 +1,12 @@
 import './style.scss';
 
+import { useQuery } from '@tanstack/react-query';
 import { useLoaderData } from '@tanstack/react-router';
 import { capitalCase } from 'change-case';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
+import { AppleHelpModal } from '../../../shared/components/AppleHelpModal/AppleHelpModal';
 import { ContactFooter } from '../../../shared/components/ContactFooter/ContactFooter';
 import { ContainerWithIcon } from '../../../shared/components/ContainerWithIcon/ContainerWithIcon';
 import { Page } from '../../../shared/components/Page/Page';
@@ -19,13 +21,17 @@ import { Icon } from '../../../shared/defguard-ui/components/Icon';
 import type { MenuItemsGroup } from '../../../shared/defguard-ui/components/Menu/types';
 import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../../shared/defguard-ui/types';
+import { getClientArtifactsQueryOptions } from '../../../shared/query/queryOptions';
 import { openVirtualLink } from '../../../shared/utils/openVirtualLink';
 
 export const ConfigureClientPage = () => {
   const pageData = useLoaderData({
     from: '/client-setup',
   });
-  const clientLinks = pageData.clientDownload;
+
+  const { data: clientLinks } = useQuery(getClientArtifactsQueryOptions);
+
+  const [appleHelpModalOpen, setAppleHelpModalOpen] = useState(false);
 
   const clientDownloadMenu = useMemo(
     (): MenuItemsGroup[] => [
@@ -41,6 +47,7 @@ export const ConfigureClientPage = () => {
       {
         header: {
           text: m.client_download_apple_help_header(),
+          onHelp: () => setAppleHelpModalOpen(true),
         },
         items: [
           {
@@ -214,6 +221,12 @@ export const ConfigureClientPage = () => {
         <p className="finish">{m.client_setup_footer_extra()}</p>
         <ContactFooter email={pageData.enrollmentData.admin.email} />
       </footer>
+      <AppleHelpModal
+        isOpen={appleHelpModalOpen}
+        onClose={() => {
+          setAppleHelpModalOpen(false);
+        }}
+      />
     </Page>
   );
 };

webnext/src/routes/client-setup.tsx

@@ -1,11 +1,12 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
 import z from 'zod';
+import { queryClient } from '../app/query';
 import { ConfigureClientPage } from '../pages/enrollment/ConfigureClient/ConfigureClientPage';
 import { api } from '../shared/api/api';
 import type { EnrollmentStartResponse } from '../shared/api/types';
-import { updateServiceApi } from '../shared/api/update-service';
 import { isPresent } from '../shared/defguard-ui/utils/isPresent';
 import { useEnrollmentStore } from '../shared/hooks/useEnrollmentStore';
+import { getClientArtifactsQueryOptions } from '../shared/query/queryOptions';
 
 const schema = z.object({
   code: z.string().trim().optional(),
@@ -39,7 +40,8 @@ export const Route = createFileRoute('/client-setup')({
     };
   },
   loader: async ({ context: { openid } }) => {
-    const clientDownload = await updateServiceApi.getClientArtifacts().catch(() => null);
+    void queryClient.ensureQueryData(getClientArtifactsQueryOptions);
+
     if (openid) {
       try {
         const openIdResponse = await api.openId.enrollmentCallback.callbackFn({
@@ -70,7 +72,6 @@ export const Route = createFileRoute('/client-setup')({
     }
     const state = useEnrollmentStore.getState();
     return {
-      clientDownload,
       token: state.token as string,
       enrollmentData: state.enrollmentData as EnrollmentStartResponse,
     };

webnext/src/routes/download.tsx

@@ -1,13 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router';
+import { queryClient } from '../app/query';
 import { ClientDownloadPage } from '../pages/ClientDownload/ClientDownloadPage';
-import { updateServiceApi } from '../shared/api/update-service';
+import { getClientArtifactsQueryOptions } from '../shared/query/queryOptions';
 
 export const Route = createFileRoute('/download')({
   component: ClientDownloadPage,
-  loader: async () => {
-    const clientVersionData = await updateServiceApi
-      .getClientArtifacts()
-      .catch(() => null);
-    return clientVersionData;
-  },
+  loader: () => queryClient.ensureQueryData(getClientArtifactsQueryOptions),
 });

webnext/src/shared/api/update-service.ts

@@ -3,6 +3,8 @@ import qs from 'qs';
 
 const baseUrl = import.meta.env.VITE_UPDATE_BASE_URL as string | undefined;
 
+const clientDownloadFallback = 'https://defguard.net/download';
+
 const client = axios.create({
   baseURL: baseUrl ?? 'https://update-service-dev.defguard.net/api',
   headers: { 'Content-Type': 'application/json' },
@@ -33,7 +35,32 @@ const updateServiceApi = {
           source: 'enrollment',
         },
       })
-      .then((response) => response.data),
+      .then((response) => {
+        const { data } = response;
+        const res: ClientVersionCheck = {
+          deb_amd64: data.deb_amd64 ?? clientDownloadFallback,
+          deb_arm64: data.deb_arm64 ?? clientDownloadFallback,
+          macos_amd64: data.macos_amd64 ?? clientDownloadFallback,
+          macos_arm64: data.macos_arm64 ?? clientDownloadFallback,
+          rpm_amd64: data.rpm_amd64 ?? clientDownloadFallback,
+          rpm_arm64: data.rpm_arm64 ?? clientDownloadFallback,
+          windows_amd64: data.windows_amd64 ?? clientDownloadFallback,
+        };
+        return res;
+      })
+      .catch((e) => {
+        console.error(e);
+        const fallback: ClientVersionCheck = {
+          deb_amd64: clientDownloadFallback,
+          deb_arm64: clientDownloadFallback,
+          macos_amd64: clientDownloadFallback,
+          macos_arm64: clientDownloadFallback,
+          rpm_amd64: clientDownloadFallback,
+          rpm_arm64: clientDownloadFallback,
+          windows_amd64: clientDownloadFallback,
+        };
+        return fallback;
+      }),
 } as const;
 
 export { updateServiceApi };

webnext/src/shared/components/AppleHelpModal/AppleHelpModal.tsx

@@ -0,0 +1,43 @@
+import { m } from '../../../paraglide/messages';
+import { Modal } from '../../defguard-ui/components/Modal/Modal';
+import { ModalControls } from '../../defguard-ui/components/ModalControls/ModalControls';
+import { SizedBox } from '../../defguard-ui/components/SizedBox/SizedBox';
+import { ThemeSpacing } from '../../defguard-ui/types';
+import apple_video_src from './assets/apple_hardware_help.mp4';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const AppleHelpModal = ({ isOpen, onClose }: Props) => {
+  return (
+    <Modal
+      title={m.client_download_apple_help_title()}
+      size="small"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <p>{m.client_download_apple_help_content_1()}</p>
+      <SizedBox height={ThemeSpacing.Xl} />
+      <video
+        controls
+        playsInline
+        preload="metadata"
+        src={apple_video_src}
+        style={{
+          width: '100%',
+          height: 'auto',
+        }}
+      />
+      <SizedBox height={ThemeSpacing.Xl} />
+      <p>{m.client_download_apple_help_content_2()}</p>
+      <ModalControls
+        submitProps={{
+          text: m.controls_got_it(),
+          onClick: onClose,
+        }}
+      />
+    </Modal>
+  );
+};

…tDownload/assets/apple_hardware_help.mp4 …HelpModal/assets/apple_hardware_help.mp4webnext/src/pages/ClientDownload/assets/apple_hardware_help.mp4 renamed to webnext/src/shared/components/AppleHelpModal/assets/apple_hardware_help.mp4 webnext/src/pages/ClientDownload/assets/apple_hardware_help.mp4 renamed to webnext/src/shared/components/AppleHelpModal/assets/apple_hardware_help.mp4

@@ -7,9 +7,16 @@ import { MenuHeader } from './components/MenuHeader';
 import { MenuSpacer } from './components/MenuSpacer';
 import type { MenuProps } from './types';
 
-export const Menu = ({ itemGroups, ref, className, onClose, ...props }: MenuProps) => {
+export const Menu = ({
+  itemGroups,
+  ref,
+  className,
+  onClose,
+  testId,
+  ...props
+}: MenuProps) => {
   return (
-    <div className={clsx('menu', className)} ref={ref} {...props}>
+    <div className={clsx('menu', className)} ref={ref} data-testid={testId} {...props}>
       {itemGroups.map((group, groupIndex) => (
         <Fragment key={group.header?.text ?? groupIndex}>
           {isPresent(group.header) && <MenuHeader {...group.header} onClose={onClose} />}

webnext/src/shared/defguard-ui/components/Menu/Menu.tsx

@@ -3,12 +3,13 @@ import { isPresent } from '../../../utils/isPresent';
 import { InteractionBox } from '../../InteractionBox/InteractionBox';
 import type { MenuHeaderProps } from '../types';
 
-export const MenuHeader = ({ text, onHelp, onClose }: MenuHeaderProps) => {
+export const MenuHeader = ({ text, testId, onHelp, onClose }: MenuHeaderProps) => {
   return (
     <div
       className={clsx('menu-header', {
         'with-help': isPresent(onHelp),
       })}
+      data-testid={testId}
     >
       <p className="group-title">{text}</p>
       {isPresent(onHelp) && (