From 3cc244f60d61995fe9da7022a5ff853150ae85b7 Mon Sep 17 00:00:00 2001 From: Weyert de Boer Date: Fri, 21 Jun 2024 22:44:05 +0100 Subject: [PATCH] feat: add support for `hideServerInfo` and `hideSecurityInfo` options The component already has flags `hideServerInfo` and `hideSecurityInfo` defined but they are not used to actual hide the server info or to hide the security info. --- .../Docs/HttpOperation/HttpOperation.tsx | 6 ++++- .../components/Docs/HttpOperation/Request.tsx | 4 +++- .../Docs/HttpService/HttpService.spec.tsx | 22 +++++++++++++++++++ .../Docs/HttpService/HttpService.tsx | 22 ++++++++++--------- .../NodeContent/NodeContent.spec.tsx | 13 +++++++++++ .../components/NodeContent/NodeContent.tsx | 6 ++++- .../src/containers/StoplightProject.tsx | 16 ++++++++++++++ .../src/web-components/components.ts | 2 ++ .../API/APIWithResponsiveSidebarLayout.tsx | 14 ++++++++++-- .../components/API/APIWithSidebarLayout.tsx | 13 +++++++++-- .../components/API/APIWithStackedLayout.tsx | 6 ++++- packages/elements/src/containers/API.tsx | 18 +++++++++++++++ .../elements/src/web-components/components.ts | 2 ++ 13 files changed, 126 insertions(+), 18 deletions(-) diff --git a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx index 468e42947..5c2b72b79 100644 --- a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx +++ b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx @@ -88,7 +88,11 @@ const HttpOperationComponent = React.memo( - + {data.responses && ( void; } @@ -30,6 +31,7 @@ export const Request: React.FunctionComponent = ({ } = {}, security, }, + hideSecurityInfo, onChange, }) => { if (!request || typeof request !== 'object') return null; @@ -50,7 +52,7 @@ export const Request: React.FunctionComponent = ({ - + {hideSecurityInfo ? null : } {pathParams.length > 0 && ( diff --git a/packages/elements-core/src/components/Docs/HttpService/HttpService.spec.tsx b/packages/elements-core/src/components/Docs/HttpService/HttpService.spec.tsx index 89b8f33ac..747532853 100644 --- a/packages/elements-core/src/components/Docs/HttpService/HttpService.spec.tsx +++ b/packages/elements-core/src/components/Docs/HttpService/HttpService.spec.tsx @@ -26,6 +26,17 @@ describe('HttpService', () => { expect(wrapper.getByText(httpService.name).tagName.toLowerCase()).toBe('h1'); }); + it('should not display servers when hideServerInfo is provided', () => { + render( + + + , + ); + + const serverUrl = screen.queryByLabelText('Production API'); + expect(serverUrl).not.toBeInTheDocument(); + }); + it('displays all server urls', () => { render(); @@ -154,6 +165,17 @@ describe('HttpService', () => { expect(security).not.toBeInTheDocument(); }); + it('should not render if hideSecurityInfo is provided', () => { + render( + + + , + ); + + const security = screen.queryByRole('heading', { name: 'Security' }); + expect(security).not.toBeInTheDocument(); + }); + it('should render default description', () => { render(); diff --git a/packages/elements-core/src/components/Docs/HttpService/HttpService.tsx b/packages/elements-core/src/components/Docs/HttpService/HttpService.tsx index 262764e61..42959e6ff 100644 --- a/packages/elements-core/src/components/Docs/HttpService/HttpService.tsx +++ b/packages/elements-core/src/components/Docs/HttpService/HttpService.tsx @@ -59,17 +59,19 @@ const HttpServiceComponent = React.memo( )} - + {layoutOptions?.hideServerInfo ? null : } - - {data.security?.length ? ( - - ) : null} - + {layoutOptions?.hideSecurityInfo ? null : ( + + {data.security?.length ? ( + + ) : null} + + )} {(data.contact?.email || data.license || data.termsOfService) && ( diff --git a/packages/elements-dev-portal/src/components/NodeContent/NodeContent.spec.tsx b/packages/elements-dev-portal/src/components/NodeContent/NodeContent.spec.tsx index ac14c5abf..c7d53b2b2 100644 --- a/packages/elements-dev-portal/src/components/NodeContent/NodeContent.spec.tsx +++ b/packages/elements-dev-portal/src/components/NodeContent/NodeContent.spec.tsx @@ -51,4 +51,17 @@ describe(NodeContent.name, () => { unmount(); }); + + it('can hide SecurityInfo', () => { + const { unmount } = render( + + + , + ); + + expect(screen.getByRole('heading', { name: /create todo/i })).toBeInTheDocument(); + expect(screen.queryByText(/API Key/i)).not.toBeInTheDocument(); + + unmount(); + }); }); diff --git a/packages/elements-dev-portal/src/components/NodeContent/NodeContent.tsx b/packages/elements-dev-portal/src/components/NodeContent/NodeContent.tsx index f3585b3b7..8bef1933c 100644 --- a/packages/elements-dev-portal/src/components/NodeContent/NodeContent.tsx +++ b/packages/elements-dev-portal/src/components/NodeContent/NodeContent.tsx @@ -21,7 +21,7 @@ type DocsBaseProps = Pick< >; type DocsLayoutProps = Pick< Required['layoutOptions'], - 'compact' | 'hideTryIt' | 'hideTryItPanel' | 'hideExport' + 'compact' | 'hideTryIt' | 'hideTryItPanel' | 'hideExport' | 'hideSecurityInfo' | 'hideServerInfo' >; export type NodeContentProps = { @@ -61,6 +61,8 @@ export const NodeContent = ({ compact, hideTryIt, hideTryItPanel, + hideSecurityInfo, + hideServerInfo, // Exporting hideExport, @@ -87,6 +89,8 @@ export const NodeContent = ({ compact, hideTryIt: hideTryIt, hideTryItPanel: hideTryItPanel, + hideSecurityInfo: hideSecurityInfo, + hideServerInfo: hideServerInfo, hideExport: hideExport || (node.links.export_url ?? node.links.export_original_file_url ?? node.links.export_bundled_file_url) === diff --git a/packages/elements-dev-portal/src/containers/StoplightProject.tsx b/packages/elements-dev-portal/src/containers/StoplightProject.tsx index a82714d7c..2d85bf43a 100644 --- a/packages/elements-dev-portal/src/containers/StoplightProject.tsx +++ b/packages/elements-dev-portal/src/containers/StoplightProject.tsx @@ -51,6 +51,18 @@ export interface StoplightProjectProps extends RoutingProps { */ hideExport?: boolean; + /** + * Allows to the server information + * @default false + */ + hideServerInfo?: boolean; + + /** + * Allows to hide the security schemes + * @default false + */ + hideSecurityInfo?: boolean; + /** * If set to true, all table of contents panels will be collapsed. * @default false @@ -76,6 +88,8 @@ export interface StoplightProjectProps extends RoutingProps { const StoplightProjectImpl: React.FC = ({ projectId, hideTryIt, + hideSecurityInfo, + hideServerInfo, hideMocking, hideExport, collapseTableOfContents = false, @@ -136,6 +150,8 @@ const StoplightProjectImpl: React.FC = ({ hideTryIt={hideTryIt} hideMocking={hideMocking} hideExport={hideExport} + hideSecurityInfo={hideSecurityInfo} + hideServerInfo={hideServerInfo} tryItCredentialsPolicy={tryItCredentialsPolicy} tryItCorsProxy={tryItCorsProxy} /> diff --git a/packages/elements-dev-portal/src/web-components/components.ts b/packages/elements-dev-portal/src/web-components/components.ts index 1ac3221cf..e9280a7d0 100644 --- a/packages/elements-dev-portal/src/web-components/components.ts +++ b/packages/elements-dev-portal/src/web-components/components.ts @@ -5,6 +5,8 @@ import { StoplightProject } from '../containers/StoplightProject'; export const StoplightProjectElement = createElementClass(StoplightProject, { projectId: { type: 'string', defaultValue: '' }, hideTryIt: { type: 'boolean' }, + hideServerInfo: { type: 'boolean' }, + hideSecurityInfo: { type: 'boolean' }, hideMocking: { type: 'boolean' }, hideExport: { type: 'boolean' }, basePath: { type: 'string' }, diff --git a/packages/elements/src/components/API/APIWithResponsiveSidebarLayout.tsx b/packages/elements/src/components/API/APIWithResponsiveSidebarLayout.tsx index 640493f20..6d3e02ad2 100644 --- a/packages/elements/src/components/API/APIWithResponsiveSidebarLayout.tsx +++ b/packages/elements/src/components/API/APIWithResponsiveSidebarLayout.tsx @@ -19,6 +19,8 @@ type SidebarLayoutProps = { hideSchemas?: boolean; hideInternal?: boolean; hideExport?: boolean; + hideServerInfo?: boolean; + hideSecurityInfo?: boolean; exportProps?: ExportButtonProps; tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin'; tryItCorsProxy?: string; @@ -34,6 +36,8 @@ export const APIWithResponsiveSidebarLayout: React.FC = ({ hideSchemas, hideInternal, hideExport, + hideServerInfo, + hideSecurityInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, @@ -51,8 +55,14 @@ export const APIWithResponsiveSidebarLayout: React.FC = ({ const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname); const layoutOptions = React.useMemo( - () => ({ hideTryIt: hideTryIt, compact: compact, hideExport: hideExport || node?.type !== NodeType.HttpService }), - [hideTryIt, hideExport, node, compact], + () => ({ + hideTryIt: hideTryIt, + hideSecurityInfo: hideSecurityInfo, + hideServerInfo: hideServerInfo, + compact: compact, + hideExport: hideExport || node?.type !== NodeType.HttpService, + }), + [hideTryIt, hideSecurityInfo, hideServerInfo, compact, hideExport, node?.type], ); if (!node) { diff --git a/packages/elements/src/components/API/APIWithSidebarLayout.tsx b/packages/elements/src/components/API/APIWithSidebarLayout.tsx index 0d47d8d10..690c83e74 100644 --- a/packages/elements/src/components/API/APIWithSidebarLayout.tsx +++ b/packages/elements/src/components/API/APIWithSidebarLayout.tsx @@ -23,6 +23,8 @@ type SidebarLayoutProps = { hideTryIt?: boolean; hideSchemas?: boolean; hideInternal?: boolean; + hideServerInfo?: boolean; + hideSecurityInfo?: boolean; hideExport?: boolean; exportProps?: ExportButtonProps; tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin'; @@ -35,6 +37,8 @@ export const APIWithSidebarLayout: React.FC = ({ logo, hideTryIt, hideSchemas, + hideSecurityInfo, + hideServerInfo, hideInternal, hideExport, exportProps, @@ -53,8 +57,13 @@ export const APIWithSidebarLayout: React.FC = ({ const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname); const layoutOptions = React.useMemo( - () => ({ hideTryIt: hideTryIt, hideExport: hideExport || node?.type !== NodeType.HttpService }), - [hideTryIt, hideExport, node], + () => ({ + hideTryIt: hideTryIt, + hideServerInfo: hideServerInfo, + hideSecurityInfo: hideSecurityInfo, + hideExport: hideExport || node?.type !== NodeType.HttpService, + }), + [hideTryIt, hideServerInfo, hideSecurityInfo, hideExport, node?.type], ); if (!node) { diff --git a/packages/elements/src/components/API/APIWithStackedLayout.tsx b/packages/elements/src/components/API/APIWithStackedLayout.tsx index e1fbbf425..a464857d2 100644 --- a/packages/elements/src/components/API/APIWithStackedLayout.tsx +++ b/packages/elements/src/components/API/APIWithStackedLayout.tsx @@ -29,6 +29,8 @@ type StackedLayoutProps = { serviceNode: ServiceNode; hideTryIt?: boolean; hideExport?: boolean; + hideServerInfo?: boolean; + hideSecurityInfo?: boolean; exportProps?: ExportButtonProps; tryItCredentialsPolicy?: TryItCredentialsPolicy; tryItCorsProxy?: string; @@ -72,6 +74,8 @@ export const APIWithStackedLayout: React.FC = ({ serviceNode, hideTryIt, hideExport, + hideSecurityInfo, + hideServerInfo, exportProps, tryItCredentialsPolicy, tryItCorsProxy, @@ -93,7 +97,7 @@ export const APIWithStackedLayout: React.FC = ({ nodeTitle={serviceNode.name} nodeType={NodeType.HttpService} location={location} - layoutOptions={{ showPoweredByLink, hideExport }} + layoutOptions={{ showPoweredByLink, hideExport, hideSecurityInfo, hideServerInfo }} exportProps={exportProps} tryItCredentialsPolicy={tryItCredentialsPolicy} renderExtensionAddon={renderExtensionAddon} diff --git a/packages/elements/src/containers/API.tsx b/packages/elements/src/containers/API.tsx index 9712ef0df..6102012ff 100644 --- a/packages/elements/src/containers/API.tsx +++ b/packages/elements/src/containers/API.tsx @@ -61,6 +61,16 @@ export interface CommonAPIProps extends RoutingProps { */ hideTryIt?: boolean; + /** + * Allows hiding the Security info section + */ + hideSecurityInfo?: boolean; + + /** + * Allows hiding the Server info section + */ + hideServerInfo?: boolean; + /** * Hides schemas from being displayed in Table of Contents */ @@ -115,6 +125,8 @@ export const APIImpl: React.FC = props => { apiDescriptionUrl = '', logo, hideTryIt, + hideSecurityInfo, + hideServerInfo, hideSchemas, hideInternal, hideExport, @@ -184,6 +196,8 @@ export const APIImpl: React.FC = props => { = props => { logo={logo} serviceNode={serviceNode} hideTryIt={hideTryIt} + hideSecurityInfo={hideSecurityInfo} + hideServerInfo={hideServerInfo} hideSchemas={hideSchemas} hideInternal={hideInternal} hideExport={hideExport} @@ -211,6 +227,8 @@ export const APIImpl: React.FC = props => { logo={logo} serviceNode={serviceNode} hideTryIt={hideTryIt} + hideSecurityInfo={hideSecurityInfo} + hideServerInfo={hideServerInfo} hideSchemas={hideSchemas} hideInternal={hideInternal} hideExport={hideExport} diff --git a/packages/elements/src/web-components/components.ts b/packages/elements/src/web-components/components.ts index 863a63826..532a1b2a6 100644 --- a/packages/elements/src/web-components/components.ts +++ b/packages/elements/src/web-components/components.ts @@ -10,6 +10,8 @@ export const ApiElement = createElementClass(API, { router: { type: 'string' }, layout: { type: 'string' }, hideTryIt: { type: 'boolean' }, + hideServerInfo: { type: 'boolean' }, + hideSecurityInfo: { type: 'boolean' }, hideSchemas: { type: 'boolean' }, hideInternal: { type: 'boolean' }, hideExport: { type: 'boolean' },