style: no data update

src/i18n/en/index.ts

@@ -80,8 +80,11 @@ const en = {
         active: 'Active',
         neverConnected: 'Never connected',
       },
-      locationNoData:
-        'This device was never connected to this location, connect to view statistics and information about connection',
+      locationNoData: {
+        title: 'Never Connected',
+        content:
+          'This device was never connected to this location, connect to view statistics and information about connection',
+      },
       detailView: {
         history: {
           title: 'Connection history',

src/i18n/i18n-types.ts

@@ -210,10 +210,16 @@ type RootTranslation = {
 				 */
 				neverConnected: string
 			}
-			/**
-			 * T​h​i​s​ ​d​e​v​i​c​e​ ​w​a​s​ ​n​e​v​e​r​ ​c​o​n​n​e​c​t​e​d​ ​t​o​ ​t​h​i​s​ ​l​o​c​a​t​i​o​n​,​ ​c​o​n​n​e​c​t​ ​t​o​ ​v​i​e​w​ ​s​t​a​t​i​s​t​i​c​s​ ​a​n​d​ ​i​n​f​o​r​m​a​t​i​o​n​ ​a​b​o​u​t​ ​c​o​n​n​e​c​t​i​o​n
-			 */
-			locationNoData: string
+			locationNoData: {
+				/**
+				 * N​e​v​e​r​ ​C​o​n​n​e​c​t​e​d
+				 */
+				title: string
+				/**
+				 * T​h​i​s​ ​d​e​v​i​c​e​ ​w​a​s​ ​n​e​v​e​r​ ​c​o​n​n​e​c​t​e​d​ ​t​o​ ​t​h​i​s​ ​l​o​c​a​t​i​o​n​,​ ​c​o​n​n​e​c​t​ ​t​o​ ​v​i​e​w​ ​s​t​a​t​i​s​t​i​c​s​ ​a​n​d​ ​i​n​f​o​r​m​a​t​i​o​n​ ​a​b​o​u​t​ ​c​o​n​n​e​c​t​i​o​n
+				 */
+				content: string
+			}
 			detailView: {
 				history: {
 					/**
@@ -864,10 +870,16 @@ export type TranslationFunctions = {
 				 */
 				neverConnected: () => LocalizedString
 			}
-			/**
-			 * This device was never connected to this location, connect to view statistics and information about connection
-			 */
-			locationNoData: () => LocalizedString
+			locationNoData: {
+				/**
+				 * Never Connected
+				 */
+				title: () => LocalizedString
+				/**
+				 * This device was never connected to this location, connect to view statistics and information about connection
+				 */
+				content: () => LocalizedString
+			}
 			detailView: {
 				history: {
 					/**

src/pages/client/ClientPage.tsx

@@ -20,6 +20,7 @@ export const ClientPage = () => {
   const pageLL = LL.pages.client;
   const setInstances = useClientStore((state) => state.setInstances);
 
+  //FIXME: Remore logs once bug causing no instances in listing is found and fixed
   useQuery({
     queryKey: [clientQueryKeys.getInstances],
     queryFn: getInstances,
@@ -28,6 +29,12 @@ export const ClientPage = () => {
     onSuccess: (res) => {
       setInstances(res);
       info('Retrieved all instances');
+      if (res.length) {
+        console.log(`FOUND INSTANCES COUNT : ${res.length}`);
+        console.log(`FOUND INSTANCES : ${res.map((i) => i.name).join(' ')}`);
+      } else {
+        console.warn('NO INSTANCES RECEIVED FROM TAURI BACKEND');
+      }
     },
     onError: (err) => {
       error(`Error retrieving instances: ${String(err)}`);

src/pages/client/components/LocationsList/components/LocationCardNoData/LocationCardNoData.tsx

@@ -0,0 +1,12 @@
+import { useI18nContext } from '../../../../../../i18n/i18n-react';
+import "./style.scss";
+
+export const LocationCardNoData = () => {
+  const { LL } = useI18nContext();
+  return (
+    <div className="location-no-data">
+      <p>{LL.pages.client.locationNoData.title()}</p>
+      <p>{LL.pages.client.locationNoData.content()}</p>
+    </div>
+  );
+};

src/pages/client/components/LocationsList/components/LocationCardNoData/style.scss

@@ -0,0 +1,25 @@
+@use '@scssutils' as *;
+
+.location-no-data {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 3px;
+
+  & > p {
+    width: 100%;
+    &:nth-child(1) {
+      @include typography(app-body-1);
+      color: var(--text-body-primary);
+      text-align: center;
+    }
+    &:nth-child(2) {
+      @include typography(app-input);
+      color: var(--text-button-primary);
+      text-align: center;
+    }
+  }
+}

src/pages/client/components/LocationsList/components/LocationsDetailView/LocationsDetailView.tsx

@@ -17,6 +17,7 @@ import { DefguardInstance, DefguardLocation } from '../../../../types';
 import { LocationUsageChart } from '../../../LocationUsageChart/LocationUsageChart';
 import { LocationCardConnectButton } from '../LocationCardConnectButton/LocationCardConnectButton';
 import { LocationCardInfo } from '../LocationCardInfo/LocationCardInfo';
+import { LocationCardNoData } from '../LocationCardNoData/LocationCardNoData';
 import { LocationCardTitle } from '../LocationCardTitle/LocationCardTitle';
 import { LocationConnectionHistory } from '../LocationConnectionHistory/LocationConnectionHistory';
 
@@ -58,6 +59,7 @@ export const LocationsDetailView = ({ locations }: Props) => {
       error(`Error retrieving connection history: ${e}`);
     },
   });
+
   const { data: lastConnection } = useQuery({
     queryKey: [clientQueryKeys.getConnections, activeLocationId as number],
     queryFn: () => getLastConnection({ locationId: activeLocationId as number }),
@@ -108,6 +110,7 @@ export const LocationsDetailView = ({ locations }: Props) => {
         {connectionHistory && connectionHistory.length ? (
           <LocationConnectionHistory connections={connectionHistory} />
         ) : null}
+        {(!locationStats || locationStats.length === 0) && <LocationCardNoData />}
       </Card>
     </div>
   );

src/pages/client/components/LocationsList/components/LocationsDetailView/style.scss

@@ -19,6 +19,8 @@
     padding: 20px;
     min-height: 50vh;
     border-top-left-radius: 0;
+    overflow: hidden;
+    max-height: none;
 
     @include media-breakpoint-up(lg) {
       min-height: 600px;
@@ -42,6 +44,14 @@
       justify-content: space-between;
     }
 
+    .location-no-data {
+      flex-grow: 1;
+
+      & > * {
+        max-width: 400px;
+      }
+    }
+
     & > .location-usage {
       display: flex;
       flex-direction: column;

src/pages/client/components/LocationsList/components/LocationsGridView/LocationsGridView.tsx

@@ -14,6 +14,7 @@ import { DefguardInstance, DefguardLocation } from '../../../../types';
 import { LocationUsageChart } from '../../../LocationUsageChart/LocationUsageChart';
 import { LocationCardConnectButton } from '../LocationCardConnectButton/LocationCardConnectButton';
 import { LocationCardInfo } from '../LocationCardInfo/LocationCardInfo';
+import { LocationCardNoData } from '../LocationCardNoData/LocationCardNoData';
 import { LocationCardTitle } from '../LocationCardTitle/LocationCardTitle';
 
 type Props = {
@@ -36,7 +37,6 @@ type GridItemProps = {
 };
 
 const GridItem = ({ location }: GridItemProps) => {
-  const { LL } = useI18nContext();
   const cn = classNames(
     'grid-item',
     {
@@ -75,25 +75,17 @@ const GridItem = ({ location }: GridItemProps) => {
         <LocationCardTitle location={location} />
         <LocationCardConnectButton location={location} />
       </div>
-      {lastConnection || location.active ? (
-        <>
+      {locationStats &&
+        locationStats.length > 0 &&
+        (lastConnection || location.active) && (
           <div className="info">
             <LocationCardInfo location={location} connection={lastConnection} />
           </div>
-          {locationStats ? (
-            <LocationUsageChart
-              heightX={20}
-              width={400}
-              height={50}
-              hideX={false}
-              data={locationStats}
-            />
-          ) : null}
-        </>
-      ) : (
-        <p className="no-data">{LL.pages.client.locationNoData()}</p>
+        )}
+      {locationStats && locationStats.length > 0 && (
+        <LocationUsageChart heightX={20} hideX={false} data={locationStats} />
       )}
-      <div className="stats"></div>
+      {(!locationStats || locationStats.length === 0) && <LocationCardNoData />}
     </Card>
   );
 };

src/pages/client/components/LocationsList/components/LocationsGridView/style.scss

@@ -52,15 +52,10 @@
       }
     }
 
-    & > .no-data {
+    & > .location-no-data {
+      padding-top: 32px;
+      height: max-content;
       width: 100%;
-      display: block;
-      text-align: center;
-      margin-top: 42px;
-
-      @include typography(app-button-xl);
-
-      color: var(--text-body-primary);
     }
   }
 }

src/pages/client/style.scss

@@ -5,6 +5,7 @@
   box-sizing: border-box;
   min-height: 100vh;
   background-color: var(--surface-frame-bg);
+  overflow: auto;
 
   padding: 30px 20px 30px calc(20px + 70px);