feat(gv-documenation): add possibility to override empty msg

gravitee-io · Jun 22, 2021 · f8fe870 · f8fe870
1 parent e63174e
commit f8fe870
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 17 deletions.
diff --git a/src/organisms/gv-documentation.js b/src/organisms/gv-documentation.js
@@ -17,6 +17,7 @@ import { css, html, LitElement } from 'lit-element';
 import { dispatchCustomEvent } from '../lib/events';
 import { toDom } from '../lib/text-format';
 import { empty } from '../styles/empty';
+import { classMap } from 'lit-html/directives/class-map';
 
 export class GvDocumentation extends LitElement {
   static get properties() {
@@ -27,6 +28,7 @@ export class GvDocumentation extends LitElement {
       _dom: { type: Object, attribute: false },
       disabled: { type: Boolean },
       withoutHeader: { type: Boolean, attribute: 'without-header' },
+      _cssLoaded: { type: Boolean, attribute: false },
     };
   }
 
@@ -100,6 +102,7 @@ export class GvDocumentation extends LitElement {
 
         .content {
           background: white;
+          display: none;
           flex-grow: 1;
 
           overflow: auto;
@@ -113,6 +116,14 @@ export class GvDocumentation extends LitElement {
         .hljs-string {
           white-space: pre-wrap;
         }
+
+        .empty {
+          display: none;
+        }
+
+        .show {
+          display: block;
+        }
       `,
     ];
   }
@@ -133,17 +144,25 @@ export class GvDocumentation extends LitElement {
     return html`<gv-icon shape="code:question"></gv-icon>`;
   }
 
-  async updated(props) {
+  shouldUpdate(props) {
     if (props.has('text')) {
-      this._dom = await toDom(this.text, this.type, true);
-      if (this._dom) {
-        const title = this._dom.element.querySelector('h1');
-        if (title && !this.withoutHeader) {
-          title.remove();
+      toDom(this.text, this.type, true).then((_dom) => {
+        this._dom = _dom;
+        if (this._dom) {
+          const title = this._dom.element.querySelector('h1');
+          if (title && !this.withoutHeader) {
+            title.remove();
+          }
+          this._dom.element.querySelectorAll('a').forEach((link) => (link.target = '_blank'));
         }
-        this._dom.element.querySelectorAll('a').forEach((link) => (link.target = '_blank'));
-      }
+      });
+      return false;
     }
+    return super.shouldUpdate(props);
+  }
+
+  _onLoad() {
+    this._cssLoaded = true;
   }
 
   render() {
@@ -152,18 +171,13 @@ export class GvDocumentation extends LitElement {
     if (this._dom) {
       title = this._dom.title;
       content = this._dom.element;
-    } else {
-      content = html`<div class="empty">
-        <div>Sorry, the documentation was not found.</div>
-        <div>See the documentation about plugins.</div>
-      </div>`;
     }
 
-    return html`<link rel="stylesheet" href="css/documentation.css" />
+    return html`<link @load="${this._onLoad}" rel="stylesheet" href="css/documentation.css" />
       <div class="container">
         ${this.withoutHeader
           ? html``
-          : html` <div class="header">
+          : html`<div class="header">
               <div class="left">
                 ${this.disabled
                   ? html``
@@ -178,7 +192,13 @@ export class GvDocumentation extends LitElement {
               <div class="title">${title}</div>
               <div class="right">${this._renderIcon()}</div>
             </div>`}
-        <div class="content">${content}</div>
+        <div class="${classMap({ content: true, show: this._cssLoaded })}">
+          ${content}
+          <slot name="empty" class="${classMap({ empty: true, show: content == null })}">
+            <div>Sorry,the documentation was not found.</div>
+            <div>See the documentation about plugins.</div>
+          </slot>
+        </div>
       </div> `;
   }
 }

diff --git a/stories/organisms/gv-documentation.stories.js b/stories/organisms/gv-documentation.stories.js
@@ -16,7 +16,7 @@
 import notes from '../../.docs/gv-documentation.md';
 import '../../src/organisms/gv-documentation';
 import content from '../resources/adoc/policy-mock-readme.adoc';
-import { makeStory } from '../lib/make-story';
+import { makeStory, storyWait } from '../lib/make-story';
 
 export default {
   title: 'Organisms/gv-documentation',
@@ -37,10 +37,33 @@ export const Empty = makeStory(conf, {
   items: [{}],
 });
 
+export const OverrideEmptyMsg = makeStory(conf, {
+  items: [
+    {
+      innerHTML: `
+      <div slot="empty">
+        <gv-icon shape="text:align-center" style="--gv-icon--s: 96px;"></gv-icon>
+        <div>Content is empty</div>
+      </div>
+    `,
+    },
+  ],
+});
+
 export const PolicyReadme = makeStory(conf, {
   items: [{ text: content }],
 });
 
 export const WithoutHeader = makeStory(conf, {
   items: [{ text: content, 'without-header': true }],
 });
+
+export const Async = makeStory(conf, {
+  items: [{ text: '', skeleton: true }],
+  simulations: [
+    storyWait(1000, ([component]) => {
+      component.text = content;
+      component.removeAttribute('skeleton');
+    }),
+  ],
+});