diff --git a/packages/zudoku/src/lib/components/navigation/SidebarBadge.tsx b/packages/zudoku/src/lib/components/navigation/SidebarBadge.tsx index 67882322..68aef489 100644 --- 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 index 416f88ad..c9736f9b 100644 --- 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 = () => { {tag.operations.map((fragment) => ( diff --git a/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx b/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx index 65cbb650..d7412617 100644 --- 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; + serverUrl?: string; }) => { const operation = useFragment(OperationsFragment, operationFragment); const groupedParameters = groupBy( @@ -36,6 +39,15 @@ export const OperationListItem = ({ {operation.summary} +
+ + {operation.method.toUpperCase()} + +
+ {serverUrl} + {operation.path} +
+
{operation.description && ( { @@ -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 new file mode 100644 index 00000000..17775a37 --- /dev/null +++ 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 + ); +};