From fc719eda27a7a4fab0e5321b04584c0505dd08cf Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Tue, 14 Dec 2021 16:58:17 +0000
Subject: [PATCH] Add menu to response heades

---
 .../integration/KeyValueBuilder.svelte           |  9 +++++++--
 .../rest/[query]/index.svelte                    | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index 700e3cd8cb..96024782eb 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -28,6 +28,7 @@
   export let valueHeading
   export let tooltip
   export let menuItems
+  export let showMenu = false
 
   let fields = Object.entries(object).map(([name, value]) => ({ name, value }))
   let fieldActivity = buildFieldActivity(activity)
@@ -90,8 +91,9 @@
   <div
     class="container"
     class:container-active={toggle}
-    class:container-menu={menuItems}
+    class:container-menu={showMenu}
     class:readOnly
+    class:readOnly-menu={readOnly && showMenu}
   >
     {#each fields as field, idx}
       <Input
@@ -116,7 +118,7 @@
       {#if !readOnly}
         <Icon hoverable name="Close" on:click={() => deleteEntry(idx)} />
       {/if}
-      {#if menuItems?.length > 0 && !readOnly}
+      {#if menuItems?.length > 0 && showMenu}
         <ActionMenu>
           <div slot="control" class="icon">
             <Icon size="S" hoverable name="MoreSmallList" />
@@ -156,4 +158,7 @@
   .readOnly {
     grid-template-columns: 1fr 1fr;
   }
+  .readOnly-menu {
+    grid-template-columns: 1fr 1fr 20px;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
index af1f629abf..735c98d567 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
@@ -220,6 +220,14 @@
       },
     },
   ]
+  const responseHeadersMenuItems = [
+    {
+      text: "Create dynamic variable",
+      onClick: () => {
+        console.log("create variable")
+      },
+    },
+  ]
 
   onMount(async () => {
     query = getSelectedQuery()
@@ -398,6 +406,7 @@
                   headings
                   options={SchemaTypeOptions}
                   menuItems={schemaMenuItems}
+                  showMenu={!schemaReadOnly}
                   readOnly={schemaReadOnly}
                 />
               </Tab>
@@ -407,7 +416,12 @@
                 <TextArea disabled value={response.extra?.raw} height="300" />
               </Tab>
               <Tab title="Headers">
-                <KeyValueBuilder object={response.extra?.headers} readOnly />
+                <KeyValueBuilder
+                  object={response.extra?.headers}
+                  readOnly
+                  menuItems={responseHeadersMenuItems}
+                  showMenu={true}
+                />
               </Tab>
               <Tab title="Preview">
                 <div class="table">