From 67a75baa10f1b54bbbf1f1fd617c6d8fb183dba7 Mon Sep 17 00:00:00 2001
From: sajjad <s.mousavi@kian.digital>
Date: Sat, 25 Jan 2020 16:33:19 +0330
Subject: [PATCH] BBL-163 - implement new component tow show response named
 Response.tsx . - added Response.tsx component to ConsoleViewer.tsx

---
 src/components/Console/ConsoleViewer.tsx    |   6 +-
 src/components/ConsoleResponse/Response.tsx | 114 ++++++++++++++++++++
 2 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ConsoleResponse/Response.tsx

diff --git a/src/components/Console/ConsoleViewer.tsx b/src/components/Console/ConsoleViewer.tsx
index 200e4073..512b8bab 100644
--- a/src/components/Console/ConsoleViewer.tsx
+++ b/src/components/Console/ConsoleViewer.tsx
@@ -4,6 +4,7 @@ import { SendButton } from '../../common-elements/buttons';
 import { ConsoleActionsRow } from '../../common-elements/panels';
 import { FieldModel, OperationModel } from '../../services/models';
 import { OpenAPISchema } from '../../types';
+import { ConsoleResponse } from '../ConsoleResponse/Response';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
 import { ConsoleEditor } from './ConsoleEditor';
 
@@ -14,6 +15,7 @@ export interface ConsoleViewerProps {
   additionalHeaders?: object;
   queryParamPrefix?: string;
   queryParamSuffix?: string;
+  urlIndex: number;
 }
 
 export interface ConsoleViewerState {
@@ -47,7 +49,7 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
     const mediaType = content && content.mediaTypes[content.activeMimeIdx];
     const endpoint = {
       method: operation.httpVerb,
-      path: operation.servers[0].url + operation.path,
+      path: operation.servers[this.props.urlIndex].url + operation.path,
     };
     if (value) {
       value = JSON.parse(value);
@@ -172,7 +174,7 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
           <SendButton onClick={this.onClickSend} >Send Request</SendButton>
         </ConsoleActionsRow>
         {result &&
-          <SourceCodeWithCopy lang="json" source={JSON.stringify(result, null, 2)} />
+          <ConsoleResponse response={result} />
         }
       </div>
     );
diff --git a/src/components/ConsoleResponse/Response.tsx b/src/components/ConsoleResponse/Response.tsx
new file mode 100644
index 00000000..ddc5031f
--- /dev/null
+++ b/src/components/ConsoleResponse/Response.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import {  SourceCodeWithCopy } from '..';
+import { RightPanelHeader } from '../../common-elements';
+import styled from '../../styled-components';
+
+import { JsonViewer } from '../JsonViewer/JsonViewer';
+
+interface ConsoleResponseProps {
+  response: any;
+}
+
+interface ConsoleResponseState {
+  collapse: boolean;
+}
+
+export class ConsoleResponse extends React.PureComponent<ConsoleResponseProps, ConsoleResponseState> {
+
+  constructor(props) {
+     super(props);
+     this.state = { collapse: false};
+  }
+
+  changeCollapse = () => {
+    this.setState({collapse: !this.state.collapse});
+  };
+
+  render() {
+    return(
+      <>
+        <RightPanelHeader> status: </RightPanelHeader>
+        <StatusWrapper className={'status-' + this.props.response.type}> {this.props.response.status} {this.props.response.statusText}</StatusWrapper>
+        <RightPanelHeader> Response Payload </RightPanelHeader>
+        <JsonWrapper>
+          <JsonViewer data={this.props.response.content!} />
+        </JsonWrapper>
+        <RightPanelHeader> Response Headers</RightPanelHeader>
+        <HeaderWrapper>
+          <SourceCodeWrapper className={'collapse-' + this.state.collapse}>
+            <SourceCodeWithCopy lang="json" source={JSON.stringify(this.props.response.headers, null, 2)}/>
+          </SourceCodeWrapper>
+          <ShowMore onClick={this.changeCollapse}>
+            <u>+ show undocumented response headers</u>
+          </ShowMore>
+        </HeaderWrapper>
+      </>
+    );
+  }
+}
+
+const HeaderWrapper = styled.div`
+  color: white;
+  background-color: ${props => props.theme.codeSample.backgroundColor};
+  padding: 10px 0 18px;
+  margin: 10px 0;
+  height: 100%;
+   div div div {
+        display: none !important;
+   }
+   div pre span:first-child {
+        display: none !important;
+   }
+   div pre span:last-child {
+        display: none !important;
+   }
+   div pre {
+        height: 100%;
+        overflow: hidden;
+   }
+   div {
+        height: 100%;
+   }
+`;
+
+const SourceCodeWrapper = styled.div`
+  &.collapse-false {
+      height: 89px;
+    }
+    &.collapse-true {
+      height: auto;
+    }
+`;
+
+const JsonWrapper = styled.div`
+  color: white;
+  background-color: ${props => props.theme.codeSample.backgroundColor};
+  padding: 10px;
+  margin: 10px 0;
+`;
+
+const StatusWrapper = styled.div`
+  &.status-success {
+  color: #00ff1c;
+  }
+  &.status-redirect {
+    color: ${props => props.theme.colors.responses.redirect.color};
+  }
+  &.status-info {
+    color: ${props => props.theme.colors.responses.info.color};
+  }
+  &.status-error {
+    color: ${props => props.theme.colors.responses.error.color};
+  }
+  color: white;
+  background-color: ${props => props.theme.codeSample.backgroundColor};
+  padding: 10px;
+  margin: 10px 0;
+`;
+
+const ShowMore = styled.div`
+  text-align: center;
+  u {
+    cursor: pointer;
+  }
+`;