Merge pull request #2121 from Fredkiss3/feat/device-approvals

feat: device approvals

src/app/[orgId]/settings/(private)/access/approvals/page.tsx

@@ -0,0 +1,52 @@
+import { ApprovalFeed } from "@app/components/ApprovalFeed";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import type { ApprovalItem } from "@app/lib/queries";
+import OrgProvider from "@app/providers/OrgProvider";
+import type { GetOrgResponse } from "@server/routers/org";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+
+export interface ApprovalFeedPageProps {
+    params: Promise<{ orgId: string }>;
+}
+
+export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
+    const params = await props.params;
+
+    let approvals: ApprovalItem[] = [];
+    const res = await internal
+        .get<
+            AxiosResponse<{ approvals: ApprovalItem[] }>
+        >(`/org/${params.orgId}/approvals`, await authCookieHeader())
+        .catch((e) => {});
+
+    if (res && res.status === 200) {
+        approvals = res.data.data.approvals;
+    }
+
+    let org: GetOrgResponse | null = null;
+    const orgRes = await getCachedOrg(params.orgId);
+
+    if (orgRes && orgRes.status === 200) {
+        org = orgRes.data.data;
+    }
+
+    const t = await getTranslations();
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("accessApprovalsManage")}
+                description={t("accessApprovalsDescription")}
+            />
+            <OrgProvider org={org}>
+                <div className="container mx-auto max-w-12xl">
+                    <ApprovalFeed orgId={params.orgId} />
+                </div>
+            </OrgProvider>
+        </>
+    );
+}

