env-var-full: init component

components/env-var/env-var-full.js

@@ -0,0 +1,83 @@
+import './env-var-form.js';
+import { css, html, LitElement } from 'lit-element';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { i18n } from '@i18n';
+import { dispatchCustomEvent } from '../lib/events';
+
+/**
+ * A high level view to edit env vars of an app and display all its add-on's env vars
+ *
+ * @event env-var-form:submit - when the update button is clicked with an array of `{ name: 'the name', value: 'the value' }` as `detail`
+ * @event env-var-form:restart-app - when the restart app button is clicked
+ * @event env-var-full:dismissed-error - when an error is displayed and the ok button is clicked
+ *
+ * @attr {Array} variables - the array of variables
+ * @attr {Boolean} restartApp - display the restart app button
+ * @attr {String} error - display an error message (saving|loading)
+ * @attr {Array} addons - array of addons
+ */
+export class EnvVarFull extends LitElement {
+
+  static get properties () {
+    return {
+      variables: { type: Array, attribute: false },
+      restartApp: { type: Boolean, attribute: 'restart-app' },
+      error: { type: String, reflect: true },
+      addons: { type: Array, attribute: false },
+    };
+  }
+
+  constructor () {
+    super();
+    // this.variables is let to undefined by default (this triggers skeleton screen)
+    this.restartApp = false;
+    this.error = null;
+    this.addons = [];
+  }
+
+  _onDismissedError (error, id) {
+    const detail = { error, id };
+    dispatchCustomEvent(this, 'dismissed-error', detail);
+  }
+
+  render () {
+
+    const $addons = repeat(
+      this.addons,
+      ({ id }) => id,
+      ({ id, name, variables }) => {
+        return html`<env-var-form
+          heading="Add-on: ${name}"
+          .variables=${variables}
+          readonly
+          @env-var-form:dismissed-error=${() => this._onDismissedError('loading', id)}
+        ></env-var-form>`;
+      },
+    );
+
+    return html`
+      <env-var-form
+        heading=${i18n('env-var-full.heading')}
+        .variables="${this.variables}"
+        .error=${this.error}
+        ?restart-app=${this.restartApp}
+        @env-var-form:dismissed-error=${(e) => this._onDismissedError(e.detail)}
+      >
+        ${i18n('env-var-full.message')}
+        <a href="http://doc.clever-cloud.com/admin-console/environment-variables/" target="_blank">${i18n('env-var-full.link')}</a>
+      </env-var-form>
+      ${$addons}
+    `;
+  }
+
+  static get styles () {
+    // language=CSS
+    return css`
+      env-var-form {
+        margin-bottom: 1rem;
+      }
+    `;
+  }
+}
+
+window.customElements.define('env-var-full', EnvVarFull);

components/index.js

@@ -7,4 +7,5 @@ export { EnvVarCreate } from './env-var/env-var-create.js';
 export { EnvVarEditorExpert } from './env-var/env-var-editor-expert.js';
 export { EnvVarEditorSimple } from './env-var/env-var-editor-simple.js';
 export { EnvVarForm } from './env-var/env-var-form.js';
+export { EnvVarFull } from './env-var/env-var-full.js';
 export { EnvVarInput } from './env-var/env-var-input.js';

components/translations/translations.en.js

@@ -30,4 +30,8 @@ module.exports.en = {
   'env-var-input.delete-button': `Remove`,
   'env-var-input.keep-button': `Keep`,
   'env-var-input.value-placeholder': `variable value`,
+  // env-var-full
+  'env-var-full.heading': `Environment variables`,
+  'env-var-full.message': `Environment variables allow you to inject data in your application’s environment.`,
+  'env-var-full.link': `Learn more`,
 };

components/translations/translations.fr.js

@@ -30,4 +30,8 @@ module.exports.fr = {
   'env-var-input.delete-button': `Enlever`,
   'env-var-input.keep-button': `Garder`,
   'env-var-input.value-placeholder': `valeur de la variable`,
+  // env-var-full
+  'env-var-full.heading': `Variables d'environnement`,
+  'env-var-full.message': `Les variables d'environnement sont des variables dynamiques que vous pouvez injecter dans votre application.`,
+  'env-var-full.link': `En savoir plus`,
 };

stories/env-var/env-var-full.stories.js

