fix: sample request hidden when Try It is hidden (PROVCON-2566)

demo/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@stoplight/elements": "^8.1.3",
+    "@stoplight/elements": "^8.4.1",
     "@stoplight/mosaic": "^1.53.1",
     "history": "^5.0.0",
     "react": "16.14.0",

packages/elements-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.3.1",
+  "version": "8.4.1",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

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

@@ -87,7 +87,11 @@ interface BaseDocsProps {
      * @default false
      */
     hideTryIt?: boolean;
-
+    /**
+     * SAllows to hide RequestSamples component
+     * @default false
+     */
+    hideSamples?: boolean;
     /**
      * Shows only operation document without right column
      * @default false

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

@@ -679,6 +679,13 @@ describe('HttpOperation', () => {
       expect(screen.queryByText('Send API Request')).not.toBeInTheDocument();
       expect(screen.queryByText('Response Example')).not.toBeInTheDocument();
 
+      unmount();
+    });
+    it('should hide Samples', async () => {
+      const { unmount } = render(<HttpOperation data={httpOperation} layoutOptions={{ hideSamples: true }} />);
+
+      expect(screen.queryByText('Request Sample: Shell / cURL')).not.toBeInTheDocument();
+
       unmount();
     });
   });
@@ -696,6 +703,7 @@ describe('HttpOperation', () => {
               hideServerInfo: true,
               hideExport: true,
               hideTryIt: true,
+              hideSamples: true,
             }}
           />
         </ElementsOptionsProvider>,
@@ -732,6 +740,7 @@ describe('HttpOperation', () => {
               hideServerInfo: true,
               hideExport: true,
               hideTryIt: true,
+              hideSamples: true,
             }}
           />
         </ElementsOptionsProvider>,

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

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

packages/elements-core/src/components/TryIt/TryItWithRequestSamples.spec.tsx

@@ -12,15 +12,28 @@ import { TryItWithRequestSamples as RawComponent } from './TryItWithRequestSampl
 const TryItWithRequestSamples = withMosaicProvider(withPersistenceBoundary(RawComponent));
 
 describe('TryItWithRequestSamples', () => {
-  it('displays RequestSamples', async () => {
+  it('displays RequestSamples and TryIt', async () => {
     render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
 
     expect(await screen.findByText('Request Sample: Shell / cURL')).toBeVisible();
+    expect(await screen.findByRole('button', { name: /Send API Request/i })).toBeVisible();
 
     const codeViewer = await screen.findByLabelText(/curl/);
     expect(codeViewer).toHaveTextContent(/PUT/i);
   });
 
+  it('RequestSamples hidden', async () => {
+    render(<TryItWithRequestSamples httpOperation={putTodosOperation} hideSamples={true} />);
+
+    await waitFor(() => expect(screen.queryByText('Request Sample: Shell / cURL')).not.toBeInTheDocument());
+  });
+
+  it('TryIt hidden', async () => {
+    render(<TryItWithRequestSamples httpOperation={putTodosOperation} hideTryIt={true} />);
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: /Send API Request/i })).not.toBeInTheDocument());
+  });
+
   it('reacts to parameter input', async () => {
     render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
 

packages/elements-core/src/components/TryIt/TryItWithRequestSamples.tsx

@@ -7,9 +7,13 @@ import { ResponseExamples, ResponseExamplesProps } from '../ResponseExamples/Res
 import { TryIt, TryItProps } from './TryIt';
 
 export type TryItWithRequestSamplesProps = Omit<TryItProps, 'onRequestChange'> &
-  ResponseExamplesProps & { hideTryIt?: boolean };
+  ResponseExamplesProps & { hideTryIt?: boolean; hideSamples?: boolean };
 
-export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = ({ hideTryIt, ...props }) => {
+export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = ({
+  hideTryIt,
+  hideSamples,
+  ...props
+}) => {
   const [requestData, setRequestData] = React.useState<HarRequest | undefined>();
 
   const customCodeSamples = extractCodeSamples(props.httpOperation);
@@ -24,7 +28,7 @@ export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = (
         </InvertTheme>
       )}
 
-      {requestData && <RequestSamples request={requestData} customCodeSamples={customCodeSamples} />}
+      {requestData && !hideSamples && <RequestSamples request={requestData} customCodeSamples={customCodeSamples} />}
 
       <ResponseExamples {...props} />
     </VStack>

packages/elements-dev-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -64,7 +64,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~8.3.1",
+    "@stoplight/elements-core": "~8.4.1",
     "@stoplight/markdown-viewer": "^5.7.0",
     "@stoplight/mosaic": "^1.53.1",
     "@stoplight/path": "^1.3.2",

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' | 'hideSamples' | 'hideExport'
 >;
 
 export type NodeContentProps = {
@@ -60,6 +60,7 @@ export const NodeContent = ({
   // Docs layout props
   compact,
   hideTryIt,
+  hideSamples,
   hideTryItPanel,
 
   // Exporting
@@ -87,6 +88,7 @@ export const NodeContent = ({
               compact,
               hideTryIt: hideTryIt,
               hideTryItPanel: hideTryItPanel,
+              hideSamples,
               hideExport:
                 hideExport ||
                 (node.links.export_url ?? node.links.export_original_file_url ?? node.links.export_bundled_file_url) ===

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "8.3.1",
+  "version": "8.4.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -63,7 +63,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~8.3.1",
+    "@stoplight/elements-core": "~8.4.1",
     "@stoplight/http-spec": "^7.0.3",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.53.1",

packages/elements/src/components/API/APIWithResponsiveSidebarLayout.tsx

@@ -15,7 +15,9 @@ import { computeAPITree, findFirstNodeSlug, isInternal } from './utils';
 type SidebarLayoutProps = {
   serviceNode: ServiceNode;
   logo?: string;
+  hideTryItPanel?: boolean;
   hideTryIt?: boolean;
+  hideSamples?: boolean;
   hideSchemas?: boolean;
   hideInternal?: boolean;
   hideExport?: boolean;
@@ -29,7 +31,9 @@ type SidebarLayoutProps = {
 export const APIWithResponsiveSidebarLayout: React.FC<SidebarLayoutProps> = ({
   serviceNode,
   logo,
+  hideTryItPanel,
   hideTryIt,
+  hideSamples,
   compact,
   hideSchemas,
   hideInternal,
@@ -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,
+      hideTryItPanel,
+      hideSamples,
+      compact: compact,
+      hideExport: hideExport || node?.type !== NodeType.HttpService,
+    }),
+    [hideTryIt, hideTryItPanel, hideSamples, compact, hideExport, node?.type],
   );
 
   if (!node) {

packages/elements/src/components/API/APIWithSidebarLayout.tsx

@@ -20,7 +20,9 @@ import { computeAPITree, findFirstNodeSlug, isInternal } from './utils';
 type SidebarLayoutProps = {
   serviceNode: ServiceNode;
   logo?: string;
+  hideTryItPanel?: boolean;
   hideTryIt?: boolean;
+  hideSamples?: boolean;
   hideSchemas?: boolean;
   hideInternal?: boolean;
   hideExport?: boolean;
@@ -33,7 +35,9 @@ type SidebarLayoutProps = {
 export const APIWithSidebarLayout: React.FC<SidebarLayoutProps> = ({
   serviceNode,
   logo,
+  hideTryItPanel,
   hideTryIt,
+  hideSamples,
   hideSchemas,
   hideInternal,
   hideExport,
@@ -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,
+      hideTryItPanel,
+      hideSamples,
+      hideExport: hideExport || node?.type !== NodeType.HttpService,
+    }),
+    [hideTryIt, hideTryItPanel, hideSamples, hideExport, node],
   );
 
   if (!node) {

packages/elements/src/components/API/APIWithStackedLayout.tsx

@@ -27,7 +27,9 @@ interface Location {
 
 type StackedLayoutProps = {
   serviceNode: ServiceNode;
+  hideTryItPanel?: boolean;
   hideTryIt?: boolean;
+  hideSamples?: boolean;
   hideExport?: boolean;
   exportProps?: ExportButtonProps;
   tryItCredentialsPolicy?: TryItCredentialsPolicy;
@@ -47,10 +49,14 @@ const itemMatchesHash = (hash: string, item: OperationNode | WebhookNode) => {
 
 const TryItContext = React.createContext<{
   hideTryIt?: boolean;
+  hideTryItPanel?: boolean;
+  hideSamples?: boolean;
   tryItCredentialsPolicy?: TryItCredentialsPolicy;
   corsProxy?: string;
 }>({
   hideTryIt: false,
+  hideTryItPanel: false,
+  hideSamples: false,
   tryItCredentialsPolicy: 'omit',
 });
 TryItContext.displayName = 'TryItContext';
@@ -70,7 +76,9 @@ LocationContext.displayName = 'LocationContext';
 
 export const APIWithStackedLayout: React.FC<StackedLayoutProps> = ({
   serviceNode,
+  hideTryItPanel,
   hideTryIt,
+  hideSamples,
   hideExport,
   exportProps,
   tryItCredentialsPolicy,
@@ -84,7 +92,9 @@ export const APIWithStackedLayout: React.FC<StackedLayoutProps> = ({
 
   return (
     <LocationContext.Provider value={{ location }}>
-      <TryItContext.Provider value={{ hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy }}>
+      <TryItContext.Provider
+        value={{ hideTryItPanel, hideTryIt, hideSamples, tryItCredentialsPolicy, corsProxy: tryItCorsProxy }}
+      >
         <Flex w="full" flexDirection="col" m="auto" className="sl-max-w-4xl">
           <Box w="full" borderB>
             <Docs
@@ -175,7 +185,7 @@ const Item = React.memo<{ item: OperationNode | WebhookNode }>(({ item }) => {
   const scrollRef = React.useRef<HTMLDivElement | null>(null);
   const color = HttpMethodColors[item.data.method] || 'gray';
   const isDeprecated = !!item.data.deprecated;
-  const { hideTryIt, tryItCredentialsPolicy, corsProxy } = React.useContext(TryItContext);
+  const { hideTryIt, hideSamples, hideTryItPanel, tryItCredentialsPolicy, corsProxy } = React.useContext(TryItContext);
 
   const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
 
@@ -222,8 +232,13 @@ const Item = React.memo<{ item: OperationNode | WebhookNode }>(({ item }) => {
         <Box flex={1} p={2} fontWeight="medium" mx="auto" fontSize="xl">
           {item.name}
         </Box>
-        {hideTryIt ? (
-          <Box as={ParsedDocs} layoutOptions={{ noHeading: true, hideTryItPanel: true }} node={item} p={4} />
+        {hideTryItPanel ? (
+          <Box
+            as={ParsedDocs}
+            layoutOptions={{ noHeading: true, hideTryItPanel: true, hideSamples, hideTryIt }}
+            node={item}
+            p={4}
+          />
         ) : (
           <Tabs appearance="line">
             <TabList>
@@ -237,7 +252,7 @@ const Item = React.memo<{ item: OperationNode | WebhookNode }>(({ item }) => {
                   className="sl-px-4"
                   node={item}
                   location={location}
-                  layoutOptions={{ noHeading: true, hideTryItPanel: true }}
+                  layoutOptions={{ noHeading: true, hideTryItPanel: false, hideSamples, hideTryIt }}
                 />
               </TabPanel>
 
@@ -246,6 +261,8 @@ const Item = React.memo<{ item: OperationNode | WebhookNode }>(({ item }) => {
                   httpOperation={item.data}
                   tryItCredentialsPolicy={tryItCredentialsPolicy}
                   corsProxy={corsProxy}
+                  hideSamples={hideSamples}
+                  hideTryIt={hideTryIt}
                 />
               </TabPanel>
             </TabPanels>