feat: add codegen to embedded request maker (stoplightio#1728)

* feat: add codegen to embedded request maker

* chore: undo useEffect change

* test: this is ugly but does it help timeout?

* chore: address feedback

* chore: angular typescript version

* chore: add test

Author: paulatulis

examples/angular/package.json

@@ -38,6 +38,6 @@
     "@angular/compiler-cli": "^12.0.4",
     "@angular/language-service": "^12.0.5",
     "angular-http-server": "^1.10.0",
-    "typescript": "^4.2.4"
+    "typescript": "4.2.4"
   }
 }

packages/elements-core/src/components/MarkdownViewer/CustomComponents/CodeComponent.tsx

@@ -70,7 +70,9 @@ export const CodeComponent: CustomComponentMapping['code'] = props => {
       return null;
     }
 
-    return <TryIt httpOperation={isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue)} />;
+    return (
+      <TryIt httpOperation={isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue)} embeddedInMd />
+    );
   }
 
   const DefaultCode = DefaultSMDComponents.code!;

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

@@ -13,6 +13,10 @@ export interface RequestSamplesProps {
    * The HTTP request to generate code for.
    */
   request: Request;
+  /**
+   * True when embedded in TryIt
+   */
+  embeddedInMd?: boolean;
 }
 
 const selectedLanguageAtom = persistAtom<string>('RequestSamples_selectedLanguage', atom('Shell'));
@@ -25,7 +29,7 @@ const fallbackText = 'Unable to generate code example';
  *
  * The programming language can be selected by the user and is remembered across instances and remounts.
  */
-export const RequestSamples = React.memo<RequestSamplesProps>(({ request }) => {
+export const RequestSamples = React.memo<RequestSamplesProps>(({ request, embeddedInMd = false }) => {
   const [selectedLanguage, setSelectedLanguage] = useAtom(selectedLanguageAtom);
   const [selectedLibrary, setSelectedLibrary] = useAtom(selectedLibraryAtom);
 
@@ -67,7 +71,7 @@ export const RequestSamples = React.memo<RequestSamplesProps>(({ request }) => {
   }, [selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
 
   return (
-    <Panel rounded isCollapsible={false}>
+    <Panel rounded={embeddedInMd ? undefined : true} isCollapsible={embeddedInMd}>
       <Panel.Titlebar rightComponent={<CopyButton size="sm" copyValue={requestSample || ''} />}>
         <Box ml={-2}>
           <Menu

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

@@ -147,6 +147,13 @@ describe('TryIt', () => {
     expect(responseHeader).not.toBeInTheDocument();
   });
 
+  it('when embedded in markdown, shows request codegen', async () => {
+    render(<TryItWithPersistence httpOperation={basicOperation} embeddedInMd />);
+
+    const requestSamplePanel = await screen.findByText('Request Sample: Shell / cURL');
+    expect(requestSamplePanel).toBeVisible();
+  });
+
   describe('Credentials policy', () => {
     it('sets credentials correctly', async () => {
       render(<TryItWithPersistence httpOperation={basicOperation} tryItCredentialsPolicy="same-origin" />);

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

@@ -11,6 +11,7 @@ import * as React from 'react';
 import { HttpCodeDescriptions, HttpMethodColors } from '../../constants';
 import { getHttpCodeColor } from '../../utils/http';
 import { getServersToDisplay } from '../../utils/http-spec/IServer';
+import { RequestSamples } from '../RequestSamples';
 import { TryItAuth } from './Auth/Auth';
 import { usePersistedSecuritySchemeWithValues } from './Auth/authentication-utils';
 import { FormDataBody } from './Body/FormDataBody';
@@ -42,6 +43,10 @@ export interface TryItProps {
    */
   onRequestChange?: (currentRequest: HarRequest) => void;
   requestBodyIndex?: number;
+  /**
+   * True when TryIt is embedded in Markdown doc
+   */
+  embeddedInMd?: boolean;
 
   /**
    * Fetch credentials policy for TryIt component
@@ -73,12 +78,15 @@ export const TryIt: React.FC<TryItProps> = ({
   mockUrl,
   onRequestChange,
   requestBodyIndex,
+  embeddedInMd = false,
   tryItCredentialsPolicy,
   corsProxy,
 }) => {
   const isDark = useThemeIsDark();
 
   const [response, setResponse] = React.useState<ResponseState | ErrorState | undefined>();
+  const [requestData, setRequestData] = React.useState<HarRequest | undefined>();
+
   const [loading, setLoading] = React.useState<boolean>(false);
   const [validateParameters, setValidateParameters] = React.useState<boolean>(false);
 
@@ -109,7 +117,7 @@ export const TryIt: React.FC<TryItProps> = ({
 
   React.useEffect(() => {
     let isActive = true;
-    if (onRequestChange) {
+    if (onRequestChange || embeddedInMd) {
       buildHarRequest({
         mediaTypeContent,
         parameterValues: parameterValuesWithDefaults,
@@ -120,7 +128,8 @@ export const TryIt: React.FC<TryItProps> = ({
         chosenServer,
         corsProxy,
       }).then(request => {
-        if (isActive) onRequestChange(request);
+        if (onRequestChange && isActive) onRequestChange(request);
+        if (embeddedInMd) setRequestData(request);
       });
     }
     return () => {
@@ -138,6 +147,7 @@ export const TryIt: React.FC<TryItProps> = ({
     mockingOptions,
     chosenServer,
     corsProxy,
+    embeddedInMd,
   ]);
 
   const handleClick = async () => {
@@ -257,6 +267,7 @@ export const TryIt: React.FC<TryItProps> = ({
           )}
         </Panel.Content>
       </Panel>
+      {requestData && embeddedInMd && <RequestSamples request={requestData} embeddedInMd />}
       {response && !('error' in response) && <TryItResponse response={response} />}
       {response && 'error' in response && <ResponseError state={response} />}
     </Box>