From 7a00880e5b57446ea3d99a8db355d9f5d34d21de Mon Sep 17 00:00:00 2001 From: "Nolann B." <100787331+nolannbiron@users.noreply.github.com> Date: Wed, 11 Jun 2025 15:34:52 +0200 Subject: [PATCH] Improve support for OAuth2 security type (#3304) --- .changeset/fifty-ducks-press.md | 6 + .../components/DocumentView/OpenAPI/style.css | 20 +++ .../react-openapi/src/OpenAPISchemaName.tsx | 14 ++- .../react-openapi/src/OpenAPISecurities.tsx | 118 ++++++++++++++++-- packages/react-openapi/src/translations/de.ts | 1 + packages/react-openapi/src/translations/en.ts | 1 + packages/react-openapi/src/translations/es.ts | 1 + packages/react-openapi/src/translations/fr.ts | 1 + packages/react-openapi/src/translations/ja.ts | 1 + packages/react-openapi/src/translations/nl.ts | 1 + packages/react-openapi/src/translations/no.ts | 1 + .../react-openapi/src/translations/pt-br.ts | 1 + packages/react-openapi/src/translations/zh.ts | 1 + 13 files changed, 154 insertions(+), 13 deletions(-) create mode 100644 .changeset/fifty-ducks-press.md diff --git a/.changeset/fifty-ducks-press.md b/.changeset/fifty-ducks-press.md new file mode 100644 index 000000000..a250d3124 --- /dev/null +++ b/.changeset/fifty-ducks-press.md @@ -0,0 +1,6 @@ +--- +'@gitbook/react-openapi': patch +'gitbook': patch +--- + +Improve support for OAuth2 security type diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index 1a88b4faa..c855ec9fd 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -310,6 +310,26 @@ @apply py-2 border-b border-tint-subtle max-w-full flex-1; } +.openapi-securities-oauth-flows { + @apply flex flex-col gap-2 divide-y divide-tint-subtle; +} + +.openapi-securities-oauth-content { + @apply prose *:!prose-sm *:text-tint; +} + +.openapi-securities-oauth-content.openapi-markdown code { + @apply text-xs; +} + +.openapi-securities-oauth-content ul { + @apply !my-0; +} + +.openapi-securities-url { + @apply ml-0.5 px-0.5 rounded hover:bg-tint transition-colors; +} + .openapi-securities-body { @apply flex flex-col gap-2; } diff --git a/packages/react-openapi/src/OpenAPISchemaName.tsx b/packages/react-openapi/src/OpenAPISchemaName.tsx index d24efe3f7..8994b4d71 100644 --- a/packages/react-openapi/src/OpenAPISchemaName.tsx +++ b/packages/react-openapi/src/OpenAPISchemaName.tsx @@ -27,12 +27,14 @@ export function OpenAPISchemaName(props: OpenAPISchemaNameProps) { {propertyName} ) : null} - - {type ? {type} : null} - {additionalItems ? ( - {additionalItems} - ) : null} - + {type || additionalItems ? ( + + {type ? {type} : null} + {additionalItems ? ( + {additionalItems} + ) : null} + + ) : null} {schema?.readOnly ? ( {t(context.translation, 'read_only')} diff --git a/packages/react-openapi/src/OpenAPISecurities.tsx b/packages/react-openapi/src/OpenAPISecurities.tsx index 3f8623650..8b007ff3c 100644 --- a/packages/react-openapi/src/OpenAPISecurities.tsx +++ b/packages/react-openapi/src/OpenAPISecurities.tsx @@ -1,5 +1,7 @@ +import type { OpenAPIV3 } from '@gitbook/openapi-parser'; import { InteractiveSection } from './InteractiveSection'; import { Markdown } from './Markdown'; +import { OpenAPICopyButton } from './OpenAPICopyButton'; import { OpenAPISchemaName } from './OpenAPISchemaName'; import type { OpenAPIClientContext } from './context'; import { t } from './translate'; @@ -105,13 +107,7 @@ function getLabelForType(security: OpenAPISecurityWithRequired, context: OpenAPI /> ); case 'oauth2': - return ( - - ); + return ; case 'openIdConnect': return ( + {flows.map(([name, flow], index) => ( + + ))} + + ); +} + +function OpenAPISchemaOAuth2Item(props: { + flow: NonNullable[keyof NonNullable< + OpenAPIV3.OAuth2SecurityScheme['flows'] + >]; + name: string; + context: OpenAPIClientContext; + security: OpenAPIV3.OAuth2SecurityScheme & { required?: boolean }; +}) { + const { flow, context, security, name } = props; + + if (!flow) { + return null; + } + + const scopes = Object.entries(flow?.scopes ?? {}); + + return ( +
+ +
+ {security.description ? : null} + {'authorizationUrl' in flow && flow.authorizationUrl ? ( + + Authorization URL:{' '} + + {flow.authorizationUrl} + + + ) : null} + {'tokenUrl' in flow && flow.tokenUrl ? ( + + Token URL:{' '} + + {flow.tokenUrl} + + + ) : null} + {'refreshUrl' in flow && flow.refreshUrl ? ( + + Refresh URL:{' '} + + {flow.refreshUrl} + + + ) : null} + {scopes.length ? ( +
+ {t(context.translation, 'available_scopes')}:{' '} +
    + {scopes.map(([key, value]) => ( +
  • + + {key} + + : {value} +
    • + ))} +
+
+ ) : null} +
+
+ ); +} diff --git a/packages/react-openapi/src/translations/de.ts b/packages/react-openapi/src/translations/de.ts index 8a5236c58..6229acd4f 100644 --- a/packages/react-openapi/src/translations/de.ts +++ b/packages/react-openapi/src/translations/de.ts @@ -35,6 +35,7 @@ export const de = { show: 'Zeige ${1}', hide: 'Verstecke ${1}', available_items: 'Verfügbare Elemente', + available_scopes: 'Verfügbare scopes', properties: 'Eigenschaften', or: 'oder', and: 'und', diff --git a/packages/react-openapi/src/translations/en.ts b/packages/react-openapi/src/translations/en.ts index 4276595d5..368162689 100644 --- a/packages/react-openapi/src/translations/en.ts +++ b/packages/react-openapi/src/translations/en.ts @@ -35,6 +35,7 @@ export const en = { show: 'Show ${1}', hide: 'Hide ${1}', available_items: 'Available items', + available_scopes: 'Available scopes', possible_values: 'Possible values', properties: 'Properties', or: 'or', diff --git a/packages/react-openapi/src/translations/es.ts b/packages/react-openapi/src/translations/es.ts index f5ac905f6..f9e8c58f4 100644 --- a/packages/react-openapi/src/translations/es.ts +++ b/packages/react-openapi/src/translations/es.ts @@ -35,6 +35,7 @@ export const es = { show: 'Mostrar ${1}', hide: 'Ocultar ${1}', available_items: 'Elementos disponibles', + available_scopes: 'Scopes disponibles', properties: 'Propiedades', or: 'o', and: 'y', diff --git a/packages/react-openapi/src/translations/fr.ts b/packages/react-openapi/src/translations/fr.ts index b2e563c81..fde7a9222 100644 --- a/packages/react-openapi/src/translations/fr.ts +++ b/packages/react-openapi/src/translations/fr.ts @@ -35,6 +35,7 @@ export const fr = { show: 'Afficher ${1}', hide: 'Masquer ${1}', available_items: 'Éléments disponibles', + available_scopes: 'Scopes disponibles', properties: 'Propriétés', or: 'ou', and: 'et', diff --git a/packages/react-openapi/src/translations/ja.ts b/packages/react-openapi/src/translations/ja.ts index e393dd6cb..04d43f67a 100644 --- a/packages/react-openapi/src/translations/ja.ts +++ b/packages/react-openapi/src/translations/ja.ts @@ -35,6 +35,7 @@ export const ja = { show: '${1}を表示', hide: '${1}を非表示', available_items: '利用可能なアイテム', + available_scopes: '利用可能なスコープ', properties: 'プロパティ', or: 'または', and: 'かつ', diff --git a/packages/react-openapi/src/translations/nl.ts b/packages/react-openapi/src/translations/nl.ts index 34867ccf1..2c57d7af4 100644 --- a/packages/react-openapi/src/translations/nl.ts +++ b/packages/react-openapi/src/translations/nl.ts @@ -35,6 +35,7 @@ export const nl = { show: 'Toon ${1}', hide: 'Verberg ${1}', available_items: 'Beschikbare items', + available_scopes: 'Beschikbare scopes', properties: 'Eigenschappen', or: 'of', and: 'en', diff --git a/packages/react-openapi/src/translations/no.ts b/packages/react-openapi/src/translations/no.ts index 270117793..9ef1b8004 100644 --- a/packages/react-openapi/src/translations/no.ts +++ b/packages/react-openapi/src/translations/no.ts @@ -35,6 +35,7 @@ export const no = { show: 'Vis ${1}', hide: 'Skjul ${1}', available_items: 'Tilgjengelige elementer', + available_scopes: 'Tilgjengelige scopes', properties: 'Egenskaper', or: 'eller', and: 'og', diff --git a/packages/react-openapi/src/translations/pt-br.ts b/packages/react-openapi/src/translations/pt-br.ts index 00e8ab3c2..2e9e7cb2d 100644 --- a/packages/react-openapi/src/translations/pt-br.ts +++ b/packages/react-openapi/src/translations/pt-br.ts @@ -35,6 +35,7 @@ export const pt_br = { show: 'Mostrar ${1}', hide: 'Ocultar ${1}', available_items: 'Itens disponíveis', + available_scopes: 'Scopes disponíveis', properties: 'Propriedades', or: 'ou', and: 'e', diff --git a/packages/react-openapi/src/translations/zh.ts b/packages/react-openapi/src/translations/zh.ts index f8299d199..f0e81f21b 100644 --- a/packages/react-openapi/src/translations/zh.ts +++ b/packages/react-openapi/src/translations/zh.ts @@ -35,6 +35,7 @@ export const zh = { show: '显示${1}', hide: '隐藏${1}', available_items: '可用项', + available_scopes: '可用范围', properties: '属性', or: '或', and: '和',