From 589d49ba145def944997aaca1481d9de3ff2bb2b Mon Sep 17 00:00:00 2001 From: Weyert de Boer <7049+weyert@users.noreply.github.com> Date: Tue, 5 Nov 2024 12:14:14 +0000 Subject: [PATCH] fix: allow to display the code samples when try it panel is hidden (#2624) * fix: allow to display the code samples when try it panel is hidden The `TryIt`-component is responsible for generating the request data that is used to render the request sample. This requires the component to also be rendered when we don't want to display the TryIt panel itself. * fix: resolve the issue with displaying `TryIt`-component * docs: update the documentation by adding call out for `hideTryItPanel`-option --------- --- docs/getting-started/elements/elements-options.md | 4 ++-- .../components/Docs/HttpOperation/HttpOperation.tsx | 1 + .../elements-core/src/components/TryIt/TryIt.tsx | 8 +++++++- .../TryIt/TryItWithRequestSamples.stories.tsx | 7 +++++++ .../src/components/TryIt/TryItWithRequestSamples.tsx | 12 +++++++++--- 5 files changed, 26 insertions(+), 6 deletions(-) diff --git a/docs/getting-started/elements/elements-options.md b/docs/getting-started/elements/elements-options.md index d727b1f2f..3b5469e7b 100644 --- a/docs/getting-started/elements/elements-options.md +++ b/docs/getting-started/elements/elements-options.md @@ -4,7 +4,8 @@ - `apiDescriptionDocument` - OpenAPI document, provided as YAML string, JSON string, or JavaScript object. - `basePath` - Helps when using `router: 'history'` but docs are in a subdirectory like `https://example.com/docs/api`. - `hideInternal` - Pass `"true"` to filter out any content which has been marked as internal with `x-internal`. -- `hideTryIt` - Pass `true` to hide the [**Try It** feature](https://docs.stoplight.io/docs/platform/ZG9jOjM2OTM3Mjky-try-it). +- `hideTryIt` - Pass `true` to hide the [**Try It** feature](https://docs.stoplight.io/docs/platform/ZG9jOjM2OTM3Mjky-try-it) completely. +- `hideTryItPanel` - Pass `true` to hide the Try It panel while still display the Request Sample, expects `hideTryIt` to be `false` - `hideSchemas` - Pass `true` to hide the schemas in the Table of Contents, when using the `sidebar` layout. - `hideExport` - Pass `true` to hide the Export button on overview section of the documentation. - `tryItCorsProxy` - Pass the URL of a CORS proxy used to send requests to the Try It feature. The provided URL is pre-pended to the URL of an actual request. @@ -19,4 +20,3 @@ - `hash` - uses the hash portion of the URL to keep the UI in sync with the URL. - `memory` - keeps the history of your "URL" in memory (doesn't read or write to the address bar). - `static` - renders using the StaticRouter which can help render pages on the server. - diff --git a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx index ee6a1f996..607fd718b 100644 --- a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx +++ b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx @@ -79,6 +79,7 @@ const HttpOperationComponent = React.memo( responseStatusCode={responseStatusCode} requestBodyIndex={requestBodyIndex} hideTryIt={layoutOptions?.hideTryIt} + hideTryItPanel={layoutOptions?.hideTryItPanel} hideSamples={layoutOptions?.hideSamples} tryItCredentialsPolicy={tryItCredentialsPolicy} mockUrl={mocking.hideMocking ? undefined : mocking.mockUrl} diff --git a/packages/elements-core/src/components/TryIt/TryIt.tsx b/packages/elements-core/src/components/TryIt/TryIt.tsx index 246636174..1983e228d 100644 --- a/packages/elements-core/src/components/TryIt/TryIt.tsx +++ b/packages/elements-core/src/components/TryIt/TryIt.tsx @@ -56,6 +56,11 @@ export interface TryItProps { */ embeddedInMd?: boolean; + /** + * True when TryIt Panel should be hidden + */ + hideTryItPanel?: boolean; + /** * Fetch credentials policy for TryIt component * For more information: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API @@ -78,6 +83,7 @@ export const TryIt: React.FC = ({ onRequestChange, requestBodyIndex, embeddedInMd = false, + hideTryItPanel = false, tryItCredentialsPolicy, corsProxy, }) => { @@ -349,7 +355,7 @@ export const TryIt: React.FC = ({ return ( - {tryItPanelElem} + {hideTryItPanel ? null : tryItPanelElem} {requestData && embeddedInMd && ( )} diff --git a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx b/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx index 7c2370ce2..bcf090060 100644 --- a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx +++ b/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.stories.tsx @@ -23,3 +23,10 @@ WithVariables.args = { httpOperation: operationWithUrlVariables, }; WithVariables.storyName = 'With Server Variables'; + +export const WithoutTryItPanel = Template.bind({}); +WithoutTryItPanel.args = { + hideTryIt: true, + httpOperation: operationWithUrlVariables, +}; +WithoutTryItPanel.storyName = 'Without Try It Panel'; diff --git a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx b/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx index 0979dc78e..ef3dd9a6a 100644 --- a/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx +++ b/packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx @@ -7,10 +7,11 @@ import { ResponseExamples, ResponseExamplesProps } from '../ResponseExamples/Res import { TryIt, TryItProps } from './TryIt'; export type TryItWithRequestSamplesProps = Omit & - ResponseExamplesProps & { hideTryIt?: boolean; hideSamples?: boolean }; + ResponseExamplesProps & { hideTryIt?: boolean; hideTryItPanel?: boolean; hideSamples?: boolean }; export const TryItWithRequestSamples: React.FC = ({ hideTryIt, + hideTryItPanel, hideSamples, ...props }) => { @@ -20,12 +21,17 @@ export const TryItWithRequestSamples: React.FC = ( return ( - {!hideTryIt && ( + {!hideTryIt ? ( - + + ) : ( + // The TryIt is responsible for generating the Request Data so it should always be rendered + <> + + )} {requestData && !hideSamples && }