feat: dispatch event when selecting an ee resource

see https://gravitee.atlassian.net/browse/APIM-1685
gravitee-io · Jul 5, 2023 · 6aa7600 · 6aa7600
1 parent a9ba94d
commit 6aa7600
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 7 deletions.
diff --git a/src/molecules/gv-option/gv-option.js b/src/molecules/gv-option/gv-option.js
@@ -73,6 +73,7 @@ export class GvOption extends LitElement {
         }
 
         gv-button {
+          position: relative;
           margin: 0;
         }
 
@@ -125,6 +126,21 @@ export class GvOption extends LitElement {
         gv-button.description {
           margin: 0.5rem;
         }
+
+        .enterprise-lock__container {
+          position: absolute;
+          top: 1px;
+          right: 1px;
+          padding: 6px 6px 16px 16px;
+          border-radius: 0 0 0 38px;
+          background: #e7e8ef;
+          z-index: 2;
+        }
+
+        .enterprise-lock__container .lock {
+          width: 16px;
+          color: #6c59bd;
+        }
       `,
     ];
   }
@@ -136,6 +152,10 @@ export class GvOption extends LitElement {
   }
 
   _onClick(option) {
+    if (option.locked) {
+      dispatchCustomEvent(this, 'display-resource-cta', option);
+      return;
+    }
     this.setValue(option);
     dispatchCustomEvent(this, 'select', option);
     this.dispatchEvent(new Event('input'), { bubbles: true, cancelable: true });
@@ -185,7 +205,7 @@ export class GvOption extends LitElement {
   _renderOption(option, index) {
     const isActive = this.isActive(option);
     const outlined = this.outlined || (!isActive && this._hasDescription);
-    return html`<gv-button
+    return html` <gv-button
       .icon=${ifDefined(!this._hasDescription ? option.icon : null)}
       .iconRight=${ifDefined(!option.icon && option.iconRight ? option.iconRight : null)}
       .title="${ifDefined(option.title)}"
@@ -201,6 +221,7 @@ export class GvOption extends LitElement {
         description: option.description != null,
       })}"
     >
+      ${this.getLockIcon(option)}
       ${!this._hasDescription
         ? option.title != null
           ? option.label || option.title
@@ -217,6 +238,16 @@ export class GvOption extends LitElement {
     </gv-button>`;
   }
 
+  getLockIcon(option) {
+    return option.locked
+      ? html`
+          <div class="enterprise-lock__container">
+            <gv-icon shape="policy:lock" class="lock"></gv-icon>
+          </div>
+        `
+      : html``;
+  }
+
   render() {
     if (this._options) {
       const classes = {

diff --git a/src/organisms/gv-resources/gv-resources.js b/src/organisms/gv-resources/gv-resources.js
@@ -142,6 +142,10 @@ export class GvResources extends KeyboardElement(LitElement) {
     };
   }
 
+  _onDisplayResourceCTA(option) {
+    dispatchCustomEvent(this, 'display-resource-cta', option);
+  }
+
   _onCreateResource({ detail }) {
     this._currentResourceLoading = true;
     const defaultResourceType = this.types.find((type) => type.id === detail.id);
@@ -313,12 +317,25 @@ export class GvResources extends KeyboardElement(LitElement) {
       return this._renderDoc();
     } else if (this.readonly !== true) {
       const resourceOpts = this.types.map((resource) => {
-        return { id: resource.id, title: resource.name, description: resource.description, image: resource.icon };
+        return {
+          id: resource.id,
+          title: resource.name,
+          description: resource.description,
+          image: resource.icon,
+          locked: resource.deployed === false,
+        };
       });
 
-      return html`<div class="resources-bottom-container">
-                        <gv-option class="resource__option" .options="${resourceOpts}" @gv-option:select="${this._onCreateResource}">
-                  </div>`;
+      return html`
+        <div class="resources-bottom-container">
+          <gv-option
+            class="resource__option"
+            .options="${resourceOpts}"
+            @gv-option:select="${this._onCreateResource}"
+            @gv-option:display-resource-cta="${this._onDisplayResourceCTA}"
+          ></gv-option>
+        </div>
+      `;
     } else if (this.readonly && this.resources.length > 0) {
       return html`<div class="resources-bottom-container empty">You can see the resource configuration by clicking on it</div>`;
     }