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

---------

Author: weyert

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.
-

packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx

@@ -79,6 +79,7 @@ const HttpOperationComponent = React.memo<HttpOperationProps>(
         responseStatusCode={responseStatusCode}
         requestBodyIndex={requestBodyIndex}
         hideTryIt={layoutOptions?.hideTryIt}
+        hideTryItPanel={layoutOptions?.hideTryItPanel}
         hideSamples={layoutOptions?.hideSamples}
         tryItCredentialsPolicy={tryItCredentialsPolicy}
         mockUrl={mocking.hideMocking ? undefined : mocking.mockUrl}

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<TryItProps> = ({
   onRequestChange,
   requestBodyIndex,
   embeddedInMd = false,
+  hideTryItPanel = false,
   tryItCredentialsPolicy,
   corsProxy,
 }) => {
@@ -349,7 +355,7 @@ export const TryIt: React.FC<TryItProps> = ({
 
   return (
     <Box rounded="lg" overflowY="hidden">
-      {tryItPanelElem}
+      {hideTryItPanel ? null : tryItPanelElem}
       {requestData && embeddedInMd && (
         <RequestSamples request={requestData} customCodeSamples={customCodeSamples} embeddedInMd />
       )}

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';

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<TryItProps, 'onRequestChange'> &
-  ResponseExamplesProps & { hideTryIt?: boolean; hideSamples?: boolean };
+  ResponseExamplesProps & { hideTryIt?: boolean; hideTryItPanel?: boolean; hideSamples?: boolean };
 
 export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = ({
   hideTryIt,
+  hideTryItPanel,
   hideSamples,
   ...props
 }) => {
@@ -20,12 +21,17 @@ export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = (
 
   return (
     <VStack spacing={6}>
-      {!hideTryIt && (
+      {!hideTryIt ? (
         <InvertTheme>
           <Box>
-            <TryIt {...props} onRequestChange={setRequestData} />
+            <TryIt {...props} hideTryItPanel={hideTryItPanel} onRequestChange={setRequestData} />
           </Box>
         </InvertTheme>
+      ) : (
+        // The TryIt is responsible for generating the Request Data so it should always be rendered
+        <>
+          <TryIt {...props} hideTryItPanel={hideTryIt} onRequestChange={setRequestData} />
+        </>
       )}
 
       {requestData && !hideSamples && <RequestSamples request={requestData} customCodeSamples={customCodeSamples} />}