Show full URL for method

zuplo · Oct 1, 2024 · e068f8b · e068f8b
1 parent 6ba18b8
commit e068f8b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 26 deletions.
diff --git a/packages/zudoku/src/lib/components/navigation/SidebarBadge.tsx b/packages/zudoku/src/lib/components/navigation/SidebarBadge.tsx
@@ -1,15 +1,5 @@
 import { cn } from "../../util/cn.js";
 
-export const TextColorMap = {
-  green: "text-green-600",
-  blue: "text-sky-600",
-  yellow: "text-yellow-600",
-  red: "text-red-600",
-  purple: "text-purple-600",
-  indigo: "text-indigo-600",
-  gray: "text-gray-600",
-};
-
 export const ColorMap = {
   green: "bg-green-400 dark:bg-green-800",
   blue: "bg-sky-400 dark:bg-sky-800",

diff --git a/packages/zudoku/src/lib/plugins/openapi/OperationList.tsx b/packages/zudoku/src/lib/plugins/openapi/OperationList.tsx
@@ -150,6 +150,7 @@ export const OperationList = () => {
               <StaggeredRender>
                 {tag.operations.map((fragment) => (
                   <OperationListItem
+                    serverUrl={result.data?.schema.url}
                     key={fragment.slug}
                     operationFragment={fragment}
                   />

diff --git a/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx b/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx
@@ -9,14 +9,17 @@ import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
 import { SchemaView } from "./schema/SchemaView.js";
+import { methodForColor } from "./util/methodToColor.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
 
 export const OperationListItem = ({
   operationFragment,
+  serverUrl,
 }: {
   operationFragment: FragmentType<typeof OperationsFragment>;
+  serverUrl?: string;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
   const groupedParameters = groupBy(
@@ -36,6 +39,15 @@ export const OperationListItem = ({
         <Heading level={2} id={operation.slug} registerSidebarAnchor>
           {operation.summary}
         </Heading>
+        <div className="text-sm flex gap-2 font-mono">
+          <span className={methodForColor(operation.method)}>
+            {operation.method.toUpperCase()}
+          </span>
+          <div className="font-mono">
+            <span className="text-gray-500">{serverUrl}</span>
+            <span className="text-gray-200">{operation.path}</span>
+          </div>
+        </div>
         {operation.description && (
           <Markdown
             className={`${ProseClasses} max-w-full prose-img:max-w-prose`}

diff --git a/packages/zudoku/src/lib/plugins/openapi/Sidecar.tsx b/packages/zudoku/src/lib/plugins/openapi/Sidecar.tsx
@@ -1,7 +1,6 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useTransition } from "react";
 import { useSearchParams } from "react-router-dom";
-import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
@@ -15,6 +14,7 @@ import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
+import { methodForColor } from "./util/methodToColor.js";
 import { useQuery } from "./util/urql.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
@@ -71,17 +71,6 @@ export const GetServerQuery = graphql(/* GraphQL */ `
 
 const context = { suspense: true };
 
-const methodToColor = {
-  get: TextColorMap.green,
-  post: TextColorMap.blue,
-  put: TextColorMap.yellow,
-  delete: TextColorMap.red,
-  patch: TextColorMap.purple,
-  options: TextColorMap.indigo,
-  head: TextColorMap.gray,
-  trace: TextColorMap.gray,
-};
-
 export const Sidecar = ({
   operation,
   selectedResponse,
@@ -97,10 +86,7 @@ export const Sidecar = ({
     variables: oasConfig,
     context,
   });
-  const methodTextColor =
-    methodToColor[
-      operation.method.toLocaleLowerCase() as keyof typeof methodToColor
-    ] ?? TextColorMap.gray;
+  const methodTextColor = methodForColor(operation.method);
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [, startTransition] = useTransition();

diff --git a/packages/zudoku/src/lib/plugins/openapi/util/methodToColor.ts b/packages/zudoku/src/lib/plugins/openapi/util/methodToColor.ts
@@ -0,0 +1,27 @@
+export const TextColorMap = {
+  green: "text-green-600",
+  blue: "text-sky-600",
+  yellow: "text-yellow-600",
+  red: "text-red-600",
+  purple: "text-purple-600",
+  indigo: "text-indigo-600",
+  gray: "text-gray-600",
+};
+
+export const methodToColor = {
+  get: TextColorMap.green,
+  post: TextColorMap.blue,
+  put: TextColorMap.yellow,
+  delete: TextColorMap.red,
+  patch: TextColorMap.purple,
+  options: TextColorMap.indigo,
+  head: TextColorMap.gray,
+  trace: TextColorMap.gray,
+};
+
+export const methodForColor = (method: string) => {
+  return (
+    methodToColor[method.toLocaleLowerCase() as keyof typeof methodToColor] ??
+    TextColorMap.gray
+  );
+};