Adding some info to read when websocket connections fails (#280)

* Adding some info to read when websocket connections fails

* fixing lint errors

* Textual changes

* adjusting width of more-info

* adding virtual-proxy-prefix to url

* Adding e2e-testing of more-info

* linting

package.json

@@ -28,7 +28,9 @@
     "enigma.js": "2.4.0",
     "hamus.js": "0.3.0",
     "prop-types": "15.7.2",
+    "re-resizable": "5.0.1",
     "react": "16.8.6",
+    "react-collapsible": "2.6.0",
     "react-contexify": "4.1.1",
     "react-cookie-consent": "2.3.2",
     "react-dom": "16.8.6",
@@ -37,10 +39,9 @@
     "react-joyride": "2.0.5",
     "react-outside-click-handler": "1.2.3",
     "react-svg-inline": "2.1.1",
-    "react-use-promise": "0.2.0",
-    "react-virtualized": "9.21.1",
     "react-tabs": "3.0.0",
-    "re-resizable": "5.0.1"
+    "react-use-promise": "0.2.0",
+    "react-virtualized": "9.21.1"
   },
   "devDependencies": {
     "@after-work.js/cli": "6.0.3",

src/components/splash.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVGInline from 'react-svg-inline';
+import Collapsible from 'react-collapsible';
 
 import CatWithBubble from './cat-with-bubble';
 import logo from '../assets/catwalk.svg';
@@ -33,6 +34,7 @@ export default function Splash({
 
   const form = (
     <form
+      className="url-form centered-content"
       onSubmit={(evt) => {
         evt.preventDefault();
         updateEngineURL(evt.target[0].value);
@@ -45,10 +47,55 @@ export default function Splash({
     </form>
   );
 
+  const learnMore = (
+    <Collapsible trigger="Learn more">
+      <h3>General</h3>
+      <p>Make sure that you have the right privileges to list apps or view the app.</p>
+      <h3>Connect to a Qlik Core engine</h3>
+      <p>
+        For connecting to a Qlik Core engine running in a Docker container, with a mounted data volume containing the app and starting
+        engine with
+        {' '}
+        <code>DocumentDirectory=&lt;data-folder&gt;</code>
+, the websocket URL will
+        be
+        {' '}
+        <code>ws://&lt;host&gt;:&lt;port&gt;/app/&lt;data-folder&gt;/&lt;app-name&gt;</code>
+. E.g.
+        {' '}
+        <code>ws://localhost:9076/app/my-data-folder/my-excellent-app</code>
+. For more info, visit
+        {' '}
+        <a href="https://core.qlik.com/services/qix-engine/apis/qix/introduction/#websockets">https://core.qlik.com/services/qix-engine/apis/qix/introduction/#websockets</a>
+.
+      </p>
+      <h3>Qlik Sense Enterprise on Windows</h3>
+      <p>
+        For connecting to Qlik Sense Enterprise on Windows, the websocket URL will
+        be
+        {' '}
+        <code>wss://&lt;sense-host.com&gt;/&lt;virtual-proxy-prefix&gt;/app/&lt;app-GUID&gt;</code>
+. Note that for the Sense Proxy to allow sessions from catwalk,
+        https://catwalk.core.qlik.com needs to be whitelisted in QMC in your Qlik Sense Enterprise on Windows deployment.
+      </p>
+      <p>
+        Make sure that you are logged in to Qlik Sense in another browser tab/window. Then the browser tab running catwalk can use
+        the session cookie and attach to the session.
+      </p>
+      <h3>Qlik Sense Desktop</h3>
+      <p>
+        For connecting to Qlik Sense Desktop, the websocket URL will be
+        {' '}
+        <code>ws://localhost:4848/app/&lt;app-name&gt;</code>
+.
+      </p>
+    </Collapsible>
+  );
+
   if (Array.isArray(docs) && docs.length) {
     content = (
-      <div>
-        <p>WebSocket connected, but no open app. Choose one below:</p>
+      <div className="info">
+        <p>Websocket connected, but no open app. Choose one below:</p>
         <ul className="doc-list">
           {docs.map(doc => (
             <li onClick={() => updateEngineURL(engineURL, doc.qDocId)} key={doc.qDocId}>
@@ -67,32 +114,35 @@ export default function Splash({
     );
   } else if (Array.isArray(docs)) {
     content = (
-      <div>
-        <p>WebSocket connected but no open app, in addition the app list was empty.</p>
+      <div className="center-text info">
+        <p>Websocket connected but the app list was empty.</p>
         <p>Please make sure there are apps accessible on this engine and reload the page, or connect to another one:</p>
         {form}
       </div>
     );
   } else if (error && error.target && error.target.constructor.name === 'WebSocket') {
     content = (
-      <div>
-        <p>WebSocket connection failed. Please pass in a valid WebSocket URL below:</p>
+      <div className="center-text info">
+        <p>Websocket connection failed. Please enter a valid websocket URL:</p>
         {form}
+        {learnMore}
       </div>
     );
   } else if (!engineURL) {
     content = (
-      <div>
-        <p>Please enter a valid WebSocket URL below:</p>
+      <div className="center-text info">
+        <p>Could not find any valid websocket URL. Please enter a websocket URL:</p>
         {form}
+        {learnMore}
       </div>
     );
   } else if (error) {
     contentLogo = { className: 'error-logo', svg: catwalkAway };
     content = (
-      <div>
-        <pre><code>{error.stack}</code></pre>
-        <pre><code>{componentStack}</code></pre>
+      <div className="center-text info">
+        <pre className="centered-content"><code>{error.stack}</code></pre>
+        <pre className="centered-content"><code>{componentStack}</code></pre>
+        {learnMore}
       </div>
     );
   }
@@ -110,7 +160,6 @@ export default function Splash({
         <div className="center-content">
           <div className="splash">
             <SVGInline {...contentLogo} />
-            <h3>Sets the stage for your Qlik data models</h3>
             {content}
           </div>
         </div>

src/components/splash.pcss

@@ -5,16 +5,19 @@
 
 .splash {
   max-width: 80%;
+  min-width: 50%;
 
   .logo-svg {
     animation: fade 1s ease-in;
     height: 200px;
+    width: 100%;
   }
 
   .error-logo-svg {
     filter: blur(5px);
     height: 200px;
     opacity: 0.1;
+    width: 100%;
   }
 
   .doc-list {
@@ -64,4 +67,50 @@
   .error h1 {
     color: red;
   }
+
+  .info {
+    margin: auto;
+    margin-top: var(--padding);
+    width: 70%;
+  }
+
+  .center-text {
+    text-align: center;
+  }
+
+  .centered-content {
+    display: inline-block;
+    text-align: left;
+  }
+
+  .url-form {
+    width: 70%;
+  }
+
+  .Collapsible__contentOuter {
+    text-align: left;
+  }
+
+  .Collapsible__trigger {
+    border: 1px solid white;
+    display: block;
+    font-weight: 400;
+    padding: 10px;
+    position: relative;
+    text-decoration: none;
+
+    &::after {
+      content: '〉';
+      display: block;
+      position: relative;
+      transform: rotateZ(90deg);
+      transition: transform 300ms;
+    }
+
+    &.is-open {
+      &::after {
+        transform: rotateZ(270deg);
+      }
+    }
+  }
 }

test/comp/__snapshots__/splash.spec.jsx.snap

@@ -16,17 +16,17 @@ Array [
           }
         }
       />
-      <h3>
-        Sets the stage for your Qlik data models
-      </h3>
-      <div>
+      <div
+        className="center-text info"
+      >
         <p>
-          WebSocket connected but no open app, in addition the app list was empty.
+          Websocket connected but the app list was empty.
         </p>
         <p>
           Please make sure there are apps accessible on this engine and reload the page, or connect to another one:
         </p>
         <form
+          className="url-form centered-content"
           onSubmit={[Function]}
         >
           <label
@@ -139,12 +139,11 @@ Array [
           }
         }
       />
-      <h3>
-        Sets the stage for your Qlik data models
-      </h3>
-      <div>
+      <div
+        className="info"
+      >
         <p>
-          WebSocket connected, but no open app. Choose one below:
+          Websocket connected, but no open app. Choose one below:
         </p>
         <ul
           className="doc-list"

test/e2e/doc-list.spec.js

@@ -4,8 +4,13 @@ describe('doc-list', () => {
 
     await page.goto(incorrectEngineUrl, { timeout: 60000, waitUntil: 'networkidle0' });
     await page.waitForSelector('[value=Connect]');
-    const img = await page.screenshot({ fullPage: true });
+    let img = await page.screenshot({ fullPage: true });
     await expect(img).to.matchImageOf('no-engine-doc-list', OPTS);
+
+    await page.click('.Collapsible__trigger');
+    await page.waitForSelector('.Collapsible__trigger.is-open');
+    img = await page.screenshot({ fullPage: true });
+    await expect(img).to.matchImageOf('learn-more-info', OPTS);
   });
 
   it('should show the doc list when a valid engine url is provided', async () => {