From cfbe04272ae4424297da6fbc54ebbcd116537d1d Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Fri, 1 Apr 2022 15:00:30 +0200
Subject: [PATCH] feat: make API request component work without payloads

There's been no previous need for GET or DELETE requests, but now that
we do need them, the payload shouldn't show up as `undefined`
---
 .../ApiRequest/ApiRequest.stories.jsx         | 57 ++++++++--------
 website/src/components/ApiRequest/index.tsx   | 65 +++++++++++++------
 2 files changed, 74 insertions(+), 48 deletions(-)

diff --git a/website/src/components/ApiRequest/ApiRequest.stories.jsx b/website/src/components/ApiRequest/ApiRequest.stories.jsx
index 8a0aff8d9f..257fc77afc 100644
--- a/website/src/components/ApiRequest/ApiRequest.stories.jsx
+++ b/website/src/components/ApiRequest/ApiRequest.stories.jsx
@@ -16,41 +16,40 @@ const Template = (args) => (
     </BrowserRouter>
 );
 
-export const Step1 = Template.bind({});
-Step1.args = {
-    open: true,
-    seedData: {
-        currentStep: 1,
-    },
+export const GET = Template.bind({});
+GET.args = {
+    verb: 'get',
+    url: 'api/admin/segments',
+    title: 'List all segments (example).',
 };
 
-export const Step2 = Template.bind({});
-Step2.args = {
-    seedData: {
-        currentStep: 2,
-    },
-    open: true,
+export const POST = Template.bind({});
+POST.args = {
+    verb: 'post',
+    payload: { name: '<feature-toggle-name>', impressionData: true },
+    url: 'api/admin/projects/<project-id>/features',
+    title: 'Create a feature toggle with impression data enabled. (example)',
 };
 
-export const Step3 = Template.bind({});
-Step3.args = {
-    seedData: {
-        currentStep: 3,
-    },
-    open: true,
+export const PUT = Template.bind({});
+PUT.args = {
+    verb: 'put',
+    payload: { name: '<feature-toggle-name>', impressionData: true },
+    url: 'api/admin/projects/<project-id>/features/<feature-id>',
+    title: 'Create a feature toggle with impression data enabled (example).',
 };
 
-export const Step4 = Template.bind({});
-Step4.args = {
-    seedData: {
-        currentStep: 4,
-    },
-    open: true,
+export const PATCH = Template.bind({});
+PATCH.args = {
+    verb: 'patch',
+    payload: [{ op: 'replace', path: '/impressionData', value: true }],
+    url: 'api/admin/projects/<project-id>/features/<feature-toggle-name>',
+    title: 'Enable impression data on an existing toggle (example).',
 };
 
-export const WithLocalStorage = Template.bind({});
-WithLocalStorage.args = {
-    open: true,
+export const DELETE = Template.bind({});
+DELETE.args = {
+    verb: 'delete',
+    url: 'api/admin/projects/<project-id>/features/<feature-toggle-id>',
+    title: 'Create a feature toggle with impression data enabled.',
 };
-
-export const Closed = Template.bind({});
diff --git a/website/src/components/ApiRequest/index.tsx b/website/src/components/ApiRequest/index.tsx
index 725b066959..0e0bc3caef 100644
--- a/website/src/components/ApiRequest/index.tsx
+++ b/website/src/components/ApiRequest/index.tsx
@@ -17,40 +17,67 @@ import CodeBlock from '@theme/CodeBlock';
 
 const indentation = 2;
 
-const Component = ({ verb, payload, url, title }) => {
+type Props = {
+    verb: string,
+    payload?: any,
+    url: string,
+    title?: string
+}
+
+type PropsWithoutPayload = Omit<Props, 'payload'>
+
+
+const Component: React.FC<Props> = ({ verb, payload, url, title }) => {
     const verbUpper = verb?.toUpperCase() || '';
     const prettyPayload = JSON.stringify(payload, null, indentation);
 
+    const httpBlock = (payload ? `
+${verbUpper} <unleash-url>/${url}
+Authorization: <API-token>
+content-type: application/json
+
+${prettyPayload}` :`
+${verbUpper} <unleash-url>/${url}
+Authorization: <API-token>
+content-type: application/json`).trim()
+
+    const curlBlock = (payload ? `
+curl -H "Content-Type: application/json" \\
+     -H "Authorization: <API-token>" \\
+     -X ${verbUpper} \\
+     -d '${prettyPayload}' \\
+     <unleash-url>/${url}` : `
+curl -H "Content-Type: application/json" \\
+     -H "Authorization: <API-token>" \\
+     -X ${verbUpper} \\
+     <unleash-url>/${url}` ).trim()
+
+    const httpieBlock = (payload ?
+                         `echo '${prettyPayload}' \\
+| http ${verbUpper} \\
+  <unleash-url>/${url} \\
+  Authorization:<API-token>`
+        : `
+http ${verbUpper} \\
+  <unleash-url>/${url} \\
+  Authorization:<API-token>`.trim()
+        ).trim()
+
     return (
         <Tabs>
             <TabItem value="http" label="HTTP">
                 <CodeBlock language="http" title={title}>
-                    {`
-${verbUpper} <unleash-url>/${url}
-Authorization: <API-token>
-content-type: application/json
-
-${prettyPayload}
-`.trim()}
+                    {httpBlock}
                 </CodeBlock>
             </TabItem>
             <TabItem value="curl" label="cURL">
                 <CodeBlock language="bash" title={title}>
-                    {`
-curl -H "Content-Type: application/json" \\
-     -H "Authorization: <API-token>" \\
-     -X ${verbUpper} \\
-     -d '${prettyPayload}' \\
-     <unleash-url>/${url}
-`.trim()}
+            {curlBlock}
                 </CodeBlock>
             </TabItem>
             <TabItem value="httpie" label="HTTPie">
                 <CodeBlock language="bash" title={title}>
-                    {`echo '${prettyPayload}' \\
-| http ${verbUpper} \\
-  <unleash-url>/${url} \\
-  Authorization:<API-token>`.trim()}
+                    {httpieBlock}
                 </CodeBlock>
             </TabItem>
         </Tabs>