@@ -0,0 +1,137 @@
+import '../../components/env-var/env-var-full.js';
+import { storiesOf } from '@storybook/html';
+import { withCustomEventActions } from '../lib/event-action';
+
+const withActions = withCustomEventActions('env-var-form:submit', 'env-var-full:dismissed-error', 'env-var-form:restart-app');
+
+storiesOf('env-var/<env-var-full>', module)
+  .add('no data yet (skeleton)', withActions(() => {
+    const envVar = document.createElement('env-var-full');
+    envVar.variables = new Promise(() => null);
+    return envVar;
+  }), { notes: '' })
+  .add('app data loaded / addon data loading...', withActions(() => {
+    const envVar = document.createElement('env-var-full');
+    envVar.variables = Promise.resolve([
+      { name: 'EMPTY', value: '' },
+      { name: 'ONE', value: 'value ONE' },
+      { name: 'MULTI', value: 'line one\nline two\nline three' },
+      { name: 'TWO', value: 'value TWO' },
+    ]);
+    envVar.addons = [
+      {
+        id: 'foo',
+        name: 'Fooooooo',
+        variables: new Promise(() => null),
+      },
+      {
+        id: 'bar',
+        name: 'Baaaaaar',
+        variables: new Promise(() => null),
+      },
+    ];
+    return envVar;
+  }), { notes: '' })
+  .add('all data loaded', withActions(() => {
+    const envVar = document.createElement('env-var-full');
+    envVar.variables = Promise.resolve([
+      { name: 'EMPTY', value: '' },
+      { name: 'ONE', value: 'value ONE' },
+      { name: 'MULTI', value: 'line one\nline two\nline three' },
+      { name: 'TWO', value: 'value TWO' },
+    ]);
+    envVar.addons = [
+      {
+        id: 'foo',
+        name: 'Fooooooo',
+        variables: Promise.resolve([
+          { name: 'FOO_VARIABLE_ONE', value: 'Value one' },
+          { name: 'FOO_VARIABLE_TWO_TWO', value: 'Value two two' },
+          { name: 'FOO_VARIABLE_THREE_THREE_THREE', value: 'Value three three three' },
+        ]),
+      },
+      {
+        id: 'bar',
+        name: 'Baaaaaar',
+        variables: Promise.resolve([
+          { name: 'BAR_VARIABLE_ONE', value: 'Value one' },
+          { name: 'BAR_VARIABLE_TWO_TWO', value: 'Value two two' },
+          { name: 'BAR_VARIABLE_THREE_THREE_THREE', value: 'Value three three three' },
+        ]),
+      },
+    ];
+    return envVar;
+  }), { notes: '' })
+  .add('all data loaded (restart button)', withActions(() => {
+    const envVar = document.createElement('env-var-full');
+    envVar.variables = Promise.resolve([
+      { name: 'EMPTY', value: '' },
+      { name: 'ONE', value: 'value ONE' },
+      { name: 'MULTI', value: 'line one\nline two\nline three' },
+      { name: 'TWO', value: 'value TWO' },
+    ]);
+    envVar.restartApp = true;
+    envVar.addons = [
+      {
+        id: 'foo',
+        name: 'Fooooooo',
+        variables: Promise.resolve([
+          { name: 'FOO_VARIABLE_ONE', value: 'Value one' },
+          { name: 'FOO_VARIABLE_TWO_TWO', value: 'Value two two' },
+          { name: 'FOO_VARIABLE_THREE_THREE_THREE', value: 'Value three three three' },
+        ]),
+      },
+      {
+        id: 'bar',
+        name: 'Baaaaaar',
+        variables: Promise.resolve([
+          { name: 'BAR_VARIABLE_ONE', value: 'Value one' },
+          { name: 'BAR_VARIABLE_TWO_TWO', value: 'Value two two' },
+          { name: 'BAR_VARIABLE_THREE_THREE_THREE', value: 'Value three three three' },
+        ]),
+      },
+    ];
+    return envVar;
+  }), { notes: '' })
+  .add('loading errors', withActions(() => {
+    const envVar = document.createElement('env-var-full');
+    envVar.variables = Promise.reject(new Error());
+    envVar.addons = [
+      {
+        id: 'foo',
+        name: 'Fooooooo',
+        variables: Promise.reject(new Error()),
+      },
+      {
+        id: 'bar',
+        name: 'Baaaaaar',
+        variables: Promise.reject(new Error()),
+      },
+    ];
+    return envVar;
+  }), { notes: '' })
+  .add('app saving error + addon loading errors', withActions(() => {
+    const envVar = document.createElement('env-var-full');
+    envVar.variables = Promise.resolve([
+      { name: 'EMPTY', value: '' },
+      { name: 'ONE', value: 'value ONE' },
+      { name: 'MULTI', value: 'line one\nline two\nline three' },
+      { name: 'TWO', value: 'value TWO' },
+    ]);
+    setTimeout(() => {
+      envVar.variables = Promise.reject(new Error());
+    }, 0);
+    envVar.addons = [
+      {
+        id: 'foo',
+        name: 'Fooooooo',
+        variables: Promise.reject(new Error()),
+      },
+      {
+        id: 'bar',
+        name: 'Baaaaaar',
+        variables: Promise.reject(new Error()),
+      },
+    ];
+    return envVar;
+  }), { notes: '' });