@gravitee/ui-components 3.24.1-6614-conditional-policy-fb499f8 → 3.24.2-migrate-codemirror-4150e72

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [3.24.2](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.1...v3.24.2) (2021-12-14)
+
+
+### Bug Fixes
+
+* revert unneeded changed introduced in `upgrade to Lit 2` ([f0aef5f](https://github.com/gravitee-io/gravitee-ui-components/commit/f0aef5f7ffc97b139ebc8a5f5947f3ed5acc5cea))
+* wait for Lit component to be ready before updating their properties ([3baf7df](https://github.com/gravitee-io/gravitee-ui-components/commit/3baf7dfe1fec74ab6778eceebfde6dd8a5061b65))
+
 ## [3.24.1](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.0...v3.24.1) (2021-12-13)
 
 

package/assets/i18n/en.json

@@ -91,10 +91,6 @@
       "manual": "Manual validation"
     }
   },
-  "gv-policy-studio": {
-    "common-settings": "Common settings",
-    "policy-settings": "Policy settings"
-  },
   "gv-promote": {
     "empty": "No information to display",
     "error": "An error has occurred",

package/assets/i18n/fr.json

@@ -91,10 +91,6 @@
       "manual": "Validation manuelle"
     }
   },
-  "gv-policy-studio": {
-    "common-settings": "Common settings",
-    "policy-settings": "Policy settings"
-  },
   "gv-promote": {
     "empty": "Aucun élément à afficher ici",
     "error": "Une erreur est survenue pendant le chargement",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.24.1-6614-conditional-policy-fb499f8",
+  "version": "3.24.2-migrate-codemirror-4150e72",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",
@@ -49,6 +49,20 @@
     "package.json": "npm run lint:package"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^0.19.5",
+    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/closebrackets": "^0.19.0",
+    "@codemirror/fold": "^0.19.1",
+    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/history": "^0.19.0",
+    "@codemirror/lang-java": "^0.19.1",
+    "@codemirror/lang-javascript": "^0.19.2",
+    "@codemirror/language": "^0.19.3",
+    "@codemirror/language-data": "^0.19.1",
+    "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/state": "^0.19.5",
+    "@codemirror/view": "^0.19.16",
     "@formatjs/intl-locale": "^2.4.40",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
     "clipboard-copy": "^4.0.0",
@@ -67,6 +81,8 @@
     "@babel/core": "7.16.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.16.4",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/lang-html": "^0.19.3",
     "@commitlint/cli": "15.0.0",
     "@commitlint/config-conventional": "15.0.0",
     "@highcharts/map-collection": "1.1.3",

package/src/atoms/gv-select-native.js

@@ -17,7 +17,7 @@ import { classMap } from 'lit/directives/class-map';
 import { ifDefined } from 'lit/directives/if-defined';
 import { repeat } from 'lit/directives/repeat';
 
-import { LitElement, html, css } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { skeleton } from '../styles/skeleton';
 import { link } from '../styles/link';
 import { input } from '../styles/input';
@@ -59,7 +59,6 @@ export class GvSelectNative extends InputElement(LitElement) {
       medium: { type: Boolean },
       small: { type: Boolean },
       value: { type: String | Array },
-      _value: { type: String | Array, attribute: false },
       label: { type: String },
       title: { type: String },
       name: { type: String },
@@ -182,7 +181,7 @@ export class GvSelectNative extends InputElement(LitElement) {
   }
 
   getInputElement() {
-    return super.getInputElement();
+    return this.shadowRoot.querySelector('select');
   }
 
   async firstUpdated(changedProperties) {
@@ -201,26 +200,12 @@ export class GvSelectNative extends InputElement(LitElement) {
     }
   }
 
-  set value(value) {
-    if (this.multiple) {
-      if (value == null) {
-        this._value = null;
-        this.updateState(this._value);
-      }
-      if (Array.isArray(value)) {
-        this._value = value;
-        this.updateState(this._value);
-      }
-    } else {
-      this._value = value;
-      this.updateState(this._value);
+  willUpdate(changedProperties) {
+    if (changedProperties.has('value')) {
+      this.updateState(changedProperties.get('value'));
     }
   }
 
-  get value() {
-    return this._value;
-  }
-
   updateState(value) {
     super.updateState(value);
     if (value && this._options && this.valid) {

package/src/atoms/gv-select.js

@@ -66,7 +66,6 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
       medium: { type: Boolean },
       small: { type: Boolean },
       value: { type: String | Array },
-      _value: { type: String | Array, attribute: false },
       label: { type: String },
       title: { type: String },
       name: { type: String },
@@ -238,26 +237,12 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
     super.disconnectedCallback();
   }
 
-  set value(value) {
-    if (this.multiple) {
-      if (value == null) {
-        this._value = null;
-        this.updateState(this._value);
-      }
-      if (Array.isArray(value)) {
-        this._value = value;
-        this.updateState(this._value);
-      }
-    } else {
-      this._value = value;
-      this.updateState(this._value);
+  willUpdate(changedProperties) {
+    if (changedProperties.has('value')) {
+      this.updateState(changedProperties.get('value'));
     }
   }
 
-  get value() {
-    return this._value;
-  }
-
   updateState(value) {
     super.updateState(value);
     if (value && this._options && this.valid) {

package/src/index.js

@@ -31,6 +31,7 @@ export { GvCardList } from './molecules/gv-card-list';
 export { GvCard } from './molecules/gv-card';
 export { GvCategoryList } from './molecules/gv-category-list';
 export { GvCategory } from './molecules/gv-category';
+export { GvCodeEditor } from './molecules/gv-code-editor';
 export { GvCodeHint } from './molecules/gv-code-hint';
 export { GvCode } from './molecules/gv-code';
 export { GvConfirm } from './molecules/gv-confirm';
@@ -51,7 +52,6 @@ export { GvRatingList } from './molecules/gv-rating-list';
 export { GvRating } from './molecules/gv-rating';
 export { GvRowExpandable } from './molecules/gv-row-expandable';
 export { GvRow } from './molecules/gv-row';
-export { GvScrollLayout } from './molecules/gv-scroll-layout';
 export { GvStats } from './molecules/gv-stats';
 export { GvStepper } from './molecules/gv-stepper';
 export { GvTable } from './molecules/gv-table';

package/src/molecules/gv-code-editor.js

@@ -0,0 +1,407 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { LitElement, html, css } from 'lit-element';
+
+import { shapeClipboard } from '../styles/shapes';
+import { dispatchCustomEvent } from '../lib/events';
+import { uuid } from '../lib/utils';
+import { classMap } from 'lit-html/directives/class-map';
+
+import { EditorView, basicSetup } from '@codemirror/basic-setup';
+import { EditorState, Compartment, Prec, EditorSelection } from '@codemirror/state';
+import { autocompletion, startCompletion, pickedCompletion } from '@codemirror/autocomplete';
+import { json } from '@codemirror/lang-json';
+import { languages } from '@codemirror/language-data';
+import { placeholder, keymap } from '@codemirror/view';
+import { get } from 'object-path';
+
+const languageCompartment = new Compartment();
+const readonlyCompartment = new Compartment();
+const placeholderCompartment = new Compartment();
+
+/**
+ * Code editor component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-code:input - input events with the `value` on `detail`
+ * @fires gv-code:ready - event dispatch when component is ready
+ * @fires gv-code:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+ *
+ * @attr {String} label - code language
+ * @attr {String} value - code content to be highlighted
+ * @attr {options} Object - options based on codemirror https://codemirror.net/doc/manual.html#config
+ * @attr {Object} grammar - The grammar for Expression Language support
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {Number} rows - number of rows of the text element
+ * @attr {Boolean} large - for a large input (only if the field has one row)
+ * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+ * @attr {Boolean} small - for a small input (only if the field has one row)
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ */
+export class GvCodeEditor extends LitElement {
+  static get properties() {
+    return {
+      value: { type: String },
+      readonly: { type: Boolean },
+      placeholder: { type: String },
+      options: { type: Object },
+      rows: { type: Number },
+      clipboard: { type: Boolean },
+      grammar: { type: Object },
+      _clipboardIcon: { type: String },
+      _codeMirror: { type: Object },
+      _error: { type: String, attribute: false },
+    };
+  }
+
+  constructor() {
+    super();
+    this._id = `gv-code-${uuid()}`;
+    this.value = '';
+    this.readonly = false;
+    this.autofocus = false;
+    this.clipboard = false;
+    this._clipboardIcon = shapeClipboard;
+  }
+
+  render() {
+    const classes = {
+      singleLine: this.singleLine,
+    };
+    return html` <div id="${this._id}" class="${classMap(classes)}"></div> `;
+  }
+
+  _onChange() {
+    dispatchCustomEvent(this, 'input', this.value);
+  }
+
+  get singleLine() {
+    return this.rows === 1;
+  }
+
+  _getModelType(typeId) {
+    if (this.grammar != null) {
+      return get(this.grammar, `_types.${typeId}`);
+    }
+    return null;
+  }
+
+  _isMap(typeId) {
+    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
+  }
+
+  _getEnum(typeId) {
+    if (this.grammar != null) {
+      return get(this.grammar, `_enums.${typeId}`);
+    }
+    return [''];
+  }
+
+  _convertType(type) {
+    if (type) {
+      const lowerType = type.toLowerCase();
+      if (lowerType === 'string') {
+        // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
+        return 'text';
+      } else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
+        return 'type';
+      } else if (lowerType === 'int' || lowerType === 'long') {
+        return 'variable';
+      } else if (lowerType.includes('[]')) {
+        return 'enum';
+      }
+    }
+    return 'variable';
+  }
+
+  _autocomplete(ctx) {
+    const { handler, match } = this._completionHandlers
+      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
+      .map((handler) => ({ handler, match: handler.expr ? ctx.matchBefore(handler.expr) : true }))
+      .find(({ match, expr }) => match);
+    return handler.run.call(this, ctx, match);
+  }
+
+  _buildMethods(type) {
+    const modelType = this._getModelType(type);
+    return modelType.methods.map(({ name, params = [], returnType }) => {
+      const command = `${name}()`;
+      const displayParams = params.map((p) => `${p.type} ${p.name}`);
+      const label = `${name}(${displayParams.join(', ')})`;
+      const detail = `return ${returnType}`;
+      return {
+        type: 'method',
+        command,
+        apply: (view, completion, from, to) => {
+          const anchor = from + name.length + 1;
+          view.dispatch({
+            changes: { from, to, insert: completion.command },
+            selection: { anchor },
+            userEvent: 'input.complete',
+            annotations: pickedCompletion.of(view),
+          });
+        },
+        label,
+        detail,
+      };
+    });
+  }
+
+  get _completionHandlers() {
+    return [
+      {
+        expr: /{#[a-z]*/,
+        supportEL: true,
+        run(ctx, match) {
+          const prefix = match.text.replaceAll('{#', '');
+          const from = ctx.pos - prefix.length;
+          const options = Object.keys(this.grammar)
+            .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+            .map((command) => {
+              return {
+                // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
+                type: 'variable',
+                command,
+                apply: command,
+                label: command,
+              };
+            });
+          return { from, options };
+        },
+      },
+      {
+        expr: /{#[a-z]*.[a-zA-Z]*/,
+        run(ctx, match) {
+          const tokens = match.text.split('.');
+          const key = tokens[0].replaceAll('{#', '');
+          const prefix = tokens[1];
+          const candidate = this.grammar[key][prefix];
+          let options = [];
+          let from = ctx.pos;
+          if (candidate) {
+            // const modelType = this._getModelType(candidate._type);
+            if (this._isMap(candidate._type)) {
+              options = this._getEnum(candidate._type).map((value) => {
+                const type = this._convertType(candidate._type);
+                const command = `['${value}'][0]`;
+                return {
+                  type,
+                  command,
+                  apply: command,
+                  label: value,
+                };
+              });
+            }
+          } else {
+            from -= prefix.length;
+            const candidate = this.grammar[key];
+            if (candidate._type) {
+              options = this._buildMethods(candidate._type);
+            } else {
+              options = Object.keys(candidate)
+                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                .map((command) => ({
+                  type: this._convertType(candidate[command]._type),
+                  command,
+                  apply: command,
+                  label: command,
+                }));
+            }
+          }
+          return { from, options };
+        },
+      },
+      {
+        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
+        run(ctx, match) {
+          const tokens = match.text.split('.');
+          const key = tokens[0].replaceAll('{#', '');
+          const word = tokens[1];
+          const prefix = tokens[2];
+          const candidate = this.grammar[key][word];
+          let options = [];
+          let from = ctx.pos;
+          if (candidate) {
+            if (this._isMap(candidate._type)) {
+              options = this._getEnum(candidate._type)
+                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                .map((label) => {
+                  const type = this._convertType(candidate._type);
+                  return {
+                    type,
+                    command: `['${label}'][0]`,
+                    apply(view, completion, _from, to) {
+                      const from = _from - prefix.length - 1;
+                      view.dispatch({
+                        changes: { from, to, insert: completion.command },
+                        selection: { anchor: from + completion.command.length },
+                        userEvent: 'input.complete',
+                        annotations: pickedCompletion.of(view),
+                      });
+                    },
+                    label,
+                  };
+                });
+            } else {
+              if (candidate._type) {
+                options = this._buildMethods(candidate._type);
+              } else {
+                from -= prefix.length;
+                options = Object.keys(candidate)
+                  .filter((command) => command.startsWith(prefix))
+                  .map((command) => {
+                    return {
+                      type: this._convertType(candidate[command]._type),
+                      command,
+                      apply: command,
+                      label: command,
+                    };
+                  });
+              }
+            }
+          }
+          return { from, options };
+        },
+      },
+      {
+        run(ctx) {
+          const autocompleteLanguage = ctx.state.languageDataAt('autocomplete', ctx.pos);
+          if (autocompleteLanguage.length > 0) {
+            return autocompleteLanguage[0](ctx);
+          }
+          return { from: ctx.pos, options: [] };
+        },
+      },
+    ];
+  }
+
+  getExtensions() {
+    return [
+      basicSetup,
+      languageCompartment.of(json()),
+      placeholderCompartment.of(placeholder(this.placeholder || '')),
+      EditorState.transactionFilter.of((tr) => (this.singleLine && tr.newDoc.lines > 1 ? [] : tr)),
+      readonlyCompartment.of(EditorView.editable.of(!this.readonly)),
+      EditorView.updateListener.of((update) => {
+        this.value = update.view.contentDOM.innerText;
+      }),
+      autocompletion({
+        activateOnTyping: true,
+        override: [this._autocomplete.bind(this)],
+      }),
+      Prec.high(this.insertELKeymap()),
+    ];
+  }
+
+  insertELKeymap() {
+    return keymap.of([
+      {
+        key: 'Ctrl-Shift-e',
+        mac: 'Cmd-Shift-e',
+        run(view) {
+          view.dispatch(
+            view.state.changeByRange((range) => ({
+              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
+              range: EditorSelection.range(range.from + 2, range.to + 2),
+            })),
+          );
+          startCompletion(view);
+          return true;
+        },
+      },
+    ]);
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    const parent = this.shadowRoot.querySelector(`[id=${this._id}]`);
+    this._editorState = EditorState.create({
+      doc: this.value,
+      extensions: this.getExtensions(),
+    });
+    this._editorView = new EditorView({
+      root: this.shadowRoot,
+      parent,
+      state: this._editorState,
+    });
+    parent.appendChild(this._editorView.dom);
+  }
+
+  async updated(properties) {
+    if (properties.has('placeholder')) {
+      this._editorView.dispatch({
+        effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
+      });
+    }
+    if (properties.has('value')) {
+      this._editorState.update({ changes: { from: 0, to: this._editorState.doc.length, insert: this.value } });
+    }
+    if (properties.has('readonly')) {
+      this._editorView.dispatch({
+        effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly)),
+      });
+    }
+
+    if (properties.has('options') && this.options) {
+      if (this.options.mode) {
+        const language = languages.find((language) => {
+          return language.name.toUpperCase() === this.options.mode.toUpperCase() || language.alias.includes(this.options.mode);
+        });
+        if (language != null) {
+          if (language.support == null) {
+            await language.load();
+          }
+          this._editorView.dispatch({
+            effects: languageCompartment.reconfigure(language.support.extension),
+          });
+        } else {
+          console.warn(
+            `Cannot find language ${this.options.mode}, please use language supported by CodeMirror 6`,
+            languages.map((l) => l.name),
+          );
+        }
+      }
+    }
+  }
+
+  static get styles() {
+    return [
+      // language=CSS
+      css`
+        :host {
+          box-sizing: border-box;
+          display: block;
+          margin: 0 0.2rem 0.2rem 0.2rem;
+        }
+
+        .singleLine .cm-gutters {
+          display: none;
+        }
+
+        .singleLine .cm-scroller {
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
+}
+
+window.customElements.define('gv-code-editor', GvCodeEditor);

package/src/organisms/gv-schema-form.js

@@ -158,7 +158,8 @@ export class GvSchemaForm extends LitElement {
     const { resolve } = this._confirm;
     this._confirm = null;
     this._onReset();
-    this.requestUpdate().then(() => {
+    this.requestUpdate();
+    this.updateComplete.then(() => {
       resolve(this);
     });
   }
@@ -268,6 +269,7 @@ export class GvSchemaForm extends LitElement {
   }
 
   async performUpdate() {
+    await Promise.all(this.getControls().map((e) => e.updateComplete));
     this.getControls().forEach((s) => {
       s.requestUpdate();
     });
@@ -287,7 +289,6 @@ export class GvSchemaForm extends LitElement {
     const isWriteOnly = control.writeOnly === true;
     const value = get(this._values, key);
     return html`<gv-schema-form-control
-      data-a="dd"
       .id="${key}"
       .errors="${this.errors}"
       .control="${control}"
@@ -395,7 +396,11 @@ export class GvSchemaForm extends LitElement {
     }
     const keys = this.schema.properties ? Object.keys(this.schema.properties) : [];
     this._ignoreProperties = [];
-    return repeat(keys, (key) => this._renderControl(key));
+    return repeat(
+      keys,
+      (key) => key,
+      (key) => this._renderControl(key),
+    );
   }
 
   getControls() {
@@ -486,8 +491,9 @@ export class GvSchemaForm extends LitElement {
   }
 
   async getUpdateComplete() {
-    await super.getUpdateComplete();
+    const result = await super.getUpdateComplete();
     await Promise.all(this.getControls().map((e) => e.updateComplete));
+    return result;
   }
 
   render() {

package/src/policy-studio/gv-policy-studio.js

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { css, html, LitElement } from 'lit';
-import { ref, createRef } from 'lit/directives/ref.js';
 import { methods } from '../lib/studio';
 import { dispatchCustomEvent } from '../lib/events';
 import '../atoms/gv-button';
@@ -32,7 +31,6 @@ import './gv-policy-studio-menu';
 import { empty } from '../styles/empty';
 import { cache } from 'lit/directives/cache';
 import { deepClone, deepEqual } from '../lib/utils';
-import { i18n } from '../lib/i18n';
 import { KeyboardElement, KEYS } from '../mixins/keyboard-element';
 
 const FLOW_STEP_FORM_ID = 'flow-step-form';
@@ -95,7 +93,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
       _currentPolicyId: { type: String, attribute: false },
       _searchPolicyQuery: { type: String, attribute: false },
       _searchFlowQuery: { type: String, attribute: false },
-      _flowStepSchemas: { type: Object, attribute: false },
+      _flowStepSchema: { type: Object, attribute: false },
       _currentFlowStep: { type: Object, attribute: false },
       _policyFilter: { type: Array, attribute: false },
       _flowFilter: { type: Array, attribute: false },
@@ -207,17 +205,16 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
           border-right: 1px solid #d9d9d9;
         }
 
-        .flow-step__form {
-          overflow: auto;
+        .flow-step__container {
+          overflow: hidden;
+          position: relative;
+          overflow: hidden;
+          height: 99%;
         }
 
-        .flow-step__form-h2 {
-          font-size: 21px;
-          font-weight: 600;
-          padding-bottom: 0.3em;
-          border-bottom: 1px solid #eaecef;
-          margin-top: 24px;
-          margin-bottom: 16px;
+        .flow-step__form {
+          padding: 0 0.5rem;
+          overflow: auto;
         }
 
         .flow-step__form-title {
@@ -225,10 +222,6 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
           letter-spacing: 0.2rem;
         }
 
-        .flow-step__form-schema {
-          margin: 0;
-        }
-
         gv-tabs {
           width: 100%;
           height: 100%;
@@ -553,14 +546,8 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
           if (this._currentFlowStep != null && this._currentFlowStep.step._id === _id) {
             this._currentFlowStep.group = detail.flowKey;
             // Special case for update schema after change request to response or inverse
-            await this._setCurrentFlowStep(
-              this._currentFlowStep,
-              {
-                flowStepPolicySchema: this.buildPolicySchema(this._currentFlowStep.policy),
-                flowStepCommonSchema: this.buildCommonSchema(),
-              },
-              true,
-            );
+            const schema = this.buildSchema(this._currentFlowStep.policy);
+            await this._setCurrentFlowStep(this._currentFlowStep, schema, true);
             this._getFlowElement(targetFlow._id).requestUpdate();
           }
         } else {
@@ -627,21 +614,17 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
     this._splitMainViews();
   }
 
-  buildPolicySchema({ schema }) {
-    if (schema) {
-      const jsonSchema = typeof schema === 'string' ? JSON.parse(schema) : schema;
-      const properties = { ...jsonSchema.properties };
-      return { ...jsonSchema, properties };
-    }
-    return { properties: {} };
-  }
-
-  buildCommonSchema() {
+  buildSchema({ schema }) {
     const description = {
       title: 'Description',
       description: 'Description of flow step',
       type: 'string',
     };
+    if (schema) {
+      const jsonSchema = typeof schema === 'string' ? JSON.parse(schema) : schema;
+      const properties = { description, ...jsonSchema.properties };
+      return { ...jsonSchema, properties };
+    }
     return { properties: { description } };
   }
 
@@ -649,11 +632,9 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
     if (step) {
       this._currentPolicyId = policy.id;
       const currentFlowStep = { flow, step, policy, group };
+      const schema = this.buildSchema(policy);
       try {
-        await this._setCurrentFlowStep(currentFlowStep, {
-          flowStepPolicySchema: this.buildPolicySchema(policy),
-          flowStepCommonSchema: this.buildCommonSchema(),
-        });
+        await this._setCurrentFlowStep(currentFlowStep, schema);
         this._updateSelectedFlows([flow._id]);
         this._splitMainViews();
         if (localStorage.getItem('gv-policy-studio:keep-documentation-close') == null) {
@@ -707,7 +688,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
   }
 
   async _closeFlowStepForm(force = false) {
-    await this._setCurrentFlowStep(null, {}, force);
+    await this._setCurrentFlowStep(null, null, force);
   }
 
   async _askToValidateForms() {
@@ -734,13 +715,12 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
     throw new Error('ask already waiting');
   }
 
-  async _setCurrentFlowStep(currentFlowStep, { flowStepPolicySchema, flowStepCommonSchema }, force = false) {
+  async _setCurrentFlowStep(currentFlowStep, flowStepSchema, force = false) {
     if (!force) {
       await this._askToValidateForms();
     }
 
-    const policySchema = deepClone(flowStepPolicySchema);
-    const commonSchema = deepClone(flowStepCommonSchema);
+    const schema = deepClone(flowStepSchema);
     if (currentFlowStep != null) {
       const configuration =
         typeof currentFlowStep.step.configuration === 'string'
@@ -748,22 +728,21 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
           : currentFlowStep.step.configuration;
       const step = { ...currentFlowStep.step, configuration };
 
-      const _initialPolicyValues = { ...step.configuration };
-      const _initialCommonValues = { description: step.description };
-      this._currentFlowStep = { ...currentFlowStep, step, _initialPolicyValues, _initialCommonValues };
+      const _initialValues = { ...step.configuration, description: step.description };
+      this._currentFlowStep = { ...currentFlowStep, step, _initialValues };
 
-      if (flowStepPolicySchema && flowStepPolicySchema.properties.scope) {
-        const _enum = policySchema.properties.scope.enum;
+      if (flowStepSchema && flowStepSchema.properties.scope) {
+        const _enum = schema.properties.scope.enum;
         if (_enum.find((scope) => ['REQUEST', 'REQUEST_CONTENT', 'RESPONSE', 'RESPONSE_CONTENT'].includes(scope)) != null) {
           const filtered = this._currentFlowStep.group === 'pre' ? ['REQUEST', 'REQUEST_CONTENT'] : ['RESPONSE', 'RESPONSE_CONTENT'];
-          policySchema.properties.scope.enum = _enum.filter((scope) => filtered.includes(scope));
+          schema.properties.scope.enum = _enum.filter((scope) => filtered.includes(scope));
           const scope = this._currentFlowStep.step.configuration.scope;
-          if (scope == null || !policySchema.properties.scope.enum.includes(scope)) {
-            policySchema.properties.scope.default = policySchema.properties.scope.enum[0];
-            this._currentFlowStep.step.configuration.scope = policySchema.properties.scope.enum[0];
-            this._currentFlowStep._initialPolicyValues.scope = policySchema.properties.scope.enum[0];
-            if (this._currentFlowStep._policyValues) {
-              this._currentFlowStep._policyValues.scope = policySchema.properties.scope.enum[0];
+          if (scope == null || !schema.properties.scope.enum.includes(scope)) {
+            schema.properties.scope.default = schema.properties.scope.enum[0];
+            this._currentFlowStep.step.configuration.scope = schema.properties.scope.enum[0];
+            this._currentFlowStep._initialValues.scope = schema.properties.scope.enum[0];
+            if (this._currentFlowStep._values) {
+              this._currentFlowStep._values.scope = schema.properties.scope.enum[0];
             }
           }
         }
@@ -772,13 +751,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
       this._currentFlowStep = null;
     }
 
-    this._flowStepSchemas =
-      flowStepPolicySchema && flowStepCommonSchema
-        ? {
-            commonSchema,
-            policySchema,
-          }
-        : null;
+    this._flowStepSchema = schema;
   }
 
   _refresh(closeStepForm = true) {
@@ -856,18 +829,12 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
     }
   }
 
-  _onChangeFlowStepPolicy({ detail }) {
-    this._currentFlowStep._policyValues = detail.values;
-  }
-
-  _onChangeFlowStepCommon({ detail }) {
-    this._currentFlowStep._commonValues = detail.values;
+  _onChangeFlowStep({ detail }) {
+    this._currentFlowStep._values = detail.values;
   }
 
-  _writeFlowStep() {
-    const configuration = this._currentFlowStep._policyValues;
-    const { description } = this._currentFlowStep._commonValues;
-
+  _writeFlowStep(values) {
+    const { description, ...configuration } = values;
     if (
       this._currentFlowStep.step._new ||
       this._currentFlowStep.step.description !== description ||
@@ -887,8 +854,8 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
     }
   }
 
-  async _onSubmitFlowStep() {
-    this._writeFlowStep();
+  async _onSubmitFlowStep({ detail }) {
+    this._writeFlowStep(detail.values);
     await this.requestUpdate('_definition');
     this.getChildren().forEach((c) => c.requestUpdate());
   }
@@ -1019,7 +986,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
   }
 
   _renderPolicy(readonlyMode) {
-    if (this._flowStepSchemas && this.documentation) {
+    if (this._flowStepSchema && this.documentation) {
       return html`<gv-resizable-views direction="horizontal" no-overflow>
         <div slot="top">${this._renderFlowStepForm(readonlyMode)}</div>
         <div slot="bottom">
@@ -1038,7 +1005,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
         ?disabled="${this._currentAskConfirmation}"
         @gv-documentation:close="${this._onCloseDocumentation}"
       ></gv-documentation>`;
-    } else if (this._flowStepSchemas) {
+    } else if (this._flowStepSchema) {
       return this._renderFlowStepForm(readonlyMode);
     }
     return html``;
@@ -1050,8 +1017,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
 
   _onResetFlowStep() {
     if (this._currentFlowStep) {
-      delete this._currentFlowStep._policyValues;
-      delete this._currentFlowStep._commonValues;
+      delete this._currentFlowStep._values;
       this._getFlowStepForm().reset();
     }
   }
@@ -1121,27 +1087,27 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
   }
 
   _renderFlowStepForm(readonlyMode) {
-    const policyValues = this._currentFlowStep._policyValues || this._currentFlowStep._initialPolicyValues;
-    const commonValues = this._currentFlowStep._commonValues || this._currentFlowStep._initialCommonValues;
-
-    const gvSchemaFormPolicyRef = createRef();
-    const gvSchemaFormCommonRef = createRef();
-
-    const submitPolicySchemaForm = () => {
-      gvSchemaFormPolicyRef.value._onSubmit();
-      gvSchemaFormCommonRef.value._onSubmit();
-    };
-
-    const resetPolicySchemaForm = () => {
-      gvSchemaFormPolicyRef.value._onReset();
-      gvSchemaFormCommonRef.value._onReset();
-    };
-
+    const values = this._currentFlowStep._values || this._currentFlowStep._initialValues;
     return html`${cache(
-      this._flowStepSchemas && this._currentFlowStep
-        ? html`
-            <gv-scroll-layout class="flow-step__form">
-              <div slot="header-left">
+      this._flowStepSchema && this._currentFlowStep
+        ? html`<div class="flow-step__container">
+            <div class="flow-step__form">
+              <gv-schema-form
+                .id="${FLOW_STEP_FORM_ID}"
+                .schema="${this._flowStepSchema}"
+                .icon="design:edit"
+                has-header
+                validate-on-render
+                .values="${values}"
+                .dirty="${this._currentFlowStep._values != null}"
+                ?readonly="${readonlyMode}"
+                scrollable
+                @gv-schema-form:change="${this._onChangeFlowStep}"
+                @gv-schema-form:reset="${this._onResetFlowStep}"
+                @gv-schema-form:fetch-resources="${this._onFetchResources}"
+                @gv-schema-form:submit="${this._onSubmitFlowStep}"
+              >
+                <div slot="title" class="flow-step__form-title">${this._currentFlowStep.step.name}</div>
                 <gv-button
                   slot="header-left"
                   icon="general:close"
@@ -1159,60 +1125,9 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
                   @gv-button:click="${this._onOpenDocumentationFromForm}"
                   title="Open documentation"
                 ></gv-button>
-              </div>
-
-              <div slot="header-title" class="flow-step__form-title">${this._currentFlowStep.step.name}</div>
-
-              <div slot="header-right">
-                <gv-button
-                  id="reset"
-                  outlined
-                  small
-                  @gv-button:click="${resetPolicySchemaForm}"
-                  icon="general:update"
-                  title="Reset"
-                ></gv-button>
-
-                <gv-button id="submit" small @gv-button:click="${submitPolicySchemaForm}" icon="code:check" .title="Ok"></gv-button>
-              </div>
-
-              <div slot="content">
-                <h2 class="flow-step__form-h2">${i18n('gv-policy-studio.common-settings')}</h2>
-                <gv-schema-form
-                  ${ref(gvSchemaFormCommonRef)}
-                  class="flow-step__form-schema"
-                  .id="${FLOW_STEP_FORM_ID}"
-                  .schema="${this._flowStepSchemas.commonSchema}"
-                  .icon="design:edit"
-                  validate-on-render
-                  .values="${commonValues}"
-                  .dirty="${this._currentFlowStep._commonValues != null}"
-                  ?readonly="${readonlyMode}"
-                  @gv-schema-form:change="${this._onChangeFlowStepCommon}"
-                  @gv-schema-form:reset="${this._onResetFlowStep}"
-                  @gv-schema-form:fetch-resources="${this._onFetchResources}"
-                  @gv-schema-form:submit="${this._onSubmitFlowStep}"
-                ></gv-schema-form>
-
-                <h2 class="flow-step__form-h2">${i18n('gv-policy-studio.policy-settings')}</h2>
-                <gv-schema-form
-                  ${ref(gvSchemaFormPolicyRef)}
-                  class="flow-step__form-schema"
-                  .id="${FLOW_STEP_FORM_ID}"
-                  .schema="${this._flowStepSchemas.policySchema}"
-                  .icon="design:edit"
-                  validate-on-render
-                  .values="${policyValues}"
-                  .dirty="${this._currentFlowStep._policyValues != null}"
-                  ?readonly="${readonlyMode}"
-                  @gv-schema-form:change="${this._onChangeFlowStepPolicy}"
-                  @gv-schema-form:reset="${this._onResetFlowStep}"
-                  @gv-schema-form:fetch-resources="${this._onFetchResources}"
-                  @gv-schema-form:submit="${this._onSubmitFlowStep}"
-                ></gv-schema-form>
-              </div>
-            </gv-scroll-layout>
-          `
+              </gv-schema-form>
+            </div>
+          </div>`
         : '',
     )}`;
   }
@@ -1733,7 +1648,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
   }
 
   _renderFlowForm(readonlyMode) {
-    if (this.flowSchema && this._flowStepSchemas == null && this.documentation == null && this.selectedFlowsId.length === 1) {
+    if (this.flowSchema && this._flowStepSchema == null && this.documentation == null && this.selectedFlowsId.length === 1) {
       const flow = this.getSelectedFlow();
       if (flow) {
         const values = deepClone(flow);

package/wc/gv-code-editor.js

@@ -0,0 +1 @@
+import '../src/molecules/gv-code-editor';

package/src/molecules/gv-scroll-layout.js

@@ -1,129 +0,0 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { css, LitElement, html } from 'lit';
-import { classMap } from 'lit-html/directives/class-map';
-import { skeleton } from '../styles/skeleton';
-
-/**
- * Scroll layout component
- *
- * ## Details
- * * has @theme facet
- *
- */
-export class GvScrollLayout extends LitElement {
-  static get properties() {
-    return {
-      skeleton: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          position: relative;
-        }
-
-        .container {
-          display: flex;
-          flex-direction: column;
-
-          /* for Firefox */
-          min-height: 0;
-          height: 100%;
-        }
-
-        .header,
-        .content {
-          background-color: var(--bgc);
-        }
-
-        .header {
-          display: flex;
-          border-bottom: 1px solid #d9d9d9;
-          box-sizing: border-box;
-          min-height: 45px;
-          --gv-icon--s: 26px;
-          align-items: center;
-          padding: 0 1rem;
-          position: relative;
-        }
-
-        .header .left,
-        .header .right {
-          display: flex;
-          flex: 1;
-          z-index: 10;
-          align-items: center;
-        }
-
-        .header .right {
-          justify-content: flex-end;
-        }
-
-        .header .title {
-          color: #28444f;
-          font-size: 18px;
-          display: flex;
-          width: 100%;
-          align-items: center;
-        }
-
-        .content {
-          box-sizing: border-box;
-          align-self: center;
-          width: 100%;
-          overflow: auto;
-          max-width: 775px;
-          padding: 0px 0.5rem;
-
-          /* for Firefox */
-          min-height: 0;
-        }
-
-        .content.empty {
-          display: none;
-        }
-      `,
-      skeleton,
-    ];
-  }
-
-  render() {
-    return html`
-      <div class="container">
-        <div class="header">
-          <div class="left">
-            <slot name="header-left"></slot>
-          </div>
-          <div class="header-title">
-            <slot name="header-title"></slot>
-          </div>
-          <div class="right">
-            <slot name="header-right"></slot>
-          </div>
-        </div>
-
-        <div class="${classMap({ content: true, empty: this.skeleton })}"><slot name="content"></slot></div>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-scroll-layout', GvScrollLayout);

package/wc/gv-scroll-layout.js

@@ -1 +0,0 @@
-import '../src/molecules/gv-scroll-layout';