zudoku 0.1.1-dev.31 → 0.1.1-dev.33

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

@@ -1,55 +1,35 @@
-import { DevPortalSystemPaths } from "../../components/DevPortal.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
+import { CreateApiKey } from "./CreateApiKeys.js";
 
-export type GetConsumerOptions =
-  | {
-      getConsumers: (context: DevPortalContext) => Promise<ConsumerData | void>;
-    }
-  | { consumerEndpoint: string };
+export type ApiKeyResults = Promise<ApiKey[]>;
+const DEFAULT_API_KEY_ENDPOINT =
+  "https://zudoku-rewiringamerica-main-ef9c9c0.d2.zuplo.dev";
 
-export type ApiKeyPluginOptions = {
-  rollKey?: (
-    id: string,
-    consumerName: string,
+export type ApiKeyService = {
+  getKeys: (context: DevPortalContext) => ApiKeyResults;
+  rollKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  deleteKey?: (id: string, context: DevPortalContext) => Promise<void>;
+  updateKeyDescription?: (
+    apiKey: { jd: string; description: string },
     context: DevPortalContext,
   ) => Promise<void>;
-  deleteKey?: (
-    id: string,
-    consumerName: string,
+  getUsage?: (apiKeys: string[], context: DevPortalContext) => Promise<void>;
+  createKey?: (
+    apiKey: { description: string; expiresAt?: string },
     context: DevPortalContext,
   ) => Promise<void>;
-  updateConsumerDescription?: (
-    consumerName: string,
-    description: string,
-    context: DevPortalContext,
-  ) => Promise<void>;
-  createConsumer?: (
-    description: string,
-    context: DevPortalContext,
-  ) => Promise<void>;
-  deleteConsumer?: (
-    consumerName: string,
-    context: DevPortalContext,
-  ) => Promise<void>;
-} & GetConsumerOptions;
+};
 
-export interface ConsumerData {
-  consumers: Consumer[];
-}
+export type GetApiKeysOptions = ApiKeyService | { endpoint: string } | {};
 
-export interface Consumer {
-  name: string;
-  createdOn?: string;
-  description?: string;
-  apiKeys: ConsumerApiKey[];
-}
+export type ApiKeyPluginOptions = {} & GetApiKeysOptions;
 
-export interface ConsumerApiKey {
+export interface ApiKey {
   id: string;
   description?: string;
   createdOn?: string;
@@ -58,64 +38,87 @@ export interface ConsumerApiKey {
   key: string;
 }
 
-const defaultGetConsumers = async (context: DevPortalContext) => {
-  const accessToken = await context.authentication?.getToken?.(context);
+const createDefaultHandler = (endpoint: string): ApiKeyService => {
+  return {
+    deleteKey: async (id, context) => {
+      const accessToken = await context.authentication?.getToken?.(context);
 
-  if (!accessToken) {
-    throw new Error("No token found");
-  }
+      if (!accessToken) {
+        throw new Error("Not authenticated");
+      }
 
-  const consumers = await fetch(
-    "https://zudoku-customer-main-b36fa2f.d2.zuplo.dev/v1/developer/api-keys",
-    {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
+      await fetch(endpoint + `/v1/developer/api-keys/${id}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+    },
+    createKey: async (apiKey, context) => {
+      const accessToken = await context.authentication?.getToken?.(context);
+
+      if (!accessToken) {
+        throw new Error("Not authenticated");
+      }
+
+      await fetch(endpoint + `/v1/developer/api-keys`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(apiKey),
+      });
     },
-  );
+    getKeys: async (context) => {
+      const accessToken = await context.authentication?.getToken?.(context);
 
-  return { consumers: [await consumers.json()] };
+      if (!accessToken) {
+        return [];
+      }
+
+      const keys = await fetch(endpoint + `/v1/developer/api-keys`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      return await keys.json();
+    },
+  };
 };
 
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
 ): DevPortalPlugin & ApiIdentityPlugin => {
-  const getConsumers =
-    "getConsumers" in options ? options.getConsumers : defaultGetConsumers;
+  const endpoint =
+    "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
+
+  const service =
+    "getKeys" in options ? options : createDefaultHandler(endpoint);
 
   return {
-    getNavigation: async (path: string) => {
-      if (path !== DevPortalSystemPaths.Settings) {
-        return [];
-      }
+    getIdentities: async (context) => {
+      const keys = await service.getKeys(context);
 
-      return [
-        {
-          path: "settings/api-keys",
-          label: "API Keys",
-          children: [],
+      return keys.map((key) => ({
+        authorizeRequest: (request) => {
+          request.headers.set("Authorization", `Bearer ${key.key}`);
+          return request;
         },
-      ];
-    },
-    getIdentities: async (context) => {
-      return [];
-      // throw new Error("Not implemented");
-      // const keys = await getConsumers(context);
-      // return (keys ?? { consumers: [] }).consumers
-      //   .flatMap((consumer) => consumer.apiKeys)
-      //   .map((key) => ({
-      //     authorizeRequest: (request: Request) => {
-      //       request.headers.set("Authorization", `Bearer ${key.key}`);
-      //     },
-      //     id: key.id,
-      //     name: key.id,
-      //   }));
+        id: key.id,
+        name: key.id,
+      }));
     },
     getRoutes: () => {
       return [
         {
           path: "/settings/api-keys",
-          element: <SettingsApiKeys options={options} />,
+          element: <SettingsApiKeys options={options} service={service} />,
+        },
+        {
+          path: "/settings/api-keys/new",
+          element: <CreateApiKey options={options} service={service} />,
         },
       ];
     },

package/src/lib/plugins/index.ts

@@ -1,4 +1,3 @@
-// Plugins
 export { apiKeyPlugin } from "./api-key/index.js";
 export { markdownPlugin } from "./markdown/index.js";
 export { openApiPlugin } from "./openapi/index.js";

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

@@ -1,49 +1,58 @@
-import { useApiIdentities } from "../../components/context/DevPortalProvider.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import { Playground } from "./playground/Playground.js";
 import { useOasConfig } from "./index.js";
-import { gql, useQuery } from "urql";
+import { graphql } from "./graphql/index.js";
 
-const getServerQuery = gql`
+import { useQuery } from "urql";
+
+const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       url
     }
   }
-`;
+`);
 
 export const MakeRequest = ({
   operation,
 }: {
   operation: OperationListItemResult;
 }) => {
-  const identities = useApiIdentities();
   const variables = useOasConfig();
-  const [server] = useQuery({ query: getServerQuery, variables });
+  const [server] = useQuery({ query: GetServerQuery, variables });
+
+  const headers = operation.parameters
+    ?.filter((p) => p.in === "header")
+    ?.map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+  const queryParams = operation.parameters
+    ?.filter((p) => p.in === "query")
+    ?.map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+  const pathParams = operation.parameters
+    ?.filter((p) => p.in === "path")
+    ?.map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+
+  const hasParams =
+    operation.parameters?.some((p) => p.in === "query" || p.in === "path") ??
+    false;
 
   return (
-    <div>
-      <Playground
-        host={server.data?.schema.url}
-        method={operation.method}
-        url={operation.path}
-        // defaultHeaders={}
-      />
-      {identities.data.map((identity) => (
-        <button
-          key={identity.id}
-          onClick={() => {
-            const test = new Request(
-              "https://zudoku-customer-main-b36fa2f.d2.zuplo.dev" +
-                operation.path,
-            );
-            void fetch(identity.authorizeRequest(test));
-          }}
-          className="p-2 border border-border rounded hover:bg-accent"
-        >
-          Test Request {operation.path} ({identity.name})
-        </button>
-      ))}
-    </div>
+    <Playground
+      host={server.data?.schema.url ?? ""}
+      method={operation.method}
+      url={operation.path}
+      headers={headers}
+      queryParams={queryParams}
+      pathParams={pathParams}
+      hasParams={hasParams}
+    />
   );
 };

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

@@ -5,6 +5,10 @@ import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
+import { SchemaObject } from "../../oas/parser/index.js";
+import { useState } from "react";
+import { cn } from "../../util/cn.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
@@ -16,7 +20,7 @@ export const OperationListItem = ({
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
   const groupedParameters = groupBy(operation?.parameters ?? [], "in");
-
+  const first = operation.responses.find((re) => re.statusCode === "200");
   return (
     <div
       key={operation.operationId}
@@ -48,8 +52,140 @@ export const OperationListItem = ({
             )}
           </div>
         )}
+        <Heading level={3} className="capitalize">
+          Repsonses
+        </Heading>
+        <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
+          <TabsList>
+            {operation.responses.map((response) => (
+              <TabsTrigger value={response.statusCode + response.description}>
+                {response.description} ({response.statusCode})
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <ul className="list-none m-0 px-0 overflow-hidden">
+            {operation.responses.map((response) => (
+              <TabsContent value={response.statusCode + response.description}>
+                <ViewSchema schema={response.content?.at(0)?.schema} name="" />
+              </TabsContent>
+            ))}
+          </ul>
+        </Tabs>
       </div>
+
       <Sidecar operation={operation} />
     </div>
   );
 };
+
+const ViewSchema = ({
+  name,
+  schema,
+  level = 0,
+  collapsible = false,
+}: {
+  level?: number;
+  collapsible?: boolean;
+  name?: string;
+  schema: SchemaObject;
+}) => {
+  const [open, setOpen] = useState(!collapsible);
+
+  const properties = Object.entries(schema.properties ?? {});
+  const additionalProperties =
+    typeof schema.additionalProperties === "object"
+      ? Object.entries(schema.additionalProperties)
+      : [];
+
+  return (
+    <div
+      className={cn(
+        "not-prose",
+        level > 0 && "border border-border rounded text-sm",
+      )}
+      onClick={
+        collapsible
+          ? () => {
+              setOpen((open) => !open);
+            }
+          : undefined
+      }
+    >
+      {(schema.title ?? name) && (
+        <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
+      )}
+      {level === 0 && <p>schema.description</p>}
+      <ul>
+        {open &&
+          properties
+            .concat(additionalProperties)
+            .map(([propertyName, property]) => (
+              <div
+                className={cn(
+                  level > 0 ? "py-2" : "py-4",
+                  "px-2 border-t border-border bg-border/20 hover:bg-border/30 flex gap-1 flex-col",
+                  property.deprecated && "opacity-50",
+                )}
+              >
+                <div className="flex items-center gap-2 relative">
+                  <code>
+                    {propertyName} {property.title}
+                  </code>
+
+                  {property.type && (
+                    <span className="text-sm text-muted-foreground">
+                      {property.type}
+                    </span>
+                  )}
+                  {property.deprecated && (
+                    <span className="text-sm text-muted-foreground">
+                      Deprecated
+                    </span>
+                  )}
+
+                  {!schema.required?.includes(propertyName) &&
+                    !property.required && (
+                      <span className="py-px px-1.5 font-medium text-xs border border-border rounded-lg">
+                        optional
+                      </span>
+                    )}
+                  {/*{property.type === "object" && (*/}
+                  {/*  <div className="absolute right-3">+</div>*/}
+                  {/*)}*/}
+                </div>
+                {property.description && (
+                  <Markdown
+                    content={property.description}
+                    className="prose text-sm prose-p:my-1 leading-normal line-clamp-4"
+                  />
+                )}
+
+                {property.enum && (
+                  <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
+                    <span>Possible values</span>
+                    {property.enum
+                      .filter((value) => value)
+                      .map((value) => (
+                        <span className="font-mono text-xs border-border border bg-muted rounded px-1">
+                          {value}
+                        </span>
+                      ))}
+                  </span>
+                )}
+                {property.type === "object" && (
+                  <div className="mt-2.5">
+                    <ViewSchema schema={property} level={level + 1} />
+                  </div>
+                )}
+                {property.type === "array" &&
+                  property.items.type === "object" && (
+                    <div className="mt-2.5">
+                      <ViewSchema schema={property.items} level={level + 1} />
+                    </div>
+                  )}
+              </div>
+            ))}
+      </ul>
+    </div>
+  );
+};

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

@@ -34,7 +34,7 @@ export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
           <SyntaxHighlight
             language="json"
             noBackground
-            copyable={false}
+            copyable
             className="text-xs"
             code={JSON.stringify(
               selected === "example"

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

@@ -20,7 +20,7 @@ export const ResponsesSidecarBox = ({
   return (
     <SidecarBox.Root>
       <SidecarBox.Head className="text-xs grid grid-rows-2 pb-0">
-        <span className="font-mono">Responses</span>
+        <span className="font-mono">Example Responses</span>
         <div className="flex gap-2">
           {responses.map((response, index) => (
             <div
@@ -43,7 +43,6 @@ export const ResponsesSidecarBox = ({
           <SyntaxHighlight
             language="json"
             noBackground
-            copyable={false}
             className="text-xs"
             code={JSON.stringify(generateSchemaExample(schema), null, 2)}
           />

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

@@ -111,7 +111,6 @@ export const Sidecar = ({
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
       <SidecarBox.Root>
-        <MakeRequest operation={operation} />
         <SidecarBox.Head className="flex justify-between items-center flex-nowrap p-2 gap-2 text-xs">
           <span className="font-mono break-words">
             <span className={cn("font-semibold", methodTextColor)}>
@@ -120,35 +119,36 @@ export const Sidecar = ({
             &nbsp;
             {path}
           </span>
-          <Select
-            className="self-start"
-            onChange={(e) => setOption(e.target.value)}
-            options={[
-              { value: "shell", label: "cURL" },
-              { value: "js", label: "Javascript" },
-              { value: "python", label: "Python" },
-              { value: "java", label: "Java" },
-              { value: "go", label: "Go" },
-              { value: "csharp", label: "C#" },
-              { value: "kotlin", label: "Kotlin" },
-              { value: "objc", label: "Objective C" },
-              { value: "php", label: "PHP" },
-              { value: "ruby", label: "Ruby" },
-              { value: "swift", label: "Swift" },
-            ]}
-          />
+          <div className="flex gap-2 items-center">
+            <Select
+              className="self-start"
+              onChange={(e) => setOption(e.target.value)}
+              options={[
+                { value: "shell", label: "cURL" },
+                { value: "js", label: "Javascript" },
+                { value: "python", label: "Python" },
+                { value: "java", label: "Java" },
+                { value: "go", label: "Go" },
+                { value: "csharp", label: "C#" },
+                { value: "kotlin", label: "Kotlin" },
+                { value: "objc", label: "Objective C" },
+                { value: "php", label: "PHP" },
+                { value: "ruby", label: "Ruby" },
+                { value: "swift", label: "Swift" },
+              ]}
+            />
+            <MakeRequest operation={operation} />
+          </div>
         </SidecarBox.Head>
         <SidecarBox.Body>
           <SyntaxHighlight
             language={option}
-            copyable={false}
             noBackground
             className="text-xs"
             code={code}
           />
         </SidecarBox.Body>
       </SidecarBox.Root>
-      {/*<MakeRequest />*/}
       {requestBodyContent && (
         <RequestBodySidecarBox content={requestBodyContent} />
       )}

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -19,7 +19,7 @@ const documents = {
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
-  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
+  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
 };
 
@@ -59,8 +59,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n",
-): (typeof documents)["\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n"];
+  source: "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -259,6 +259,7 @@ export type GetCategoriesQuery = {
       operations: Array<{
         __typename: "OperationItem";
         slug: string;
+        deprecated?: boolean | null;
         method: string;
         summary?: string | null;
         operationId?: string | null;
@@ -763,6 +764,10 @@ export const GetCategoriesDocument = {
                               kind: "Field",
                               name: { kind: "Name", value: "slug" },
                             },
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "deprecated" },
+                            },
                             {
                               kind: "Field",
                               name: { kind: "Name", value: "method" },

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

@@ -66,6 +66,7 @@ const GetCategoriesQuery = graphql(`
         operations {
           __typename
           slug
+          deprecated
           method
           summary
           operationId
@@ -109,6 +110,7 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
           collapsible: false,
           children: tag.operations.map((operation) => ({
             path: `#${operation.slug}`,
+            muted: !!operation.deprecated,
             title: operation.summary ?? operation.path,
             label: (
               <div className="flex flex-1 min-w-0 justify-between gap-2">