zudoku 0.3.0-dev.54 → 0.3.0-dev.56

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

@@ -1,14 +1,13 @@
-import { Outlet, type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router-dom";
 import invariant from "tiny-invariant";
-import { useAuth } from "../../authentication/hook.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
 import { RouterError } from "../../errors/RouterError.js";
-import { Button } from "../../ui/Button.js";
 import { CreateApiKey } from "./CreateApiKey.js";
+import { ProtectedRoute } from "./ProtectedRoute.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
 const DEFAULT_API_KEY_ENDPOINT =
@@ -81,24 +80,6 @@ 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 />
-  ) : (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
-      Please login first to view this page
-      <Button onClick={() => auth.login()}>Login</Button>
-    </div>
-  );
-};
-
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
 ): DevPortalPlugin & ApiIdentityPlugin => {

package/src/lib/plugins/openapi/OperationList.tsx

@@ -1,11 +1,11 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
 import { Heading } from "../../components/Heading.js";
 import { InlineCode } from "../../components/InlineCode.js";
 import { Markdown } from "../../components/Markdown.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
-import { Callout } from "../../ui/Callout.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
 import { useOasConfig } from "./context.js";
@@ -106,13 +106,10 @@ export const OperationList = () => {
         title="Schema cannot be displayed"
         message={
           <>
-            {import.meta.env.DEV && (
-              <Callout type="danger" title="Developer hint" className="mb-4">
-                Check your configuration value{" "}
-                <InlineCode>apis.type</InlineCode> and{" "}
-                <InlineCode>apis.input</InlineCode> in the Zudoku config.
-              </Callout>
-            )}
+            <DeveloperHint className="mb-4">
+              Check your configuration value <InlineCode>apis.type</InlineCode>{" "}
+              and <InlineCode>apis.input</InlineCode> in the Zudoku config.
+            </DeveloperHint>
             An error occurred while trying to fetch the API reference:
             <SyntaxHighlight code={error.toString()} language="plain" />
           </>

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

@@ -1,15 +1,13 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { CirclePlayIcon } from "lucide-react";
-import { lazy, Suspense, useState } from "react";
+import { useState } from "react";
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   DialogTrigger,
 } from "../../../components/Dialog.js";
-import { type PlaygroundContentProps } from "./Playground.js";
-
-const Playground = lazy(() => import("./Playground.js"));
+import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 const PlaygroundDialog = (props: PlaygroundContentProps) => {
   const [open, setOpen] = useState(false);
@@ -29,7 +27,7 @@ const PlaygroundDialog = (props: PlaygroundContentProps) => {
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        <Suspense>{open && <Playground {...props} />}</Suspense>
+        {open && <Playground {...props} />}
       </DialogContent>
     </Dialog>
   );