zudoku 0.3.0-dev.5 → 0.3.0-dev.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.5",
+  "version": "0.3.0-dev.6",
   "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

@@ -67,7 +67,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({

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} />,
             },
           ],
         },