Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 33011ca

Browse files
Add OpenAPI servers selection
1 parent 6142d6b commit 33011ca

File tree

8 files changed

+90
-24
lines changed

8 files changed

+90
-24
lines changed

‎packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export function getOpenAPIContext(args: {
3939
chevronDown: <Icon icon="chevron-down" />,
4040
chevronRight: <Icon icon="chevron-right" />,
4141
plus: <Icon icon="plus" />,
42+
copy: <Icon icon="copy" />,
4243
},
4344
renderCodeBlock: (codeProps) => <PlainCodeBlock {...codeProps} />,
4445
renderDocument: (documentProps) => (

‎packages/gitbook/src/components/DocumentView/OpenAPI/style.css‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -481,13 +481,12 @@
481481
@apply text-tint hidden md:inline;
482482
}
483483

484-
.openapi-path .openapi-method {
485-
@apply m-0 mt-0.5 items-center flex px-1;
484+
.openapi-summary .openapi-path .openapi-method {
485+
@apply m-0 items-center flex px-2 py-1 h-6;
486486
}
487487

488488
.openapi-path-title {
489-
@apply flex-1 relative font-normal text-left font-mono text-tint-strong/10;
490-
@apply py-0.5 px-1 rounded hover:bg-tint transition-colors;
489+
@apply flex-1 relative font-normal flex items-center text-left font-mono text-tint-strong/10;
491490
@apply whitespace-nowrap md:whitespace-normal;
492491
}
493492

@@ -592,10 +591,18 @@ body:has(.openapi-select-popover) {
592591
}
593592

594593
.openapi-select > button {
595-
@apply flex items-center font-normal cursor-pointer *:truncate gap-1.5 text-tint-strong rounded text-xs p-1.5 leading-none border border-tint-subtle bg-tint;
594+
@apply flex items-center font-normal cursor-pointer *:truncate gap-1.5 p-1.5 border border-tint-subtle text-tint-strong rounded leading-none;
596595
@apply hover:bg-tint-hover transition-all;
597596
}
598597

598+
.openapi-select:not(.openapi-select-unstyled) > button {
599+
@apply border border-tint-subtle bg-tint text-xs;
600+
}
601+
602+
.openapi-select-unstyled > button {
603+
@apply p-1;
604+
}
605+
599606
.openapi-select > button[data-focused="true"] {
600607
@apply outline-primary -outline-offset-1 outline outline-1;
601608
}
@@ -966,3 +973,16 @@ body:has(.openapi-select-popover) {
966973
.openapi-copy-button[data-disabled="true"] {
967974
@apply cursor-default;
968975
}
976+
977+
.openapi-path-copy-button {
978+
@apply size-6 p-1 flex opacity-0 transition-all rounded-md;
979+
@apply hover:bg-tint;
980+
}
981+
982+
.openapi-path:hover .openapi-path-copy-button {
983+
@apply opacity-100;
984+
}
985+
986+
.openapi-path-copy-button svg {
987+
@apply text-tint;
988+
}

‎packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
'use client';
2-
import clsx from 'classnames';
32
import type { MediaTypeRenderer } from './OpenAPICodeSample';
43
import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
54
import { createStateKey } from './utils';
@@ -50,7 +49,6 @@ function MediaTypeSelector(props: {
5049

5150
return (
5251
<OpenAPISelect
53-
className={clsx('openapi-select')}
5452
items={renderers.map((renderer) => ({
5553
key: renderer.mediaType,
5654
label: renderer.mediaType,

‎packages/react-openapi/src/OpenAPIPath.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { OpenAPICopyButton } from './OpenAPICopyButton';
2+
import { OpenAPIServerSelect } from './OpenAPIServerSelect';
23
import { type OpenAPIUniversalContext, getOpenAPIClientContext } from './context';
34
import type { OpenAPIOperationData } from './types';
4-
import { getDefaultServerURL } from './util/server';
55

66
/**
77
* Display the path of an operation.
@@ -19,16 +19,17 @@ export function OpenAPIPath(props: {
1919
*/
2020
canCopy?: boolean;
2121
}) {
22-
const { data, context,withServer = true, canCopy = true } = props;
22+
const { data, withServer = true, context, canCopy = true } = props;
2323
const { method, path, operation } = data;
2424

25-
const server = getDefaultServerURL(data.servers);
2625
const formattedPath = formatPath(path);
2726

2827
const element = (() => {
2928
return (
3029
<>
31-
{withServer ? <span className="openapi-path-server">{server}</span> : null}
30+
{withServer && data.servers.length > 0 ? (
31+
<OpenAPIServerSelect servers={data.servers} />
32+
) : null}
3233
{formattedPath}
3334
</>
3435
);
@@ -37,16 +38,18 @@ export function OpenAPIPath(props: {
3738
return (
3839
<div className="openapi-path">
3940
<div className={`openapi-method openapi-method-${method}`}>{method}</div>
40-
41-
<OpenAPICopyButton
42-
value={`${withServer ? server : ''}${path}`}
43-
className="openapi-path-title"
44-
data-deprecated={operation.deprecated}
45-
isDisabled={!canCopy}
46-
context={getOpenAPIClientContext(context)}
47-
>
48-
{element}
49-
</OpenAPICopyButton>
41+
<span className="openapi-path-title">{element}</span>
42+
{canCopy ? (
43+
<OpenAPICopyButton
44+
value={`${withServer && data.servers.length > 0 ? data.servers[0]?.url : ''}${path}`}
45+
data-deprecated={operation.deprecated}
46+
isDisabled={!canCopy}
47+
context={getOpenAPIClientContext(context)}
48+
className="openapi-path-copy-button"
49+
>
50+
{context.icons.copy}
51+
</OpenAPICopyButton>
52+
) : null}
5053
</div>
5154
);
5255
}

‎packages/react-openapi/src/OpenAPISelect.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ interface OpenAPISelectProps<T extends OpenAPISelectItem> extends Omit<SelectPro
3030
/**
3131
* Icon to display in the select button.
3232
*/
33-
icon?: React.ReactNode;
33+
icon?: React.ReactNode|null;
3434
}
3535

3636
export function useSelectState(stateKey = 'select-state', initialKey: Key = 'default') {
@@ -43,7 +43,7 @@ export function useSelectState(stateKey = 'select-state', initialKey: Key = 'def
4343

4444
export function OpenAPISelect<T extends OpenAPISelectItem>(props: OpenAPISelectProps<T>) {
4545
const {
46-
icon='▼',
46+
icon,
4747
items,
4848
children,
4949
className,
@@ -70,7 +70,7 @@ export function OpenAPISelect<T extends OpenAPISelectItem>(props: OpenAPISelectP
7070
>
7171
<Button>
7272
<SelectValue />
73-
{icon}
73+
{icon!==null ? icon||'▼' : null}
7474
</Button>
7575
<Popover placement={placement} className="openapi-select-popover">
7676
<ListBox className="openapi-select-listbox" items={items}>
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use client';
2+
3+
import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
4+
import type { OpenAPIServerWithCustomProperties } from './types';
5+
6+
/**
7+
* Display the path of an operation.
8+
*/
9+
export function OpenAPIServerSelect(props: {
10+
servers: OpenAPIServerWithCustomProperties[];
11+
}) {
12+
const { servers } = props;
13+
const stateKey = 'server';
14+
const state = useSelectState(stateKey, servers[0]?.url);
15+
16+
const items = servers
17+
.filter(
18+
(server): server is OpenAPIServerWithCustomProperties & { url: string } => !!server.url
19+
)
20+
.map((server) => ({
21+
key: server.url,
22+
label: server.name ?? server.url,
23+
}));
24+
25+
return (
26+
<OpenAPISelect
27+
className="openapi-select openapi-select-unstyled"
28+
items={items}
29+
stateKey={stateKey}
30+
placement="bottom start"
31+
value={state.key}
32+
onChange={(key) => state.setKey(key)}
33+
icon={null}
34+
>
35+
{items.map((item) => (
36+
<OpenAPISelectItem key={item.key} id={item.key} value={item}>
37+
{item.label}
38+
</OpenAPISelectItem>
39+
))}
40+
</OpenAPISelect>
41+
);
42+
}

‎packages/react-openapi/src/context.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface OpenAPIClientContext {
1313
chevronDown: React.ReactNode;
1414
chevronRight: React.ReactNode;
1515
plus: React.ReactNode;
16+
copy: React.ReactNode;
1617
};
1718

1819
/**

‎packages/react-openapi/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type OpenAPIServerVariableWithCustomProperties = OpenAPIV3.ServerVariable
1212
* OpenAPI ServerObject type extended to provide x-gitbook prefill custom properties at the variable level.
1313
*/
1414
export type OpenAPIServerWithCustomProperties = Omit<OpenAPIV3.ServerObject, 'variables'> & {
15+
name?: string;
1516
variables?: {
1617
[variable: string]: OpenAPIServerVariableWithCustomProperties;
1718
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /