Show "Never" when a user never logged in instead of a date (#335)

* Add option to ignore errors

* Block application and show loading until users are fetched

.github/ISSUE_TEMPLATE/bug-issue-report.md

@@ -0,0 +1,44 @@
+---
+name: Bug/Issue report
+about: Create a report to help us improve
+title: ''
+labels: ['needs-triage']
+assignees: ''
+
+---
+
+**Describe the problem**
+
+A clear and concise description of what the problem is.
+
+**To Reproduce**
+
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+
+A clear and concise description of what you expected to happen.
+
+**Are you using NetBird Cloud?**
+
+Please specify whether you use NetBird Cloud or self-host NetBird's control plane.
+
+**NetBird version**
+
+`netbird version`
+
+**NetBird status -d output:**
+
+If applicable, add the `netbird status -d' command output.
+
+**Screenshots**
+
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ['feature-request','needs-triage']
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

src/app/(dashboard)/team/user/page.tsx

@@ -252,6 +252,9 @@ function UserOverview({ user }: Props) {
 
 function UserInformationCard({ user }: { user: User }) {
   const isServiceUser = user.is_service_user || false;
+  const neverLoggedIn = dayjs(user.last_login).isBefore(
+    dayjs().subtract(1000, "years"),
+  );
 
   return (
     <Card>
@@ -307,10 +310,12 @@ function UserInformationCard({ user }: { user: User }) {
                 </>
               }
               value={
-                dayjs(user.last_login).format("D MMMM, YYYY [at] h:mm A") +
-                " (" +
-                dayjs().to(user.last_login) +
-                ")"
+                neverLoggedIn
+                  ? "Never"
+                  : dayjs(user.last_login).format("D MMMM, YYYY [at] h:mm A") +
+                    " (" +
+                    dayjs().to(user.last_login) +
+                    ")"
               }
             />
           </>

src/contexts/ApplicationProvider.tsx

@@ -1,8 +1,9 @@
 import { useOidcUser } from "@axa-fr/react-oidc";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { useApiCall } from "@utils/api";
 import { useIsMd } from "@utils/responsive";
 import { getLatestNetbirdRelease } from "@utils/version";
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { User } from "@/interfaces/User";
 import type { NetbirdRelease } from "@/interfaces/Version";
@@ -28,10 +29,18 @@ export default function ApplicationProvider({ children }: Props) {
   const { oidcUser: user } = useOidcUser();
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const isMd = useIsMd();
-  const userRequest = useApiCall<User[]>("/users");
+  const userRequest = useApiCall<User[]>("/users", true);
+  const [show, setShow] = useState(false);
+  const requestCalled = useRef(false);
 
   useEffect(() => {
-    userRequest.get().then();
+    if (!requestCalled.current) {
+      userRequest
+        .get()
+        .then(() => setShow(true))
+        .catch(() => setShow(true));
+      requestCalled.current = true;
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -66,12 +75,14 @@ export default function ApplicationProvider({ children }: Props) {
     setMobileNavOpen(!mobileNavOpen);
   };
 
-  return (
+  return show ? (
     <ApplicationContext.Provider
       value={{ latestVersion, toggleMobileNav, latestUrl, mobileNavOpen, user }}
     >
       {children}
     </ApplicationContext.Provider>
+  ) : (
+    <FullScreenLoading />
   );
 }
 

src/interfaces/Route.ts

@@ -12,6 +12,7 @@ export interface Route {
   peer_groups?: string[];
   routesGroups?: string[];
   groupedRoutes?: GroupedRoute[];
+  group_names?: string[];
 }
 
 export interface GroupedRoute {
@@ -22,5 +23,6 @@ export interface GroupedRoute {
   high_availability_count: number;
   is_using_route_groups: boolean;
   routes?: Route[];
+  group_names?: string[];
   description?: string;
 }

src/modules/route-group/NetworkRoutesTable.tsx

@@ -43,6 +43,12 @@ export const GroupedRouteTableColumns: ColumnDef<GroupedRoute>[] = [
     accessorKey: "enabled",
     sortingFn: "basic",
   },
+  {
+    id: "group_names",
+    accessorFn: (row) => {
+      return row.group_names?.map((name) => name).join(", ");
+    },
+  },
   {
     accessorKey: "network",
     header: ({ column }) => {
@@ -121,10 +127,11 @@ export default function NetworkRoutesTable({
       setSorting={setSorting}
       columns={GroupedRouteTableColumns}
       data={groupedRoutes}
-      searchPlaceholder={"Search by network, range or name..."}
+      searchPlaceholder={"Search by network, range, name or groups..."}
       columnVisibility={{
         enabled: false,
         description: false,
+        group_names: false,
       }}
       renderExpandedRow={(row) => {
         const data = cloneDeep(row);

src/modules/route-group/useGroupedRoutes.tsx

@@ -41,6 +41,19 @@ export default function useGroupedRoutes({ routes }: Props) {
       const countEnabledPeers = peerRoutes.filter((r) => r.enabled).length;
       const allPeers = countPeersOfGroup + countEnabledPeers;
 
+      // Get the group names for better search results
+      const peerGroupNames =
+        groupPeerRoute?.peer_groups?.map((id) => {
+          return groups?.find((g) => g.id == id)?.name || "";
+        }) || [];
+
+      const routeGroups = routes.map((r) => r.groups).flat();
+      const distributionGroupNames = routeGroups.map((group) => {
+        return groups?.find((g) => g.id == group)?.name || "";
+      });
+
+      const allGroupNames = [...peerGroupNames, ...distributionGroupNames];
+
       results.push({
         id,
         enabled: routes.find((r) => r.enabled) != undefined,
@@ -50,6 +63,7 @@ export default function useGroupedRoutes({ routes }: Props) {
         is_using_route_groups: !!groupPeerRoute,
         description: groupPeerRoute ? groupPeerRoute?.description : undefined,
         routes: routes,
+        group_names: allGroupNames,
       });
     });
     return results;

src/modules/routes/RouteTable.tsx

@@ -1,7 +1,8 @@
 import { DataTable } from "@components/table/DataTable";
 import DataTableHeader from "@components/table/DataTableHeader";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
 import { GroupedRoute, Route } from "@/interfaces/Route";
 import RouteActionCell from "@/modules/routes/RouteActionCell";
 import RouteActiveCell from "@/modules/routes/RouteActiveCell";
@@ -39,7 +40,6 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
     ),
     cell: ({ row }) => <RouteActiveCell route={row.original} />,
   },
-
   {
     id: "groups",
     accessorFn: (r) => r.groups?.length,
@@ -50,6 +50,12 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
     },
     cell: ({ row }) => <RouteDistributionGroupsCell route={row.original} />,
   },
+  {
+    id: "group_names",
+    accessorFn: (row) => {
+      return row.group_names?.map((name) => name).join(", ");
+    },
+  },
   {
     accessorKey: "id",
     header: "",
@@ -58,6 +64,8 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
 ];
 
 export default function RouteTable({ row }: Props) {
+  const { groups } = useGroups();
+
   // Default sorting state of the table
   const [sorting, setSorting] = useState<SortingState>([
     {
@@ -74,6 +82,26 @@ export default function RouteTable({ row }: Props) {
   const [currentRow, setCurrentRow] = useState<Route>();
   const [currentCellClicked, setCurrentCellClicked] = useState("");
 
+  const data = useMemo(() => {
+    if (!row.routes) return [];
+    // Get the group names for better search results
+    return row.routes.map((route) => {
+      const distributionGroupNames =
+        route.groups?.map((id) => {
+          return groups?.find((g) => g.id === id)?.name || "";
+        }) || [];
+      const peerGroupNames =
+        route.peer_groups?.map((id) => {
+          return groups?.find((g) => g.id === id)?.name || "";
+        }) || [];
+      const allGroupNames = [...distributionGroupNames, ...peerGroupNames];
+      return {
+        ...route,
+        group_names: allGroupNames,
+      } as Route;
+    });
+  }, [row.routes, groups]);
+
   return (
     <>
       {editModal && currentRow && (
@@ -92,6 +120,9 @@ export default function RouteTable({ row }: Props) {
         text={"Network Routes"}
         manualPagination={true}
         sorting={sorting}
+        columnVisibility={{
+          group_names: false,
+        }}
         onRowClick={(row, cell) => {
           setCurrentRow(row.original);
           setEditModal(true);
@@ -99,7 +130,7 @@ export default function RouteTable({ row }: Props) {
         }}
         setSorting={setSorting}
         columns={RouteTableColumns}
-        data={row.routes}
+        data={data}
       />
     </>
   );

src/modules/setup-keys/SetupKeyActionCell.tsx

@@ -27,7 +27,7 @@ export default function SetupKeyActionCell({ setupKey }: Props) {
           revoked: true,
           auto_groups: setupKey.auto_groups,
           usage_limit: setupKey.usage_limit,
-          ephemeral_peers: setupKey.ephemeral,
+          ephemeral: setupKey.ephemeral,
         })
         .then(() => {
           mutate("/setup-keys");

src/modules/setup-keys/SetupKeyGroupsCell.tsx

@@ -27,7 +27,7 @@ export default function SetupKeyGroupsCell({ setupKey }: Props) {
           revoked: setupKey.revoked,
           auto_groups: groups.map((group) => group.id),
           usage_limit: setupKey.usage_limit,
-          ephemeral_peers: setupKey.ephemeral,
+          ephemeral: setupKey.ephemeral,
         })
         .then(() => {
           setModal(false);

src/modules/setup-keys/SetupKeyModal.tsx

@@ -165,7 +165,7 @@ export function SetupKeyModalContent({ onSuccess }: ModalProps) {
             revoked: false,
             auto_groups: groups.map((group) => group.id),
             usage_limit: reusable ? parseInt(usageLimit) : 1,
-            ephemeral_peers: ephemeralPeers,
+            ephemeral: ephemeralPeers,
           })
           .then((setupKey) => {
             onSuccess && onSuccess(setupKey);

src/utils/api.tsx

@@ -38,12 +38,12 @@ async function apiRequest<T>(
   return (await res.json()) as T;
 }
 
-export function useNetBirdFetch() {
+export function useNetBirdFetch(ignoreError: boolean = false) {
   const tokenSource = config.tokenSource || "accessToken";
   const { idToken } = useOidcIdToken();
   const { accessToken } = useOidcAccessToken();
   const token = tokenSource.toLowerCase() == "idtoken" ? idToken : accessToken;
-  const handleErrors = useApiErrorHandling();
+  const handleErrors = useApiErrorHandling(ignoreError);
 
   const isTokenExpired = async () => {
     let attempts = 20;
@@ -77,9 +77,9 @@ export function useNetBirdFetch() {
   };
 }
 
-export default function useFetchApi<T>(url: string) {
-  const { fetch } = useNetBirdFetch();
-  const handleErrors = useApiErrorHandling();
+export default function useFetchApi<T>(url: string, ignoreError = false) {
+  const { fetch } = useNetBirdFetch(ignoreError);
+  const handleErrors = useApiErrorHandling(ignoreError);
 
   const { data, error, isLoading, isValidating, mutate } = useSWR(
     url,
@@ -102,9 +102,9 @@ export default function useFetchApi<T>(url: string) {
   } as const;
 }
 
-export function useApiCall<T>(url: string) {
-  const { fetch } = useNetBirdFetch();
-  const handleErrors = useApiErrorHandling();
+export function useApiCall<T>(url: string, ignoreError = false) {
+  const { fetch } = useNetBirdFetch(ignoreError);
+  const handleErrors = useApiErrorHandling(ignoreError);
 
   return {
     post: async (data: any, suffix = "") => {
@@ -130,10 +130,15 @@ export function useApiCall<T>(url: string) {
   };
 }
 
-export function useApiErrorHandling() {
+export function useApiErrorHandling(ignoreError = false) {
   const { login } = useOidc();
   const currentPath = usePathname();
   const { setError } = useErrorBoundary();
+  if (ignoreError)
+    return (err: ErrorResponse) => {
+      console.log(err);
+      return Promise.reject(err);
+    };
 
   return (err: ErrorResponse) => {
     if (err.code == 401 && err.message == "no valid authentication provided") {