Add menu to response heades

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>

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