From 3baedba20e8b0ae78d2f3777ad25a1b2bad55c74 Mon Sep 17 00:00:00 2001
From: Valyi Peter <pvalyi@emarsys.com>
Date: Fri, 8 Apr 2022 11:44:00 +0200
Subject: [PATCH] WCH-OPS: added status text tooltip

---
 package-lock.json                             |  5 +++++
 package.json                                  |  1 +
 src/renderer/components/status-panel.vue      |  6 ++++++
 .../renderer/components/status-panel.spec.js  | 19 +++++++++++++++----
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f3e8c63..6e45610 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8903,6 +8903,11 @@
         "sshpk": "^1.7.0"
       }
     },
+    "http-status-codes": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.2.0.tgz",
+      "integrity": "sha512-feERVo9iWxvnejp3SEfm/+oNG517npqL2/PIA8ORjyOZjGC7TwCRQsZylciLS64i6pJ0wRYz3rkXLRwbtFa8Ng=="
+    },
     "http2-wrapper": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
diff --git a/package.json b/package.json
index 3b10103..779416f 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "codemirror": "5.58.2",
     "crypto-js": "4.0.0",
     "escher-auth": "3.0.0",
+    "http-status-codes": "2.2.0",
     "pretty-bytes": "5.4.1",
     "pretty-ms": "7.0.1",
     "ramda": "0.27.1",
diff --git a/src/renderer/components/status-panel.vue b/src/renderer/components/status-panel.vue
index 74dea9c..4142f7c 100644
--- a/src/renderer/components/status-panel.vue
+++ b/src/renderer/components/status-panel.vue
@@ -10,6 +10,10 @@
           :class="{ 'text-color-success': !statusCodeIndicatesFailure, 'text-color-danger': statusCodeIndicatesFailure }"
           class="e-legend__value">
           {{ statusCode }}
+          <e-tooltip
+            id="status-text"
+            :content="statusText"
+            type="helper"/>
         </div>
       </div>
     </div>
@@ -44,6 +48,7 @@
 import { mapState } from 'vuex';
 import prettyMs from 'pretty-ms';
 import prettyBytes from 'pretty-bytes';
+import * as httpStatusCodes from 'http-status-codes';
 
 export default {
   name: 'StatusPanel',
@@ -51,6 +56,7 @@ export default {
     ...mapState({
       statusCode: state => state.response.status,
       statusCodeIndicatesFailure: state => state.response.status >= 400,
+      statusText: state => httpStatusCodes.getReasonPhrase(state.response.status),
       requestTime: state => prettyMs(state.response.elapsedTime || 0),
       responseSize: state => prettyBytes(state.response.body.length || 0)
     })
diff --git a/test/unit/specs/renderer/components/status-panel.spec.js b/test/unit/specs/renderer/components/status-panel.spec.js
index 424ee43..6a349e6 100644
--- a/test/unit/specs/renderer/components/status-panel.spec.js
+++ b/test/unit/specs/renderer/components/status-panel.spec.js
@@ -21,6 +21,17 @@ describe('StatusPanel.vue', () => {
     expect(statusCodeElement.text()).to.eql('200');
   });
 
+  it('should render the status text tooltip', () => {
+    const response = { status: 200, body: '' };
+    store.commit(Mutation.UPDATE_RESPONSE, response);
+
+    const component = shallowMount(StatusPanel, { store });
+    const statusCodeElement = component.find('#status-text');
+
+    expect(statusCodeElement.exists()).to.eql(true);
+    expect(statusCodeElement.attributes('content')).to.eql('OK');
+  });
+
   context('when status code indicates failure', () => {
     it('should set the style to text-color-danger', () => {
       const response = { status: 400, body: '' };
@@ -46,7 +57,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should render the request round trip time', () => {
-    const response = { elapsedTime: 100, body: '' };
+    const response = { status: 200, elapsedTime: 100, body: '' };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });
@@ -57,7 +68,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should render the time in human readable format', () => {
-    const response = { elapsedTime: 1300, body: '' };
+    const response = { status: 200, elapsedTime: 1300, body: '' };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });
@@ -67,7 +78,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should render the response size', () => {
-    const response = { body: 'abcd' };
+    const response = { status: 200, body: 'abcd' };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });
@@ -78,7 +89,7 @@ describe('StatusPanel.vue', () => {
   });
 
   it('should display size in a human readable format', () => {
-    const response = { body: '#'.repeat(1337) };
+    const response = { status: 200, body: '#'.repeat(1337) };
     store.commit(Mutation.UPDATE_RESPONSE, response);
 
     const component = shallowMount(StatusPanel, { store });