@@ -49,7 +50,6 @@ export function OpenAPIOperation(props: {
) : null}
diff --git a/packages/react-openapi/src/OpenAPIPath.tsx b/packages/react-openapi/src/OpenAPIPath.tsx
index 528d561bdb..7fc24490eb 100644
--- a/packages/react-openapi/src/OpenAPIPath.tsx
+++ b/packages/react-openapi/src/OpenAPIPath.tsx
@@ -1,7 +1,6 @@
-import type { OpenAPIV3_1 } from '@gitbook/openapi-parser';
-import type React from 'react';
-import { ScalarApiButton } from './ScalarApiButton';
+import { OpenAPICopyButton } from './OpenAPICopyButton';
import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
+import { getDefaultServerURL } from './util/server';
/**
* Display the path of an operation.
@@ -10,63 +9,62 @@ export function OpenAPIPath(props: {
data: OpenAPIOperationData;
context: OpenAPIContextProps;
}) {
- const { data, context } = props;
- const { method, path } = data;
- const { specUrl } = context;
- const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
+ const { data } = props;
+ const { method, path, operation } = data;
+
+ const server = getDefaultServerURL(data.servers);
+ const formattedPath = formatPath(path);
return (
{method}
-
- {!hideTryItPanel && validateHttpMethod(method) && (
-
- )}
+
+
+ {server}
+ {formattedPath}
+
);
}
-function validateHttpMethod(method: string): method is OpenAPIV3_1.HttpMethods {
- return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
-}
-
-// Format the path to highlight placeholders
+/**
+ * Format the path by wrapping placeholders in
tags.
+ */
function formatPath(path: string) {
// Matches placeholders like {id}, {userId}, etc.
- const regex = /\{(\w+)\}/g;
+ const regex = /\{\s*(\w+)\s*\}|:\w+/g;
const parts: (string | React.JSX.Element)[] = [];
let lastIndex = 0;
- // Replace placeholders with tags
- path.replace(regex, (match, key, offset) => {
- parts.push(path.slice(lastIndex, offset));
- parts.push({`{${key}}`});
+ //Wrap the variables in tags and maintain either {variable} or :variable
+ path.replace(regex, (match, _, offset) => {
+ if (offset > lastIndex) {
+ parts.push(path.slice(lastIndex, offset));
+ }
+ parts.push(
+
+ {match}
+
+ );
lastIndex = offset + match.length;
return match;
});
- // Push remaining text after the last placeholder
- parts.push(path.slice(lastIndex));
-
- // Join parts with separators wrapped in
- const formattedPath = parts.reduce(
- (acc, part, index) => {
- if (typeof part === 'string' && index > 0 && part === '/') {
- acc.push(
-
- /
-
- );
- }
+ if (lastIndex < path.length) {
+ parts.push(path.slice(lastIndex));
+ }
- acc.push(part);
- return acc;
- },
- [] as (string | React.JSX.Element)[]
- );
+ const formattedPath = parts.map((part, index) => {
+ if (typeof part === 'string') {
+ return {part};
+ }
+ return part;
+ });
- return {formattedPath};
+ return formattedPath;
}
diff --git a/packages/react-openapi/src/OpenAPIResponseExample.tsx b/packages/react-openapi/src/OpenAPIResponseExample.tsx
index d6bb785e74..fe7f2666e2 100644
--- a/packages/react-openapi/src/OpenAPIResponseExample.tsx
+++ b/packages/react-openapi/src/OpenAPIResponseExample.tsx
@@ -1,4 +1,5 @@
import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import { Markdown } from './Markdown';
import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
import { StaticSection } from './StaticSection';
import { generateSchemaExample } from './generateSchemaExample';
@@ -39,44 +40,40 @@ export function OpenAPIResponseExample(props: {
return Number(a) - Number(b);
});
- const tabs = responses
- .map(([key, responseObject]) => {
- const description = resolveDescription(responseObject);
-
- if (checkIsReference(responseObject)) {
- return {
- key: key,
- label: key,
- description,
- body: (
-
- ),
- };
- }
-
- if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
- return {
- key: key,
- label: key,
- description,
- body: ,
- };
- }
+ const tabs = responses.map(([key, responseObject]) => {
+ const description = resolveDescription(responseObject);
+ if (checkIsReference(responseObject)) {
return {
key: key,
label: key,
- description: resolveDescription(responseObject),
- body: ,
+ body: (
+
+ ),
+ footer: description ? : undefined,
};
- })
- .filter((val): val is { key: string; label: string; body: any; description: string } =>
- Boolean(val)
- );
+ }
+
+ if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
+ return {
+ key: key,
+ label: key,
+ body: ,
+ footer: description ? : undefined,
+ };
+ }
+
+ return {
+ key: key,
+ label: key,
+ body: ,
+ footer: description ? : undefined,
+ };
+ });
if (tabs.length === 0) {
return null;
diff --git a/packages/react-openapi/src/OpenAPITabs.tsx b/packages/react-openapi/src/OpenAPITabs.tsx
index 28bd5fd3fb..700dcfe817 100644
--- a/packages/react-openapi/src/OpenAPITabs.tsx
+++ b/packages/react-openapi/src/OpenAPITabs.tsx
@@ -3,14 +3,13 @@
import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { type Key, Tab, TabList, TabPanel, Tabs, type TabsProps } from 'react-aria-components';
import { useEventCallback } from 'usehooks-ts';
-import { Markdown } from './Markdown';
import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
export type TabItem = {
key: Key;
label: string;
body: React.ReactNode;
- description?: string;
+ footer?: React.ReactNode;
};
type OpenAPITabsContextData = {
@@ -140,9 +139,19 @@ export function OpenAPITabsPanels() {
return (
{selectedTab.body}
- {selectedTab.description ? (
-
+ {selectedTab.footer ? (
+ {selectedTab.footer}
) : null}
);
}
+
+/**
+ * The OpenAPI Tabs panel footer component.
+ * This component should be used as a child of the OpenAPITabs component.
+ */
+function OpenAPITabsPanelFooter(props: { children: React.ReactNode }) {
+ const { children } = props;
+
+ return {children}
;
+}
diff --git a/packages/react-openapi/src/ScalarApiButton.tsx b/packages/react-openapi/src/ScalarApiButton.tsx
index 28118447dc..04d7bb1aaa 100644
--- a/packages/react-openapi/src/ScalarApiButton.tsx
+++ b/packages/react-openapi/src/ScalarApiButton.tsx
@@ -27,14 +27,14 @@ export function ScalarApiButton(props: {
setIsOpen(true);
}}
>
-