@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

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

@@ -1,1842 +1 @@
-/*
- * 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, html, LitElement } from 'lit';
-import { methods } from '../lib/studio';
-import { dispatchCustomEvent } from '../lib/events';
-import { i18n } from '../lib/i18n';
-import '../atoms/gv-button';
-import '../atoms/gv-icon';
-import '../molecules/gv-option';
-import '../organisms/gv-documentation';
-import '../organisms/gv-resizable-views';
-import '../organisms/gv-schema-form';
-import '../organisms/gv-http-client';
-import '../organisms/gv-tabs';
-import '../molecules/gv-row';
-import './gv-flow';
-import './gv-flow-step';
-import './gv-policy-studio-menu';
-import { empty } from '../styles/empty';
-import { cache } from 'lit/directives/cache';
-import { deepClone, deepEqual } from '../lib/utils';
-import { KeyboardElement, KEYS } from '../mixins/keyboard-element';
-
-const FLOW_STEP_FORM_ID = 'flow-step-form';
-
-/**
- *  Studio Policy component
- *
- * ⚠️ This component is based on `asciidoctor`, `highlight.js` and `asciidoctor-highlight.js`.
- * To use this component in your project be sure the dependencies are installed or
- * install them with: `npm install asciidoctor highlight.js asciidoctor-highlight.js --save`
- *
- * @fires gv-policy-studio:select-policy - Select policy event
- * @fires gv-policy-studio:save - Event sent when "Save" button is clicked, it contains the whole definition of the API
- * @fires gv-policy-studio:debug - Event sent when validation button of the 'Try it' tab is clicked, it contains the whole definition of the API and the information about the try it request.
- *
- * @attr {Array} policies - Policies available
- * @attr {Array} services - Services available
- * @attr {Array} resourceTypes - Resources types available
- * @attr {Array} propertyProviders - Providers of properties
- * @attr {Array} dynamicPropertySchema - Schema for the dynamic property form
- * @attr {String} tabId - Current tabId to display (design, settings, properties or resources)
- * @attr {Object} definition - The definition of flows
- * @attr {Object} documentation - The documentation to display
- * @attr {Object} flowSchema - The flow form configuration to display in gv-schema-form component
- * @attr {Object} configurationSchema - The form configuration to display in gv-schema-form component
- * @attr {Object} configurationInformation - The information related to api configuration tab
- * @attr {Boolean} isDirty - true if component is dirty
- * @attr {Array} selectedFlowsId - The selected flows id
- * @attr {Boolean} sortable - true if flows are sortable
- * @attr {Boolean} readonly - true if readonly
- * @attr {Boolean} readonly-plans - true if plans' flows can't be modified
- * @attr {Boolean} can-add - true if user can add flow
- * @attr {String} flowsTitle - flows menu title
- * @attr {Boolean} has-policy-filter - true if policies have onRequest/onResponse properties
- * @attr {Boolean} can-debug - true if debug tab should be displayed
- * @attr {Object} debugResponse - true if debug tab should be displayed
- * @attr {Boolean} has-conditional-steps - true if steps can be conditioned
- */
-export class GvPolicyStudio extends KeyboardElement(LitElement) {
-  static get properties() {
-    return {
-      policies: { type: Array },
-      services: { type: Object },
-      resourceTypes: { type: Array, attribute: 'resource-types' },
-      propertyProviders: { type: Array, attribute: 'property-providers' },
-      dynamicPropertySchema: { type: Object, attribute: 'dynamic-property-schema' },
-      tabId: { type: String, attribute: 'tab-id' },
-      _tabId: { type: String, attribute: false },
-      definition: { type: Object },
-      _definition: { type: Object, attribute: false },
-      documentation: { type: Object },
-      flowSchema: { type: Object, attribute: 'flow-schema' },
-      configurationSchema: { type: Object, attribute: 'configuration-schema' },
-      _configurationSchema: { type: Object, attribute: false },
-      configurationInformation: { type: String, attribute: 'configuration-information' },
-      isDirty: { type: Boolean, attribute: 'dirty', reflect: true },
-      _dragPolicy: { type: Object, attribute: false },
-      _dropPolicy: { type: Object, attribute: false },
-      selectedFlowsId: { type: Array, attribute: 'selected-flows-id' },
-      _selectedFlowsId: { type: Array, attribute: false },
-      _currentPolicyId: { type: String, attribute: false },
-      _searchPolicyQuery: { type: String, attribute: false },
-      _searchFlowQuery: { type: String, attribute: false },
-      _flowStepSchema: { type: Object, attribute: false },
-      _currentFlowStep: { type: Object, attribute: false },
-      _policyFilter: { type: Array, attribute: false },
-      _flowFilter: { type: Array, attribute: false },
-      _currentAskConfirmation: { type: Boolean, attribute: false },
-      hasProperties: { type: Boolean, attribute: 'has-properties' },
-      _hasProperties: { type: Boolean, attribute: false },
-      hasResources: { type: Boolean, attribute: 'has-resources' },
-      hasPolicyFilter: { type: Boolean, attribute: 'has-policy-filter' },
-      flowsTitle: { type: String, attribute: 'flows-title' },
-      sortable: { type: Boolean },
-      canAdd: { type: Boolean, attribute: 'can-add' },
-      readonly: { type: Boolean },
-      readonlyPlans: { type: Boolean, attribute: 'readonly-plans' },
-      canDebug: { type: Boolean, attribute: 'can-debug' },
-      _canDebug: { type: Boolean, attribute: false },
-      debugResponse: { type: Object, attribute: 'debug-response' },
-      hasConditionalSteps: { type: Boolean, attribute: 'has-conditional-steps' },
-    };
-  }
-
-  static get styles() {
-    return [
-      empty,
-      methods,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          --height: var(--gv-policy-studio--h, calc(100vh - 32px));
-          height: var(--height);
-          --height-in-tabs: calc(var(--height) - 25px);
-        }
-
-        .box {
-          height: var(--height);
-          display: flex;
-        }
-
-        .design,
-        .properties {
-          display: flex;
-        }
-
-        gv-resizable-views {
-          width: 100%;
-        }
-
-        .editable-name {
-          padding: 0.5rem 1rem;
-          font-size: 16px;
-        }
-
-        .editable-name span {
-          color: #bfbfbf;
-          font-size: 12px;
-        }
-
-        .form__control {
-          margin: 0.5rem;
-        }
-
-        gv-input {
-          width: 100%;
-        }
-
-        .flow-name {
-          display: flex;
-          align-items: center;
-        }
-
-        .flow-name.dirty {
-          font-style: italic;
-          opacity: 0.8;
-        }
-
-        .flow-name gv-icon {
-          --gv-icon--s: 24px;
-          margin-right: 0.2rem;
-        }
-
-        .flow-path {
-          margin-left: 0.2rem;
-        }
-
-        .title_methods {
-          margin-left: 0.5rem;
-        }
-
-        .two-cols {
-          display: flex;
-          width: 100%;
-          height: 100%;
-        }
-
-        .two-cols > * {
-          flex: 1;
-        }
-
-        .left-menu {
-          border-left: 1px solid #d9d9d9;
-          height: var(--height-in-tabs);
-        }
-
-        .right-menu {
-          border-right: 1px solid #d9d9d9;
-          height: var(--height-in-tabs);
-        }
-
-        .two-cols > *:first-child {
-          border-right: 1px solid #d9d9d9;
-        }
-
-        .flow-step__container {
-          overflow: hidden;
-          position: relative;
-          overflow: hidden;
-          height: 99%;
-        }
-
-        .flow-step__form {
-          padding: 0 0.5rem;
-          overflow: auto;
-        }
-
-        .flow-step__form-title {
-          text-transform: uppercase;
-          letter-spacing: 0.2rem;
-        }
-
-        gv-tabs {
-          width: 100%;
-          height: 100%;
-          display: inline-block;
-        }
-
-        gv-resizable-views,
-        gv-properties,
-        gv-resources {
-          height: var(--height-in-tabs);
-        }
-
-        gv-properties,
-        gv-resources {
-          width: 100%;
-        }
-
-        gv-properties.properties {
-          --gv-properties-table--colmg: 10px;
-        }
-
-        .api-settings {
-          display: flex;
-          flex-direction: column;
-          border-left: 1px solid #bfbfbf;
-          height: var(--height-in-tabs);
-        }
-
-        .debug {
-          display: flex;
-          flex-direction: column;
-          border-left: 1px solid #bfbfbf;
-          height: var(--height-in-tabs);
-        }
-
-        .api-settings-information {
-          display: flex;
-          align-items: center;
-        }
-
-        .api-settings-information__icon {
-          --gv-icon--c: var(--gv-theme-color, #5a7684);
-          --gv-icon-opacity--c: var(--gv-theme-color-info-light, #64b5f6);
-        }
-
-        .api-settings-information__blockquote,
-        .debug-information__blockquote {
-          border-left: 1px solid var(--gv-theme-color, #5a7684);
-          margin: 15px;
-          padding-left: 15px;
-          font-size: 14px;
-        }
-
-        .flow-settings gv-schema-form {
-          flex: 1;
-          padding: 0.5rem;
-        }
-
-        .search {
-          display: flex;
-          justify-content: stretch;
-        }
-
-        gv-input {
-          margin: 0.2rem 0;
-          width: 100%;
-        }
-
-        .header-actions,
-        .search-policies {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin: 0.5rem;
-        }
-
-        .search-policies {
-          margin: 1.5rem 0.5rem 0.5rem;
-        }
-
-        .footer-actions > gv-button.btn-large,
-        .footer-actions > gv-option {
-          width: 100%;
-        }
-
-        .footer-actions {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          padding: 0.5rem 0;
-          margin: 0.5rem 15px;
-          border-top: 1px solid #bfbfbf;
-        }
-
-        .header-actions .title {
-          text-transform: uppercase;
-          text-align: center;
-          letter-spacing: 0.3rem;
-          color: #bfbfbf;
-          font-size: 18px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 240px;
-          min-height: 25px;
-        }
-
-        .header-actions > *,
-        .search-policies > * {
-          margin-bottom: 1rem;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.isDirty = false;
-    this.policies = [];
-    this.resourceTypes = [];
-    this.tabId = 'design';
-    this.selectedFlowsId = [];
-    this.flowsTitle = 'Flows';
-    this.sortable = false;
-    this.services = {};
-    this._definition = {
-      flows: [],
-    };
-    this._tabs = [{ id: 'design', title: 'Design', icon: 'navigation:exchange' }];
-    this._policyFilter = [];
-    this._flowFilter = [];
-  }
-
-  set hasProperties(value) {
-    if (value) {
-      import('../organisms/gv-properties').then(() => {
-        this._tabs = [...this._tabs, { id: 'properties', title: 'Properties', icon: 'general:settings#1' }];
-        this.requestUpdate();
-      });
-    }
-    this._hasProperties = value;
-  }
-
-  get hasProperties() {
-    return this._hasProperties;
-  }
-
-  set hasResources(value) {
-    if (value) {
-      import('../organisms/gv-resources').then(() => {
-        this._tabs = [...this._tabs, { id: 'resources', title: 'Resources', icon: 'general:settings#5' }];
-        this.requestUpdate();
-      });
-    }
-  }
-
-  set canDebug(value) {
-    if (value) {
-      this._tabs = [...this._tabs, { id: 'debug', title: 'Try it', icon: 'content:send' }];
-    }
-  }
-
-  get _flowFilterOptions() {
-    if (this.definedPlans.length > 0) {
-      return [
-        { id: 'api', title: 'Api', icon: 'shopping:box#3' },
-        { id: 'plan', title: 'Plans', icon: 'shopping:sale#2' },
-      ];
-    }
-  }
-
-  set hasPolicyFilter(value) {
-    if (value) {
-      this._policyFilterOptions = [
-        { id: 'onRequest', title: 'Request', icon: 'navigation:arrow-from-left' },
-        { id: 'onResponse', title: 'Response', icon: 'navigation:arrow-from-right' },
-      ];
-    }
-  }
-
-  set configurationSchema(value) {
-    if (value) {
-      this._tabs.splice(1, 0, { id: 'settings', title: 'Configuration', icon: 'general:settings#2' });
-    }
-
-    this._configurationSchema = value;
-  }
-
-  get configurationSchema() {
-    return this._configurationSchema;
-  }
-
-  onKeyboard() {
-    if (this._currentAskConfirmation == null) {
-      if (this.isPressed(KEYS.Shift, KEYS.Ctrl, KEYS.Space)) {
-        const search = this.shadowRoot.querySelector('#search-policy');
-        if (search) {
-          search.focus();
-        }
-      } else if (this.isPressed(KEYS.Ctrl, KEYS.Space)) {
-        const search = this.shadowRoot.querySelector('#search-flow');
-        if (search) {
-          search.focus();
-        }
-      }
-    }
-  }
-
-  set tabId(tabId) {
-    if (tabId != null && ['design', 'settings', 'properties', 'resources', 'debug'].includes(tabId)) {
-      this._tabId = tabId;
-    } else {
-      this._tabId = 'design';
-    }
-  }
-
-  get tabId() {
-    return this._tabId;
-  }
-
-  set definition(definition) {
-    if (definition) {
-      const flows = this._generateFlowsId(definition.flows);
-      const resources = this._generateId('resource-', definition.resources);
-      const plans =
-        definition.plans == null
-          ? []
-          : definition.plans.map((plan) => {
-              return { ...plan, flows: this._generatePlanFlowsId(plan) };
-            });
-      this._initialDefinition = { ...definition, flows, resources, plans };
-      this._definition = deepClone(this._initialDefinition);
-      this.isDirty = false;
-      this._selectFirstFlow();
-    }
-  }
-
-  get definition() {
-    return this._definition;
-  }
-
-  set selectedFlowsId(selectedFlowsId) {
-    if (selectedFlowsId != null && Array.isArray(selectedFlowsId)) {
-      this._selectedFlowsId = selectedFlowsId.filter((id) => this._findFlowById(id) != null);
-      if (selectedFlowsId.length !== this._selectedFlowsId.length) {
-        this._selectFirstFlow(true);
-      }
-    }
-  }
-
-  get selectedFlowsId() {
-    return this._selectedFlowsId.filter((id) => this._findFlowById(id) != null);
-  }
-
-  _updateSelectedFlows(selectedFlowsId) {
-    this.selectedFlowsId = selectedFlowsId;
-    dispatchCustomEvent(this, 'select-flows', { flows: this.selectedFlowsId });
-  }
-
-  _selectFirstFlow(dispatch = false) {
-    if (this.selectedFlowsId.length === 0) {
-      let candidate = null;
-      if (this.definedFlows.length > 0 && this.definedFlows[0]._id != null) {
-        candidate = this.definedFlows[0];
-      } else if (this.definedPlans.length > 0) {
-        const plan = this.definedPlans.find((plan) => plan.flows != null && plan.flows.length > 0 && plan.flows[0]._id != null);
-        if (plan) {
-          candidate = plan.flows[0];
-        }
-      }
-      if (candidate != null) {
-        if (dispatch) {
-          this._updateSelectedFlows([candidate._id]);
-        } else {
-          this.selectedFlowsId = [candidate._id];
-        }
-      }
-    }
-  }
-
-  _getFlowElement(flowId) {
-    return this.shadowRoot.querySelector(`[id="${flowId}"]`);
-  }
-
-  _onDragEndPolicy() {
-    this.shadowRoot.querySelectorAll('gv-flow').forEach((e) => e.onDragEnd());
-  }
-
-  async _onDropPolicy({ detail }) {
-    try {
-      await this._askToValidateForms();
-
-      const policy = detail.policy;
-      const targetFlow = this._findFlowById(detail.flowId);
-
-      let name = policy.name;
-      let description = '';
-      let condition = '';
-      let configuration = {};
-      let _id;
-      let _new = false;
-      if (detail.flowStep) {
-        _id = detail.flowStep._id;
-        name = detail.flowStep.name;
-        description = detail.flowStep.description || '';
-        condition = detail.flowStep.condition || '';
-        configuration = detail.flowStep.configuration;
-      } else {
-        _id = this._generateFlowStepId(targetFlow._id, detail.flowKey, detail.position);
-        _new = true;
-      }
-
-      const flowStep = { _id, _new, name, policy: policy.id, description, condition, enabled: true, configuration };
-      const sourceFlow = detail.sourceFlowId != null ? this._findFlowById(detail.sourceFlowId) : targetFlow;
-
-      if (detail.sourcePosition != null) {
-        if (detail.sourceFlowKey && detail.sourceFlowKey !== detail.flowKey) {
-          sourceFlow[detail.sourceFlowKey].splice(detail.sourcePosition, 1);
-          targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
-          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
-            const schema = this.buildSchema(this._currentFlowStep.policy);
-            await this._setCurrentFlowStep(this._currentFlowStep, schema, true);
-            this._getFlowElement(targetFlow._id).requestUpdate();
-          }
-        } else {
-          if (detail.position > detail.sourcePosition) {
-            targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
-            sourceFlow[detail.flowKey].splice(detail.sourcePosition, 1);
-          } else {
-            sourceFlow[detail.flowKey].splice(detail.sourcePosition, 1);
-            targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
-          }
-        }
-        // Force Refresh source flow element when move to other flow
-        if (targetFlow._id !== sourceFlow._id) {
-          this._getFlowElement(targetFlow._id).requestUpdate();
-        }
-      } else {
-        targetFlow[detail.flowKey].splice(detail.position, 0, flowStep);
-        const currentFlowForm = this._getFlowStepForm();
-        if (currentFlowForm == null || currentFlowForm.dirty !== true) {
-          let step = targetFlow[detail.flowKey][detail.position];
-          if (step == null) {
-            // When confirm lose change after drop policy
-            step = targetFlow[detail.flowKey][detail.position - 1];
-          }
-
-          if (detail.cancelEdit !== true) {
-            setTimeout(async () => {
-              await this._editFlowStep({ step, policy, flow: targetFlow, group: detail.flowKey });
-              this.updateComplete.then(() => {
-                const flowElement = this._getFlowElement(targetFlow._id);
-                flowElement.selectedStepId = step._id;
-                flowElement.requestUpdate();
-              });
-            });
-          }
-        }
-      }
-      targetFlow._dirty = true;
-      sourceFlow._dirty = true;
-      this.isDirty = true;
-      this.shadowRoot.querySelectorAll('gv-flow').forEach((gvFlow) => gvFlow.removeCandidate());
-      setTimeout(() => {
-        this._dragPolicy = null;
-        this._dropPolicy = null;
-      }, 0);
-    } catch (e) {
-      this._currentAskConfirmation = null;
-    }
-  }
-
-  _onDeletePolicy({ detail }) {
-    const targetFlow = this._findFlowById(detail.flowId);
-    targetFlow[detail.flowKey].splice(detail.position, 1);
-    targetFlow._dirty = true;
-    this.isDirty = true;
-    if (detail.target.editing) {
-      this._closeFlowStepForm(true);
-    }
-    this._getFlowElement(detail.flowId).requestUpdate();
-  }
-
-  _onDesign() {
-    this._changeTab('design');
-    this._splitMainViews();
-  }
-
-  buildSchema({ schema }) {
-    const commonDescription = {
-      title: 'Description',
-      description: 'Description of flow step',
-      type: 'string',
-    };
-    const commonCondition = {
-      title: 'Condition',
-      description: 'Condition the execution of the flow step (support EL)',
-      type: 'string',
-      'x-schema-form': {
-        'expression-language': true,
-      },
-    };
-    if (schema) {
-      const jsonSchema = typeof schema === 'string' ? JSON.parse(schema) : schema;
-      const properties = { commonDescription, ...(this.hasConditionalSteps ? { commonCondition } : {}), ...jsonSchema.properties };
-      return { ...jsonSchema, properties };
-    }
-    return { properties: { commonDescription, ...(this.hasConditionalSteps ? { commonCondition } : {}) } };
-  }
-
-  async _editFlowStep({ step, flow, policy, group }) {
-    if (step) {
-      this._currentPolicyId = policy.id;
-      const currentFlowStep = { flow, step, policy, group };
-      const schema = this.buildSchema(policy);
-      try {
-        await this._setCurrentFlowStep(currentFlowStep, schema);
-        this._updateSelectedFlows([flow._id]);
-        this._splitMainViews();
-        if (localStorage.getItem('gv-policy-studio:keep-documentation-close') == null) {
-          this._onOpenDocumentation();
-        }
-      } catch (e) {
-        this._currentAskConfirmation = null;
-      }
-    } else {
-      await this._closeFlowStepForm();
-      this._maximizeTopView();
-    }
-  }
-
-  async _onEditFlowStep({ detail: { step, flow, policy, group } }) {
-    return this._editFlowStep({ step, flow, policy, group });
-  }
-
-  _getResizableViews() {
-    return this.shadowRoot.querySelector('gv-resizable-views');
-  }
-
-  _maximizeTopView() {
-    if (this.selectedFlowsId.length <= 1) {
-      this._getResizableViews().maximizeTop();
-    }
-  }
-
-  _maximizeBottomView() {
-    this._getResizableViews().maximizeBottom();
-  }
-
-  _splitMainViews() {
-    this._getResizableViews().split();
-  }
-
-  _onChangeFlowStepState({ detail }) {
-    const targetFlow = this._findFlowById(detail.flowId);
-    const step = targetFlow[detail.flowKey][detail.position];
-    step.enabled = detail.enabled;
-    targetFlow._dirty = true;
-    this.isDirty = true;
-  }
-
-  async _onCloseFlowStepForm() {
-    try {
-      await this._closeFlowStepForm();
-    } catch (err) {
-      this._currentAskConfirmation = null;
-    }
-  }
-
-  async _closeFlowStepForm(force = false) {
-    await this._setCurrentFlowStep(null, null, force);
-  }
-
-  async _askToValidateForms() {
-    if (this._currentAskConfirmation == null) {
-      this._currentAskConfirmation = true;
-      return Promise.all(this._submitOrConfirmForms()).then((forms) => {
-        if (forms.filter((r) => r != null).length > 0) {
-          this._definition = this._buildDefinitionToSave();
-          this.getChildren().forEach((e) => e.requestUpdate());
-          // Refresh if lose changes lost current step selection
-          return this._checkCurrentFlowStep().then(() => {
-            this.getChildren().forEach((e) => e.requestUpdate());
-            return this.updateComplete.then(() => {
-              this._currentAskConfirmation = null;
-              return forms;
-            });
-          });
-        } else {
-          this._currentAskConfirmation = null;
-          return forms;
-        }
-      });
-    }
-    throw new Error('ask already waiting');
-  }
-
-  async _setCurrentFlowStep(currentFlowStep, flowStepSchema, force = false) {
-    if (!force) {
-      await this._askToValidateForms();
-    }
-
-    const schema = deepClone(flowStepSchema);
-    if (currentFlowStep != null) {
-      const configuration =
-        typeof currentFlowStep.step.configuration === 'string'
-          ? JSON.parse(currentFlowStep.step.configuration)
-          : currentFlowStep.step.configuration;
-      const step = { ...currentFlowStep.step, configuration };
-
-      const _initialValues = { ...step.configuration, commonDescription: step.description, commonCondition: step.condition };
-      this._currentFlowStep = { ...currentFlowStep, step, _initialValues };
-
-      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'];
-          schema.properties.scope.enum = _enum.filter((scope) => filtered.includes(scope));
-          const scope = this._currentFlowStep.step.configuration.scope;
-          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];
-            }
-          }
-        }
-      }
-    } else {
-      this._currentFlowStep = null;
-    }
-
-    this._flowStepSchema = schema;
-  }
-
-  _refresh(closeStepForm = true) {
-    if (closeStepForm) {
-      this._closeFlowStepForm(true);
-    }
-    this._definition = deepClone(this._definition);
-  }
-
-  async _onSelectFlows({ detail }) {
-    try {
-      await this._closeFlowStepForm();
-      this._onCloseDocumentation();
-      this._updateSelectedFlows(detail.flows);
-      this._onDesign();
-    } catch (e) {
-      this._currentAskConfirmation = null;
-    }
-  }
-
-  async _onOpenDocumentationFromMenu({ detail: { policy } }) {
-    try {
-      if (this.documentation == null || this.documentation.id !== policy.id) {
-        await this._closeFlowStepForm();
-        this._currentPolicyId = policy.id;
-        if (this.getSelectedFlow()) {
-          this._splitMainViews();
-        } else {
-          this._maximizeBottomView();
-        }
-        dispatchCustomEvent(this, 'fetch-documentation', { policy });
-      }
-    } catch (e) {}
-  }
-
-  _fetchDocumentation(policy) {
-    if (this.documentation == null || this.documentation.id !== policy.id) {
-      dispatchCustomEvent(this, 'fetch-documentation', { policy });
-    }
-  }
-
-  _onOpenDocumentation() {
-    if (this._currentFlowStep && this._currentFlowStep.policy) {
-      this._fetchDocumentation(this._currentFlowStep.policy);
-    }
-  }
-
-  _onOpenDocumentationFromForm() {
-    localStorage.removeItem('gv-policy-studio:keep-documentation-close');
-    this._onOpenDocumentation();
-  }
-
-  _findFlowCollection(flowId) {
-    const plan = this.definedPlans.find((plan) => plan.flows.find((flow) => flow._id === flowId) != null);
-    return { plan, flows: plan != null ? plan.flows : this.definedFlows };
-  }
-
-  _findFlowById(flowId) {
-    let flow = this.definedFlows.find((flow) => flow._id === flowId);
-    if (flow == null) {
-      const plansFlows = this.definedPlans.map((plan) => plan.flows).reduce((acc, val) => acc.concat(val), []);
-      flow = plansFlows.find((flow) => flow._id === flowId);
-    }
-    return flow;
-  }
-
-  getSelectedFlow(index = 0) {
-    const selectedFlowId = this.selectedFlowsId[index];
-    return this._findFlowById(selectedFlowId);
-  }
-
-  _onTargetPolicy({ detail }) {
-    if (this._currentAskConfirmation == null) {
-      this._dragPolicy = detail;
-    }
-  }
-
-  _onChangeFlowStep({ detail }) {
-    this._currentFlowStep._values = detail.values;
-  }
-
-  _writeFlowStep(values) {
-    const { commonDescription, commonCondition, ...configuration } = values;
-    if (
-      this._currentFlowStep.step._new ||
-      this._currentFlowStep.step.description !== commonDescription ||
-      this._currentFlowStep.step.condition !== commonCondition ||
-      !deepEqual(this._currentFlowStep.step.configuration, configuration)
-    ) {
-      const flow = this._findFlowById(this._currentFlowStep.flow._id);
-      const position = flow[this._currentFlowStep.group].findIndex((step) => step._id === this._currentFlowStep.step._id);
-
-      flow[this._currentFlowStep.group][position].description = commonDescription;
-      flow[this._currentFlowStep.group][position].condition = commonCondition;
-      flow[this._currentFlowStep.group][position].configuration = deepClone(configuration);
-      delete flow[this._currentFlowStep.group][position]._new;
-      flow[this._currentFlowStep.group][position]._dirty = true;
-      flow._dirty = true;
-      this.isDirty = true;
-      this._currentFlowStep.flow = flow;
-      this._currentFlowStep.step = flow[this._currentFlowStep.group][position];
-    }
-  }
-
-  async _onSubmitFlowStep({ detail }) {
-    this._writeFlowStep(detail.values);
-    await this.requestUpdate('_definition');
-    this.getChildren().forEach((c) => c.requestUpdate());
-  }
-
-  _onCancelFlow() {
-    this._onDesign();
-  }
-
-  _onSubmitFlow({ detail: { values } }) {
-    const selectedFlow = this.getSelectedFlow();
-    const _values = Object.assign({}, this._createFlowFromSchema(), values);
-    const selectedFlowUpdated = Object.assign({}, selectedFlow, _values);
-    if (!deepEqual(selectedFlow, selectedFlowUpdated)) {
-      Object.assign(selectedFlow, selectedFlowUpdated, { _dirty: true });
-      this.isDirty = true;
-      this._refresh();
-    }
-  }
-
-  _onCancelFlowMode() {
-    this._onDesign();
-  }
-
-  _onSubmitFlowMode({ detail: { values } }) {
-    this._definition['flow-mode'] = values['flow-mode'] || 'DEFAULT';
-    this.isDirty = true;
-    this._refresh();
-  }
-
-  _onChangeTab({ detail }) {
-    this._changeTab(detail.value);
-  }
-
-  async _changeTabValidator({ from, to }) {
-    if (from === 'properties') {
-      const component = this.shadowRoot.querySelector('gv-properties');
-      if (component.dirty) {
-        return component.confirm();
-      }
-    } else if (from === 'resources') {
-      const component = this.shadowRoot.querySelector('gv-resources');
-      if (component.dirty) {
-        return component.confirm();
-      }
-    } else {
-      try {
-        return await this._askToValidateForms();
-      } catch (e) {
-        this._currentAskConfirmation = null;
-        throw e;
-      }
-    }
-    return Promise.resolve();
-  }
-
-  _changeTab(tabId) {
-    if (this._currentAskConfirmation == null) {
-      this.tabId = tabId;
-      dispatchCustomEvent(this, 'change-tab', this.tabId);
-    }
-  }
-
-  _onDragStartFlowStep(flow, { detail }) {
-    if (this._currentAskConfirmation == null) {
-      this._dropPolicy = detail;
-      this._dragPolicy = detail;
-    }
-  }
-
-  _renderFlowEmptyState(readonlyMode) {
-    return html`<div slot="content" class="empty">
-      <div>
-        Select a flow
-        ${readonlyMode !== true
-          ? html`or <gv-button @gv-button:click="${this._onAddFlow}" outlined icon="code:plus" large>design new one</gv-button>`
-          : ''}
-      </div>
-    </div>`;
-  }
-
-  _renderFlow(index = 0, hasEmptyState = true, readonlyMode) {
-    const flow = this.getSelectedFlow(index);
-    if (flow) {
-      const { plan } = this._findFlowCollection(flow._id);
-      const selectedStepId = this._currentFlowStep ? this._currentFlowStep.step._id : null;
-      return html` <gv-flow
-        style="height: 100%"
-        .id="${flow._id}"
-        .flow="${flow}"
-        .plan="${plan}"
-        .policies="${this.policies}"
-        slot="content"
-        ?disabled="${this._currentAskConfirmation}"
-        .dragPolicy="${this._dragPolicy}"
-        .dropPolicy="${this._dropPolicy}"
-        .selectedStepId="${selectedStepId}"
-        ?readonly="${readonlyMode}"
-        ?has-policy-filter="${this._policyFilterOptions != null}"
-        flows-title="${this.flowsTitle}"
-        @gv-flow:drag-start="${this._onDragStartFlowStep.bind(this, flow)}"
-        @gv-flow:edit="${this._onEditFlowStep}"
-        @gv-flow:change-state="${this._onChangeFlowStepState}"
-        @gv-flow:drop="${this._onDropPolicy}"
-        @gv-flow:delete="${this._onDeletePolicy}"
-      ></gv-flow>`;
-    } else if (hasEmptyState) {
-      return this._renderFlowEmptyState(readonlyMode);
-    }
-    return html``;
-  }
-
-  _onFetchResources(event) {
-    const { currentTarget, regexTypes } = event.detail;
-    const options = this.definedResources
-      .filter((resource) => regexTypes == null || new RegExp(regexTypes).test(resource.type))
-      .map((resource, index) => {
-        const resourceType = this.resourceTypes.find((type) => type.id === resource.type);
-        const row = document.createElement('gv-row');
-        const picture = resourceType.icon ? resourceType.icon : null;
-        row.item = { picture, name: resource.name };
-        return {
-          element: row,
-          value: resource.name,
-          id: resource.type,
-        };
-      });
-    currentTarget.options = options;
-  }
-
-  _renderPolicy(readonlyMode) {
-    if (this._flowStepSchema && this.documentation) {
-      return html`<gv-resizable-views direction="horizontal" no-overflow>
-        <div slot="top">${this._renderFlowStepForm(readonlyMode)}</div>
-        <div slot="bottom">
-          <gv-documentation
-            .text="${this.documentation.content}"
-            .image="${this.documentation.image}"
-            ?disabled="${this._currentAskConfirmation}"
-            @gv-documentation:close="${this._onCloseDocumentation}"
-          ></gv-documentation>
-        </div>
-      </gv-resizable-views>`;
-    } else if (this.documentation) {
-      return html`<gv-documentation
-        .text="${this.documentation.content}"
-        .image="${this.documentation.image}"
-        ?disabled="${this._currentAskConfirmation}"
-        @gv-documentation:close="${this._onCloseDocumentation}"
-      ></gv-documentation>`;
-    } else if (this._flowStepSchema) {
-      return this._renderFlowStepForm(readonlyMode);
-    }
-    return html``;
-  }
-
-  _getFlowStepForm() {
-    return this.shadowRoot.querySelector(`#${FLOW_STEP_FORM_ID}`);
-  }
-
-  _onResetFlowStep() {
-    if (this._currentFlowStep) {
-      delete this._currentFlowStep._values;
-      this._getFlowStepForm().reset();
-    }
-  }
-
-  _generateFlowsId(list, force = false) {
-    return this._generateId('f', list, force, true);
-  }
-
-  _generatePlanFlowsId(plan, force = false) {
-    return this._generateId(plan.id, plan.flows, force, true);
-  }
-
-  _generateFlowStepId(flowId, flowKey, position) {
-    return `${flowId}_${flowKey}_${position}`;
-  }
-
-  _generateId(prefix, list, force = false, isFlow = false) {
-    if (list) {
-      return list.map((e, index) => {
-        const _id = `${prefix}_${index}`;
-        if (isFlow) {
-          if (e.pre) {
-            e.pre.forEach((step, stepIndex) => (step._id = this._generateFlowStepId(_id, 'pre', stepIndex)));
-          }
-          if (e.post) {
-            e.post.forEach((step, stepIndex) => (step._id = this._generateFlowStepId(_id, 'post', stepIndex)));
-          }
-        }
-        if (force || e._id == null) {
-          return { ...e, _id };
-        }
-        return e;
-      });
-    }
-    return list;
-  }
-
-  getChildren() {
-    return [
-      ...Array.from(this.shadowRoot.querySelectorAll('gv-flow')),
-      ...Array.from(this.shadowRoot.querySelectorAll('gv-resizable-views')),
-    ];
-  }
-
-  async getUpdateComplete() {
-    await super.getUpdateComplete();
-    await Promise.all(this.getChildren().map((e) => e.updateComplete));
-  }
-
-  shouldUpdate(changedProperties) {
-    // Just refresh gv-flow components
-    if (changedProperties.has('_dragPolicy')) {
-      this.shadowRoot.querySelectorAll('gv-flow').forEach((flow) => (flow.dragPolicy = this._dragPolicy));
-      return false;
-    }
-    if (changedProperties.has('_dropPolicy')) {
-      this.shadowRoot.querySelectorAll('gv-flow').forEach((flow) => (flow.dropPolicy = this._dropPolicy));
-      return false;
-    }
-    return super.shouldUpdate(changedProperties);
-  }
-
-  updated(props) {
-    if (props.has('documentation') && this.documentation != null && this.selectedFlowsId.length > 1) {
-      this._updateSelectedFlows([this.selectedFlowsId[0]]);
-    }
-  }
-
-  _renderFlowStepForm(readonlyMode) {
-    const values = this._currentFlowStep._values || this._currentFlowStep._initialValues;
-
-    const groups = [{ items: ['commonDescription', 'commonCondition'] }, { name: i18n('gv-policy-studio.policy-settings'), default: true }];
-    return html`${cache(
-      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
-                .groups="${groups}"
-                @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"
-                  outlined
-                  small
-                  @gv-button:click="${this._onCloseFlowStepForm}"
-                  title="Close"
-                ></gv-button>
-                <gv-button
-                  slot="header-left"
-                  icon="home:book"
-                  ?disabled="${this.documentation != null}"
-                  outlined
-                  small
-                  @gv-button:click="${this._onOpenDocumentationFromForm}"
-                  title="Open documentation"
-                ></gv-button>
-              </gv-schema-form>
-            </div>
-          </div>`
-        : '',
-    )}`;
-  }
-
-  _onCloseDocumentation() {
-    this.documentation = null;
-    if (this._currentFlowStep == null) {
-      this._maximizeTopView();
-    } else {
-      localStorage.setItem('gv-policy-studio:keep-documentation-close', true);
-    }
-  }
-
-  _onDeleteFlow({ detail }) {
-    const flowId = detail.content._id;
-    const { flows } = this._findFlowCollection(flowId);
-    const flow = flows.find((flow) => flow._id === flowId);
-    this._deleteFlow(flows, flow);
-  }
-
-  get definedFlows() {
-    return this._definition && this._definition.flows ? this._definition.flows : [];
-  }
-
-  get definedPlans() {
-    return this._definition && this._definition.plans ? this._definition.plans : [];
-  }
-
-  get definedResources() {
-    return this._definition && this._definition.resources ? this._definition.resources : [];
-  }
-
-  get definedProperties() {
-    return this._definition && this._definition.properties ? this._definition.properties : [];
-  }
-
-  async _onDuplicateFlow({ detail }) {
-    try {
-      await this._askToValidateForms();
-
-      const flowId = detail.content._id;
-      const { plan, flows } = this._findFlowCollection(flowId);
-      this._addFlow(flows, this._findFlowById(flowId));
-      if (plan != null) {
-        let planIndex = null;
-        this.definedPlans.find((p, i) => {
-          if (p.id === plan.id) {
-            planIndex = i;
-            return true;
-          }
-          return false;
-        });
-        plan.flows = flows;
-        this.definedPlans[planIndex].flows = this._generatePlanFlowsId(plan, true);
-        this._updateSelectedFlows([this.definedPlans[planIndex].flows[flows.length - 1]._id]);
-      } else {
-        this._definition.flows = this._generateFlowsId(this._definition.flows);
-        this._updateSelectedFlows([this._definition.flows[this._definition.flows.length - 1]._id]);
-      }
-    } catch (err) {
-      this._currentAskConfirmation = null;
-    }
-  }
-
-  _onChangeFlowState({ detail }) {
-    const flow = this._findFlowById(detail.content._id);
-    flow.enabled = detail.enabled;
-    flow._dirty = true;
-    this.isDirty = true;
-  }
-
-  async _onAddFlowPlan({ detail }) {
-    try {
-      await this._askToValidateForms();
-      this._addFlow(this.definedPlans[detail.planIndex].flows);
-      this.definedPlans[detail.planIndex].flows = this._generatePlanFlowsId(this.definedPlans[detail.planIndex]);
-      this._updateSelectedFlows([this.definedPlans[detail.planIndex].flows[this.definedPlans[detail.planIndex].flows.length - 1]._id]);
-    } catch (err) {
-      this._currentAskConfirmation = null;
-    }
-  }
-
-  async _onAddFlow() {
-    try {
-      await this._askToValidateForms();
-
-      this._addFlow(this._definition.flows);
-      this._definition.flows = this._generateFlowsId(this._definition.flows);
-      this._updateSelectedFlows([this._definition.flows[this._definition.flows.length - 1]._id]);
-    } catch (err) {
-      this._currentAskConfirmation = null;
-    }
-  }
-
-  _addFlow(collection, duplicate = null) {
-    const flow =
-      duplicate == null
-        ? this._createFlowFromSchema()
-        : {
-            ...duplicate,
-            _id: null,
-            // reset the id to avoid issue with AM that persists the ID
-            id: null,
-            _dirty: true,
-          };
-
-    collection.push(flow);
-    this.isDirty = true;
-    return collection;
-  }
-
-  _createFlowFromSchema() {
-    const newFlow = {
-      name: '',
-      pre: [],
-      post: [],
-      _dirty: true,
-    };
-
-    return this._instantiate(this.flowSchema.properties, newFlow);
-  }
-
-  _instantiate(propertiesDefinition, initiator = {}) {
-    const property = { ...initiator };
-
-    if (propertiesDefinition) {
-      for (const key of Object.keys(propertiesDefinition)) {
-        const entry = propertiesDefinition[key];
-
-        if (entry.type === 'object') {
-          property[key] = this._instantiate(entry.properties, (initiator = {}));
-        }
-        if (entry.default !== undefined) {
-          property[key] = entry.default;
-        } else if (entry.type === 'string') {
-          property[key] = '';
-        }
-      }
-    }
-
-    return property;
-  }
-
-  _deleteFlow(collection, flow) {
-    const index = collection.indexOf(flow);
-    collection.splice(index, 1);
-    const selectedFlows = this.selectedFlowsId.filter((flowId) => flowId !== flow._id);
-    if (selectedFlows.length === 1) {
-      this._updateSelectedFlows(selectedFlows);
-    } else {
-      this._selectFirstFlow(true);
-    }
-    this._changeTab('design');
-    this._refresh();
-    this.isDirty = true;
-  }
-
-  _findFlowIndex(list, id) {
-    let index = null;
-    list.find((f, i) => {
-      if (f._id === id) {
-        index = i;
-        return true;
-      }
-      return false;
-    });
-    return index;
-  }
-
-  async _onReorderFlows({ detail: { plan } }) {
-    try {
-      await this._askToValidateForms();
-      this.isDirty = true;
-      if (plan != null) {
-        const newOrder = this._generatePlanFlowsId(plan, true);
-        if (this.selectedFlowsId) {
-          this._updateSelectedFlows(
-            this.selectedFlowsId.map((flowId) => {
-              const index = this._findFlowIndex(plan.flows, flowId);
-              return index != null ? newOrder[index]._id : flowId;
-            }),
-          );
-        }
-        plan.flows = newOrder;
-      } else {
-        const newOrder = this._generateFlowsId(this._definition.flows, true);
-        if (this.selectedFlowsId) {
-          this._updateSelectedFlows(
-            this.selectedFlowsId.map((flowId) => {
-              const index = this._findFlowIndex(this._definition.flows, flowId);
-              return index != null ? newOrder[index]._id : flowId;
-            }),
-          );
-        }
-        this._definition.flows = newOrder;
-      }
-    } catch (err) {
-      this._currentAskConfirmation = false;
-    }
-  }
-
-  _onSearchPolicy({ detail }) {
-    this._searchPolicyQuery = detail;
-  }
-
-  _onClearPolicy() {
-    this._searchPolicyQuery = null;
-  }
-
-  _onSearchFlows({ detail }) {
-    this._searchFlowQuery = detail;
-  }
-
-  _onClearFlows() {
-    this._searchFlowQuery = null;
-  }
-
-  async _onResetAll() {
-    try {
-      await this._closeFlowStepForm();
-      this.definition = deepClone(this._initialDefinition);
-    } catch (e) {
-      this._currentAskConfirmation = null;
-    }
-  }
-
-  _filterNotValidStep(step) {
-    return step._new !== true;
-  }
-
-  _removePrivateProperties(o) {
-    const copy = { ...o };
-    Object.keys(o)
-      .filter((key) => key.startsWith('_'))
-      .forEach((key) => {
-        delete copy[key];
-      });
-    return copy;
-  }
-
-  _submitOrConfirmForms() {
-    return [...this.shadowRoot.querySelectorAll('gv-schema-form')]
-      .filter((form) => {
-        const isValid = form.isValid();
-        if (isValid) {
-          form.submit();
-        } else {
-          form.dirty = true;
-        }
-        return !isValid;
-      })
-      .map((form) => form.confirm());
-  }
-
-  getPropertiesElement() {
-    return this.shadowRoot.querySelector('gv-properties');
-  }
-
-  async _checkCurrentFlowStep() {
-    if (this._currentFlowStep && this.selectedFlowsId) {
-      const closePromises = this.selectedFlowsId
-        .map((flowId) => {
-          const flow = this._findFlowById(flowId);
-          const currentStep = [...flow.pre, ...flow.post].find((step) => step._id === this._currentFlowStep.step._id);
-          if (currentStep == null) {
-            return this._closeFlowStepForm(true);
-          }
-          return null;
-        })
-        .filter((p) => p !== null);
-      return Promise.all(closePromises);
-    }
-    return Promise.resolve();
-  }
-
-  saved() {
-    if (this.isDirty) {
-      this._initialDefinition = deepClone(this._definitionSaved);
-      this._definition = deepClone(this._definitionSaved);
-      this._definitionSaved = null;
-      this.isDirty = false;
-      this._checkCurrentFlowStep();
-      this.definedPlans.forEach((plan) => {
-        plan.flows.forEach((flow) => (flow._dirty = false));
-      });
-      this.definedFlows.forEach((flow) => (flow._dirty = false));
-      this.getChildren().forEach((e) => e.requestUpdate());
-    }
-  }
-
-  _buildDefinitionToSave() {
-    // Copy definition and remove invalid step
-    // Keep private properties like _id and others stuff useful for render
-    const flows = this._definition.flows.map((flow) => {
-      flow.pre = flow.pre.filter(this._filterNotValidStep);
-      flow.post = flow.post.filter(this._filterNotValidStep);
-      return flow;
-    });
-
-    let definition = { ...this._definition, flows };
-
-    if (this._definition.plans != null) {
-      const plans = this._definition.plans.map((plan) => {
-        const flows = plan.flows.map((flow) => {
-          flow.pre = flow.pre.filter(this._filterNotValidStep);
-          flow.post = flow.post.filter(this._filterNotValidStep);
-          return flow;
-        });
-        return { ...plan, flows };
-      });
-      definition = { ...definition, plans };
-    }
-    return definition;
-  }
-
-  _buildDefinitionToSend(definitionToSave) {
-    // Copy definition and remove all private properties
-    const flows = definitionToSave.flows.map((f) => {
-      const flow = this._removePrivateProperties(f);
-      flow.pre = flow.pre.map(this._removePrivateProperties);
-      flow.post = flow.post.map(this._removePrivateProperties);
-      return flow;
-    });
-
-    let definition = { ...this._definition, flows };
-    if (this._definition.plans != null) {
-      const plans = definitionToSave.plans.map((plan) => {
-        const flows = plan.flows.map((f) => {
-          const flow = this._removePrivateProperties(f);
-          flow.pre = flow.pre.map(this._removePrivateProperties);
-          flow.post = flow.post.map(this._removePrivateProperties);
-          return flow;
-        });
-        return { ...plan, flows };
-      });
-      definition = { ...definition, plans };
-    }
-
-    if (this._definition.properties != null) {
-      const properties = this._definition.properties.map(this._removePrivateProperties);
-      definition = { ...definition, properties };
-    }
-
-    if (this._definition.resources != null) {
-      const resources = this._definition.resources.map(this._removePrivateProperties);
-      definition = { ...definition, resources };
-    }
-
-    return definition;
-  }
-
-  _onSaveAll() {
-    if (this.hasProperties) {
-      this.getPropertiesElement().submit();
-    }
-
-    Promise.all(this._submitOrConfirmForms())
-      .then(() => {
-        this._definitionSaved = this._buildDefinitionToSave();
-        const definition = this._buildDefinitionToSend(this._definitionSaved);
-        dispatchCustomEvent(this, 'save', { definition, services: this.services });
-      })
-      .catch((err) => {
-        console.error(`[policy-studio] Error on save`, err);
-      });
-  }
-
-  _onDebug(requestEvent) {
-    if (this.hasProperties) {
-      this.getPropertiesElement().submit();
-    }
-
-    Promise.all(this._submitOrConfirmForms())
-      .then(() => {
-        const definition = this._buildDefinitionToSend(this._buildDefinitionToSave());
-        dispatchCustomEvent(this, 'debug', { definition, services: this.services, request: requestEvent.detail.request });
-      })
-      .catch((err) => {
-        console.error(`[policy-studio] Error on debug`, err);
-      });
-  }
-
-  get filteredFlows() {
-    if (this._flowFilter.length === 0 || this._flowFilter.includes('api')) {
-      return this.definedFlows;
-    }
-    return null;
-  }
-
-  get filteredPlans() {
-    if (this._flowFilter.length === 0 || this._flowFilter.includes('plan')) {
-      return this.definedPlans;
-    }
-    return null;
-  }
-
-  _onFilterFlows({ detail }) {
-    if (this._flowFilter.includes(detail.id)) {
-      this._flowFilter = [];
-    } else {
-      this._flowFilter = [detail.id];
-    }
-  }
-
-  _getFilteredPolicies() {
-    if (this._policyFilter.length > 0) {
-      return this.policies.filter((policy) => {
-        return (
-          (policy.onRequest && this._policyFilter.includes('onRequest')) || (policy.onResponse && this._policyFilter.includes('onResponse'))
-        );
-      });
-    }
-    return this.policies;
-  }
-
-  _onFilterPolicies({ detail }) {
-    if (this._policyFilter.includes(detail.id)) {
-      this._policyFilter = [];
-    } else {
-      this._policyFilter = [detail.id];
-    }
-  }
-
-  _renderDesign(readonlyMode) {
-    return html` <div id="design" slot="content" class="design">
-      <gv-resizable-views no-overflow>
-        <div slot="top">${this._renderFlow(0, true, readonlyMode)}</div>
-
-        <div slot="bottom">
-          ${this._renderFlow(1, false, readonlyMode)} ${this._renderPolicy(readonlyMode)} ${this._renderFlowForm(readonlyMode)}
-        </div>
-      </gv-resizable-views>
-      ${readonlyMode !== true
-        ? html`<gv-policy-studio-menu
-            class="right-menu"
-            ?disabled="${this._currentAskConfirmation}"
-            .policies="${this._getFilteredPolicies()}"
-            .selectedIds="${[this._currentPolicyId]}"
-            .query="${this._searchPolicyQuery}"
-            ?has-policy-filter="${this._policyFilterOptions != null}"
-            ?readonly="${readonlyMode}"
-            @gv-policy-studio-menu:target-policy="${this._onTargetPolicy}"
-            @gv-policy-studio-menu:fetch-documentation="${this._onOpenDocumentationFromMenu}"
-            @gv-policy-studio-menu:dragend-policy="${this._onDragEndPolicy}"
-          >
-            <div slot="header" class="search-policies">
-              ${this._policyFilterOptions != null
-                ? html`<gv-option
-                    ?disabled="${this._currentAskConfirmation}"
-                    .options="${this._policyFilterOptions}"
-                    multiple
-                    outlined
-                    .value="${this._policyFilter}"
-                    small
-                    @gv-option:select="${this._onFilterPolicies}"
-                  ></gv-option>`
-                : ''}
-              <gv-input
-                id="search-policy"
-                ?disabled="${this._currentAskConfirmation}"
-                placeholder="Filter policies (Shift + Ctrl + Space)"
-                type="search"
-                small
-                @gv-input:input="${this._onSearchPolicy}"
-                @gv-input:clear="${this._onClearPolicy}"
-              ></gv-input>
-            </div>
-          </gv-policy-studio-menu>`
-        : ''}
-    </div>`;
-  }
-
-  _renderDebug() {
-    const response = this.debugResponse ? this.debugResponse.response : undefined;
-    const isLoading = this.debugResponse ? this.debugResponse.isLoading : undefined;
-    const path = this.debugResponse && this.debugResponse.request ? this.debugResponse.request.path : undefined;
-    const method = this.debugResponse && this.debugResponse.request ? this.debugResponse.request.method : undefined;
-    return html`<gv-http-client
-      id="debug"
-      slot="content"
-      class="debug"
-      @gv-http-client:send="${this._onDebug}"
-      .response="${response}"
-      .path="${path}"
-      .method="${method}"
-      ?loading="${isLoading}"
-    >
-    </gv-http-client>`;
-  }
-
-  _renderConfigurationForm(readonlyMode) {
-    if (this.configurationSchema) {
-      const values = deepClone(this._definition);
-      return html` <div id="settings" slot="content" class="api-settings" @dragover="${this._onDesign}">
-        <gv-schema-form
-          .schema="${this.configurationSchema}"
-          id="api-settings-form"
-          .values="${values}"
-          has-header
-          has-footer
-          scrollable
-          ?readonly="${readonlyMode}"
-          @gv-schema-form:cancel="${this._onCancelFlowMode}"
-          @gv-schema-form:submit="${this._onSubmitFlowMode}"
-        >
-          ${!this.configurationInformation
-            ? ''
-            : html`
-                <div class="api-settings-information" slot="title">
-                  <gv-icon class="api-settings-information__icon" title="Info" shape="code:info"></gv-icon>
-                  <blockquote class="api-settings-information__blockquote">${this.configurationInformation}</blockquote>
-                </div>
-              `}
-        </gv-schema-form>
-      </div>`;
-    }
-    return html``;
-  }
-
-  _renderFlowForm(readonlyMode) {
-    if (this.flowSchema && this._flowStepSchema == null && this.documentation == null && this.selectedFlowsId.length === 1) {
-      const flow = this.getSelectedFlow();
-      if (flow) {
-        const values = deepClone(flow);
-        return html`<div slot="content" class="flow-settings">
-          <gv-schema-form
-            .schema="${this.flowSchema}"
-            id="settings-form"
-            .values="${values}"
-            has-header
-            scrollable
-            ?readonly="${readonlyMode}"
-            @gv-schema-form:cancel="${this._onCancelFlow}"
-            @gv-schema-form:submit="${this._onSubmitFlow}"
-          >
-            <div slot="title" class="flow-step__form-title">Flow configuration</div>
-          </gv-schema-form>
-        </div>`;
-      }
-    }
-  }
-
-  _onResourcesChange({ detail }) {
-    this.definition.resources = detail.resources;
-    this.isDirty = true;
-  }
-
-  _onPropertiesChange({ detail }) {
-    this.definition.properties = detail.properties;
-    this.isDirty = true;
-  }
-
-  _onSaveProvider({ detail }) {
-    this.services['dynamic-property'] = detail.provider;
-    this.isDirty = true;
-  }
-
-  _onSwitchEncryptedProperty({ detail }) {
-    this.isDirty = true;
-  }
-
-  render() {
-    const readonlyMode = this._getReadonlyModeForDesign();
-
-    return html`<div class="box">
-      <gv-policy-studio-menu
-        class="left-menu"
-        .api-name="${this._definition.name}"
-        .flows="${this.filteredFlows}"
-        .plans="${this.filteredPlans}"
-        .selectedIds="${this.selectedFlowsId}"
-        ?disabled="${this._currentAskConfirmation}"
-        ?sortable="${this.sortable && this.readonly !== true}"
-        ?readonly="${this.readonly}"
-        ?readonlyPlans="${this.readonlyPlans}"
-        flows-title="${this.flowsTitle}"
-        .query="${this._searchFlowQuery}"
-        ?can-add="${this.canAdd && !this.readonly}"
-        @gv-policy-studio-menu:reorder-flows="${this._onReorderFlows}"
-        @gv-policy-studio-menu:change-flow-state="${this._onChangeFlowState}"
-        @gv-policy-studio-menu:add-flow="${this._onAddFlow}"
-        @gv-policy-studio-menu:add-flow-plan="${this._onAddFlowPlan}"
-        @gv-policy-studio-menu:delete-flow="${this._onDeleteFlow}"
-        @gv-policy-studio-menu:duplicate-flow="${this._onDuplicateFlow}"
-        @gv-policy-studio-menu:select-flows="${this._onSelectFlows}"
-      >
-        <div slot="header" class="header-actions">
-          <div class="title">${this._definition.name}</div>
-          ${this._flowFilterOptions != null
-            ? html`<gv-option
-                ?disabled="${this._currentAskConfirmation}"
-                .options="${this._flowFilterOptions}"
-                multiple
-                outlined
-                .value="${this._flowFilter}"
-                small
-                @gv-option:select="${this._onFilterFlows}"
-              ></gv-option>`
-            : ''}
-          <gv-input
-            ?disabled="${this._currentAskConfirmation}"
-            id="search-flow"
-            placeholder="Filter flows (Ctrl + Space)"
-            type="search"
-            small
-            @gv-input:input="${this._onSearchFlows}"
-            @gv-input:clear="${this._onClearFlows}"
-          ></gv-input>
-        </div>
-
-        ${this.readonly !== true
-          ? html` <div slot="footer" class="footer-actions">
-              <gv-button
-                class="btn-large"
-                .disabled="${!this.isDirty || this._currentAskConfirmation}"
-                @gv-button:click="${this._onSaveAll}"
-                >Save</gv-button
-              >
-              <gv-button link .disabled="${!this.isDirty || this._currentAskConfirmation}" @gv-button:click="${this._onResetAll}"
-                >Reset</gv-button
-              >
-            </div>`
-          : ''}
-      </gv-policy-studio-menu>
-
-      <gv-tabs
-        .value="${this.tabId}"
-        .options="${this._tabs}"
-        .disabled="${this._currentAskConfirmation}"
-        @gv-tabs:change="${this._onChangeTab}"
-        .validator="${this._changeTabValidator.bind(this)}"
-      >
-        ${this._renderDesign(readonlyMode)} ${this._renderConfigurationForm(readonlyMode)} ${this._renderDebug()}
-        <gv-properties
-          id="properties"
-          slot="content"
-          class="properties"
-          .provider="${this.services['dynamic-property']}"
-          @gv-properties:change="${this._onPropertiesChange}"
-          @gv-properties:save-provider="${this._onSaveProvider}"
-          @gv-properties:switch-encrypted="${this._onSwitchEncryptedProperty}"
-          ?readonly="${readonlyMode}"
-          encryptable="true"
-          .properties="${this.definedProperties}"
-          .providers="${this.propertyProviders}"
-          .dynamicPropertySchema="${this.dynamicPropertySchema}"
-        ></gv-properties>
-        <gv-resources
-          id="resources"
-          slot="content"
-          class="resources"
-          @gv-resources:change="${this._onResourcesChange}"
-          ?readonly="${readonlyMode}"
-          .resources="${this.definedResources}"
-          .types="${this.resourceTypes}"
-        ></gv-resources>
-      </gv-tabs>
-    </div>`;
-  }
-
-  /**
-   * Determine if the design view should be in readonly mode or not
-   * It is in readonly mode if:
-   *  the readonly attribute is set to true
-   *  OR
-   *  the main selected flow belongs to a plan and the readonly-plans attribute is set to true
-   *  OR
-   *  the second flow for comparison belongs to a plan and the readonly-plans attribute is set to true
-   * @returns {boolean|*|{type: BooleanConstructor}|{attribute: string, type: BooleanConstructor}|{type: *}|{attribute: string, type: *}}
-   * @private
-   */
-  _getReadonlyModeForDesign() {
-    if (this.readonly) {
-      return true;
-    }
-
-    const flow = this.getSelectedFlow(0);
-    if (!flow) {
-      return false;
-    }
-
-    const { plan: flowPlan } = this._findFlowCollection(flow._id);
-    const readonlyMode = flowPlan && this.readonlyPlans;
-    if (readonlyMode) {
-      return true;
-    }
-
-    const comparedFlow = this.getSelectedFlow(1);
-    if (!comparedFlow) {
-      return false;
-    }
-
-    const { plan: comparedFlowPlan } = this._findFlowCollection(comparedFlow._id);
-    return comparedFlowPlan && this.readonlyPlans;
-  }
-}
-
-window.customElements.define('gv-policy-studio', GvPolicyStudio);
+var e=Object.create?function(e,t,i,o){void 0===o&&(o=i),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},i=function(i){if(i&&i.__esModule)return i;var o={};if(null!=i)for(var s in i)"default"!==s&&Object.prototype.hasOwnProperty.call(i,s)&&e(o,i,s);return t(o,i),o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvPolicyStudio=void 0;const o=require("lit"),s=require("../lib/studio"),n=require("../lib/events"),r=require("../lib/i18n");require("../atoms/gv-button"),require("../atoms/gv-icon"),require("../molecules/gv-option"),require("../organisms/gv-documentation"),require("../organisms/gv-resizable-views"),require("../organisms/gv-schema-form"),require("../organisms/gv-http-client"),require("../organisms/gv-tabs"),require("../molecules/gv-row"),require("./gv-flow"),require("./gv-flow-step"),require("./gv-policy-studio-menu");const l=require("../styles/empty"),a=require("lit/directives/cache"),d=require("../lib/utils"),c=require("../mixins/keyboard-element");class h extends((0,c.KeyboardElement)(o.LitElement)){static get properties(){return{policies:{type:Array},services:{type:Object},resourceTypes:{type:Array,attribute:"resource-types"},propertyProviders:{type:Array,attribute:"property-providers"},dynamicPropertySchema:{type:Object,attribute:"dynamic-property-schema"},tabId:{type:String,attribute:"tab-id"},_tabId:{type:String,attribute:!1},definition:{type:Object},_definition:{type:Object,attribute:!1},documentation:{type:Object},flowSchema:{type:Object,attribute:"flow-schema"},configurationSchema:{type:Object,attribute:"configuration-schema"},_configurationSchema:{type:Object,attribute:!1},configurationInformation:{type:String,attribute:"configuration-information"},isDirty:{type:Boolean,attribute:"dirty",reflect:!0},_dragPolicy:{type:Object,attribute:!1},_dropPolicy:{type:Object,attribute:!1},selectedFlowsId:{type:Array,attribute:"selected-flows-id"},_selectedFlowsId:{type:Array,attribute:!1},_currentPolicyId:{type:String,attribute:!1},_searchPolicyQuery:{type:String,attribute:!1},_searchFlowQuery:{type:String,attribute:!1},_flowStepSchema:{type:Object,attribute:!1},_currentFlowStep:{type:Object,attribute:!1},_policyFilter:{type:Array,attribute:!1},_flowFilter:{type:Array,attribute:!1},_currentAskConfirmation:{type:Boolean,attribute:!1},hasProperties:{type:Boolean,attribute:"has-properties"},_hasProperties:{type:Boolean,attribute:!1},hasResources:{type:Boolean,attribute:"has-resources"},hasPolicyFilter:{type:Boolean,attribute:"has-policy-filter"},flowsTitle:{type:String,attribute:"flows-title"},sortable:{type:Boolean},canAdd:{type:Boolean,attribute:"can-add"},readonly:{type:Boolean},readonlyPlans:{type:Boolean,attribute:"readonly-plans"},canDebug:{type:Boolean,attribute:"can-debug"},_canDebug:{type:Boolean,attribute:!1},debugResponse:{type:Object,attribute:"debug-response"},hasConditionalSteps:{type:Boolean,attribute:"has-conditional-steps"}}}static get styles(){return[l.empty,s.methods,o.css`:host{box-sizing:border-box;--height:var(--gv-policy-studio--h, calc(100vh - 32px));height:var(--height);--height-in-tabs:calc(var(--height) - 25px)}.box{height:var(--height);display:flex}.design,.properties{display:flex}gv-resizable-views{width:100%}.editable-name{padding:.5rem 1rem;font-size:16px}.editable-name span{color:#bfbfbf;font-size:12px}.form__control{margin:.5rem}gv-input{width:100%}.flow-name{display:flex;align-items:center}.flow-name.dirty{font-style:italic;opacity:.8}.flow-name gv-icon{--gv-icon--s:24px;margin-right:.2rem}.flow-path{margin-left:.2rem}.title_methods{margin-left:.5rem}.two-cols{display:flex;width:100%;height:100%}.two-cols>*{flex:1}.left-menu{border-left:1px solid #d9d9d9;height:var(--height-in-tabs)}.right-menu{border-right:1px solid #d9d9d9;height:var(--height-in-tabs)}.two-cols>:first-child{border-right:1px solid #d9d9d9}.flow-step__container{overflow:hidden;position:relative;overflow:hidden;height:99%}.flow-step__form{padding:0 .5rem;overflow:auto}.flow-step__form-title{text-transform:uppercase;letter-spacing:.2rem}gv-tabs{width:100%;height:100%;display:inline-block}gv-properties,gv-resizable-views,gv-resources{height:var(--height-in-tabs)}gv-properties,gv-resources{width:100%}gv-properties.properties{--gv-properties-table--colmg:10px}.api-settings{display:flex;flex-direction:column;border-left:1px solid #bfbfbf;height:var(--height-in-tabs)}.debug{display:flex;flex-direction:column;border-left:1px solid #bfbfbf;height:var(--height-in-tabs)}.api-settings-information{display:flex;align-items:center}.api-settings-information__icon{--gv-icon--c:var(--gv-theme-color, #5a7684);--gv-icon-opacity--c:var(--gv-theme-color-info-light, #64b5f6)}.api-settings-information__blockquote,.debug-information__blockquote{border-left:1px solid var(--gv-theme-color,#5a7684);margin:15px;padding-left:15px;font-size:14px}.flow-settings gv-schema-form{flex:1;padding:.5rem}.search{display:flex;justify-content:stretch}gv-input{margin:.2rem 0;width:100%}.header-actions,.search-policies{display:flex;flex-direction:column;align-items:center;margin:.5rem}.search-policies{margin:1.5rem .5rem .5rem}.footer-actions>gv-button.btn-large,.footer-actions>gv-option{width:100%}.footer-actions{display:flex;flex-direction:column;align-items:center;padding:.5rem 0;margin:.5rem 15px;border-top:1px solid #bfbfbf}.header-actions .title{text-transform:uppercase;text-align:center;letter-spacing:.3rem;color:#bfbfbf;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:240px;min-height:25px}.header-actions>*,.search-policies>*{margin-bottom:1rem}`]}constructor(){super(),this.isDirty=!1,this.policies=[],this.resourceTypes=[],this.tabId="design",this.selectedFlowsId=[],this.flowsTitle="Flows",this.sortable=!1,this.services={},this._definition={flows:[]},this._tabs=[{id:"design",title:"Design",icon:"navigation:exchange"}],this._policyFilter=[],this._flowFilter=[]}set hasProperties(e){e&&Promise.resolve().then((()=>i(require("../organisms/gv-properties")))).then((()=>{this._tabs=[...this._tabs,{id:"properties",title:"Properties",icon:"general:settings#1"}],this.requestUpdate()})),this._hasProperties=e}get hasProperties(){return this._hasProperties}set hasResources(e){e&&Promise.resolve().then((()=>i(require("../organisms/gv-resources")))).then((()=>{this._tabs=[...this._tabs,{id:"resources",title:"Resources",icon:"general:settings#5"}],this.requestUpdate()}))}set canDebug(e){e&&(this._tabs=[...this._tabs,{id:"debug",title:"Try it",icon:"content:send"}])}get _flowFilterOptions(){if(this.definedPlans.length>0)return[{id:"api",title:"Api",icon:"shopping:box#3"},{id:"plan",title:"Plans",icon:"shopping:sale#2"}]}set hasPolicyFilter(e){e&&(this._policyFilterOptions=[{id:"onRequest",title:"Request",icon:"navigation:arrow-from-left"},{id:"onResponse",title:"Response",icon:"navigation:arrow-from-right"}])}set configurationSchema(e){e&&this._tabs.splice(1,0,{id:"settings",title:"Configuration",icon:"general:settings#2"}),this._configurationSchema=e}get configurationSchema(){return this._configurationSchema}onKeyboard(){if(null==this._currentAskConfirmation)if(this.isPressed(c.KEYS.Shift,c.KEYS.Ctrl,c.KEYS.Space)){const e=this.shadowRoot.querySelector("#search-policy");e&&e.focus()}else if(this.isPressed(c.KEYS.Ctrl,c.KEYS.Space)){const e=this.shadowRoot.querySelector("#search-flow");e&&e.focus()}}set tabId(e){null!=e&&["design","settings","properties","resources","debug"].includes(e)?this._tabId=e:this._tabId="design"}get tabId(){return this._tabId}set definition(e){if(e){const t=this._generateFlowsId(e.flows),i=this._generateId("resource-",e.resources),o=null==e.plans?[]:e.plans.map((e=>({...e,flows:this._generatePlanFlowsId(e)})));this._initialDefinition={...e,flows:t,resources:i,plans:o},this._definition=(0,d.deepClone)(this._initialDefinition),this.isDirty=!1,this._selectFirstFlow()}}get definition(){return this._definition}set selectedFlowsId(e){null!=e&&Array.isArray(e)&&(this._selectedFlowsId=e.filter((e=>null!=this._findFlowById(e))),e.length!==this._selectedFlowsId.length&&this._selectFirstFlow(!0))}get selectedFlowsId(){return this._selectedFlowsId.filter((e=>null!=this._findFlowById(e)))}_updateSelectedFlows(e){this.selectedFlowsId=e,(0,n.dispatchCustomEvent)(this,"select-flows",{flows:this.selectedFlowsId})}_selectFirstFlow(e=!1){if(0===this.selectedFlowsId.length){let t=null;if(this.definedFlows.length>0&&null!=this.definedFlows[0]._id)t=this.definedFlows[0];else if(this.definedPlans.length>0){const e=this.definedPlans.find((e=>null!=e.flows&&e.flows.length>0&&null!=e.flows[0]._id));e&&(t=e.flows[0])}null!=t&&(e?this._updateSelectedFlows([t._id]):this.selectedFlowsId=[t._id])}}_getFlowElement(e){return this.shadowRoot.querySelector(`[id="${e}"]`)}_onDragEndPolicy(){this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.onDragEnd()))}async _onDropPolicy({detail:e}){try{await this._askToValidateForms();const t=e.policy,i=this._findFlowById(e.flowId);let o,s=t.name,n="",r="",l={},a=!1;e.flowStep?(o=e.flowStep._id,s=e.flowStep.name,n=e.flowStep.description||"",r=e.flowStep.condition||"",l=e.flowStep.configuration):(o=this._generateFlowStepId(i._id,e.flowKey,e.position),a=!0);const d={_id:o,_new:a,name:s,policy:t.id,description:n,condition:r,enabled:!0,configuration:l},c=null!=e.sourceFlowId?this._findFlowById(e.sourceFlowId):i;if(null!=e.sourcePosition){if(e.sourceFlowKey&&e.sourceFlowKey!==e.flowKey){if(c[e.sourceFlowKey].splice(e.sourcePosition,1),i[e.flowKey].splice(e.position,0,d),null!=this._currentFlowStep&&this._currentFlowStep.step._id===o){this._currentFlowStep.group=e.flowKey;const t=this.buildSchema(this._currentFlowStep.policy);await this._setCurrentFlowStep(this._currentFlowStep,t,!0),this._getFlowElement(i._id).requestUpdate()}}else e.position>e.sourcePosition?(i[e.flowKey].splice(e.position,0,d),c[e.flowKey].splice(e.sourcePosition,1)):(c[e.flowKey].splice(e.sourcePosition,1),i[e.flowKey].splice(e.position,0,d));i._id!==c._id&&this._getFlowElement(i._id).requestUpdate()}else{i[e.flowKey].splice(e.position,0,d);const o=this._getFlowStepForm();if(null==o||!0!==o.dirty){let o=i[e.flowKey][e.position];null==o&&(o=i[e.flowKey][e.position-1]),!0!==e.cancelEdit&&setTimeout((async()=>{await this._editFlowStep({step:o,policy:t,flow:i,group:e.flowKey}),this.updateComplete.then((()=>{const e=this._getFlowElement(i._id);e.selectedStepId=o._id,e.requestUpdate()}))}))}}i._dirty=!0,c._dirty=!0,this.isDirty=!0,this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.removeCandidate())),setTimeout((()=>{this._dragPolicy=null,this._dropPolicy=null}),0)}catch(e){this._currentAskConfirmation=null}}_onDeletePolicy({detail:e}){const t=this._findFlowById(e.flowId);t[e.flowKey].splice(e.position,1),t._dirty=!0,this.isDirty=!0,e.target.editing&&this._closeFlowStepForm(!0),this._getFlowElement(e.flowId).requestUpdate()}_onDesign(){this._changeTab("design"),this._splitMainViews()}buildSchema({schema:e}){const t={title:"Description",description:"Description of flow step",type:"string"},i={title:"Condition",description:"Condition the execution of the flow step (support EL)",type:"string","x-schema-form":{"expression-language":!0}};if(e){const o="string"==typeof e?JSON.parse(e):e,s={commonDescription:t,...this.hasConditionalSteps?{commonCondition:i}:{},...o.properties};return{...o,properties:s}}return{properties:{commonDescription:t,...this.hasConditionalSteps?{commonCondition:i}:{}}}}async _editFlowStep({step:e,flow:t,policy:i,group:o}){if(e){this._currentPolicyId=i.id;const s={flow:t,step:e,policy:i,group:o},n=this.buildSchema(i);try{await this._setCurrentFlowStep(s,n),this._updateSelectedFlows([t._id]),this._splitMainViews(),null==localStorage.getItem("gv-policy-studio:keep-documentation-close")&&this._onOpenDocumentation()}catch(e){this._currentAskConfirmation=null}}else await this._closeFlowStepForm(),this._maximizeTopView()}async _onEditFlowStep({detail:{step:e,flow:t,policy:i,group:o}}){return this._editFlowStep({step:e,flow:t,policy:i,group:o})}_getResizableViews(){return this.shadowRoot.querySelector("gv-resizable-views")}_maximizeTopView(){this.selectedFlowsId.length<=1&&this._getResizableViews().maximizeTop()}_maximizeBottomView(){this._getResizableViews().maximizeBottom()}_splitMainViews(){this._getResizableViews().split()}_onChangeFlowStepState({detail:e}){const t=this._findFlowById(e.flowId);t[e.flowKey][e.position].enabled=e.enabled,t._dirty=!0,this.isDirty=!0}async _onCloseFlowStepForm(){try{await this._closeFlowStepForm()}catch(e){this._currentAskConfirmation=null}}async _closeFlowStepForm(e=!1){await this._setCurrentFlowStep(null,null,e)}async _askToValidateForms(){if(null==this._currentAskConfirmation)return this._currentAskConfirmation=!0,Promise.all(this._submitOrConfirmForms()).then((e=>e.filter((e=>null!=e)).length>0?(this._definition=this._buildDefinitionToSave(),this.getChildren().forEach((e=>e.requestUpdate())),this._checkCurrentFlowStep().then((()=>(this.getChildren().forEach((e=>e.requestUpdate())),this.updateComplete.then((()=>(this._currentAskConfirmation=null,e))))))):(this._currentAskConfirmation=null,e)));throw new Error("ask already waiting")}async _setCurrentFlowStep(e,t,i=!1){i||await this._askToValidateForms();const o=(0,d.deepClone)(t);if(null!=e){const i="string"==typeof e.step.configuration?JSON.parse(e.step.configuration):e.step.configuration,s={...e.step,configuration:i},n={...s.configuration,commonDescription:s.description,commonCondition:s.condition};if(this._currentFlowStep={...e,step:s,_initialValues:n},t&&t.properties.scope){const e=o.properties.scope.enum;if(null!=e.find((e=>["REQUEST","REQUEST_CONTENT","RESPONSE","RESPONSE_CONTENT"].includes(e)))){const t="pre"===this._currentFlowStep.group?["REQUEST","REQUEST_CONTENT"]:["RESPONSE","RESPONSE_CONTENT"];o.properties.scope.enum=e.filter((e=>t.includes(e)));const i=this._currentFlowStep.step.configuration.scope;null!=i&&o.properties.scope.enum.includes(i)||(o.properties.scope.default=o.properties.scope.enum[0],this._currentFlowStep.step.configuration.scope=o.properties.scope.enum[0],this._currentFlowStep._initialValues.scope=o.properties.scope.enum[0],this._currentFlowStep._values&&(this._currentFlowStep._values.scope=o.properties.scope.enum[0]))}}}else this._currentFlowStep=null;this._flowStepSchema=o}_refresh(e=!0){e&&this._closeFlowStepForm(!0),this._definition=(0,d.deepClone)(this._definition)}async _onSelectFlows({detail:e}){try{await this._closeFlowStepForm(),this._onCloseDocumentation(),this._updateSelectedFlows(e.flows),this._onDesign()}catch(e){this._currentAskConfirmation=null}}async _onOpenDocumentationFromMenu({detail:{policy:e}}){try{null!=this.documentation&&this.documentation.id===e.id||(await this._closeFlowStepForm(),this._currentPolicyId=e.id,this.getSelectedFlow()?this._splitMainViews():this._maximizeBottomView(),(0,n.dispatchCustomEvent)(this,"fetch-documentation",{policy:e}))}catch(e){}}_fetchDocumentation(e){null!=this.documentation&&this.documentation.id===e.id||(0,n.dispatchCustomEvent)(this,"fetch-documentation",{policy:e})}_onOpenDocumentation(){this._currentFlowStep&&this._currentFlowStep.policy&&this._fetchDocumentation(this._currentFlowStep.policy)}_onOpenDocumentationFromForm(){localStorage.removeItem("gv-policy-studio:keep-documentation-close"),this._onOpenDocumentation()}_findFlowCollection(e){const t=this.definedPlans.find((t=>null!=t.flows.find((t=>t._id===e))));return{plan:t,flows:null!=t?t.flows:this.definedFlows}}_findFlowById(e){let t=this.definedFlows.find((t=>t._id===e));if(null==t){t=this.definedPlans.map((e=>e.flows)).reduce(((e,t)=>e.concat(t)),[]).find((t=>t._id===e))}return t}getSelectedFlow(e=0){const t=this.selectedFlowsId[e];return this._findFlowById(t)}_onTargetPolicy({detail:e}){null==this._currentAskConfirmation&&(this._dragPolicy=e)}_onChangeFlowStep({detail:e}){this._currentFlowStep._values=e.values}_writeFlowStep(e){const{commonDescription:t,commonCondition:i,...o}=e;if(this._currentFlowStep.step._new||this._currentFlowStep.step.description!==t||this._currentFlowStep.step.condition!==i||!(0,d.deepEqual)(this._currentFlowStep.step.configuration,o)){const e=this._findFlowById(this._currentFlowStep.flow._id),s=e[this._currentFlowStep.group].findIndex((e=>e._id===this._currentFlowStep.step._id));e[this._currentFlowStep.group][s].description=t,e[this._currentFlowStep.group][s].condition=i,e[this._currentFlowStep.group][s].configuration=(0,d.deepClone)(o),delete e[this._currentFlowStep.group][s]._new,e[this._currentFlowStep.group][s]._dirty=!0,e._dirty=!0,this.isDirty=!0,this._currentFlowStep.flow=e,this._currentFlowStep.step=e[this._currentFlowStep.group][s]}}async _onSubmitFlowStep({detail:e}){this._writeFlowStep(e.values),await this.requestUpdate("_definition"),this.getChildren().forEach((e=>e.requestUpdate()))}_onCancelFlow(){this._onDesign()}_onSubmitFlow({detail:{values:e}}){const t=this.getSelectedFlow(),i=Object.assign({},this._createFlowFromSchema(),e),o=Object.assign({},t,i);(0,d.deepEqual)(t,o)||(Object.assign(t,o,{_dirty:!0}),this.isDirty=!0,this._refresh())}_onCancelFlowMode(){this._onDesign()}_onSubmitFlowMode({detail:{values:e}}){this._definition["flow-mode"]=e["flow-mode"]||"DEFAULT",this.isDirty=!0,this._refresh()}_onChangeTab({detail:e}){this._changeTab(e.value)}async _changeTabValidator({from:e,to:t}){if("properties"===e){const e=this.shadowRoot.querySelector("gv-properties");if(e.dirty)return e.confirm()}else if("resources"===e){const e=this.shadowRoot.querySelector("gv-resources");if(e.dirty)return e.confirm()}else try{return await this._askToValidateForms()}catch(e){throw this._currentAskConfirmation=null,e}return Promise.resolve()}_changeTab(e){null==this._currentAskConfirmation&&(this.tabId=e,(0,n.dispatchCustomEvent)(this,"change-tab",this.tabId))}_onDragStartFlowStep(e,{detail:t}){null==this._currentAskConfirmation&&(this._dropPolicy=t,this._dragPolicy=t)}_renderFlowEmptyState(e){return o.html`<div slot="content" class="empty"><div>Select a flow ${!0!==e?o.html`or<gv-button @gv-button:click="${this._onAddFlow}" outlined icon="code:plus" large>design new one</gv-button>`:""}</div></div>`}_renderFlow(e=0,t=!0,i){const s=this.getSelectedFlow(e);if(s){const{plan:e}=this._findFlowCollection(s._id),t=this._currentFlowStep?this._currentFlowStep.step._id:null;return o.html`<gv-flow style="height:100%" .id="${s._id}" .flow="${s}" .plan="${e}" .policies="${this.policies}" slot="content" ?disabled="${this._currentAskConfirmation}" .dragPolicy="${this._dragPolicy}" .dropPolicy="${this._dropPolicy}" .selectedStepId="${t}" ?readonly="${i}" ?has-policy-filter="${null!=this._policyFilterOptions}" flows-title="${this.flowsTitle}" @gv-flow:drag-start="${this._onDragStartFlowStep.bind(this,s)}" @gv-flow:edit="${this._onEditFlowStep}" @gv-flow:change-state="${this._onChangeFlowStepState}" @gv-flow:drop="${this._onDropPolicy}" @gv-flow:delete="${this._onDeletePolicy}"></gv-flow>`}return t?this._renderFlowEmptyState(i):o.html``}_onFetchResources(e){const{currentTarget:t,regexTypes:i}=e.detail,o=this.definedResources.filter((e=>null==i||new RegExp(i).test(e.type))).map(((e,t)=>{const i=this.resourceTypes.find((t=>t.id===e.type)),o=document.createElement("gv-row"),s=i.icon?i.icon:null;return o.item={picture:s,name:e.name},{element:o,value:e.name,id:e.type}}));t.options=o}_renderPolicy(e){return this._flowStepSchema&&this.documentation?o.html`<gv-resizable-views direction="horizontal" no-overflow><div slot="top">${this._renderFlowStepForm(e)}</div><div slot="bottom"><gv-documentation .text="${this.documentation.content}" .image="${this.documentation.image}" ?disabled="${this._currentAskConfirmation}" @gv-documentation:close="${this._onCloseDocumentation}"></gv-documentation></div></gv-resizable-views>`:this.documentation?o.html`<gv-documentation .text="${this.documentation.content}" .image="${this.documentation.image}" ?disabled="${this._currentAskConfirmation}" @gv-documentation:close="${this._onCloseDocumentation}"></gv-documentation>`:this._flowStepSchema?this._renderFlowStepForm(e):o.html``}_getFlowStepForm(){return this.shadowRoot.querySelector("#flow-step-form")}_onResetFlowStep(){this._currentFlowStep&&(delete this._currentFlowStep._values,this._getFlowStepForm().reset())}_generateFlowsId(e,t=!1){return this._generateId("f",e,t,!0)}_generatePlanFlowsId(e,t=!1){return this._generateId(e.id,e.flows,t,!0)}_generateFlowStepId(e,t,i){return`${e}_${t}_${i}`}_generateId(e,t,i=!1,o=!1){return t?t.map(((t,s)=>{const n=`${e}_${s}`;return o&&(t.pre&&t.pre.forEach(((e,t)=>e._id=this._generateFlowStepId(n,"pre",t))),t.post&&t.post.forEach(((e,t)=>e._id=this._generateFlowStepId(n,"post",t)))),i||null==t._id?{...t,_id:n}:t})):t}getChildren(){return[...Array.from(this.shadowRoot.querySelectorAll("gv-flow")),...Array.from(this.shadowRoot.querySelectorAll("gv-resizable-views"))]}async getUpdateComplete(){await super.getUpdateComplete(),await Promise.all(this.getChildren().map((e=>e.updateComplete)))}shouldUpdate(e){return e.has("_dragPolicy")?(this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.dragPolicy=this._dragPolicy)),!1):e.has("_dropPolicy")?(this.shadowRoot.querySelectorAll("gv-flow").forEach((e=>e.dropPolicy=this._dropPolicy)),!1):super.shouldUpdate(e)}updated(e){e.has("documentation")&&null!=this.documentation&&this.selectedFlowsId.length>1&&this._updateSelectedFlows([this.selectedFlowsId[0]])}_renderFlowStepForm(e){const t=this._currentFlowStep._values||this._currentFlowStep._initialValues,i=[{items:["commonDescription","commonCondition"]},{name:(0,r.i18n)("gv-policy-studio.policy-settings"),default:!0}];return o.html`${(0,a.cache)(this._flowStepSchema&&this._currentFlowStep?o.html`<div class="flow-step__container"><div class="flow-step__form"><gv-schema-form .id="${"flow-step-form"}" .schema="${this._flowStepSchema}" .icon="design:edit" has-header validate-on-render .values="${t}" .dirty="${null!=this._currentFlowStep._values}" ?readonly="${e}" scrollable .groups="${i}" @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" outlined small @gv-button:click="${this._onCloseFlowStepForm}" title="Close"></gv-button><gv-button slot="header-left" icon="home:book" ?disabled="${null!=this.documentation}" outlined small @gv-button:click="${this._onOpenDocumentationFromForm}" title="Open documentation"></gv-button></gv-schema-form></div></div>`:"")}`}_onCloseDocumentation(){this.documentation=null,null==this._currentFlowStep?this._maximizeTopView():localStorage.setItem("gv-policy-studio:keep-documentation-close",!0)}_onDeleteFlow({detail:e}){const t=e.content._id,{flows:i}=this._findFlowCollection(t),o=i.find((e=>e._id===t));this._deleteFlow(i,o)}get definedFlows(){return this._definition&&this._definition.flows?this._definition.flows:[]}get definedPlans(){return this._definition&&this._definition.plans?this._definition.plans:[]}get definedResources(){return this._definition&&this._definition.resources?this._definition.resources:[]}get definedProperties(){return this._definition&&this._definition.properties?this._definition.properties:[]}async _onDuplicateFlow({detail:e}){try{await this._askToValidateForms();const t=e.content._id,{plan:i,flows:o}=this._findFlowCollection(t);if(this._addFlow(o,this._findFlowById(t)),null!=i){let e=null;this.definedPlans.find(((t,o)=>t.id===i.id&&(e=o,!0))),i.flows=o,this.definedPlans[e].flows=this._generatePlanFlowsId(i,!0),this._updateSelectedFlows([this.definedPlans[e].flows[o.length-1]._id])}else this._definition.flows=this._generateFlowsId(this._definition.flows),this._updateSelectedFlows([this._definition.flows[this._definition.flows.length-1]._id])}catch(e){this._currentAskConfirmation=null}}_onChangeFlowState({detail:e}){const t=this._findFlowById(e.content._id);t.enabled=e.enabled,t._dirty=!0,this.isDirty=!0}async _onAddFlowPlan({detail:e}){try{await this._askToValidateForms(),this._addFlow(this.definedPlans[e.planIndex].flows),this.definedPlans[e.planIndex].flows=this._generatePlanFlowsId(this.definedPlans[e.planIndex]),this._updateSelectedFlows([this.definedPlans[e.planIndex].flows[this.definedPlans[e.planIndex].flows.length-1]._id])}catch(e){this._currentAskConfirmation=null}}async _onAddFlow(){try{await this._askToValidateForms(),this._addFlow(this._definition.flows),this._definition.flows=this._generateFlowsId(this._definition.flows),this._updateSelectedFlows([this._definition.flows[this._definition.flows.length-1]._id])}catch(e){this._currentAskConfirmation=null}}_addFlow(e,t=null){const i=null==t?this._createFlowFromSchema():{...t,_id:null,id:null,_dirty:!0};return e.push(i),this.isDirty=!0,e}_createFlowFromSchema(){return this._instantiate(this.flowSchema.properties,{name:"",pre:[],post:[],_dirty:!0})}_instantiate(e,t={}){const i={...t};if(e)for(const o of Object.keys(e)){const s=e[o];"object"===s.type&&(i[o]=this._instantiate(s.properties,t={})),void 0!==s.default?i[o]=s.default:"string"===s.type&&(i[o]="")}return i}_deleteFlow(e,t){const i=e.indexOf(t);e.splice(i,1);const o=this.selectedFlowsId.filter((e=>e!==t._id));1===o.length?this._updateSelectedFlows(o):this._selectFirstFlow(!0),this._changeTab("design"),this._refresh(),this.isDirty=!0}_findFlowIndex(e,t){let i=null;return e.find(((e,o)=>e._id===t&&(i=o,!0))),i}async _onReorderFlows({detail:{plan:e}}){try{if(await this._askToValidateForms(),this.isDirty=!0,null!=e){const t=this._generatePlanFlowsId(e,!0);this.selectedFlowsId&&this._updateSelectedFlows(this.selectedFlowsId.map((i=>{const o=this._findFlowIndex(e.flows,i);return null!=o?t[o]._id:i}))),e.flows=t}else{const e=this._generateFlowsId(this._definition.flows,!0);this.selectedFlowsId&&this._updateSelectedFlows(this.selectedFlowsId.map((t=>{const i=this._findFlowIndex(this._definition.flows,t);return null!=i?e[i]._id:t}))),this._definition.flows=e}}catch(e){this._currentAskConfirmation=!1}}_onSearchPolicy({detail:e}){this._searchPolicyQuery=e}_onClearPolicy(){this._searchPolicyQuery=null}_onSearchFlows({detail:e}){this._searchFlowQuery=e}_onClearFlows(){this._searchFlowQuery=null}async _onResetAll(){try{await this._closeFlowStepForm(),this.definition=(0,d.deepClone)(this._initialDefinition)}catch(e){this._currentAskConfirmation=null}}_filterNotValidStep(e){return!0!==e._new}_removePrivateProperties(e){const t={...e};return Object.keys(e).filter((e=>e.startsWith("_"))).forEach((e=>{delete t[e]})),t}_submitOrConfirmForms(){return[...this.shadowRoot.querySelectorAll("gv-schema-form")].filter((e=>{const t=e.isValid();return t?e.submit():e.dirty=!0,!t})).map((e=>e.confirm()))}getPropertiesElement(){return this.shadowRoot.querySelector("gv-properties")}async _checkCurrentFlowStep(){if(this._currentFlowStep&&this.selectedFlowsId){const e=this.selectedFlowsId.map((e=>{const t=this._findFlowById(e);return null==[...t.pre,...t.post].find((e=>e._id===this._currentFlowStep.step._id))?this._closeFlowStepForm(!0):null})).filter((e=>null!==e));return Promise.all(e)}return Promise.resolve()}saved(){this.isDirty&&(this._initialDefinition=(0,d.deepClone)(this._definitionSaved),this._definition=(0,d.deepClone)(this._definitionSaved),this._definitionSaved=null,this.isDirty=!1,this._checkCurrentFlowStep(),this.definedPlans.forEach((e=>{e.flows.forEach((e=>e._dirty=!1))})),this.definedFlows.forEach((e=>e._dirty=!1)),this.getChildren().forEach((e=>e.requestUpdate())))}_buildDefinitionToSave(){const e=this._definition.flows.map((e=>(e.pre=e.pre.filter(this._filterNotValidStep),e.post=e.post.filter(this._filterNotValidStep),e)));let t={...this._definition,flows:e};if(null!=this._definition.plans){const e=this._definition.plans.map((e=>{const t=e.flows.map((e=>(e.pre=e.pre.filter(this._filterNotValidStep),e.post=e.post.filter(this._filterNotValidStep),e)));return{...e,flows:t}}));t={...t,plans:e}}return t}_buildDefinitionToSend(e){const t=e.flows.map((e=>{const t=this._removePrivateProperties(e);return t.pre=t.pre.map(this._removePrivateProperties),t.post=t.post.map(this._removePrivateProperties),t}));let i={...this._definition,flows:t};if(null!=this._definition.plans){const t=e.plans.map((e=>{const t=e.flows.map((e=>{const t=this._removePrivateProperties(e);return t.pre=t.pre.map(this._removePrivateProperties),t.post=t.post.map(this._removePrivateProperties),t}));return{...e,flows:t}}));i={...i,plans:t}}if(null!=this._definition.properties){const e=this._definition.properties.map(this._removePrivateProperties);i={...i,properties:e}}if(null!=this._definition.resources){const e=this._definition.resources.map(this._removePrivateProperties);i={...i,resources:e}}return i}_onSaveAll(){this.hasProperties&&this.getPropertiesElement().submit(),Promise.all(this._submitOrConfirmForms()).then((()=>{this._definitionSaved=this._buildDefinitionToSave();const e=this._buildDefinitionToSend(this._definitionSaved);(0,n.dispatchCustomEvent)(this,"save",{definition:e,services:this.services})})).catch((e=>{console.error("[policy-studio] Error on save",e)}))}_onDebug(e){this.hasProperties&&this.getPropertiesElement().submit(),Promise.all(this._submitOrConfirmForms()).then((()=>{const t=this._buildDefinitionToSend(this._buildDefinitionToSave());(0,n.dispatchCustomEvent)(this,"debug",{definition:t,services:this.services,request:e.detail.request})})).catch((e=>{console.error("[policy-studio] Error on debug",e)}))}get filteredFlows(){return 0===this._flowFilter.length||this._flowFilter.includes("api")?this.definedFlows:null}get filteredPlans(){return 0===this._flowFilter.length||this._flowFilter.includes("plan")?this.definedPlans:null}_onFilterFlows({detail:e}){this._flowFilter.includes(e.id)?this._flowFilter=[]:this._flowFilter=[e.id]}_getFilteredPolicies(){return this._policyFilter.length>0?this.policies.filter((e=>e.onRequest&&this._policyFilter.includes("onRequest")||e.onResponse&&this._policyFilter.includes("onResponse"))):this.policies}_onFilterPolicies({detail:e}){this._policyFilter.includes(e.id)?this._policyFilter=[]:this._policyFilter=[e.id]}_renderDesign(e){return o.html`<div id="design" slot="content" class="design"><gv-resizable-views no-overflow><div slot="top">${this._renderFlow(0,!0,e)}</div><div slot="bottom">${this._renderFlow(1,!1,e)} ${this._renderPolicy(e)} ${this._renderFlowForm(e)}</div></gv-resizable-views>${!0!==e?o.html`<gv-policy-studio-menu class="right-menu" ?disabled="${this._currentAskConfirmation}" .policies="${this._getFilteredPolicies()}" .selectedIds="${[this._currentPolicyId]}" .query="${this._searchPolicyQuery}" ?has-policy-filter="${null!=this._policyFilterOptions}" ?readonly="${e}" @gv-policy-studio-menu:target-policy="${this._onTargetPolicy}" @gv-policy-studio-menu:fetch-documentation="${this._onOpenDocumentationFromMenu}" @gv-policy-studio-menu:dragend-policy="${this._onDragEndPolicy}"><div slot="header" class="search-policies">${null!=this._policyFilterOptions?o.html`<gv-option ?disabled="${this._currentAskConfirmation}" .options="${this._policyFilterOptions}" multiple="multiple" outlined .value="${this._policyFilter}" small @gv-option:select="${this._onFilterPolicies}"></gv-option>`:""}<gv-input id="search-policy" ?disabled="${this._currentAskConfirmation}" placeholder="Filter policies (Shift + Ctrl + Space)" type="search" small @gv-input:input="${this._onSearchPolicy}" @gv-input:clear="${this._onClearPolicy}"></gv-input></div></gv-policy-studio-menu>`:""}</div>`}_renderDebug(){const e=this.debugResponse?this.debugResponse.response:void 0,t=this.debugResponse?this.debugResponse.isLoading:void 0,i=this.debugResponse&&this.debugResponse.request?this.debugResponse.request.path:void 0,s=this.debugResponse&&this.debugResponse.request?this.debugResponse.request.method:void 0;return o.html`<gv-http-client id="debug" slot="content" class="debug" @gv-http-client:send="${this._onDebug}" .response="${e}" .path="${i}" .method="${s}" ?loading="${t}"></gv-http-client>`}_renderConfigurationForm(e){if(this.configurationSchema){const t=(0,d.deepClone)(this._definition);return o.html`<div id="settings" slot="content" class="api-settings" @dragover="${this._onDesign}"><gv-schema-form .schema="${this.configurationSchema}" id="api-settings-form" .values="${t}" has-header has-footer scrollable ?readonly="${e}" @gv-schema-form:cancel="${this._onCancelFlowMode}" @gv-schema-form:submit="${this._onSubmitFlowMode}">${this.configurationInformation?o.html`<div class="api-settings-information" slot="title"><gv-icon class="api-settings-information__icon" title="Info" shape="code:info"></gv-icon><blockquote class="api-settings-information__blockquote">${this.configurationInformation}</blockquote></div>`:""}</gv-schema-form></div>`}return o.html``}_renderFlowForm(e){if(this.flowSchema&&null==this._flowStepSchema&&null==this.documentation&&1===this.selectedFlowsId.length){const t=this.getSelectedFlow();if(t){const i=(0,d.deepClone)(t);return o.html`<div slot="content" class="flow-settings"><gv-schema-form .schema="${this.flowSchema}" id="settings-form" .values="${i}" has-header scrollable ?readonly="${e}" @gv-schema-form:cancel="${this._onCancelFlow}" @gv-schema-form:submit="${this._onSubmitFlow}"><div slot="title" class="flow-step__form-title">Flow configuration</div></gv-schema-form></div>`}}}_onResourcesChange({detail:e}){this.definition.resources=e.resources,this.isDirty=!0}_onPropertiesChange({detail:e}){this.definition.properties=e.properties,this.isDirty=!0}_onSaveProvider({detail:e}){this.services["dynamic-property"]=e.provider,this.isDirty=!0}_onSwitchEncryptedProperty({detail:e}){this.isDirty=!0}render(){const e=this._getReadonlyModeForDesign();return o.html`<div class="box"><gv-policy-studio-menu class="left-menu" .api-name="${this._definition.name}" .flows="${this.filteredFlows}" .plans="${this.filteredPlans}" .selectedIds="${this.selectedFlowsId}" ?disabled="${this._currentAskConfirmation}" ?sortable="${this.sortable&&!0!==this.readonly}" ?readonly="${this.readonly}" ?readonlyPlans="${this.readonlyPlans}" flows-title="${this.flowsTitle}" .query="${this._searchFlowQuery}" ?can-add="${this.canAdd&&!this.readonly}" @gv-policy-studio-menu:reorder-flows="${this._onReorderFlows}" @gv-policy-studio-menu:change-flow-state="${this._onChangeFlowState}" @gv-policy-studio-menu:add-flow="${this._onAddFlow}" @gv-policy-studio-menu:add-flow-plan="${this._onAddFlowPlan}" @gv-policy-studio-menu:delete-flow="${this._onDeleteFlow}" @gv-policy-studio-menu:duplicate-flow="${this._onDuplicateFlow}" @gv-policy-studio-menu:select-flows="${this._onSelectFlows}"><div slot="header" class="header-actions"><div class="title">${this._definition.name}</div>${null!=this._flowFilterOptions?o.html`<gv-option ?disabled="${this._currentAskConfirmation}" .options="${this._flowFilterOptions}" multiple="multiple" outlined .value="${this._flowFilter}" small @gv-option:select="${this._onFilterFlows}"></gv-option>`:""}<gv-input ?disabled="${this._currentAskConfirmation}" id="search-flow" placeholder="Filter flows (Ctrl + Space)" type="search" small @gv-input:input="${this._onSearchFlows}" @gv-input:clear="${this._onClearFlows}"></gv-input></div>${!0!==this.readonly?o.html`<div slot="footer" class="footer-actions"><gv-button class="btn-large" .disabled="${!this.isDirty||this._currentAskConfirmation}" @gv-button:click="${this._onSaveAll}">Save</gv-button><gv-button link .disabled="${!this.isDirty||this._currentAskConfirmation}" @gv-button:click="${this._onResetAll}">Reset</gv-button></div>`:""}</gv-policy-studio-menu><gv-tabs .value="${this.tabId}" .options="${this._tabs}" .disabled="${this._currentAskConfirmation}" @gv-tabs:change="${this._onChangeTab}" .validator="${this._changeTabValidator.bind(this)}">${this._renderDesign(e)} ${this._renderConfigurationForm(e)} ${this._renderDebug()}<gv-properties id="properties" slot="content" class="properties" .provider="${this.services["dynamic-property"]}" @gv-properties:change="${this._onPropertiesChange}" @gv-properties:save-provider="${this._onSaveProvider}" @gv-properties:switch-encrypted="${this._onSwitchEncryptedProperty}" ?readonly="${e}" encryptable="true" .properties="${this.definedProperties}" .providers="${this.propertyProviders}" .dynamicPropertySchema="${this.dynamicPropertySchema}"></gv-properties><gv-resources id="resources" slot="content" class="resources" @gv-resources:change="${this._onResourcesChange}" ?readonly="${e}" .resources="${this.definedResources}" .types="${this.resourceTypes}"></gv-resources></gv-tabs></div>`}_getReadonlyModeForDesign(){if(this.readonly)return!0;const e=this.getSelectedFlow(0);if(!e)return!1;const{plan:t}=this._findFlowCollection(e._id);if(t&&this.readonlyPlans)return!0;const i=this.getSelectedFlow(1);if(!i)return!1;const{plan:o}=this._findFlowCollection(i._id);return o&&this.readonlyPlans}}exports.GvPolicyStudio=h,window.customElements.define("gv-policy-studio",h);