Present Kong Admin API connection errors to user (Kong#3205)

zhangle231 · Mar 24, 2021 · 3fb647c · 3fb647c
1 parent ea711da
commit 3fb647c
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 16 deletions.
diff --git a/packages/insomnia-app/app/ui/css/layout/base.less b/packages/insomnia-app/app/ui/css/layout/base.less
@@ -545,6 +545,10 @@ i.fa.fa--fixed-width {
   overflow: hidden;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .wrap {
   white-space: normal;
 }

diff --git a/plugins/insomnia-plugin-kong-portal/.babelrc b/plugins/insomnia-plugin-kong-portal/.babelrc
@@ -1,7 +1,8 @@
 {
   "plugins": [
     ["@babel/plugin-proposal-decorators", {"legacy": true}],
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-optional-chaining"
   ],
   "presets": [
     "@babel/preset-flow",

diff --git a/plugins/insomnia-plugin-kong-portal/.flowconfig b/plugins/insomnia-plugin-kong-portal/.flowconfig
@@ -12,5 +12,6 @@
 
 [options]
 esproposal.decorators=ignore
+esproposal.optional_chaining=enable
 
 [strict]
diff --git a/plugins/insomnia-plugin-kong-portal/package-lock.json b/plugins/insomnia-plugin-kong-portal/package-lock.json
diff --git a/plugins/insomnia-plugin-kong-portal/package.json b/plugins/insomnia-plugin-kong-portal/package.json
@@ -15,6 +15,7 @@
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",

diff --git a/plugins/insomnia-plugin-kong-portal/src/deploy-to-portal.js b/plugins/insomnia-plugin-kong-portal/src/deploy-to-portal.js
@@ -26,14 +26,16 @@ type Props = {
   },
 };
 
+type AxiosError = Object;
+
 type State = {|
   workspaceId: string,
   kongPortalRbacToken: string,
   kongPortalApiUrl: string,
   kongPortalUrl: string,
   kongPortalUserWorkspace: string,
   isLoading: boolean,
-  showConnectionError: boolean,
+  connectionError: AxiosError | Error | null,
   showUploadError: boolean,
   forceSpecOverwrite: boolean,
   kongSpecFileName: string,
@@ -59,7 +61,7 @@ class DeployToPortal extends React.Component<Props, State> {
     kongPortalUserWorkspace: '',
     kongSpecFileName: '',
     isLoading: false,
-    showConnectionError: false,
+    connectionError: null,
     showUploadError: false,
     kongPortalLegacyMode: false,
     kongPortalDeployView: 'edit',
@@ -185,7 +187,7 @@ class DeployToPortal extends React.Component<Props, State> {
         const guiHost = response.data.configuration.portal_gui_host;
         this.setState({
           kongPortalLegacyMode: response.data.configuration.portal_is_legacy,
-          showConnectionError: false,
+          connectionError: null,
           kongPortalDeployView: 'upload',
           kongPortalUrl: urlJoin(`http://${guiHost}`, kongPortalUserWorkspace),
         });
@@ -194,8 +196,9 @@ class DeployToPortal extends React.Component<Props, State> {
       }
     } catch (error) {
       trackEvent('Portal', 'Connection Error');
+      console.log('Connection error', error);
       this._handleLoadingToggle(false);
-      this.setState({ showConnectionError: true });
+      this.setState({ connectionError: error });
     }
   }
 
@@ -237,7 +240,7 @@ class DeployToPortal extends React.Component<Props, State> {
       kongSpecFileName,
       kongPortalUserWorkspace,
       kongPortalDeployView,
-      showConnectionError,
+      connectionError,
       kongPortalRbacToken,
       isLoading,
       showUploadError,
@@ -252,14 +255,36 @@ class DeployToPortal extends React.Component<Props, State> {
 
     // Check view
     if (kongPortalDeployView === 'edit') {
+      let connectionErrorElement = null;
+
+      if (connectionError) {
+        const stack = connectionError.stack;
+        let messageToShow = stack;
+        if (connectionError?.isAxiosError && connectionError.response) {
+          const response: Object = connectionError.response;
+          messageToShow = `${response.status} ${response.statusText}`;
+          const responseMessage = response.data?.message;
+          if (responseMessage) {
+            messageToShow += `: ${responseMessage}`;
+          }
+        }
+
+        connectionErrorElement = (
+          <p className="notice error margin-top-sm text-left">
+            Error. Please check your settings and try again.
+            <details className="margin-top-sm">
+              <summary>More details</summary>
+              <pre className="pad-top-sm selectable">
+                <code className="wide overflow-auto">{messageToShow}</code>
+              </pre>
+            </details>
+          </p>
+        );
+      }
       return (
         // Kong Connection Details
         <form className="pad" onSubmit={this._handleConnectKong}>
-          {showConnectionError && (
-            <p className="notice error margin-top-sm">
-              Error. Please check your settings and try again.
-            </p>
-          )}
+          {connectionErrorElement}
           <div className="form-control form-control--outlined">
             <label>
               Kong API URL