handle update service fallback

cache update service response

Author: filipslezaklab

webnext/src/pages/ClientDownload/ClientDownloadPage.tsx

@@ -1,5 +1,6 @@
 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 { Page } from '../../shared/components/Page/Page';
@@ -16,19 +17,17 @@ 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);

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,5 +1,6 @@
 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';
@@ -19,13 +20,15 @@ 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 clientDownloadMenu = useMemo(
     (): MenuItemsGroup[] => [

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/defguard-ui/components/Menu/Menu.tsx

@@ -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/components/MenuHeader.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) && (

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

@@ -8,9 +8,10 @@ export const MenuItem = ({
   text,
   icon,
   items,
+  testId,
+  variant,
   onClick,
   onClose,
-  variant,
 }: MenuItemProps) => {
   const hasItems = isPresent(items) && items.length > 0;
   const hasIcon = isPresent(icon);
@@ -25,6 +26,7 @@ export const MenuItem = ({
         'grid-full': hasIcon && hasItems,
         nested: hasItems,
       })}
+      data-testid={testId}
       onClick={() => {
         if (!disabled) {
           onClick?.();

webnext/src/shared/defguard-ui/components/Menu/types.ts

@@ -3,8 +3,9 @@ import type { IconKindValue } from '../Icon/icon-types';
 
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
   itemGroups: MenuItemsGroup[];
-  onClose?: () => void;
   ref?: Ref<HTMLDivElement>;
+  testId?: string;
+  onClose?: () => void;
 }
 
 export interface MenuItemsGroup {
@@ -15,16 +16,18 @@ export interface MenuItemsGroup {
 export interface MenuItemProps {
   text: string;
   variant?: 'default' | 'danger';
+  disabled?: boolean;
   icon?: IconKindValue;
   items?: MenuItemProps[];
-  disabled?: boolean;
+  testId?: string;
   onClick?: () => void;
   onClose?: () => void;
 }
 
 export interface MenuHeaderProps {
   text: string;
   tooltip?: string;
+  testId?: string;
   onClose?: () => void;
   onHelp?: () => void;
 }