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.
stoplightio · Jun 22, 2024 · 3cc244f · 3cc244f
1 parent 7937f70
commit 3cc244f
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 18 deletions.
diff --git 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<HttpOperationProps>(
 
         <NodeVendorExtensions data={data} />
 
-        <Request onChange={setTextRequestBodyIndex} operation={data} />
+        <Request
+          onChange={setTextRequestBodyIndex}
+          operation={data}
+          hideSecurityInfo={layoutOptions?.hideSecurityInfo}
+        />
 
         {data.responses && (
           <Responses

diff --git a/packages/elements-core/src/components/Docs/HttpOperation/Request.tsx b/packages/elements-core/src/components/Docs/HttpOperation/Request.tsx
@@ -15,6 +15,7 @@ import { Parameters } from './Parameters';
 
 interface IRequestProps {
   operation: IHttpEndpointOperation;
+  hideSecurityInfo?: boolean;
   onChange?: (requestBodyIndex: number) => void;
 }
 
@@ -30,6 +31,7 @@ export const Request: React.FunctionComponent<IRequestProps> = ({
     } = {},
     security,
   },
+  hideSecurityInfo,
   onChange,
 }) => {
   if (!request || typeof request !== 'object') return null;
@@ -50,7 +52,7 @@ export const Request: React.FunctionComponent<IRequestProps> = ({
     <VStack spacing={8}>
       <SectionTitle title="Request" />
 
-      <SecuritySchemes schemes={securitySchemes} parentId={operation.id} />
+      {hideSecurityInfo ? null : <SecuritySchemes schemes={securitySchemes} parentId={operation.id} />}
 
       {pathParams.length > 0 && (
         <VStack spacing={5}>

diff --git 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(
+      <Router>
+        <HttpService layoutOptions={{ hideServerInfo: true }} data={{ ...httpService, security: [] }} />
+      </Router>,
+    );
+
+    const serverUrl = screen.queryByLabelText('Production API');
+    expect(serverUrl).not.toBeInTheDocument();
+  });
+
   it('displays all server urls', () => {
     render(<ServerInfo servers={httpService.servers ?? []} />);
 
@@ -154,6 +165,17 @@ describe('HttpService', () => {
       expect(security).not.toBeInTheDocument();
     });
 
+    it('should not render if hideSecurityInfo is provided', () => {
+      render(
+        <Router>
+          <HttpService layoutOptions={{ hideSecurityInfo: true }} data={{ ...httpService, security: [] }} />
+        </Router>,
+      );
+
+      const security = screen.queryByRole('heading', { name: 'Security' });
+      expect(security).not.toBeInTheDocument();
+    });
+
     it('should render default description', () => {
       render(<SecuritySchemes secSchemes={[[apiKey]]} parentId="2@adfg4F" />);
 

diff --git 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<HttpServiceProps>(
         )}
 
         <VStack spacing={6}>
-          <ServerInfo servers={data.servers ?? []} mockUrl={mocking.mockUrl} />
+          {layoutOptions?.hideServerInfo ? null : <ServerInfo servers={data.servers ?? []} mockUrl={mocking.mockUrl} />}
 
-          <Box data-test="security">
-            {data.security?.length ? (
-              <SecuritySchemes
-                secSchemes={data.security}
-                defaultScheme={query.get('security') || undefined}
-                parentId={data.id}
-              />
-            ) : null}
-          </Box>
+          {layoutOptions?.hideSecurityInfo ? null : (
+            <Box data-test="security">
+              {data.security?.length ? (
+                <SecuritySchemes
+                  secSchemes={data.security}
+                  defaultScheme={query.get('security') || undefined}
+                  parentId={data.id}
+                />
+              ) : null}
+            </Box>
+          )}
 
           <Box data-test="additional-info">
             {(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
@@ -51,4 +51,17 @@ describe(NodeContent.name, () => {
 
     unmount();
   });
+
+  it('can hide SecurityInfo', () => {
+    const { unmount } = render(
+      <MemoryRouter>
+        <NodeContent node={nodeContent} Link={DummyLink} hideSecurityInfo />
+      </MemoryRouter>,
+    );
+
+    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
@@ -21,7 +21,7 @@ type DocsBaseProps = Pick<
 >;
 type DocsLayoutProps = Pick<
   Required<DocsProps>['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
@@ -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<StoplightProjectProps> = ({
   projectId,
   hideTryIt,
+  hideSecurityInfo,
+  hideServerInfo,
   hideMocking,
   hideExport,
   collapseTableOfContents = false,
@@ -136,6 +150,8 @@ const StoplightProjectImpl: React.FC<StoplightProjectProps> = ({
         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
@@ -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
@@ -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<SidebarLayoutProps> = ({
   hideSchemas,
   hideInternal,
   hideExport,
+  hideServerInfo,
+  hideSecurityInfo,
   exportProps,
   tryItCredentialsPolicy,
   tryItCorsProxy,
@@ -51,8 +55,14 @@ export const APIWithResponsiveSidebarLayout: React.FC<SidebarLayoutProps> = ({
   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
@@ -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<SidebarLayoutProps> = ({
   logo,
   hideTryIt,
   hideSchemas,
+  hideSecurityInfo,
+  hideServerInfo,
   hideInternal,
   hideExport,
   exportProps,
@@ -53,8 +57,13 @@ export const APIWithSidebarLayout: React.FC<SidebarLayoutProps> = ({
   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
@@ -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<StackedLayoutProps> = ({
   serviceNode,
   hideTryIt,
   hideExport,
+  hideSecurityInfo,
+  hideServerInfo,
   exportProps,
   tryItCredentialsPolicy,
   tryItCorsProxy,
@@ -93,7 +97,7 @@ export const APIWithStackedLayout: React.FC<StackedLayoutProps> = ({
               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
@@ -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<APIProps> = props => {
     apiDescriptionUrl = '',
     logo,
     hideTryIt,
+    hideSecurityInfo,
+    hideServerInfo,
     hideSchemas,
     hideInternal,
     hideExport,
@@ -184,6 +196,8 @@ export const APIImpl: React.FC<APIProps> = props => {
         <APIWithStackedLayout
           serviceNode={serviceNode}
           hideTryIt={hideTryIt}
+          hideSecurityInfo={hideSecurityInfo}
+          hideServerInfo={hideServerInfo}
           hideExport={hideExport}
           exportProps={exportProps}
           tryItCredentialsPolicy={tryItCredentialsPolicy}
@@ -197,6 +211,8 @@ export const APIImpl: React.FC<APIProps> = 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<APIProps> = 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
@@ -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' },