[New UI] Location details

new-ui/src/pages/full/LocationDetailsPage/LocationDetailsPage.tsx

@@ -0,0 +1,70 @@
+import './style.scss';
+
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate, useSearch } from '@tanstack/react-router';
+import { Button } from '../../../shared/components/Button/Button';
+import { ButtonVariant } from '../../../shared/components/Button/types';
+import { Controls } from '../../../shared/components/Controls/Controls';
+import { DetailsFold } from '../../../shared/components/DetailsFold/DetailsFold';
+import { FullPageTitle } from '../../../shared/components/FullPageTitle/FullPageTitle';
+import { FullPage } from '../../../shared/layouts/FullPage/FullPage';
+import { getLocationDetailsQueryOptions } from '../../../shared/rust-api/query';
+import { ThemeSpacing } from '../../../shared/types';
+
+const fallback = '–';
+
+export const LocationDetailsPage = () => {
+  const { locationId, locationName, connectionType } = useSearch({
+    from: '/full/_default/location-details',
+  });
+  const navigate = useNavigate();
+
+  const { data } = useQuery(
+    getLocationDetailsQueryOptions({ locationId, connectionType }),
+  );
+
+  return (
+    <FullPage id="location-details-page">
+      <FullPageTitle title={`${locationName} details`} spacing={ThemeSpacing.Xl} />
+      <DetailsFold
+        sections={[
+          {
+            title: 'Device configuration',
+            rows: [
+              { label: 'Public key', value: data?.pubkey ?? fallback },
+              { label: 'Addresses', value: data?.address ?? fallback },
+              { label: 'Listen port', value: data?.listen_port || fallback },
+            ],
+          },
+          {
+            title: 'VPN Server Configuration',
+            compact: true,
+            rows: [
+              { label: 'Public key', value: data?.peer_pubkey ?? fallback },
+              { label: 'Allowed IPs:', value: data?.allowed_ips ?? fallback },
+              { label: 'DNS servers:', value: data?.dns ?? fallback },
+              {
+                label: 'Persistent keep alive',
+                value: data?.persistent_keepalive_interval ?? fallback,
+              },
+              {
+                label: 'Latest Handshake',
+                value:
+                  data?.last_handshake != null
+                    ? `${data.last_handshake} sec ago`
+                    : fallback,
+              },
+            ],
+          },
+        ]}
+      />
+      <Controls>
+        <Button
+          text="Back"
+          variant={ButtonVariant.Primary}
+          onClick={() => navigate({ to: '/full/overview' })}
+        />
+      </Controls>
+    </FullPage>
+  );
+};

new-ui/src/pages/full/LocationDetailsPage/style.scss

@@ -0,0 +1,7 @@
+#location-details-page {
+  .controls {
+    justify-content: flex-end;
+    margin-top: auto;
+    padding-top: var(--spacing-3xl);
+  }
+}

new-ui/src/pages/full/OverviewPage/OverviewPage.tsx

@@ -2,8 +2,7 @@ import './style.scss';
 import { useQuery } from '@tanstack/react-query';
 import { platform } from '@tauri-apps/plugin-os';
 import clsx from 'clsx';
-import { Fragment, useEffect, useMemo, useState } from 'react';
-import { Fold } from '../../../shared/components/Fold/Fold';
+import { Fragment, useMemo } from 'react';
 import { OverviewLocationCard } from '../../../shared/components/OverviewLocationCard/OverviewLocationCard';
 import { ScrollContainer } from '../../../shared/components/ScrollContainer/ScrollContainer';
 import { SizedBox } from '../../../shared/components/SizedBox/SizedBox';
@@ -14,13 +13,11 @@ import type { InstanceInfo } from '../../../shared/rust-api/types';
 import { ThemeSpacing } from '../../../shared/types';
 import { isPresent } from '../../../shared/utils/isPresent';
 import { ConnectModal } from './components/ConnectModal/ConnectModal';
