zudoku 0.3.0-dev.5 → 0.3.0-dev.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.5",
+  "version": "0.3.0-dev.7",
   "type": "module",
   "files": [
     "dist",
@@ -100,6 +100,7 @@
     "slugify": "1.6.6",
     "strip-ansi": "7.1.0",
     "tailwindcss": "3.4.4",
+    "tiny-invariant": "1.3.3",
     "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",

package/src/app/App.tsx

@@ -32,8 +32,9 @@ export default function App() {
       plugins={[
         ...configuredDocsPlugins,
         ...configuredApiPlugins,
-        configuredApiKeysPlugin,
         configuredRedirectPlugin,
+        ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
+        ...(configuredAuthProvider ? [configuredAuthProvider] : []),
       ]}
     />
   );

package/src/lib/authentication/hook.ts

@@ -8,6 +8,7 @@ export const useAuth = () => {
 
   return {
     isAuthEnabled,
+    isPending: authState.isPending,
     profile: authState.profile,
     isAuthenticated: authState.profile,
 

package/src/lib/authentication/providers/auth0.tsx

@@ -7,6 +7,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
   override async logout(): Promise<void> {
     useAuthState.setState({
       isAuthenticated: false,
+      isPending: false,
       profile: undefined,
     });
     const as = await this.getAuthServer();

package/src/lib/authentication/providers/clerk.tsx

@@ -34,6 +34,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       if (clerkApi.session) {
         useAuthState.setState({
           isAuthenticated: true,
+          isPending: false,
           profile: {
             sub: clerkApi.session.user.id,
             name: clerkApi.session.user.fullName ?? undefined,
@@ -46,6 +47,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       } else {
         useAuthState.setState({
           isAuthenticated: false,
+          isPending: false,
           profile: undefined,
         });
       }

package/src/lib/authentication/providers/openid.tsx

@@ -180,6 +180,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   async logout(): Promise<void> {
     useAuthState.setState({
       isAuthenticated: false,
+      isPending: false,
       profile: undefined,
     });
 
@@ -293,6 +294,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
     useAuthState.setState({
       isAuthenticated: true,
+      isPending: false,
       profile,
     });
 

package/src/lib/authentication/state.ts

@@ -1,11 +1,13 @@
 import { create } from "zustand";
 
 export const useAuthState = create<AuthState>(() => ({
+  isPending: true,
   isAuthenticated: false,
 }));
 
 export interface AuthState {
   isAuthenticated: boolean;
+  isPending: boolean;
   profile?: UserProfile;
 }
 

package/src/lib/components/DevPortal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/destructuring-assignment */
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { memo, Suspense, useEffect, useMemo } from "react";

package/src/lib/components/SyntaxHighlight.tsx

@@ -21,6 +21,10 @@ if (!import.meta.env.SSR) {
   import("prismjs/components/prism-json.min.js");
   // @ts-expect-error This is untyped
   import("prismjs/components/prism-java.min.js");
+  // @ts-expect-error This is untyped
+  import("prismjs/components/prism-csharp.min.js");
+  // @ts-expect-error This is untyped
+  import("prismjs/components/prism-objectivec.min.js");
 }
 
 import { useState } from "react";
@@ -67,7 +71,7 @@ export const SyntaxHighlight = ({
               disabled={isCopied}
               onClick={() => {
                 setIsCopied(true);
-                navigator.clipboard.writeText(
+                void navigator.clipboard.writeText(
                   tokens
                     .map((line) => line.map(({ content }) => content).join(""))
                     .join("\n"),

package/src/lib/core/DevPortalContext.ts

@@ -85,10 +85,11 @@ export class DevPortalContext {
   }
 
   initialize = async () => {
-    this.plugins
-      .filter(needsInitialization)
-      .forEach((plugin) => plugin.initialize(this));
-    this.authentication?.initialize(this);
+    await Promise.all([
+      this.plugins
+        .filter(needsInitialization)
+        .map((plugin) => plugin.initialize(this)),
+    ]);
   };
 
   invalidateCache = async (key: DevPortalCacheKey[]) => {

package/src/lib/plugins/api-key/CreateApiKey.tsx

@@ -12,17 +12,11 @@ import {
   SelectValue,
 } from "../../components/Select.js";
 import { Button } from "../../ui/Button.js";
-import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+import { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description: string; expiresOn?: string };
 
-export const CreateApiKey = ({
-  options,
-  service,
-}: {
-  options: ApiKeyPluginOptions;
-  service: ApiKeyService;
-}) => {
+export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   const context = useDevPortal();
   const navigate = useNavigate();
   const form = useForm<CreateApiKey>({

package/src/lib/plugins/api-key/SettingsApiKeys.tsx

@@ -8,20 +8,15 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useDevPortal } from "../../components/context/DevPortalProvider.js";
 import { Button } from "../../ui/Button.js";
-import { type ApiKeyPluginOptions, ApiKeyService } from "./index.js";
+import { ApiKeyService } from "./index.js";
 
-export const SettingsApiKeys = ({
-  options,
-  service,
-}: {
-  options: ApiKeyPluginOptions;
-  service: ApiKeyService;
-}) => {
+export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useDevPortal();
   const queryClient = useQueryClient();
   const { data } = useSuspenseQuery({
     queryFn: () => service.getKeys(context),
     queryKey: ["api-keys"],
+    retry: false,
   });
 
   const deleteKeyMutation = useMutation({
@@ -38,7 +33,7 @@ export const SettingsApiKeys = ({
   });
 
   return (
-    <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
+    <div className="max-w-screen-lg h-full pt-[--padding-content-top] pb-[--padding-content-bottom]">
       <div className="flex justify-between mb-4 border-b border-border pb-3">
         <h1 className="font-medium text-2xl">API Keys</h1>
         {service.createKey && (
@@ -48,56 +43,71 @@ export const SettingsApiKeys = ({
         )}
       </div>
 
-      <ul className="grid grid-cols-[min-content_1fr_min-content] ">
-        {data.map((key) => (
-          <li
-            className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
-            key={key.id}
-          >
-            <div className="flex flex-col gap-1 text-sm">
-              {key.description ?? key.id}
-              <div className="text-muted-foreground text-xs">
-                {key.createdOn && (
-                  <div>
-                    Created on {new Date(key.createdOn).toLocaleDateString()}
-                  </div>
+      {data.length === 0 ? (
+        <div className="flex flex-col justify-center gap-4 items-center h-1/2 my-8">
+          <div className="text-center">
+            No API keys created yet.
+            <br />
+            Get started and create the first one now
+          </div>
+          {service.createKey && (
+            <Button asChild>
+              <Link to="/settings/api-keys/new">Create API Key</Link>
+            </Button>
+          )}
+        </div>
+      ) : (
+        <ul className="grid grid-cols-[minmax(250px,min-content)_1fr_min-content] ">
+          {data.map((key: any) => (
+            <li
+              className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
+              key={key.id}
+            >
+              <div className="flex flex-col gap-1 text-sm">
+                {key.description ?? key.id}
+                <div className="text-muted-foreground text-xs">
+                  {key.createdOn && (
+                    <div>
+                      Created on {new Date(key.createdOn).toLocaleDateString()}
+                    </div>
+                  )}
+                  {key.expiresOn && (
+                    <div>
+                      Expires on {new Date(key.expiresOn).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="items-center flex justify-center">
+                <RevealApiKey apiKey={key.key} />
+              </div>
+              <div className="flex gap-2">
+                {service.rollKey && (
+                  <Button size="icon">
+                    <RotateCwIcon size={16} />
+                  </Button>
                 )}
-                {key.expiresOn && (
-                  <div>
-                    Expires on {new Date(key.expiresOn).toLocaleDateString()}
-                  </div>
+                {service.deleteKey && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      if (!confirm("Do you want to delete this key?")) {
+                        return;
+                      }
+
+                      deleteKeyMutation.mutate(key.id);
+                    }}
+                    disabled={deleteKeyMutation.isPending}
+                  >
+                    <TrashIcon size={16} />
+                  </Button>
                 )}
               </div>
-            </div>
-            <div className="items-center flex justify-center">
-              <RevealApiKey apiKey={key.key} />
-            </div>
-            <div className="flex gap-2">
-              {service.rollKey && (
-                <Button size="icon">
-                  <RotateCwIcon size={16} />
-                </Button>
-              )}
-              {service.deleteKey && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => {
-                    if (!confirm("Do you want to delete this key?")) {
-                      return;
-                    }
-
-                    deleteKeyMutation.mutate(key.id);
-                  }}
-                  disabled={deleteKeyMutation.isPending}
-                >
-                  <TrashIcon size={16} />
-                </Button>
-              )}
-            </div>
-          </li>
-        ))}
-      </ul>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };

package/src/lib/plugins/api-key/index.tsx

@@ -1,4 +1,6 @@
-import { Outlet } from "react-router-dom";
+import logger from "loglevel";
+import { Outlet, useRouteError } from "react-router-dom";
+import invariant from "tiny-invariant";
 import { useAuth } from "../../authentication/hook.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
@@ -50,7 +52,8 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
 
       await context.signRequest(request);
 
-      await fetch(request);
+      const response = await fetch(request);
+      invariant(response.ok, "Failed to delete API key");
     },
     createKey: async (apiKey, context) => {
       const request = new Request(endpoint + `/v1/developer/api-keys`, {
@@ -62,7 +65,9 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       });
 
       await context.signRequest(request);
-      await fetch(request);
+
+      const response = await fetch(request);
+      invariant(response.ok, "Failed to create API key");
     },
     getKeys: async (context) => {
       const request = new Request(endpoint + `/v1/developer/api-keys`);
@@ -70,6 +75,7 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       await context.signRequest(request);
 
       const keys = await fetch(request);
+      invariant(keys.ok, "Failed to fetch API keys");
 
       return await keys.json();
     },
@@ -78,6 +84,12 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
 
 const ProtectedRoute = () => {
   const auth = useAuth();
+
+  // TODO: should we suspend here somehow?
+  if (auth.isPending) {
+    return null;
+  }
+
   return auth.isAuthenticated ? (
     <Outlet />
   ) : (
@@ -88,6 +100,18 @@ const ProtectedRoute = () => {
   );
 };
 
+const SettingsErrorBoundary = () => {
+  const error = useRouteError();
+  logger.error(String(error));
+
+  return (
+    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
+      <h1>Something went wrong</h1>
+      {error instanceof Error && <p>{error.message}</p>}
+    </div>
+  );
+};
+
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
 ): DevPortalPlugin & ApiIdentityPlugin => {
@@ -118,14 +142,15 @@ export const apiKeyPlugin = (
       return [
         {
           element: <ProtectedRoute />,
+          errorElement: <SettingsErrorBoundary />,
           children: [
             {
               path: "/settings/api-keys",
-              element: <SettingsApiKeys options={options} service={service} />,
+              element: <SettingsApiKeys service={service} />,
             },
             {
               path: "/settings/api-keys/new",
-              element: <CreateApiKey options={options} service={service} />,
+              element: <CreateApiKey service={service} />,
             },
           ],
         },

package/src/lib/plugins/openapi/playground/Headers.tsx

@@ -1,53 +1,80 @@
-import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { TriangleAlertIcon, XIcon } from "lucide-react";
+import {
+  Control,
+  useFieldArray,
+  UseFormRegister,
+  useWatch,
+} from "react-hook-form";
 import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
-import type { Header, PlaygroundForm } from "./Playground.js";
+import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
 
 export const Headers = ({
   control,
   register,
-  headers,
 }: {
   register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
-  headers: Header[];
 }) => {
   const { fields, append, remove } = useFieldArray<PlaygroundForm>({
     control,
     name: "headers",
   });
+  const selectedIdentity = useWatch({ name: "identity", control });
+  const liveHeaders = useWatch({ name: "headers", control });
+
+  const disableAuth = selectedIdentity !== NO_IDENTITY;
+
   return (
     <div className="grid grid-cols-[1fr_1fr_auto]">
-      {fields.map((header, i) => (
-        <div
-          key={header.id}
-          className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-        >
-          <InlineInput
-            {...register(`headers.${i}.name`)}
-            placeholder="Name"
-            className="peer"
-            autoComplete="off"
-          />
-          <InlineInput
-            placeholder={"Value"}
-            className="peer"
-            {...register(`headers.${i}.value`)}
-            autoComplete="off"
-          />
-          <button
-            className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-            onClick={() => {
-              remove(i);
-            }}
-            type="button"
+      {fields.map((header, i) => {
+        const isDisabledByAuth =
+          disableAuth && liveHeaders.at(i)?.name === "Authorization";
+
+        return (
+          <div
+            key={header.id}
+            className={cn(
+              "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
+              isDisabledByAuth && "line-through",
+            )}
+            title={
+              isDisabledByAuth
+                ? "This header is disabled because authentication was selected"
+                : undefined
+            }
           >
-            <XIcon size={16} />
-          </button>
-          <div className="col-span-full border-b border-border"></div>
-        </div>
-      ))}
+            <div className="flex gap-2 items-center">
+              <InlineInput
+                {...register(`headers.${i}.name`)}
+                placeholder="Name"
+                className="peer"
+                autoComplete="off"
+              />
+              {isDisabledByAuth && (
+                <TriangleAlertIcon size={16} className="text-amber-500" />
+              )}
+            </div>
+            <InlineInput
+              placeholder={"Value"}
+              className="peer"
+              {...register(`headers.${i}.value`)}
+              autoComplete="off"
+            />
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => {
+                remove(i);
+              }}
+              type="button"
+            >
+              <XIcon size={16} />
+            </button>
+            <div className="col-span-full border-b border-border"></div>
+          </div>
+        );
+      })}
       <Button
         className="col-span-full mt-4"
         onClick={() => append({ name: "", value: "" })}

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -81,7 +81,7 @@ export type PlaygroundForm = {
   identity?: string;
 };
 
-const NO_IDENTITY = "__none";
+export const NO_IDENTITY = "__none";
 
 const Playground = ({
   url,
@@ -121,7 +121,7 @@ const Playground = ({
       const request = new Request(requestUrl, {
         method: method.toUpperCase(),
         headers: Object.fromEntries(
-          data.pathParams
+          data.headers
             .filter((h) => h.name)
             .map((header) => [header.name, header.value]),
         ),
@@ -132,7 +132,6 @@ const Playground = ({
           .find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
-
       const response = await fetch(request);
 
       const body = await response.text();
@@ -263,11 +262,7 @@ const Playground = ({
                     </div>
                   </div>
                   <TabsContent value="headers">
-                    <Headers
-                      control={control}
-                      register={register}
-                      headers={formState.headers}
-                    />
+                    <Headers control={control} register={register} />
                   </TabsContent>
                   <TabsContent value="parameters">
                     <div className="grid grid-cols-[min-content_1fr_1fr_auto]">