Mock out settings UI + random fixes

api/src/routers/tenant.ts

@@ -1,7 +1,15 @@
 import { z } from "zod";
 import { authedProcedure, createTRPCRouter, tenantProcedure } from "../trpc";
 import { encodeId } from "../utils";
-import { db, devices, policies, tenantAccounts, tenants, users } from "../db";
+import {
+  accounts,
+  db,
+  devices,
+  policies,
+  tenantAccounts,
+  tenants,
+  users,
+} from "../db";
 import { eq } from "drizzle-orm";
 
 export const tenantRouter = createTRPCRouter({
@@ -45,4 +53,34 @@ export const tenantRouter = createTRPCRouter({
 
     // TODO: Schedule all devices for unenrolment
   }),
+
+  administrators: tenantProcedure.query(async ({ ctx }) => {
+    const [ownerId, rows] = await Promise.allSettled([
+      db
+        .select({
+          ownerId: tenants.owner_id,
+        })
+        .from(tenants)
+        .where(eq(tenants.id, ctx.tenantId))
+        .then((v) => v?.[0]?.ownerId),
+      db
+        .select({
+          id: accounts.id,
+          name: accounts.name,
+          email: accounts.email,
+        })
+        .from(accounts)
+        .leftJoin(tenantAccounts, eq(tenantAccounts.accountId, accounts.id))
+        .where(eq(tenantAccounts.tenantId, ctx.tenantId)),
+    ]);
+    // This is required. If the owner is not found, we gracefully continue.
+    if (rows.status === "rejected") throw rows.reason;
+
+    return rows.value.map((row) => ({
+      ...row,
+      isOwner:
+        ownerId.status === "fulfilled" ? row.id === ownerId.value : false,
+      id: encodeId("account", row.id),
+    }));
+  }),
 });

forge/src/components/LeftSidebar/CreateTenantDialog.tsx

@@ -21,6 +21,9 @@ export function CreateTenantDialog(props: {
       await props.refetchSession();
       props.setActiveTenant(data.id);
       dialog.setOpen(false);
+
+      // Ensure the form stays disabled until the dialog is closed
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     },
   }));
 

forge/src/components/LeftSidebar/TenantSwitcher.tsx

@@ -1,4 +1,4 @@
-import { For } from "solid-js";
+import { For, Suspense } from "solid-js";
 import { Tenant } from "~/lib/globalCtx";
 import {
   DropdownMenu,
@@ -35,10 +35,7 @@ export function TenantSwitcher(props: TenantSwitcherProps) {
       {/* DialogRoot must be outside the dropdown menu so it's not unrendered when the menu is closed */}
       <DialogRoot>
         <DropdownMenu controller={controller}>
-          <DropdownMenuTrigger
-            class="mt-1 inline-flex w-full justify-between rounded-md bg-brand-secondary text-white px-4 py-2 text-sm font-medium shadow-sm hover:bg-brand-tertiary focus:outline-none focus:ring-2 focus:ring-white disabled:opacity-80 disabled:cursor-not-allowed"
-            disabled={tenantCount() === 0}
-          >
+          <DropdownMenuTrigger class="mt-1 inline-flex w-full justify-between rounded-md bg-brand-secondary text-white px-4 py-2 text-sm font-medium shadow-sm hover:bg-brand-tertiary focus:outline-none focus:ring-2 focus:ring-white disabled:opacity-80 disabled:cursor-not-allowed">
             {/* // TODO: Tooltip when truncated */}
             <span
               class="truncate"
@@ -54,21 +51,23 @@ export function TenantSwitcher(props: TenantSwitcherProps) {
             </KDropdownMenu.Icon>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <For each={props.tenants}>
-              {(tenant) => (
-                <DropdownMenuItem
-                  class={
-                    "block px-4 py-2 text-sm text-left w-full truncate hover:bg-gray-200"
-                  }
-                  onSelect={() => props.setActiveTenant(tenant.id)}
-                >
-                  {/* TODO: Use a link here instead of JS for accessibility */}
-                  {tenant.name}
-                </DropdownMenuItem>
-              )}
-            </For>
+            <Suspense fallback={<></>}>
+              <For each={props.tenants}>
+                {(tenant) => (
+                  <DropdownMenuItem
+                    class={
+                      "block px-4 py-2 text-sm text-left w-full truncate hover:bg-gray-200"
+                    }
+                    onSelect={() => props.setActiveTenant(tenant.id)}
+                  >
+                    {/* TODO: Use a link here instead of JS for accessibility */}
+                    {tenant.name}
+                  </DropdownMenuItem>
+                )}
+              </For>
 
-            <DropdownMenuSeparator />
+              {props.tenants.length !== 0 && <DropdownMenuSeparator />}
+            </Suspense>
 
             <DialogTrigger asChild>
               <As

forge/src/components/ui/index.ts

@@ -14,3 +14,4 @@ export * from "./textarea";
 export * from "./tooltip";
 export * from "./dropdown-menu";
 export * from "./controller";
+export * from "./label";

forge/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import type { Component, ComponentProps } from "solid-js";
+import { splitProps } from "solid-js";
+
+import { cn } from "~/lib/utils";
+
+const Label: Component<ComponentProps<"label">> = (props) => {
+  const [, rest] = splitProps(props, ["class"]);
+  return (
+    <label
+      class={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        props.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export { Label };

forge/src/routes/(dash).tsx

@@ -62,6 +62,15 @@ export default function Layout(props: ParentProps) {
     else path = ["", id];
 
     navigate(path.join("/"));
+
+    // TODO: Why is this timeout required??? After tenant create it doesn't redirect without it.
+    setTimeout(
+      () =>
+        navigate(path.join("/"), {
+          replace: true,
+        }),
+      250
+    );
   };
 
   const refetchSession = async () => {

forge/src/routes/(dash)/[tenant]/settings/DeleteTenantButton.tsx

@@ -19,8 +19,8 @@ export function DeleteTenantButton() {
   return (
     <DialogRoot>
       <DialogTrigger asChild>
-        <As component={Button} variant="destructive">
-          Delete
+        <As component={Button} variant="destructive" class="w-full">
+          Delete Tenant
         </As>
       </DialogTrigger>