Merge pull request #8 from nateshmbhat/add_meta_data_UI

Add MetaData UI
nateshmbhat · May 22, 2021 · 4c0871c · 4c0871c
2 parents fe19958 + b5acc40
commit 4c0871c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 21 deletions.
diff --git a/app/renderer/components/serverConfigController/ServerConfigController.svelte b/app/renderer/components/serverConfigController/ServerConfigController.svelte
@@ -14,11 +14,12 @@
       );
     }
   }
+
 </script>
 
 <div class="row">
   <div>
-    <label for="target-server">Target Server :</label>
+    <label for="target-server">Target Server</label>
     <input
       on:input={e =>
         activeTabConfigStore.setTargetGrpcServerUrl(e.currentTarget.value)}
@@ -30,7 +31,7 @@
 
   <div>
     <Checkbox checked={tlsCert != undefined} on:change={onUseTlsCheckboxChanged}
-      >TLS</Checkbox
+      >Use TLS</Checkbox
     >
   </div>
 </div>
diff --git a/app/renderer/pages/tabPage/clientModePage/ClientModePage.svelte b/app/renderer/pages/tabPage/clientModePage/ClientModePage.svelte
@@ -8,12 +8,23 @@
 
   $: requestState = $activeTabConfigStore.clientRequestEditorState;
   $: responseState = $activeTabConfigStore.clientResponseEditorState;
+
+  let metadataContent: HTMLElement;
   onMount(() => {
     activeTabConfigStore.setClientRequestEditorState({
       ...requestState,
       text: $activeTabConfigStore.selectedRpc!.mockRequestPayloadString
     });
   });
+
+  function metaDataButtonClicked() {
+    if (metadataContent.style?.maxHeight != "0px") {
+      metadataContent.style.maxHeight = "0px";
+    } else {
+      metadataContent.style.maxHeight = metadataContent.scrollHeight + "px";
+    }
+  }
+
 </script>
 
 <div class="page">
@@ -48,21 +59,23 @@
       <SendRequestButton />
     </div>
   </div>
-</div>
 
-<div>
-  <h5>Metadata</h5>
-  <GenericEditor
-    text={requestState.metadata}
-    height="300"
-    width="50%"
-    on:textChange={e => {
-      activeTabConfigStore.setClientRequestEditorState({
-        ...requestState,
-        metadata: e.detail
-      });
-    }}
-  />
+  <button class="primary-color white-text" on:click={metaDataButtonClicked}>
+    Metadata
+  </button>
+
+  <div bind:this={metadataContent} class="meta-data-content">
+    <GenericEditor
+      text={requestState.metadata}
+      height="300"
+      on:textChange={e => {
+        activeTabConfigStore.setClientRequestEditorState({
+          ...requestState,
+          metadata: e.detail
+        });
+      }}
+    />
+  </div>
 </div>
 
 <style>
@@ -83,4 +96,22 @@
     display: flex;
     flex-flow: column;
   }
+
+  .meta-data-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #f1f1f1;
+
+    cursor: pointer;
+    color: #fff;
+    padding: 8px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
 </style>
diff --git a/app/renderer/pages/tabPage/monitorModePage/MonitorModePage.svelte b/app/renderer/pages/tabPage/monitorModePage/MonitorModePage.svelte
@@ -6,15 +6,15 @@
   import GenericEditor from "../../../components/editors/GenericEditor.svelte";
 
   const changeRequestMode = async (enableDataEdit: boolean) => {
-    activeTabConfigStore.setRequestEditorState({
+    activeTabConfigStore.setMonitorRequestEditorState({
       ...$activeTabConfigStore.monitorRequestEditorState,
       dataFlowMode: enableDataEdit
         ? EditorDataFlowMode.liveEdit
         : EditorDataFlowMode.passThrough
     });
   };
   const changeResponseMode = async (enableDataEdit: boolean) => {
-    activeTabConfigStore.setResponseEditorState({
+    activeTabConfigStore.setMonitorResponseEditorState({
       ...$activeTabConfigStore.monitorResponseEditorState,
       dataFlowMode: enableDataEdit
         ? EditorDataFlowMode.liveEdit
@@ -40,6 +40,7 @@
 
   $: requestState = $activeTabConfigStore.monitorRequestEditorState;
   $: responseState = $activeTabConfigStore.monitorResponseEditorState;
+
 </script>
 
 <div class="page">
@@ -55,7 +56,7 @@
       <GenericEditor
         text={requestState.text}
         on:textChange={e => {
-          activeTabConfigStore.setRequestEditorState({
+          activeTabConfigStore.setMonitorRequestEditorState({
             ...requestState,
             text: e.detail
           });
@@ -73,7 +74,7 @@
       <GenericEditor
         text={responseState.text}
         on:textChange={e => {
-          activeTabConfigStore.setResponseEditorState({
+          activeTabConfigStore.setMonitorResponseEditorState({
             ...responseState,
             text: e.detail
           });
@@ -89,4 +90,5 @@
     display: flex;
     flex-flow: column;
   }
+
 </style>
diff --git a/app/stores/tabStore.ts b/app/stores/tabStore.ts
@@ -48,7 +48,7 @@ function getDefaultTabConfig(): TabConfigModel {
         id: '0',
         selectedRpc: undefined,
         targetGrpcServerUrl: 'localhost:9090',
-        rpcOperationMode: RpcOperationMode.mockRpc,
+        rpcOperationMode: RpcOperationMode.client,
         monitorRequestEditorState: { text: '', eventEmitter: new EditorEventEmitter(), metadata: '', dataFlowMode: EditorDataFlowMode.passThrough },
         clientRequestEditorState: { text: '{}', metadata: '' },
         monitorResponseEditorState: { text: '', eventEmitter: new EditorEventEmitter(), dataFlowMode: EditorDataFlowMode.passThrough },