Merge branch 'dev' of github.com:DefGuard/client into connection_status

src/i18n/en/index.ts

@@ -39,6 +39,9 @@ const en = {
       close: 'Close',
       reset: 'Reset',
     },
+    messages: {
+      error: 'Unexpected error occurred!',
+    },
   },
   components: {
     adminInfo: {
@@ -50,7 +53,7 @@ const en = {
       title: 'Locations',
       sideBar: {
         instances: 'Instances',
-        addInstance: 'Add Instance',
+        addInstance: 'Enter token',
         copyright: {
           copyright: `Copyright © 2023`,
           appVersion: 'Application version: {version:string}',
@@ -90,7 +93,10 @@ const en = {
       },
       modals: {
         addInstanceModal: {
-          title: 'Add instance',
+          titles: {
+            addInstance: 'Enter token',
+            addDevice: 'Add device',
+          },
           messages: {
             success: {
               add: 'Instance added',
@@ -99,13 +105,20 @@ const en = {
             error: 'Operation failed, check url and token.',
           },
           form: {
+            submit: {
+              submitToken: 'Submit token',
+              addDevice: 'Add device',
+            },
             fields: {
               token: {
                 label: 'Token',
               },
               url: {
                 label: 'Proxy URL',
               },
+              name: {
+                label: 'Name',
+              },
             },
           },
         },
@@ -179,6 +192,16 @@ If you have any questions, please consult your assigned admin.All necessary info
           },
         },
         deviceSetup: {
+          desktopSetup: {
+            title: 'Configure this device',
+            controls: {
+              create: 'Configure device',
+              success: 'Device is configured',
+            },
+            messages: {
+              deviceConfigured: 'Device is configured',
+            },
+          },
           optionalMessage: `* This step is OPTIONAL. You can skip it if you wish. This can be configured later in defguard.`,
           cards: {
             device: {

src/i18n/i18n-types.ts

@@ -114,6 +114,12 @@ type RootTranslation = {
 			 */
 			reset: string
 		}
+		messages: {
+			/**
+			 * U​n​e​x​p​e​c​t​e​d​ ​e​r​r​o​r​ ​o​c​c​u​r​r​e​d​!
+			 */
+			error: string
+		}
 	}
 	components: {
 		adminInfo: {
@@ -135,7 +141,7 @@ type RootTranslation = {
 				 */
 				instances: string
 				/**
-				 * A​d​d​ ​I​n​s​t​a​n​c​e
+				 * E​n​t​e​r​ ​t​o​k​e​n
 				 */
 				addInstance: string
 				copyright: {
@@ -228,10 +234,16 @@ type RootTranslation = {
 			}
 			modals: {
 				addInstanceModal: {
-					/**
-					 * A​d​d​ ​i​n​s​t​a​n​c​e
-					 */
-					title: string
+					titles: {
+						/**
+						 * E​n​t​e​r​ ​t​o​k​e​n
+						 */
+						addInstance: string
+						/**
+						 * A​d​d​ ​d​e​v​i​c​e
+						 */
+						addDevice: string
+					}
 					messages: {
 						success: {
 							/**
@@ -249,6 +261,16 @@ type RootTranslation = {
 						error: string
 					}
 					form: {
+						submit: {
+							/**
+							 * S​u​b​m​i​t​ ​t​o​k​e​n
+							 */
+							submitToken: string
+							/**
+							 * A​d​d​ ​d​e​v​i​c​e
+							 */
+							addDevice: string
+						}
 						fields: {
 							token: {
 								/**
@@ -262,6 +284,12 @@ type RootTranslation = {
 								 */
 								label: string
 							}
+							name: {
+								/**
+								 * N​a​m​e
+								 */
+								label: string
+							}
 						}
 					}
 				}
@@ -402,6 +430,28 @@ type RootTranslation = {
 					}
 				}
 				deviceSetup: {
+					desktopSetup: {
+						/**
+						 * C​o​n​f​i​g​u​r​e​ ​t​h​i​s​ ​d​e​v​i​c​e
+						 */
+						title: string
+						controls: {
+							/**
+							 * C​o​n​f​i​g​u​r​e​ ​d​e​v​i​c​e
+							 */
+							create: string
+							/**
+							 * D​e​v​i​c​e​ ​i​s​ ​c​o​n​f​i​g​u​r​e​d
+							 */
+							success: string
+						}
+						messages: {
+							/**
+							 * D​e​v​i​c​e​ ​i​s​ ​c​o​n​f​i​g​u​r​e​d
+							 */
+							deviceConfigured: string
+						}
+					}
 					/**
 					 * *​ ​T​h​i​s​ ​s​t​e​p​ ​i​s​ ​O​P​T​I​O​N​A​L​.​ ​Y​o​u​ ​c​a​n​ ​s​k​i​p​ ​i​t​ ​i​f​ ​y​o​u​ ​w​i​s​h​.​ ​T​h​i​s​ ​c​a​n​ ​b​e​ ​c​o​n​f​i​g​u​r​e​d​ ​l​a​t​e​r​ ​i​n​ ​d​e​f​g​u​a​r​d​.
 					 */
@@ -707,6 +757,12 @@ export type TranslationFunctions = {
 			 */
 			reset: () => LocalizedString
 		}
+		messages: {
+			/**
+			 * Unexpected error occurred!
+			 */
+			error: () => LocalizedString
+		}
 	}
 	components: {
 		adminInfo: {
@@ -728,7 +784,7 @@ export type TranslationFunctions = {
 				 */
 				instances: () => LocalizedString
 				/**
-				 * Add Instance
+				 * Enter token
 				 */
 				addInstance: () => LocalizedString
 				copyright: {
@@ -820,10 +876,16 @@ export type TranslationFunctions = {
 			}
 			modals: {
 				addInstanceModal: {
-					/**
-					 * Add instance
-					 */
-					title: () => LocalizedString
+					titles: {
+						/**
+						 * Enter token
+						 */
+						addInstance: () => LocalizedString
+						/**
+						 * Add device
+						 */
+						addDevice: () => LocalizedString
+					}
 					messages: {
 						success: {
 							/**
@@ -841,6 +903,16 @@ export type TranslationFunctions = {
 						error: () => LocalizedString
 					}
 					form: {
+						submit: {
+							/**
+							 * Submit token
+							 */
+							submitToken: () => LocalizedString
+							/**
+							 * Add device
+							 */
+							addDevice: () => LocalizedString
+						}
 						fields: {
 							token: {
 								/**
@@ -854,6 +926,12 @@ export type TranslationFunctions = {
 								 */
 								label: () => LocalizedString
 							}
+							name: {
+								/**
+								 * Name
+								 */
+								label: () => LocalizedString
+							}
 						}
 					}
 				}
@@ -992,6 +1070,28 @@ export type TranslationFunctions = {
 					}
 				}
 				deviceSetup: {
+					desktopSetup: {
+						/**
+						 * Configure this device
+						 */
+						title: () => LocalizedString
+						controls: {
+							/**
+							 * Configure device
+							 */
+							create: () => LocalizedString
+							/**
+							 * Device is configured
+							 */
+							success: () => LocalizedString
+						}
+						messages: {
+							/**
+							 * Device is configured
+							 */
+							deviceConfigured: () => LocalizedString
+						}
+					}
 					/**
 					 * * This step is OPTIONAL. You can skip it if you wish. This can be configured later in defguard.
 					 */

src/pages/client/ClientPage.tsx

@@ -1,13 +1,32 @@
 import './style.scss';
 
+import { useQuery } from '@tanstack/react-query';
+
 import { useI18nContext } from '../../i18n/i18n-react';
+import { clientApi } from './clientAPI/clientApi';
 import { ClientSideBar } from './components/ClientSideBar/ClientSideBar';
 import { LocationsList } from './components/LocationsList/LocationsList';
 import { AddInstanceModal } from './components/modals/AddInstanceModal/AddInstanceModal';
+import { useClientStore } from './hooks/useClientStore';
+import { clientQueryKeys } from './query';
+
+const { getInstances } = clientApi;
 
 export const ClientPage = () => {
   const { LL } = useI18nContext();
   const pageLL = LL.pages.client;
+  const setInstances = useClientStore((state) => state.setInstances);
+
+  useQuery({
+    queryKey: [clientQueryKeys.getInstances],
+    queryFn: getInstances,
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+    onSuccess: (res) => {
+      setInstances(res);
+    },
+  });
+
   return (
     <>
       <section id="client-page">

src/pages/client/clientAPI/clientApi.ts

@@ -0,0 +1,17 @@
+import { invoke } from '@tauri-apps/api';
+
+import { DefguardInstance, DefguardLocation } from '../types';
+
+const getInstances = async (): Promise<DefguardInstance[]> => invoke('all_instances');
+
+type GetLocationsRequest = {
+  instanceId: number;
+};
+
+const getLocations = async (data: GetLocationsRequest): Promise<DefguardLocation[]> =>
+  invoke('all_locations', data);
+
+export const clientApi = {
+  getInstances,
+  getLocations,
+};

src/pages/client/components/ClientSideBar/components/ClientBarItem/ClientBarItem.tsx

@@ -1,23 +1,20 @@
 import { autoUpdate, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
-import { isUndefined } from 'lodash-es';
-import { useMemo } from 'react';
 
 import SvgIconConnection from '../../../../../../shared/defguard-ui/components/svg/IconConnection';
+import { useClientStore } from '../../../../hooks/useClientStore';
 import { DefguardInstance } from '../../../../types';
 
 type Props = {
   instance: DefguardInstance;
 };
 
 export const ClientBarItem = ({ instance }: Props) => {
-  const active = useMemo(() => {
-    if (instance.locations.length === 0) return false;
-    return !isUndefined(instance.locations.find((l) => l.connected));
-  }, [instance.locations]);
-
+  const setClientStore = useClientStore((state) => state.setState);
+  const selectedInstance = useClientStore((state) => state.selectedInstance);
   const cn = classNames('client-bar-item', 'clickable', {
-    active,
+    active: instance.id === selectedInstance,
+    connected: instance.connected,
   });
 
   const { refs, floatingStyles } = useFloating({
@@ -28,11 +25,15 @@ export const ClientBarItem = ({ instance }: Props) => {
 
   return (
     <>
-      <div className={cn} ref={refs.setReference}>
+      <div
+        className={cn}
+        ref={refs.setReference}
+        onClick={() => setClientStore({ selectedInstance: instance.id })}
+      >
         <SvgIconConnection className="connection-icon" />
         <p>{instance.name}</p>
       </div>
-      {active && (
+      {instance.connected && (
         <div
           className="client-bar-active-item-bar"
           ref={refs.setFloating}

src/pages/client/components/ClientSideBar/style.scss

@@ -81,6 +81,9 @@
         & > p {
           color: var(--text-body-primary);
         }
+      }
+
+      &.connected {
         & > .connection-icon {
           path {
             stroke: var(--surface-positive-primary);