src/app/[orgId]/settings/(private)/idp/create/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import AutoProvisionConfigWidget from "@app/components/private/AutoProvisionConfigWidget";
 import {
     SettingsContainer,
     SettingsSection,
@@ -10,6 +11,10 @@ import {
     SettingsSectionHeader,
     SettingsSectionTitle
 } from "@app/components/Settings";
+import HeaderTitle from "@app/components/SettingsSectionTitle";
+import { StrategySelect } from "@app/components/StrategySelect";
+import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
+import { Button } from "@app/components/ui/button";
 import {
     Form,
     FormControl,
@@ -19,29 +24,21 @@ import {
     FormLabel,
     FormMessage
 } from "@app/components/ui/form";
-import HeaderTitle from "@app/components/SettingsSectionTitle";
-import { z } from "zod";
-import { createElement, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { Input } from "@app/components/ui/input";
-import { Button } from "@app/components/ui/button";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { toast } from "@app/hooks/useToast";
-import { useParams, useRouter } from "next/navigation";
-import { Checkbox } from "@app/components/ui/checkbox";
-import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
-import { InfoIcon, ExternalLink } from "lucide-react";
-import { StrategySelect } from "@app/components/StrategySelect";
-import { SwitchInput } from "@app/components/SwitchInput";
-import { Badge } from "@app/components/ui/badge";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ListRolesResponse } from "@server/routers/role";
+import { AxiosResponse } from "axios";
+import { InfoIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import AutoProvisionConfigWidget from "@app/components/private/AutoProvisionConfigWidget";
-import { AxiosResponse } from "axios";
-import { ListRolesResponse } from "@server/routers/role";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 export default function Page() {
     const { env } = useEnvContext();

src/app/[orgId]/settings/access/roles/page.tsx

@@ -2,12 +2,12 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import { GetOrgResponse } from "@server/routers/org";
-import { cache } from "react";
 import OrgProvider from "@app/providers/OrgProvider";
 import { ListRolesResponse } from "@server/routers/role";
-import RolesTable, { RoleRow } from "../../../../../components/RolesTable";
+import RolesTable, { type RoleRow } from "@app/components/RolesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
 
 type RolesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -47,14 +47,7 @@ export default async function RolesPage(props: RolesPageProps) {
     }
 
     let org: GetOrgResponse | null = null;
-    const getOrg = cache(async () =>
-        internal
-            .get<
-                AxiosResponse<GetOrgResponse>
-            >(`/org/${params.orgId}`, await authCookieHeader())
-            .catch((e) => {})
-    );
-    const orgRes = await getOrg();
+    const orgRes = await getCachedOrg(params.orgId);
 
     if (orgRes && orgRes.status === 200) {
         org = orgRes.data.data;

src/app/[orgId]/settings/clients/machine/page.tsx

@@ -61,7 +61,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
             niceId: client.niceId,
             agent: client.agent,
             archived: client.archived || false,
-            blocked: client.blocked || false
+            blocked: client.blocked || false,
+            approvalState: client.approvalState ?? "approved"
         };
     };
 

src/app/[orgId]/settings/clients/user/page.tsx

@@ -4,7 +4,7 @@ import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { ListClientsResponse } from "@server/routers/client";
 import { getTranslations } from "next-intl/server";
-import type { ClientRow } from "@app/components/MachineClientsTable";
+import type { ClientRow } from "@app/components/UserDevicesTable";
 import UserDevicesTable from "@app/components/UserDevicesTable";
 
 type ClientsPageProps = {
@@ -57,7 +57,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
             niceId: client.niceId,
             agent: client.agent,
             archived: client.archived || false,
-            blocked: client.blocked || false
+            blocked: client.blocked || false,
+            approvalState: client.approvalState
         };
     };
 

src/app/[orgId]/settings/sites/page.tsx

@@ -2,10 +2,9 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListSitesResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
-import SitesTable, { SiteRow } from "../../../../components/SitesTable";
+import SitesTable, { SiteRow } from "@app/components/SitesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import SitesBanner from "@app/components/SitesBanner";
-import SitesSplashCard from "../../../../components/SitesSplashCard";
 import { getTranslations } from "next-intl/server";
 
 type SitesPageProps = {

src/app/navigation.tsx

@@ -2,27 +2,27 @@ import { SidebarNavItem } from "@app/components/SidebarNav";
 import { Env } from "@app/lib/types/env";
 import { build } from "@server/build";
 import {
-    Settings,
-    Users,
-    Link as LinkIcon,
-    Waypoints,
+    ChartLine,
     Combine,
+    CreditCard,
     Fingerprint,
+    Globe,
+    GlobeLock,
     KeyRound,
+    Laptop,
+    Link as LinkIcon,
+    Logs, // Added from 'dev' branch
+    MonitorUp,
+    ReceiptText,
+    ScanEye, // Added from 'dev' branch
+    Server,
+    Settings,
+    SquareMousePointer,
     TicketCheck,
     User,
-    Globe, // Added from 'dev' branch
-    MonitorUp, // Added from 'dev' branch
-    Server,
-    ReceiptText,
-    CreditCard,
-    Logs,
-    SquareMousePointer,
-    ScanEye,
-    GlobeLock,
-    Smartphone,
-    Laptop,
-    ChartLine
+    UserCog,
+    Users,
+    Waypoints
 } from "lucide-react";
 
 export type SidebarNavSection = {
@@ -123,7 +123,7 @@ export const orgNavSections = (env?: Env): SidebarNavSection[] => [
                 href: "/{orgId}/settings/access/roles",
                 icon: <Users className="size-4 flex-none" />
             },
-            ...(build == "saas" || env?.flags.useOrgOnlyIdp
+            ...(build === "saas" || env?.flags.useOrgOnlyIdp
                 ? [
                       {
                           title: "sidebarIdentityProviders",
@@ -132,6 +132,15 @@ export const orgNavSections = (env?: Env): SidebarNavSection[] => [
                       }
                   ]
                 : []),
+            ...(build !== "oss"
+                ? [
+                      {
+                          title: "sidebarApprovals",
+                          href: "/{orgId}/settings/access/approvals",
+                          icon: <UserCog className="size-4 flex-none" />
+                      }
+                  ]
+                : []),
             {
                 title: "sidebarShareableLinks",
                 href: "/{orgId}/settings/share-links",