-import { DetailsFold } from './components/DetailsFold/DetailsFold';
 import { OverviewSelection } from './components/OverviewSelection/OverviewSelection';
 
 const isWindows = platform() === 'windows';
 
 export const OverviewPage = () => {
-  const [detailsOpen, setDetailsOpen] = useState(false);
   const { instances, tunnels } = useAppData();
   const { viewSelection: selection } = useAppData();
 
@@ -39,13 +36,6 @@ export const OverviewPage = () => {
     return [selection.data];
   }, [selection, locations]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: side effect only relevant on selection
-  useEffect(() => {
-    if (selection?.kind === 'tunnel' && detailsOpen) {
-      setDetailsOpen(false);
-    }
-  }, [selection?.kind]);
-
   return (
     <Fragment>
       <FullPage id="overview-page" hideScrollContainer>
@@ -59,30 +49,6 @@ export const OverviewPage = () => {
             <ScrollContainer>
               <div className="header">
                 <p>{`Locations (${displayedLocations.length})`}</p>
-                {/* {selection?.kind === 'instance' && (
-                  <button
-                    id="show-instance-details"
-                    onClick={() => {
-                      setDetailsOpen((s) => !s);
-                    }}
-                  >
-                    <span>Show instance details</span>
-                    <Icon
-                      size={16}
-                      icon={IconKind.ArrowSmall}
-                      rotationDirection={detailsOpen ? Direction.DOWN : Direction.RIGHT}
-                      staticColor={ThemeVariable.FgWhite80}
-                    />
-                  </button>
-                )} */}
-              </div>
-              <div className="instance-details">
-                <Fold open={detailsOpen && selection?.kind === 'instance'}>
-                  <SizedBox height={ThemeSpacing.Xl} />
-                  {selection?.kind === 'instance' && (
-                    <DetailsFold data={selection.data} />
-                  )}
-                </Fold>
               </div>
               <SizedBox height={ThemeSpacing.Xl} />
               <div className="locations">

new-ui/src/routeTree.gen.ts

@@ -24,6 +24,7 @@ import { Route as FullDefaultSupportRouteImport } from './routes/full/_default/s
 import { Route as FullDefaultSettingsRouteImport } from './routes/full/_default/settings'
 import { Route as FullDefaultOverviewRouteImport } from './routes/full/_default/overview'
 import { Route as FullDefaultLogRouteImport } from './routes/full/_default/log'
+import { Route as FullDefaultLocationDetailsRouteImport } from './routes/full/_default/location-details'
 import { Route as FullDefaultAddIndexRouteImport } from './routes/full/_default/add/index'
 import { Route as FullDefaultAddTunnelRouteImport } from './routes/full/_default/add/tunnel'
 import { Route as FullDefaultAddInstanceRouteImport } from './routes/full/_default/add/instance'
@@ -102,6 +103,12 @@ const FullDefaultLogRoute = FullDefaultLogRouteImport.update({
   path: '/log',
   getParentRoute: () => FullDefaultRoute,
 } as any)
+const FullDefaultLocationDetailsRoute =
+  FullDefaultLocationDetailsRouteImport.update({
+    id: '/location-details',
+    path: '/location-details',
+    getParentRoute: () => FullDefaultRoute,
+  } as any)
 const FullDefaultAddIndexRoute = FullDefaultAddIndexRouteImport.update({
   id: '/add/',
   path: '/add/',
@@ -128,6 +135,7 @@ export interface FileRoutesByFullPath {
   '/compact/': typeof CompactIndexRoute
   '/full/': typeof FullIndexRoute
   '/playground/': typeof PlaygroundIndexRoute
+  '/full/location-details': typeof FullDefaultLocationDetailsRoute
   '/full/log': typeof FullDefaultLogRoute
   '/full/overview': typeof FullDefaultOverviewRoute
   '/full/settings': typeof FullDefaultSettingsRoute
@@ -146,6 +154,7 @@ export interface FileRoutesByTo {
   '/full/tunnel-wizard': typeof FullTunnelWizardRoute
   '/compact': typeof CompactIndexRoute
   '/playground': typeof PlaygroundIndexRoute
+  '/full/location-details': typeof FullDefaultLocationDetailsRoute
   '/full/log': typeof FullDefaultLogRoute
   '/full/overview': typeof FullDefaultOverviewRoute
   '/full/settings': typeof FullDefaultSettingsRoute
@@ -167,6 +176,7 @@ export interface FileRoutesById {
   '/compact/': typeof CompactIndexRoute
   '/full/': typeof FullIndexRoute
   '/playground/': typeof PlaygroundIndexRoute
+  '/full/_default/location-details': typeof FullDefaultLocationDetailsRoute
   '/full/_default/log': typeof FullDefaultLogRoute
   '/full/_default/overview': typeof FullDefaultOverviewRoute
   '/full/_default/settings': typeof FullDefaultSettingsRoute
@@ -188,6 +198,7 @@ export interface FileRouteTypes {
     | '/compact/'
     | '/full/'
     | '/playground/'
+    | '/full/location-details'
     | '/full/log'
     | '/full/overview'
     | '/full/settings'
@@ -206,6 +217,7 @@ export interface FileRouteTypes {
     | '/full/tunnel-wizard'
     | '/compact'
     | '/playground'
+    | '/full/location-details'
     | '/full/log'
     | '/full/overview'
     | '/full/settings'
@@ -226,6 +238,7 @@ export interface FileRouteTypes {
     | '/compact/'
     | '/full/'
     | '/playground/'
+    | '/full/_default/location-details'
     | '/full/_default/log'
     | '/full/_default/overview'
     | '/full/_default/settings'
@@ -351,6 +364,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof FullDefaultLogRouteImport
       parentRoute: typeof FullDefaultRoute
     }
+    '/full/_default/location-details': {
+      id: '/full/_default/location-details'
+      path: '/location-details'
+      fullPath: '/full/location-details'
+      preLoaderRoute: typeof FullDefaultLocationDetailsRouteImport
+      parentRoute: typeof FullDefaultRoute
+    }
     '/full/_default/add/': {
       id: '/full/_default/add/'
       path: '/add'
@@ -376,6 +396,7 @@ declare module '@tanstack/react-router' {
 }
 
 interface FullDefaultRouteChildren {
+  FullDefaultLocationDetailsRoute: typeof FullDefaultLocationDetailsRoute
   FullDefaultLogRoute: typeof FullDefaultLogRoute
   FullDefaultOverviewRoute: typeof FullDefaultOverviewRoute
   FullDefaultSettingsRoute: typeof FullDefaultSettingsRoute
@@ -387,6 +408,7 @@ interface FullDefaultRouteChildren {
 }
 
 const FullDefaultRouteChildren: FullDefaultRouteChildren = {
+  FullDefaultLocationDetailsRoute: FullDefaultLocationDetailsRoute,
   FullDefaultLogRoute: FullDefaultLogRoute,
   FullDefaultOverviewRoute: FullDefaultOverviewRoute,
   FullDefaultSettingsRoute: FullDefaultSettingsRoute,

new-ui/src/routes/full/_default/location-details.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
+import { LocationDetailsPage } from '../../../pages/full/LocationDetailsPage/LocationDetailsPage';
+
+const searchSchema = z.object({
+  locationId: z.number(),
+  locationName: z.string(),
+  connectionType: z.enum(['Location', 'Tunnel']),
+});
+
+export const Route = createFileRoute('/full/_default/location-details')({
+  validateSearch: searchSchema,
+  component: LocationDetailsPage,
+});

new-ui/src/shared/components/DetailsFold/DetailsFold.tsx

@@ -0,0 +1,43 @@
+import './style.scss';
+
+import clsx from 'clsx';
+import { Fragment, type ReactNode } from 'react';
+import { Divider } from '../Divider/Divider';
+
+export type DetailsFoldRow = {
+  label: string;
+  value: ReactNode;
+};
+
+export type DetailsFoldSection = {
+  title: string;
+  rows: DetailsFoldRow[];
+  compact?: boolean;
+};
+
+type Props = {
+  sections: DetailsFoldSection[];
+};
+
+export const DetailsFold = ({ sections }: Props) => {
+  return (
+    <div className="details-fold">
+      {sections.map((section) => (
+        <div className="group" key={section.title}>
+          <p>{section.title}</p>
+          <div className={clsx('card', { compact: section.compact })}>
+            {section.rows.map((row, index) => (
+              <Fragment key={row.label}>
+                {index > 0 && <Divider />}
+                <div className="row">
+                  <p>{row.label}</p>
+                  <p>{row.value}</p>
+                </div>
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};