Add service account docs (#2753)

- Improves styling of Kb sidebar
- Fixes #2743 
- Fixes #2749 
- Refs #2021

README.md

@@ -72,6 +72,8 @@ Firezone is:
   routing through our infrastructure.
 - **Secure:** Zero attack surface thanks to Firezone's holepunching tech which
   establishes tunnels on-the-fly at the time of access.
+- **Open:** Our entire product is open-source, allowing anyone to audit the
+  codebase.
 - **Flexible:** Authenticate users via email, Google Workspace, or OIDC and sync
   users and groups automatically.
 - **Simple:** Deploy gateways and configure access in minutes with a snappy

website/src/app/kb/authenticate/service-accounts/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Service Accounts • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/authenticate/service-accounts/readme.mdx

@@ -0,0 +1,28 @@
+import Alert from "@/components/DocsAlert";
+
+# Service Accounts
+
+Service accounts are actors that can be used with the Firezone Linux client in
+headless operation to manage access from a server, machine, or other non-user
+machine to your Resources.
+
+Service accounts behave like any other actor in Firezone. They can be added to
+Groups and Policies to gain access to Resources.
+
+<Alert
+  color="warning"
+  html={`
+    Because service accounts authenticate to your Firezone account
+    without user interaction, <strong>their tokens don't expire</strong>.
+    We recommend manually rotating service account tokens on a scheduled
+    interval as a best practice.
+  `}
+/>
+
+## Create a service account
+
+To create a service account, head to `Actors` -> `Add Actor` and select
+`Service Account` as the type.
+
+You will then be shown a token you'll need to copy somewhere safe to use with
+the [Linux client](/kb/user-guides/linux-client).

website/src/app/kb/authenticate/user-group-sync/page.tsx

@@ -2,7 +2,7 @@ import Content from "./readme.mdx";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "IdP Sync • Firezone Docs",
+  title: "User / Group Sync • Firezone Docs",
   description: "Firezone Documentation",
 };
 

website/src/app/kb/authenticate/user-group-sync/readme.mdx

@@ -43,20 +43,8 @@ and associated policy in Firezone.
 ## Nested groups and organizational units
 
 Firezone flattens nested groups and organizational units synced from Google
-Workspace. User membership is determined **only** by its immediate parent. At
-this time, Firezone does not recursively sync members from nested groups and
-organizational units.
-
-<Alert
-  color="warning"
-  html={`
-    Need to sync users under nested groups or organizational units? Leave your
-    feedback on <a href="https://github.com/firezone/firezone/issues/2743">
-    this GitHub issue</a> so we can prioritize it on our roadmap.
-  `}
-/>
-
-For example, if you had the following group structure in your Google Workspace
+Workspace. User membership is determined **only** by its immediate parent. For
+example, if you had the following group structure in your Google Workspace
 account:
 
 ```
@@ -75,6 +63,8 @@ In Firezone, you would see the follow groups after sync:
 - Group:Product
   - steve@company.com
 - Group:Engineering
+  - bob@company.com
+  - alice@company.com
 - Group:Support
   - patrick@company.com
 ```

website/src/components/KbSidebar/Collapse.tsx

@@ -32,17 +32,14 @@ export default function Collapse({
           {label}
         </span>
         {expandedState ? (
-          <HiChevronDown sidebar-toggle-item="true" className="w-5 h-5" />
+          <HiChevronDown sidebar-toggle-item="true" className="w-4 h-4" />
         ) : (
-          <HiChevronRight sidebar-toggle-item="true" className="w-5 h-5" />
+          <HiChevronRight sidebar-toggle-item="true" className="w-4 h-4" />
         )}
       </button>
       <ul
         id={ctl}
-        className={[
-          expandedState ? "" : "hidden",
-          "ml-3 py-1 space-y-0.5",
-        ].join(" ")}
+        className={[expandedState ? "" : "hidden", "ml-3 py-1"].join(" ")}
       >
         {children}
       </ul>

website/src/components/KbSidebar/Item.tsx

@@ -1,29 +1,33 @@
 import Link from "next/link";
 import { Route } from "next";
 import { usePathname } from "next/navigation";
+import { HiMinus } from "react-icons/hi2";
 
 export default function Item({
+  topLevel,
   href,
   label,
 }: {
+  topLevel?: boolean;
   href: Route<string>;
   label: string;
 }) {
-  const p = usePathname();
-
   function active(path: string) {
-    return p == path ? "bg-neutral-100  " : "";
+    return usePathname() == path;
   }
 
   return (
     <Link
       href={href}
-      className={[
-        active(href),
-        "flex items-center text-left rounded text-base font-normal text-neutral-900 hover:bg-neutral-100  ",
-      ].join(" ")}
+      className={
+        (active(href) ? "bg-neutral-100 " : "") +
+        "pb-0.5 flex border-l border-0.5 border-neutral-500 items-center text-left text-base font-normal text-neutral-900 hover:bg-neutral-100"
+      }
     >
-      <span className="ml-3">{label}</span>
+      {!topLevel && <HiMinus className="w-2 h-2" />}
+      <span className={(active(href) ? "font-medium " : "") + "ml-2"}>
+        {label}
+      </span>
     </Link>
   );
 }

website/src/components/KbSidebar/index.tsx

@@ -25,10 +25,10 @@ export default function KbSidebar() {
       <div className="mt-5 bg-white pr-3">
         <ul className="space-y-2 font-medium">
           <li>
-            <Item href="/kb" label="Overview" />
+            <Item topLevel href="/kb" label="Overview" />
           </li>
           <li>
-            <Item href="/kb/quickstart" label="Quickstart" />
+            <Item topLevel href="/kb/quickstart" label="Quickstart" />
           </li>
           <li>
             <Collapse expanded={p.startsWith("/kb/deploy")} label="Deploy">
@@ -78,6 +78,12 @@ export default function KbSidebar() {
                   label="User / Group sync"
                 />
               </li>
+              <li>
+                <Item
+                  href="/kb/authenticate/service-accounts"
+                  label="Service accounts"
+                />
+              </li>
             </Collapse>
           </li>
           <li>