web addon interface optimization

web/client/src/App.css

@@ -73,10 +73,15 @@
 
 .flow-detail .header-tabs {
   display: flex;
+  flex-direction: column;
   position: sticky;
   top: 0;
   background-color: white;
-  padding: 5px 0;
+  padding: 25px 0 5px 25px;
+}
+
+.flow-detail .header-tabs > div {
+  margin-top: 10px;
 }
 
 .flow-detail .header-tabs span {
@@ -91,7 +96,7 @@
 }
 
 .flow-detail .header-tabs .flow-wait-area button {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 
 .flow-detail .header-block {

web/client/src/components/ViewFlow.tsx

@@ -113,6 +113,33 @@ class ViewFlow extends React.Component<Iprops, IState> {
     )
   }
 
+  copyAsCurl() {
+    const { flow } = this.props
+    if (!flow) return null
+
+    return (
+      <Button size="sm" variant={this.state.copied ? 'success' : 'primary'} disabled={this.state.copied} onClick={() => {
+        const curl = fetchToCurl({
+          url: flow.request.url,
+          method: flow.request.method,
+          headers: Object.keys(flow.request.header).reduce((obj: any, key: string) => {
+            obj[key] = flow.request.header[key][0]
+            return obj
+          }, {}),
+          body: flow.requestBody(),
+        })
+        copy(curl)
+
+        this.setState({ copied: true }, () => {
+          setTimeout(() => {
+            this.setState({ copied: false })
+          }, 1000)
+        })
+
+      }}>{this.state.copied ? 'Copied' : 'Copy as cURL'}</Button>
+    )
+  }
+
   render() {
     if (!this.props.flow) return null
 
@@ -133,12 +160,14 @@ class ViewFlow extends React.Component<Iprops, IState> {
     return (
       <div className="flow-detail">
         <div className="header-tabs">
-          <span onClick={() => { this.props.onClose() }}>x</span>
+          <span
-          <span className={flowTab === 'Detail' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Detail' }) }}>Detail</span>
+            style={{
-          <span className={flowTab === 'Headers' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Headers' }) }}>Headers</span>
+              position: 'absolute',
-          <span className={flowTab === 'Preview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Preview' }) }}>Preview</span>
+              top: '2px',
-          <span className={flowTab === 'Response' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Response' }) }}>Response</span>
+              left: '0px',
-          <span className={flowTab === 'Hexview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Hexview' }) }}>Hexview</span>
+              cursor: 'pointer',
+            }}
+            onClick={() => { this.props.onClose() }}>x</span>
 
           <EditFlow
             flow={flow}
@@ -164,32 +193,21 @@ class ViewFlow extends React.Component<Iprops, IState> {
             }}
           />
 
+          <div>{this.copyAsCurl()}</div>
+
+          <div>
+            <span className={flowTab === 'Detail' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Detail' }) }}>Detail</span>
+            <span className={flowTab === 'Headers' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Headers' }) }}>Headers</span>
+            <span className={flowTab === 'Preview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Preview' }) }}>Preview</span>
+            <span className={flowTab === 'Response' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Response' }) }}>Response</span>
+            <span className={flowTab === 'Hexview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Hexview' }) }}>Hexview</span>
+          </div>
         </div>
 
-        <div style={{ padding: '20px' }}>
+        <div style={{ padding: '20px 25px' }}>
           {
             !(flowTab === 'Headers') ? null :
               <div>
-                <p><Button size="sm" variant={this.state.copied ? 'success' : 'primary'} disabled={this.state.copied} onClick={() => {
-                  const curl = fetchToCurl({
-                    url: flow.request.url,
-                    method: flow.request.method,
-                    headers: Object.keys(flow.request.header).reduce((obj: any, key: string) => {
-                      obj[key] = flow.request.header[key][0]
-                      return obj
-                    }, {}),
-                    body: flow.requestBody(),
-                  })
-                  copy(curl)
-
-                  this.setState({ copied: true }, () => {
-                    setTimeout(() => {
-                      this.setState({ copied: false })
-                    }, 1000)
-                  })
-
-                }}>{this.state.copied ? 'Copied' : 'Copy as cURL'}</Button></p>
-
                 <div className="header-block">
                   <p>General</p>
                   <div className="header-block-content">