@guillotinaweb/react-gmi 0.20.1 → 0.22.2

package/dist/react-gmi.modern.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback, createContext, forwardRef, createElement, Fragment, useContext, useReducer, Component } from 'react';
+import React, { createContext, useState, useCallback, useRef, useEffect, forwardRef, createElement, Fragment, useContext, useReducer } from 'react';
 import usePortal from 'react-useportal';
 import PropTypes from 'prop-types';
 import jwt_decode from 'jwt-decode';
@@ -36,74 +36,140 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-class RestClient {
-  constructor(url, auth) {
-    this.auth = auth;
-    this.url = url;
+const AuthContext = createContext({});
+const ClientContext = createContext({});
+const TraversalContext = createContext({});
+
+class Traversal {
+  constructor(_ref) {
+    let {
+      flash
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, ["flash"]);
+
+    Object.assign(this, props);
+    if (typeof flash === 'function') this.flash = flash;
   }
 
-  async request(path, data, headers) {
-    data = data || {};
-    data.headers = headers || this.getHeaders();
-    return await fetch(`${this.url}${path}`, data);
+  refresh({
+    transparent = false
+  } = {}) {
+    this.dispatch({
+      type: 'REFRESH',
+      payload: {
+        transparent
+      }
+    });
   }
 
-  getHeaders() {
-    const authToken = this.auth.getToken();
-    if (!authToken) return {};
-    return {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + authToken
-    };
+  get path() {
+    return this.state.path;
   }
 
-  async post(path, data) {
-    return await this.request(path, {
-      method: 'post',
-      body: JSON.stringify(data)
+  get pathPrefix() {
+    return this.state.path.slice(1);
+  }
+
+  get context() {
+    return this.state.context;
+  }
+
+  get containerPath() {
+    return this.client.getContainerFromPath(this.path);
+  }
+
+  apply(data) {
+    // apply a optimistic update to context
+    this.dispatch({
+      type: 'APPLY',
+      payload: data
     });
   }
 
-  async get(path) {
-    return await this.request(path, {});
+  flash(message, type) {
+    this.dispatch({
+      type: 'SET_FLASH',
+      payload: {
+        flash: {
+          message,
+          type
+        }
+      }
+    });
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
   }
 
-  async put(path, data) {
-    return await this.request(path, {
-      method: 'put',
-      body: JSON.stringify(data)
+  clearFlash() {
+    this.dispatch({
+      type: 'CLEAR_FLASH'
     });
   }
 
-  async patch(path, data) {
-    return await this.request(path, {
-      method: 'PATCH',
-      body: JSON.stringify(data)
+  doAction(action, params) {
+    this.dispatch({
+      type: 'SET_ACTION',
+      payload: {
+        action,
+        params
+      }
     });
   }
 
-  async upload(path, data) {
-    const headers = this.getHeaders();
-    delete headers['Content-Type'];
-    headers['Content-Type'] = data['content-type'];
-    headers['X-UPLOAD-FILENAME'] = data.filename;
-    headers['Content-Encoding'] = 'base64';
-    return await this.request(path, {
-      method: 'PATCH',
-      body: data.data
-    }, headers);
+  cancelAction() {
+    this.dispatch({
+      type: 'CLEAR_ACTION'
+    });
   }
 
-  async delete(path, data = undefined) {
-    return await this.request(path, {
-      method: 'delete',
-      body: JSON.stringify(data)
+  hasPerm(permission) {
+    return this.state.permissions[permission] === true;
+  }
+
+  filterTabs(tabs, tabsPermissions) {
+    const result = {};
+    Object.keys(tabs).forEach(item => {
+      const perm = tabsPermissions[item];
+
+      if (perm && this.hasPerm(perm)) {
+        result[item] = tabs[item];
+      } else if (!perm) {
+        result[item] = tabs[item];
+      }
     });
+    return result;
   }
 
 }
 
+function TraversalProvider(_ref2) {
+  let {
+    children
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+  return /*#__PURE__*/React.createElement(TraversalContext.Provider, {
+    value: new Traversal(props)
+  }, children);
+}
+function useTraversal() {
+  return React.useContext(TraversalContext);
+}
+function ClientProvider({
+  children,
+  client
+}) {
+  return /*#__PURE__*/React.createElement(ClientContext.Provider, {
+    value: client
+  }, children);
+}
+function useGuillotinaClient() {
+  return React.useContext(ClientContext);
+}
+
 const classnames = classNames => {
   return classNames.filter(Boolean).join(' ').trim();
 };
@@ -153,1604 +219,1567 @@ function sleep(ms) {
   });
 }
 
-const Icon = ({
-  icon,
-  className,
-  align
-}) => {
-  const addClass = className ? className.split(' ') : [className];
-  align = align || 'is-right';
-  return /*#__PURE__*/React.createElement("span", {
-    className: classnames(['icon', align, ...addClass])
-  }, /*#__PURE__*/React.createElement("i", {
-    className: icon
-  }));
-};
+const noop$1 = () => {};
 
-const Loading = (_ref) => {
-  let rest = _extends({}, _ref);
+const Button = (_ref) => {
+  let {
+    children,
+    className = 'is-primary',
+    onClick,
+    type = 'submit',
+    loading = false,
+    disabled = false,
+    dataTest
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onClick", "type", "loading", "disabled", "dataTest"]);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: "progress-line"
-  }, rest));
+  let css = [].concat('button', ...className.split(' '));
+  if (loading) css = css.concat('is-loading');
+  if (disabled) onClick = noop$1;
+  return /*#__PURE__*/React.createElement("p", {
+    className: "control"
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    type: type,
+    className: classnames(css),
+    onClick: onClick,
+    disabled: disabled
+  }, rest, {
+    "data-test": dataTest
+  }), children));
 };
 
-const Tag = ({
-  name,
-  onRemove,
-  size: _size = 'is-medium',
-  color: _color = 'is-warning'
-}) => /*#__PURE__*/React.createElement("span", {
-  className: classnames(['tag', _color, _size])
-}, name, onRemove !== undefined && /*#__PURE__*/React.createElement("button", {
-  className: "delete is-small",
-  onClick: () => onRemove()
-}));
-
-function Delete({
-  onClick,
-  className,
-  children
-}) {
-  return /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: onClick,
-    className: `delete ${className}`,
-    "data-test": "btnDeleteTest"
-  }, children);
+function Modal(props) {
+  const {
+    isActive,
+    setActive,
+    children
+  } = props;
+  const {
+    Portal
+  } = usePortal();
+  const css = 'modal ' + (isActive ? 'is-active ' : '') + props.className;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    className: css
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-background",
+    onClick: () => setActive(false)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "modal-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "box"
+  }, children)), /*#__PURE__*/React.createElement("button", {
+    className: "modal-close is-large",
+    "aria-label": "close",
+    onClick: () => setActive(false)
+  })));
 }
-
-function Table({
-  headers,
-  children,
-  className
+function Confirm({
+  message,
+  onCancel,
+  onConfirm,
+  loading
 }) {
-  className = className ? className.split(' ') : ' is-full is-fullwidth is-narrow'.split(' ');
-  return /*#__PURE__*/React.createElement("table", {
-    className: classnames(['table', ...className])
-  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headers && headers.map((item, idx) => /*#__PURE__*/React.createElement("th", {
-    key: item + idx
-  }, item)))), /*#__PURE__*/React.createElement("tbody", null, children));
-}
+  const setActive = () => onCancel();
 
-function Notification({
-  isColor = '',
-  children
+  return /*#__PURE__*/React.createElement(Modal, {
+    isActive: true,
+    setActive: setActive,
+    className: "confirm"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", {
+    className: "title is-size-5"
+  }, message || 'Are you Sure?'), /*#__PURE__*/React.createElement("div", {
+    className: "level",
+    style: {
+      marginTop: 50
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "level-left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "level-right"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "button is-danger",
+    onClick: () => onCancel(),
+    "data-test": "btnCancelModalTest"
+  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement(Button, {
+    loading: loading,
+    className: "is-success",
+    onClick: () => onConfirm(),
+    dataTest: "btnConfirmModalTest"
+  }, "Confirm")))));
+} // @todo Improve it... Replacing the inputText to a tree
+
+function PathTree({
+  title,
+  defaultPath,
+  children,
+  onConfirm,
+  onCancel
 }) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: 'notification is-' + isColor,
-    "data-test": "notificationTest"
-  }, children);
+  return /*#__PURE__*/React.createElement(Modal, {
+    isActive: true,
+    setActive: onCancel
+  }, /*#__PURE__*/React.createElement("h1", null, title), /*#__PURE__*/React.createElement("form", {
+    onSubmit: e => {
+      e.preventDefault();
+      onConfirm(e.target[0].value, e.target);
+    }
+  }, /*#__PURE__*/React.createElement("small", {
+    style: {
+      display: 'block',
+      marginTop: 20
+    }
+  }, `Example: /folder (without /db/container on front)`), /*#__PURE__*/React.createElement("input", {
+    className: "input mb-3",
+    defaultValue: defaultPath,
+    type: "text",
+    "data-test": "inputPathTreeTest"
+  }), children, /*#__PURE__*/React.createElement("div", {
+    className: "level-right mt-3"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "button is-danger",
+    onClick: onCancel,
+    "data-test": "btnCancelModalTest"
+  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    className: "button is-success",
+    "data-test": "btnConfirmModalTest"
+  }, "Confirm"))));
 }
 
-// https://github.com/molefrog/wouter
-
-const setURLParams = p => window.history['pushState'](0, 0, (window.history.pathname || '') + '?' + p.toString().replace(/%2F/g, '/'));
+function useSetState(initialState) {
+  const [state, set] = useState(initialState);
+  const setState = useCallback(patch => {
+    set(prevState => Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch));
+  }, [set]);
+  return [state, setState];
+}
 
-const clean = to => {
-  const current = new URLSearchParams();
-  Object.keys(to).forEach(_key => current.set(_key, to[_key]));
-  setURLParams(current);
+const initial = {
+  loading: undefined,
+  isError: false,
+  errorMessage: undefined,
+  result: undefined,
+  response: undefined
 };
 
-const useLocation = () => {
-  const [path, update] = useState(currentSearchParams());
-  const prevPath = useRef(path);
-  useEffect(() => {
-    patchHistoryEvents(); // this function checks if the location has been changed since the
-    // last render and updates the state only when needed.
-    // unfortunately, we can't rely on `path` value here, since it can be stale,
-    // that's why we store the last pathname in a ref.
-
-    const checkForUpdates = () => {
-      const pathname = currentSearchParams();
-      prevPath.current !== pathname && update(prevPath.current = pathname);
-    };
-
-    const events = ['popstate', 'pushState', 'replaceState'];
-    events.map(e => window.addEventListener(e, checkForUpdates)); // it's possible that an update has occurred between render and the effect handler,
-    // so we run additional check on mount to catch these updates. Based on:
-    // https://gist.github.com/bvaughn/e25397f70e8c65b0ae0d7c90b731b189
-
-    checkForUpdates();
-    return () => events.map(e => window.removeEventListener(e, checkForUpdates));
-  }, []); // the 2nd argument of the `useLocation` return value is a function
-  // that allows to perform a navigation.
-  //
-  // the function reference should stay the same between re-renders, so that
-  // it can be passed down as an element prop without any performance concerns.
-
-  const navigate = useCallback((to, replace) => {
-    if (replace) {
-      clean(to);
-      return;
-    }
-
-    let current = new URLSearchParams(path.toString());
-    Object.keys(to).forEach(_key => current.set(_key, to[_key]));
-    setURLParams(current);
-  }, [path]);
-  const remove = useCallback(param => {
-    let current = new URLSearchParams(path.toString());
-    current.delete(param);
-    setURLParams(current);
-  }, [path]);
-  return [path, navigate, remove];
-}; // While History API does have `popstate` event, the only
-// proper way to listen to changes via `push/replaceState`
-// is to monkey-patch these methods.
-//
-// See https://stackoverflow.com/a/4585031
+const getErrorMessage = (dataError, defaultValue) => {
+  if (dataError && dataError.details) {
+    return dataError.details;
+  } else if (dataError && dataError.reason) {
+    return dataError.reason;
+  }
 
-let patched = 0;
+  return defaultValue;
+};
 
-const patchHistoryEvents = () => {
-  if (patched) return;
-  ['pushState', 'replaceState'].map(type => {
-    const original = window.history[type];
+const processResponse = async (res, ready_body = true) => {
+  if (res.status < 400) return {
+    isError: false,
+    loading: false,
+    result: ready_body ? await res.json() : res.status,
+    response: res
+  };else return {
+    isError: true,
+    loading: false,
+    errorMessage: getErrorMessage(await res.json(), res.status),
+    response: res
+  };
+};
 
-    window.history[type] = function () {
-      const result = original.apply(this, arguments);
-      const event = new Event(type);
-      event.arguments = arguments;
-      dispatchEvent(event);
-      return result;
-    };
+const patch = (setState, Ctx) => async (data, endpoint, body = false) => {
+  setState({
+    loading: true
   });
-  return patched = 1;
-};
+  let newState = {};
 
-const currentSearchParams = (path = window.location.search) => new URLSearchParams(path);
+  try {
+    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+    const res = await Ctx.client.patch(path, data);
+    newState = await processResponse(res, body);
+  } catch (e) {
+    console.error('Error', e);
+    newState = {
+      isError: true,
+      errorMessage: 'unhandled exception'
+    };
+  }
 
-function Link(_ref) {
-  let {
-    aRef,
-    model,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["aRef", "model", "children"]);
+  setState(newState);
+  return newState;
+};
 
-  const [path, navigate] = useLocation();
-  const aStyle = {
-    textDecoration: 'none',
-    color: 'currentColor'
-  };
+const del = (setState, Ctx) => async (data, endpoint, body = false) => {
+  setState({
+    loading: true
+  });
+  let newState = {};
 
-  function onClick(e) {
-    e.stopPropagation();
-    if (actAsLink(e)) return;
-    e.preventDefault();
-    navigate({
-      path: model.path
-    }, true);
-    if (props.onClick) props.onClick(e);
+  try {
+    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+    const res = await Ctx.client.delete(path, data);
+    newState = await processResponse(res, body);
+  } catch (e) {
+    console.error('Error', e);
+    newState = {
+      isError: true,
+      errorMessage: 'unhandled exception'
+    };
   }
 
-  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
-    ref: aRef,
-    href: `?${path}${model.id}/`,
-    style: aStyle,
-    onClick: onClick
-  }), children);
-}
+  setState(newState);
+  return newState;
+};
 
-function actAsLink(e) {
-  return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0;
-}
+const post = (setState, Ctx) => async (data, endpoint, body = true) => {
+  setState({
+    loading: true
+  });
+  let newState = {};
 
-function TdLink(_ref) {
-  let {
-    model,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["model", "children"]);
+  try {
+    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+    const res = await Ctx.client.post(path, data);
+    newState = await processResponse(res, body);
+  } catch (e) {
+    console.error('Error', e);
+    newState = {
+      isError: true,
+      errorMessage: 'unhandled exception'
+    };
+  }
 
-  const link = useRef();
+  setState(newState);
+  return newState;
+};
 
-  function onClick() {
-    link.current.click();
-  }
+const get = (setState, Ctx) => async endpoint => {
+  setState({
+    loading: true
+  });
+  const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+  const req = await Ctx.client.get(path);
+  const data = await req.json();
+  setState({
+    loading: false,
+    result: data,
+    response: req
+  });
+  return data;
+};
 
-  return /*#__PURE__*/React.createElement("td", _extends({}, props, {
-    onClick: onClick
-  }), /*#__PURE__*/React.createElement(Link, {
-    model: model,
-    aRef: link
-  }, children));
+function useCrudContext() {
+  const Ctx = useTraversal();
+  const [state, setState] = useSetState(initial);
+  return _extends({}, state, {
+    Ctx,
+    patch: patch(setState, Ctx),
+    del: del(setState, Ctx),
+    post: post(setState, Ctx),
+    get: get(setState, Ctx)
+  });
 }
 
-const SEP = '=';
-const DEFAULT_FIELD = 'title__in';
-const CLEANER = '||';
-function parser(qs, defaultField = DEFAULT_FIELD) {
-  let lastKey = undefined;
-  qs.trim();
-
-  if (qs.includes('"')) {
-    qs = qs.replace(/"(\w+) (\w+)"/, `$1${CLEANER}$2`);
-  }
+function AddItem(props) {
+  const Ctx = useTraversal();
+  const {
+    post,
+    loading
+  } = useCrudContext();
+  const {
+    type
+  } = props;
+  const {
+    getForm
+  } = Ctx.registry;
+  const Form = getForm(type);
 
-  qs = qs.split(' ');
-  return qs.map(part => {
-    if (part.includes(CLEANER)) {
-      part = part.replace('||', ' ');
-    }
+  const setActive = () => {
+    Ctx.cancelAction();
+  };
 
-    if (!part.includes(SEP)) {
-      return !lastKey ? [defaultField, part] : [lastKey, part];
-    }
+  async function doSubmit(data) {
+    const form = Object.assign({}, {
+      '@type': type
+    }, data.formData ? data.formData : data);
+    const {
+      isError,
+      errorMessage
+    } = await post(form);
 
-    const [key, val] = part.split(SEP);
-    lastKey = key;
-    return [key, val];
-  });
-}
-function buildQs(parsedQuery) {
-  return parsedQuery.map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
-}
+    if (!isError) {
+      Ctx.flash('Content created!', 'success');
+    } else {
+      Ctx.flash(`An error has ocurred: ${errorMessage}`, 'danger');
+    }
 
-let cacheTypes = {};
-let cacheSchemas = {};
-class GuillotinaClient {
-  constructor(rest, isContainer) {
-    this.rest = rest;
-    this.isContainer = isContainer;
+    Ctx.cancelAction();
+    Ctx.refresh();
   }
 
-  async getContext(path) {
-    switch (path) {
-      case '/':
-        return await this.rest.get('');
-
-      default:
-        if (path.startsWith('/')) {
-          path = path.substring(1);
-        }
+  return /*#__PURE__*/React.createElement(Modal, {
+    isActive: true,
+    setActive: setActive
+  }, /*#__PURE__*/React.createElement(Form, {
+    loading: loading,
+    onSubmit: doSubmit,
+    onError: err => console.log(err),
+    actionName: 'Add ' + type,
+    title: 'Add ' + type,
+    type: type,
+    dataTest: `formAdd${type}Test`
+  }));
+}
 
-        return await this.rest.get(path);
-    }
+const Permissions = ['guillotina.AddContent', 'guillotina.ModifyContent', 'guillotina.ViewContent', 'guillotina.DeleteContent', 'guillotina.AccessContent', 'guillotina.SeePermissions', 'guillotina.ChangePermissions', 'guillotina.MoveContent', 'guillotina.DuplicateContent', 'guillotina.ReadConfiguration', 'guillotina.RegisterConfigurations', 'guillotina.WriteConfiguration', 'guillotina.ManageAddons', 'guillotina.swagger.View'];
+const Config = {
+  DisabledTypes: ['UserManager', 'GroupManager'],
+  PageSize: 10,
+  DelayActions: 200,
+  Permissions: Permissions,
+  SearchEngine: 'PostreSQL',
+  // Elasticsearch
+  fieldHaveDeleteButton: schema => {
+    return (schema == null ? void 0 : schema.widget) === 'file' || (schema == null ? void 0 : schema.widget) === 'select' || (schema == null ? void 0 : schema.type) === 'array';
   }
+};
+let calculated = Object.assign({}, Config);
 
-  async get(path) {
-    if (path.startsWith('/')) {
-      path = path.slice(1);
+const addConfig = (additional, original) => {
+  const rest = Object.assign({}, original);
+  Object.keys(additional).forEach(item => {
+    if (typeof Config[item] === 'object' && Array.isArray(Config[item])) {
+      rest[item] = [].concat(Config[item], additional[item]);
+    } else if (typeof Config[item] === 'object') {
+      rest[item] = Object.assign({}, Config[item], additional[item]);
+    } else {
+      rest[item] = additional[item];
     }
+  });
+  return rest;
+};
 
-    return await this.rest.get(path);
-  }
+function useConfig(cfg) {
+  const ref = React.useRef();
 
-  getQueryParamsPostresql({
-    start = 0,
-    pageSize = 10,
-    withDepth = true
-  }) {
-    let result = [];
-    result = [...parser(start.toString(), 'b_start'), ...parser(pageSize.toString(), 'b_size')];
+  if (cfg && !ref.current) {
+    console.log('cfg', cfg);
+    calculated = addConfig(cfg, calculated);
+    ref.current = calculated;
+  } // if (cfg && !ref.current) {
+  //   ref.current = addConfig(cfg, ref.current);
+  //   calculated = ref.current
+  //   console.log("Current config", cfg)
+  // }
 
-    if (withDepth) {
-      var _parser;
 
-      result = [...result, ...((_parser = parser('1', 'depth')) != null ? _parser : [])];
-    }
+  return calculated;
+}
 
-    return result;
+const getId = item => {
+  if (item['@id']) {
+    return item['@id'];
   }
 
-  getQueryParamsElasticsearch({
-    start = 0,
-    pageSize = 10,
-    path,
-    withDepth = true
-  }) {
-    let result = [];
-    let containerPath = getContainerFromPath(path);
+  return item['@absolute_url'];
+};
 
-    if (containerPath.startsWith('/')) {
-      containerPath = containerPath.slice(1);
-    }
+function RemoveItems(props) {
+  const Ctx = useTraversal();
+  const cfg = useConfig();
+  const [loading, setLoading] = React.useState(false);
+  const {
+    items = []
+  } = props;
+  const last = items[items.length - 1]['@name'];
+  const itemsNames = items.map(item => item['@name']).join(', ').replace(`, ${last}`, ` and ${last}`);
 
-    let objectPath = path.replace(containerPath, '');
+  async function removeItems() {
+    let errors = [];
+    setLoading(true);
+    const actions = items.map(async item => {
+      console.log(item);
+      const res = await Ctx.client.delete(getId(item));
 
-    if (objectPath.endsWith('/')) {
-      objectPath = objectPath.slice(0, -1);
+      if (!res.ok) {
+        const err = await res.json();
+        errors.push(err);
+      }
+    }); // this sleep is here, to let elasticsearch, wait for
+    // index our operations... (will work 99% of use cases)
+
+    actions.push(sleep(cfg.DelayActions));
+    await Promise.all(actions);
+
+    if (errors.length === 0) {
+      Ctx.flash(`Items removed!`, 'success');
+      Ctx.refresh();
+    } else {
+      const errorstr = errors.map(err => JSON.stringify(err)).join('\n');
+      Ctx.flash(`Something went wrong!! ${errorstr}`, 'danger');
     }
 
-    result = [...parser(start.toString(), '_from'), ...parser(pageSize.toString(), 'size')];
+    setLoading(false);
+    Ctx.cancelAction();
+  }
 
-    if (withDepth) {
-      var _parser2;
+  return /*#__PURE__*/React.createElement(Confirm, {
+    loading: loading,
+    onCancel: () => Ctx.cancelAction(),
+    onConfirm: removeItems,
+    message: `Are you sure to remove: ${itemsNames}?`
+  });
+}
 
-      result = [...result, ...((_parser2 = parser('1', 'depth')) != null ? _parser2 : [])];
-    }
+const Checkbox = (_ref) => {
+  let {
+    id,
+    className,
+    classNameInput,
+    loading,
+    disabled,
+    indeterminate = false,
+    value = false,
+    children,
+    placeholder,
+    onChange,
+    dataTest
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["id", "className", "classNameInput", "loading", "disabled", "indeterminate", "value", "color", "backgroundColor", "borderColor", "children", "placeholder", "onChange", "dataTest"]);
 
-    if (objectPath !== '') {
-      result = [...result, ...parser(objectPath, 'path__wildcard')];
+  const inputRef = useRef(null);
+  const [state, setState] = React.useState(value);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
     }
+  }, [indeterminate]);
 
-    return result;
-  }
+  const updateState = ev => {
+    setState(ev.target.checked);
+    onChange(ev.target.checked);
+  };
 
-  getItemsColumn() {
-    const smallcss = {
-      width: 25
-    };
-    const mediumcss = {
-      width: 120
-    };
-    return [{
-      label: '',
-      child: m => /*#__PURE__*/React.createElement("td", {
-        style: smallcss
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: m.icon
-      }))
-    }, {
-      label: 'type',
-      child: m => /*#__PURE__*/React.createElement(TdLink, {
-        style: smallcss,
-        model: m
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "tag"
-      }, m.type))
-    }, {
-      label: 'id/name',
-      child: (m, navigate, search) => /*#__PURE__*/React.createElement(TdLink, {
-        model: m
-      }, m.name, search && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
-        className: "is-size-7 tag is-light"
-      }, m.path)))
-    }, {
-      label: 'created',
-      child: m => /*#__PURE__*/React.createElement("td", {
-        style: mediumcss,
-        className: "is-size-7 is-vcentered"
-      }, m.created)
-    }, {
-      label: 'modified',
-      child: m => /*#__PURE__*/React.createElement("td", {
-        style: mediumcss,
-        className: "is-size-7 is-vcentered"
-      }, m.updated)
-    }];
-  } // BBB API changes. Compat G5 and G6
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: classnames(['checkbox', className])
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    disabled: disabled || loading,
+    id: id,
+    type: "checkbox",
+    className: classnames(['checkbox', classNameInput]),
+    checked: state,
+    onChange: updateState,
+    "data-test": dataTest
+  }, rest)), children || placeholder));
+};
 
+const ErrorZone = ({
+  children,
+  id,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("p", {
+    className: classnames(['help is-danger', className]),
+    id: id
+  }, children);
+};
 
-  applyCompat(data) {
-    data.member = data.items;
-    data.items_count = data.items_total;
-    return data;
-  }
+ErrorZone.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string,
+  className: PropTypes.string
+};
 
-  async search(path, params, container = false, prepare = true) {
-    if (path.startsWith('/')) {
-      path = path.slice(1);
+const applyValidators = (value, validators) => {
+  let validation = Array.isArray(validators) ? validators : [validators];
+  let result = true;
+  validation.forEach(func => {
+    if (func(value) === false) {
+      result = false;
     }
+  });
+  return result;
+};
 
-    if (container) {
-      path = getContainerFromPath(path);
-    }
+const useInput = (onChange, value, validator) => {
+  let [state, setState] = React.useState({
+    hasError: false,
+    value: value
+  });
 
-    let query = prepare ? toQueryString(params) : params;
-    const url = `${path}@search?${query}`;
-    let res = await this.rest.get(url);
-    let data = await res.json();
-    return this.applyCompat(data);
-  }
+  const onUpdate = ev => {
+    const value = ev && ev.target ? ev.target.value : ev ? ev : '';
+    setState({
+      value,
+      hasError: false
+    });
+    if (onChange) onChange(value);
+  };
 
-  async canido(path, permissions) {
-    if (path.startsWith('/')) {
-      path = path.slice(1);
-    }
+  const onBlur = () => {
+    const hasError = applyValidators(state.value, validator) === false;
+    if (hasError) setState({
+      value: state.value,
+      hasError
+    });
+  };
 
-    if (Array.isArray(permissions)) {
-      permissions.join(',');
+  const onFocus = () => {
+    if (state.hasError) {
+      setState({
+        value: state.value,
+        hasError: false
+      });
     }
+  };
 
-    const url = `${path}@canido?permissions=${permissions}`;
-    return await this.rest.get(url);
-  }
+  React.useEffect(() => {
+    setState({
+      value,
+      hasError: false
+    });
+  }, [value]);
+  return {
+    onChange: onUpdate,
+    onFocus,
+    onBlur,
+    state
+  };
+};
 
-  async createObject(path, data) {
-    return await this.rest.post(path, data);
-  }
+// From github.com/protonmail/proton-shared
 
-  cleanPath(path) {
-    let url = path.split('/').slice(3);
-    return `${url.join('/')}`;
-  }
+/* eslint-disable no-useless-escape */
+const REGEX_EMAIL = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/i;
+const REGEX_URL = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
+const REGEX_HEX_COLOR = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/i;
+const REGEX_NUMBER = /^\d+$/;
+const isEmpty = (value = '') => !value.length;
+const maxLength = (value = '', limit = 0) => value.length <= limit;
+const minLength = (value = '', limit = 0) => value.length >= limit;
+const isEmail = (value = '') => REGEX_EMAIL.test(value);
+const isURL = (value = '') => REGEX_URL.test(value);
+const isHexColor = (value = '') => REGEX_HEX_COLOR.test(value);
+const isNumber = (value = '') => REGEX_NUMBER.test(value);
+const notEmpty = value => !!value.length;
 
-  async delete(path, data) {
-    console.log('path', path, this.cleanPath(path));
-    return await this.rest.delete(this.cleanPath(path), data);
-  }
+const noop$2 = () => true;
+/** @type any */
 
-  async create(path, data) {
-    if (path.startsWith('/')) {
-      path = path.substring(1);
-    }
 
-    return await this.rest.post(path, data);
-  }
+const Input = React.forwardRef((_ref, ref) => {
+  let {
+    icon,
+    iconPosition = 'has-icons-right',
+    error,
+    errorZoneClassName,
+    autoComplete = 'off',
+    className = '',
+    widget = 'input',
+    type = 'text',
+    loading = false,
+    required = false,
+    id,
+    placeholder,
+    value,
+    autofocus = false,
+    onChange,
+    validator = noop$2,
+    errorMessage,
+    dataTest = 'testInput'
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["icon", "iconPosition", "error", "errorZoneClassName", "autoComplete", "className", "widget", "type", "onPressEnter", "isSubmitted", "loading", "required", "id", "placeholder", "value", "autofocus", "onChange", "validator", "errorMessage", "dataTest"]);
 
-  async post(path, data) {
-    return await this.create(path, data);
+  if (required) {
+    validator = Array.isArray(validator) ? validator.push(notEmpty) : [validator, notEmpty];
   }
 
-  async patch(path, data) {
-    if (path.startsWith('/')) {
-      path = path.substring(1);
-    }
+  const _useInput = useInput(onChange, value != null ? value : '', validator),
+        {
+    state
+  } = _useInput,
+        handlers = _objectWithoutPropertiesLoose(_useInput, ["state"]);
 
-    return await this.rest.patch(path, data);
-  }
+  const [uid] = useState(generateUID('input'));
+  const [mounted, setMounted] = useState(false); // eslint-disable-next-line
 
-  async upload(path, file) {
-    if (path.startsWith('/')) {
-      path = path.substring(1);
+  ref = ref || React.useRef();
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (autofocus && !error) {
+      ref.current.focus();
     }
+  }, [mounted, autofocus, ref, error]);
+  const theError = state.hasError ? errorMessage || 'invalid field' : '';
+  const statusClasses = state.hasError ? 'is-danger' : '';
+
+  const cssControl = () => icon ? ['control', iconPosition] : ['control'];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
+    className: "label",
+    htmlFor: id
+  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssControl())
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: classnames([widget, className, statusClasses]),
+    "aria-invalid": theError,
+    "aria-describedby": uid,
+    id: id,
+    ref: ref,
+    type: type,
+    value: state.value,
+    placeholder: placeholder,
+    autoComplete: autoComplete,
+    disabled: loading || rest.disabled,
+    required: required,
+    "data-test": dataTest
+  }, handlers, rest)), icon && icon), /*#__PURE__*/React.createElement(ErrorZone, {
+    className: errorZoneClassName,
+    id: uid
+  }, state.hasError ? theError : ''));
+});
+Input.propTypes = {
+  icon: PropTypes.node,
+  iconPosition: PropTypes.arrayOf(PropTypes.oneOf(['has-icons-left', 'has-icons-right', ''])),
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  isSubmitted: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onPressEnter: PropTypes.func,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  required: PropTypes.bool,
+  type: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
+};
+
+const Icon = ({
+  icon,
+  className,
+  align
+}) => {
+  const addClass = className ? className.split(' ') : [className];
+  align = align || 'is-right';
+  return /*#__PURE__*/React.createElement("span", {
+    className: classnames(['icon', align, ...addClass])
+  }, /*#__PURE__*/React.createElement("i", {
+    className: icon
+  }));
+};
+
+const EmailInput = (_ref) => {
+  let {
+    value = '',
+    dataTest
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["value", "dataTest"]);
+
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    type: "email",
+    validator: isEmail,
+    errorMessage: "Email address invalid",
+    value: value,
+    "data-test": dataTest,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: "fas fa-envelope"
+    })
+  }, rest));
+};
 
-    return await this.rest.upload(path, file);
-  }
+const Form = (_ref) => {
+  let {
+    children,
+    className = '',
+    onSubmit = noop,
+    onReset = noop,
+    autoComplete = 'off',
+    title,
+    error,
+    dataTest
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onSubmit", "onReset", "autoComplete", "title", "error", "dataTest"]);
 
-  async download(path) {
-    if (path.startsWith('/')) {
-      path = path.substring(1);
-    }
+  const handleSubmit = event => {
+    event.preventDefault();
+    onSubmit(event);
+  };
 
-    return await this.rest.get(path);
-  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "level"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "title is-size-4"
+  }, title)), error && /*#__PURE__*/React.createElement("div", {
+    className: "notification is-danger"
+  }, error), /*#__PURE__*/React.createElement("form", _extends({
+    onSubmit: handleSubmit,
+    onReset: onReset,
+    autoComplete: autoComplete,
+    className: classnames(['form', className])
+  }, rest), children));
+};
+Form.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  onSubmit: PropTypes.func,
+  onReset: PropTypes.func,
+  autoComplete: PropTypes.string
+};
 
-  async getTypeSchema(path, name) {
-    if (!cacheSchemas[name]) {
-      let url = getContainerFromPath(path); // todo: handle db case (only addable containers)
+const PasswordInput = (_ref) => {
+  let {
+    value = ''
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["value"]);
 
-      const res = await this.rest.get(`${url}@types/${name}`);
-      cacheSchemas[name] = await res.json();
-    }
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    value: value,
+    type: "password"
+  }, rest));
+};
 
-    return cacheSchemas[name];
-  }
+const formComponents = {
+  string: Input,
+  password: PasswordInput,
+  boolean: Checkbox,
+  email: EmailInput
+};
+function FormBuilder(_ref) {
+  let {
+    schema,
+    formData,
+    onSubmit,
+    actionName,
+    children,
+    exclude = [],
+    remotes = [],
+    submitButton = true
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "formData", "title", "onSubmit", "actionName", "children", "exclude", "remotes", "submitButton"]);
 
-  async getAddons(path) {
-    return await this.rest.get(`${path}@addons`);
-  }
+  const ref = React.useRef();
+  const {
+    properties,
+    required
+  } = schema;
+  const values = Object.assign({}, formData || {}); // build initial state
 
-  async installAddon(path, key) {
-    return await this.rest.post(`${path}@addons`, {
-      id: key
-    });
-  }
+  let initialState = {};
+  const fields = Object.keys(properties).filter(x => !exclude.includes(x));
+  fields.forEach(element => {
+    initialState[element] = values[element] || undefined;
+  }); // Register remotes
 
-  async removeAddon(path, key) {
-    return await this.rest.delete(`${path}@addons`, {
-      id: key
+  if (!ref.current) {
+    ref.current = {};
+    Object.keys(remotes).forEach(item => ref.current[item] = remotes[item]);
+  } else {
+    // apply remote changes
+    Object.keys(remotes).forEach(key => {
+      if (JSON.stringify(ref.current[key]) !== JSON.stringify(remotes[key])) {
+        ref.current[key] = remotes[key];
+      }
     });
   }
 
-  async getGroups(path) {
-    const endpoint = `${getContainerFromPath(path)}@groups`;
-    return await this.rest.get(endpoint);
-  }
+  ref.current = ref.current || {};
 
-  async getUsers(path) {
-    const endpoint = `${getContainerFromPath(path)}@users`;
-    return await this.rest.get(endpoint);
-  }
+  const onUpdate = field => ev => {
+    ref.current[field] = ev.target ? ev.target.value : ev.value || ev;
+  };
 
-  async getPrincipals(path) {
-    const groups = this.getGroups(path);
-    const users = this.getUsers(path);
-    const [gr, usr] = await Promise.all([groups, users]);
-    return {
-      groups: gr.ok ? await gr.json() : [],
-      users: usr.ok ? await usr.json() : []
+  const GetTag = ({
+    field
+  }) => {
+    const Tag = formComponents[properties[field].widget || properties[field].type];
+    const props = {
+      label: properties[field].title,
+      value: initialState[field],
+      onChange: onUpdate(field),
+      placeholder: properties[field].title || '',
+      id: generateUID(),
+      dataTest: `${field}TestInput`
     };
-  }
-
-  async getRoles(path) {
-    const endpoint = `${getContainerFromPath(path)}@available-roles`;
-    return await this.rest.get(endpoint);
-  }
-
-  async getAllPermissions(path) {
-    // paths used to query the API always has to start without a "/"
-    if (path.startsWith('/')) {
-      path = path.slice(1);
-    }
-
-    if (!path.endsWith('/')) {
-      path = `${path}/`;
-    }
-
-    const req = await this.rest.get(path + '@all_permissions');
-    const resp = await req.json();
-    const permissions = Array.from(new Set(extractPermissions(resp)));
-    return permissions;
-  }
 
-  async getTypes(path) {
-    if (path.startsWith('/')) {
-      path = path.slice(1);
+    if (required.includes(field)) {
+      props.required = true;
+      props.placeholder += ' *';
     }
 
-    if (!cacheTypes[path]) {
-      const types = await this.rest.get(path + '@addable-types');
+    Tag.displayName = `${field}Field`;
+    return /*#__PURE__*/React.createElement(Tag, props);
+  };
 
-      if (types.status === 401 || types.status === 404) {
-        cacheTypes[path] = [];
-      } else {
-        const res = await types.json();
-        cacheTypes[path] = res;
-      }
-    }
+  const children_ = React.Children.map(children, child => React.cloneElement(child, {
+    onChange: onUpdate
+  }));
 
-    return cacheTypes[path];
-  }
+  const changes = () => {
+    onSubmit(ref.current, values);
+  };
 
+  return /*#__PURE__*/React.createElement(Form, _extends({
+    onSubmit: changes
+  }, rest), fields.map(field => /*#__PURE__*/React.createElement(GetTag, {
+    field: field,
+    key: field
+  })), children_, submitButton && /*#__PURE__*/React.createElement(Button, null, actionName));
 }
-function getClient(url, auth, isContainer = false) {
-  return new GuillotinaClient(new RestClient(url, auth), isContainer);
-}
-const getContainerFromPath = path => {
-  if (path.startsWith('/')) {
-    path = path.substring(1);
-  }
-
-  let parts = path.split('/');
-  return `${parts[0]}/${parts[1]}/`;
-};
-const lightFileReader = async file => {
-  return new Promise(resolve => {
-    const reader = new FileReader();
-    reader.readAsArrayBuffer(file);
 
-    reader.onloadend = e => {
-      const fileData = e.target.result;
-      resolve({
-        filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
-        data: fileData,
-        'content-type': file.type
-      });
-    };
-  });
-};
+/** @type any */
 
-const extractPermissions = data => {
-  let result = [];
+const Select = React.forwardRef((_ref, ref) => {
+  let {
+    options,
+    error,
+    errorZoneClassName,
+    size = 1,
+    placeholder,
+    id,
+    className = '',
+    classWrap = '',
+    multiple = false,
+    loading = false,
+    onChange,
+    appendDefault = false,
+    style = {},
+    dataTest
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["options", "error", "errorZoneClassName", "size", "placeholder", "id", "className", "classWrap", "multiple", "loading", "isSubmitted", "onChange", "appendDefault", "style", "dataTest"]);
 
-  if (typeof data !== 'object') ; else if (!Array.isArray(data) && data.permission) {
-    result = result.concat([data.permission]);
-  } else if (!Array.isArray(data)) {
-    Object.keys(data).map(key => result = result.concat(extractPermissions(data[key])));
-  } else if (Array.isArray(data)) {
-    data.map(item => result = result.concat(extractPermissions(item)));
-  }
+  const [uid] = useState(generateUID('select'));
 
-  return result;
-};
+  const onUpdate = ev => {
+    if (ev.target.value === '') {
+      onChange({
+        target: {
+          value: undefined
+        }
+      });
+    } else {
+      onChange(ev);
+    }
+  };
 
-const AuthContext = createContext({});
-const ClientContext = createContext({});
-const TraversalContext = createContext({});
+  if (appendDefault) {
+    options = [{
+      text: 'Choose..',
+      value: ''
+    }].concat(options);
+  }
 
-class Traversal {
-  constructor(_ref) {
+  const statusClasses = error ? 'is-danger' : '';
+  const cssWrap = ['select', statusClasses, multiple ? 'is-multiple' : '', classWrap];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
+    className: "label",
+    htmlFor: id
+  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssWrap)
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    className: classnames(['', className]),
+    size: size,
+    multiple: multiple,
+    disabled: loading || rest.disabled,
+    onChange: onUpdate
+  }, rest, {
+    ref: ref,
+    style: style,
+    "data-test": dataTest
+  }), options.map((_ref2, index) => {
     let {
-      flash
-    } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, ["flash"]);
+      text
+    } = _ref2,
+        rest = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
-    Object.assign(this, props);
-    if (typeof flash === 'function') this.flash = flash;
-  }
+    return /*#__PURE__*/React.createElement("option", _extends({
+      key: index.toString()
+    }, rest), text);
+  }))), error && /*#__PURE__*/React.createElement(ErrorZone, {
+    className: errorZoneClassName,
+    id: uid
+  }, error ? error : ''));
+});
+Select.propTypes = {
+  error: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  isSubmitted: PropTypes.bool,
+  size: PropTypes.number,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.object),
+  multiple: PropTypes.bool,
+  className: PropTypes.string
+};
 
-  refresh({
-    transparent = false
-  } = {}) {
-    this.dispatch({
-      type: 'REFRESH',
-      payload: {
-        transparent
-      }
-    });
+class RestClient {
+  constructor(url, container, auth) {
+    this.auth = auth;
+    this.url = url;
+    this.container = container;
   }
 
-  get path() {
-    return this.state.path;
-  }
+  async request(path, data, headers) {
+    if (path.indexOf(this.url) !== -1) {
+      path = path.replace(this.url, '');
+    }
 
-  get pathPrefix() {
-    return this.state.path.slice(1);
-  }
+    if (this.container !== '/' && path.indexOf(this.container) === -1) {
+      path = `${this.container}${path}`;
+    }
 
-  get context() {
-    return this.state.context;
-  }
+    if (!path.startsWith('/')) {
+      path = `/${path}`;
+    }
 
-  get containerPath() {
-    return getContainerFromPath(this.path);
+    data = data || {};
+    data.headers = headers || this.getHeaders();
+    return await fetch(`${this.url}${path}`, data);
   }
 
-  apply(data) {
-    // apply a optimistic update to context
-    this.dispatch({
-      type: 'APPLY',
-      payload: data
-    });
+  getHeaders() {
+    const authToken = this.auth.getToken();
+    if (!authToken) return {};
+    return {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + authToken
+    };
   }
 
-  flash(message, type) {
-    this.dispatch({
-      type: 'SET_FLASH',
-      payload: {
-        flash: {
-          message,
-          type
-        }
-      }
-    });
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: 'smooth'
+  async post(path, data) {
+    return await this.request(path, {
+      method: 'post',
+      body: JSON.stringify(data)
     });
   }
 
-  clearFlash() {
-    this.dispatch({
-      type: 'CLEAR_FLASH'
-    });
+  async get(path) {
+    return await this.request(path, {});
   }
 
-  doAction(action, params) {
-    this.dispatch({
-      type: 'SET_ACTION',
-      payload: {
-        action,
-        params
-      }
+  async put(path, data) {
+    return await this.request(path, {
+      method: 'put',
+      body: JSON.stringify(data)
     });
   }
 
-  cancelAction() {
-    this.dispatch({
-      type: 'CLEAR_ACTION'
+  async patch(path, data) {
+    return await this.request(path, {
+      method: 'PATCH',
+      body: JSON.stringify(data)
     });
   }
 
-  hasPerm(permission) {
-    return this.state.permissions[permission] === true;
-  }
-
-  filterTabs(tabs, tabsPermissions) {
-    const result = {};
-    Object.keys(tabs).forEach(item => {
-      const perm = tabsPermissions[item];
-
-      if (perm && this.hasPerm(perm)) {
-        result[item] = tabs[item];
-      } else if (!perm) {
-        result[item] = tabs[item];
-      }
-    });
-    return result;
+  async upload(path, data) {
+    const headers = this.getHeaders();
+    delete headers['Content-Type'];
+    headers['Content-Type'] = data['content-type'];
+    headers['X-UPLOAD-FILENAME'] = data.filename;
+    headers['Content-Encoding'] = 'base64';
+    return await this.request(path, {
+      method: 'PATCH',
+      body: data.data
+    }, headers);
   }
 
-}
-
-function TraversalProvider(_ref2) {
-  let {
-    children
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);
-
-  return /*#__PURE__*/React.createElement(TraversalContext.Provider, {
-    value: new Traversal(props)
-  }, children);
-}
-function useTraversal() {
-  return React.useContext(TraversalContext);
-}
-function ClientProvider({
-  children,
-  client
-}) {
-  return /*#__PURE__*/React.createElement(ClientContext.Provider, {
-    value: client
-  }, children);
-}
-function useGuillotinaClient() {
-  return React.useContext(ClientContext);
-}
-
-const noop$1 = () => {};
-
-const Button = (_ref) => {
-  let {
-    children,
-    className = 'is-primary',
-    onClick,
-    type = 'submit',
-    loading = false,
-    disabled = false,
-    dataTest
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onClick", "type", "loading", "disabled", "dataTest"]);
-
-  let css = [].concat('button', ...className.split(' '));
-  if (loading) css = css.concat('is-loading');
-  if (disabled) onClick = noop$1;
-  return /*#__PURE__*/React.createElement("p", {
-    className: "control"
-  }, /*#__PURE__*/React.createElement("button", _extends({
-    type: type,
-    className: classnames(css),
-    onClick: onClick,
-    disabled: disabled
-  }, rest, {
-    "data-test": dataTest
-  }), children));
-};
-
-function Modal(props) {
-  const {
-    isActive,
-    setActive,
-    children
-  } = props;
-  const {
-    Portal
-  } = usePortal();
-  const css = 'modal ' + (isActive ? 'is-active ' : '') + props.className;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
-    className: css
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "modal-background",
-    onClick: () => setActive(false)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "modal-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "box"
-  }, children)), /*#__PURE__*/React.createElement("button", {
-    className: "modal-close is-large",
-    "aria-label": "close",
-    onClick: () => setActive(false)
-  })));
-}
-function Confirm({
-  message,
-  onCancel,
-  onConfirm,
-  loading
-}) {
-  const setActive = () => onCancel();
+  async delete(path, data = undefined) {
+    return await this.request(path, {
+      method: 'delete',
+      body: JSON.stringify(data)
+    });
+  }
 
-  return /*#__PURE__*/React.createElement(Modal, {
-    isActive: true,
-    setActive: setActive,
-    className: "confirm"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", {
-    className: "title is-size-5"
-  }, message || 'Are you Sure?'), /*#__PURE__*/React.createElement("div", {
-    className: "level",
-    style: {
-      marginTop: 50
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "level-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "level-right"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "button is-danger",
-    onClick: () => onCancel()
-  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement(Button, {
-    loading: loading,
-    className: "is-success",
-    onClick: () => onConfirm(),
-    dataTest: "btnConfirmModalTest"
-  }, "Confirm")))));
-} // @todo Improve it... Replacing the inputText to a tree
+}
 
-function PathTree({
-  title,
-  defaultPath,
-  children,
-  onConfirm,
-  onCancel
+const Loading = (_ref) => {
+  let rest = _extends({}, _ref);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "progress-line"
+  }, rest));
+};
+
+const Tag = ({
+  name,
+  onRemove,
+  size: _size = 'is-medium',
+  color: _color = 'is-warning'
+}) => /*#__PURE__*/React.createElement("span", {
+  className: classnames(['tag', _color, _size])
+}, name, onRemove !== undefined && /*#__PURE__*/React.createElement("button", {
+  className: "delete is-small",
+  onClick: () => onRemove()
+}));
+
+function Delete({
+  onClick,
+  className,
+  children
 }) {
-  return /*#__PURE__*/React.createElement(Modal, {
-    isActive: true,
-    setActive: onCancel
-  }, /*#__PURE__*/React.createElement("h1", null, title), /*#__PURE__*/React.createElement("form", {
-    onSubmit: e => {
-      e.preventDefault();
-      onConfirm(e.target[0].value, e.target);
-    }
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "input",
-    placeholder: "/folder (without /db/container on front)",
-    style: {
-      margin: '20px 0'
-    },
-    defaultValue: defaultPath,
-    type: "text"
-  }), children, /*#__PURE__*/React.createElement("div", {
-    className: "level-right"
-  }, /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "button is-danger",
-    onClick: onCancel
-  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    className: "button is-success"
-  }, "Confirm"))));
+    onClick: onClick,
+    className: `delete ${className}`,
+    "data-test": "btnDeleteTest"
+  }, children);
 }
 
-function useSetState(initialState) {
-  const [state, set] = useState(initialState);
-  const setState = useCallback(patch => {
-    set(prevState => Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch));
-  }, [set]);
-  return [state, setState];
+function Table({
+  headers,
+  children,
+  className
+}) {
+  className = className ? className.split(' ') : ' is-full is-fullwidth is-narrow'.split(' ');
+  return /*#__PURE__*/React.createElement("table", {
+    className: classnames(['table', ...className])
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headers && headers.map((item, idx) => /*#__PURE__*/React.createElement("th", {
+    key: item + idx
+  }, item)))), /*#__PURE__*/React.createElement("tbody", null, children));
 }
 
-const initial = {
-  loading: undefined,
-  isError: false,
-  errorMessage: undefined,
-  result: undefined,
-  response: undefined
-};
+function Notification({
+  isColor = '',
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'notification is-' + isColor,
+    "data-test": "notificationTest"
+  }, children);
+}
 
-const getErrorMessage = (dataError, defaultValue) => {
-  if (dataError && dataError.details) {
-    return dataError.details;
-  } else if (dataError && dataError.reason) {
-    return dataError.reason;
-  }
+// https://github.com/molefrog/wouter
 
-  return defaultValue;
-};
+const setURLParams = p => window.history['pushState'](0, 0, (window.history.pathname || '') + '?' + p.toString().replace(/%2F/g, '/'));
 
-const processResponse = async (res, ready_body = true) => {
-  if (res.status < 400) return {
-    isError: false,
-    loading: false,
-    result: ready_body ? await res.json() : res.status,
-    response: res
-  };else return {
-    isError: true,
-    loading: false,
-    errorMessage: getErrorMessage(await res.json(), res.status),
-    response: res
-  };
+const clean = to => {
+  const current = new URLSearchParams();
+  Object.keys(to).forEach(_key => current.set(_key, to[_key]));
+  setURLParams(current);
 };
 
-const patch = (setState, Ctx) => async (data, endpoint, body = false) => {
-  setState({
-    loading: true
-  });
-  let newState = {};
+const useLocation = () => {
+  const [path, update] = useState(currentSearchParams());
+  const prevPath = useRef(path);
+  useEffect(() => {
+    patchHistoryEvents(); // this function checks if the location has been changed since the
+    // last render and updates the state only when needed.
+    // unfortunately, we can't rely on `path` value here, since it can be stale,
+    // that's why we store the last pathname in a ref.
 
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-    const res = await Ctx.client.patch(path, data);
-    newState = await processResponse(res, body);
-  } catch (e) {
-    console.error('Error', e);
-    newState = {
-      isError: true,
-      errorMessage: 'unhandled exception'
+    const checkForUpdates = () => {
+      const pathname = currentSearchParams();
+      prevPath.current !== pathname && update(prevPath.current = pathname);
     };
-  }
-
-  setState(newState);
-  return newState;
-};
-
-const del = (setState, Ctx) => async (data, endpoint, body = false) => {
-  setState({
-    loading: true
-  });
-  let newState = {};
 
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-    const res = await Ctx.client.delete(path, data);
-    newState = await processResponse(res, body);
-  } catch (e) {
-    console.error('Error', e);
-    newState = {
-      isError: true,
-      errorMessage: 'unhandled exception'
-    };
-  }
+    const events = ['popstate', 'pushState', 'replaceState'];
+    events.map(e => window.addEventListener(e, checkForUpdates)); // it's possible that an update has occurred between render and the effect handler,
+    // so we run additional check on mount to catch these updates. Based on:
+    // https://gist.github.com/bvaughn/e25397f70e8c65b0ae0d7c90b731b189
 
-  setState(newState);
-  return newState;
-};
+    checkForUpdates();
+    return () => events.map(e => window.removeEventListener(e, checkForUpdates));
+  }, []); // the 2nd argument of the `useLocation` return value is a function
+  // that allows to perform a navigation.
+  //
+  // the function reference should stay the same between re-renders, so that
+  // it can be passed down as an element prop without any performance concerns.
 
-const post = (setState, Ctx) => async (data, endpoint, body = true) => {
-  setState({
-    loading: true
-  });
-  let newState = {};
+  const navigate = useCallback((to, replace) => {
+    if (replace) {
+      clean(to);
+      return;
+    }
 
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-    const res = await Ctx.client.post(path, data);
-    newState = await processResponse(res, body);
-  } catch (e) {
-    console.error('Error', e);
-    newState = {
-      isError: true,
-      errorMessage: 'unhandled exception'
-    };
-  }
+    let current = new URLSearchParams(path.toString());
+    Object.keys(to).forEach(_key => current.set(_key, to[_key]));
+    setURLParams(current);
+  }, [path]);
+  const remove = useCallback(param => {
+    let current = new URLSearchParams(path.toString());
+    current.delete(param);
+    setURLParams(current);
+  }, [path]);
+  return [path, navigate, remove];
+}; // While History API does have `popstate` event, the only
+// proper way to listen to changes via `push/replaceState`
+// is to monkey-patch these methods.
+//
+// See https://stackoverflow.com/a/4585031
 
-  setState(newState);
-  return newState;
-};
+let patched = 0;
 
-const get = (setState, Ctx) => async endpoint => {
-  setState({
-    loading: true
-  });
-  const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-  const req = await Ctx.client.get(path);
-  const data = await req.json();
-  setState({
-    loading: false,
-    result: data,
-    response: req
+const patchHistoryEvents = () => {
+  if (patched) return;
+  ['pushState', 'replaceState'].map(type => {
+    const original = window.history[type];
+
+    window.history[type] = function () {
+      const result = original.apply(this, arguments);
+      const event = new Event(type);
+      event.arguments = arguments;
+      dispatchEvent(event);
+      return result;
+    };
   });
-  return data;
+  return patched = 1;
 };
 
-function useCrudContext() {
-  const Ctx = useTraversal();
-  const [state, setState] = useSetState(initial);
-  return _extends({}, state, {
-    Ctx,
-    patch: patch(setState, Ctx),
-    del: del(setState, Ctx),
-    post: post(setState, Ctx),
-    get: get(setState, Ctx)
-  });
-}
+const currentSearchParams = (path = window.location.search) => new URLSearchParams(path);
 
-function AddItem(props) {
-  const Ctx = useTraversal();
-  const {
-    post,
-    loading
-  } = useCrudContext();
-  const {
-    type
-  } = props;
-  const {
-    getForm
-  } = Ctx.registry;
-  const Form = getForm(type);
+function Link(_ref) {
+  let {
+    aRef,
+    model,
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["aRef", "model", "children"]);
 
-  const setActive = () => {
-    Ctx.cancelAction();
+  const [path, navigate] = useLocation();
+  const aStyle = {
+    textDecoration: 'none',
+    color: 'currentColor'
   };
 
-  async function doSubmit(data) {
-    const form = Object.assign({}, {
-      '@type': type
-    }, data.formData ? data.formData : data);
-    const {
-      isError,
-      errorMessage
-    } = await post(form);
+  function onClick(e) {
+    e.stopPropagation();
+    if (actAsLink(e)) return;
+    e.preventDefault();
+    navigate({
+      path: model.path
+    }, true);
+    if (props.onClick) props.onClick(e);
+  }
 
-    if (!isError) {
-      Ctx.flash('Content created!', 'success');
-    } else {
-      Ctx.flash(`An error has ocurred: ${errorMessage}`, 'danger');
-    }
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    ref: aRef,
+    href: `?${path}${model.id}/`,
+    style: aStyle,
+    onClick: onClick
+  }), children);
+}
 
-    Ctx.cancelAction();
-    Ctx.refresh();
+function actAsLink(e) {
+  return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0;
+}
+
+function TdLink(_ref) {
+  let {
+    model,
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["model", "children"]);
+
+  const link = useRef();
+
+  function onClick() {
+    link.current.click();
   }
 
-  return /*#__PURE__*/React.createElement(Modal, {
-    isActive: true,
-    setActive: setActive
-  }, /*#__PURE__*/React.createElement(Form, {
-    loading: loading,
-    onSubmit: doSubmit,
-    onError: err => console.log(err),
-    actionName: 'Add ' + type,
-    title: 'Add ' + type,
-    type: type,
-    dataTest: `formAdd${type}Test`
-  }));
+  return /*#__PURE__*/React.createElement("td", _extends({}, props, {
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement(Link, {
+    model: model,
+    aRef: link
+  }, children));
 }
 
-const Permissions = ['guillotina.AddContent', 'guillotina.ModifyContent', 'guillotina.ViewContent', 'guillotina.DeleteContent', 'guillotina.AccessContent', 'guillotina.SeePermissions', 'guillotina.ChangePermissions', 'guillotina.MoveContent', 'guillotina.DuplicateContent', 'guillotina.ReadConfiguration', 'guillotina.RegisterConfigurations', 'guillotina.WriteConfiguration', 'guillotina.ManageAddons', 'guillotina.swagger.View'];
-const Config = {
-  DisabledTypes: ['UserManager', 'GroupManager'],
-  PageSize: 10,
-  DelayActions: 200,
-  Permissions: Permissions,
-  SearchEngine: 'PostreSQL' // Elasticsearch
+const SEP = '=';
+const DEFAULT_FIELD = 'title__in';
+const CLEANER = '||';
+function parser(qs, defaultField = DEFAULT_FIELD) {
+  let lastKey = undefined;
+  qs.trim();
 
-};
-let calculated = Object.assign({}, Config);
+  if (qs.includes('"')) {
+    qs = qs.replace(/"(\w+) (\w+)"/, `$1${CLEANER}$2`);
+  }
 
-const addConfig = (additional, original) => {
-  const rest = Object.assign({}, original);
-  Object.keys(additional).forEach(item => {
-    if (typeof Config[item] === 'object' && Array.isArray(Config[item])) {
-      rest[item] = [].concat(Config[item], additional[item]);
-    } else if (typeof Config[item] === 'object') {
-      rest[item] = Object.assign({}, Config[item], additional[item]);
-    } else {
-      rest[item] = additional[item];
+  qs = qs.split(' ');
+  return qs.map(part => {
+    if (part.includes(CLEANER)) {
+      part = part.replace('||', ' ');
     }
-  });
-  return rest;
-};
 
-function useConfig(cfg) {
-  const ref = React.useRef();
+    if (!part.includes(SEP)) {
+      return !lastKey ? [defaultField, part] : [lastKey, part];
+    }
 
-  if (cfg && !ref.current) {
-    console.log('cfg', cfg);
-    calculated = addConfig(cfg, calculated);
-    ref.current = calculated;
-  } // if (cfg && !ref.current) {
-  //   ref.current = addConfig(cfg, ref.current);
-  //   calculated = ref.current
-  //   console.log("Current config", cfg)
-  // }
+    const [key, val] = part.split(SEP);
+    lastKey = key;
+    return [key, val];
+  });
+}
+function buildQs(parsedQuery) {
+  return parsedQuery.map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
+}
 
+let cacheTypes = {};
+let cacheSchemas = {};
+class GuillotinaClient {
+  constructor(rest, pathContainsContainer) {
+    this.getContainerFromPath = path => {
+      if (this.pathContainsContainer) {
+        if (path.startsWith('/')) {
+          path = path.substring(1);
+        }
 
-  return calculated;
-}
+        let parts = path.split('/');
+        return `${parts[0]}/${parts[1]}/`;
+      }
 
-const getId = item => {
-  if (item['@id']) {
-    return item['@id'];
-  }
+      return '';
+    };
 
-  return item['@absolute_url'];
-};
+    this.clearContainerFromPath = path => {
+      if (this.pathContainsContainer) {
+        return `/${this.cleanPath(path)}`;
+      }
 
-function RemoveItems(props) {
-  const Ctx = useTraversal();
-  const cfg = useConfig();
-  const [loading, setLoading] = React.useState(false);
-  const {
-    items = []
-  } = props;
-  const last = items[items.length - 1]['@name'];
-  const itemsNames = items.map(item => item['@name']).join(', ').replace(`, ${last}`, ` and ${last}`);
+      return path;
+    };
 
-  async function removeItems() {
-    let errors = [];
-    setLoading(true);
-    const actions = items.map(async item => {
-      console.log(item);
-      const res = await Ctx.client.delete(getId(item));
+    this.rest = rest;
+    this.pathContainsContainer = pathContainsContainer;
+  }
 
-      if (!res.ok) {
-        const err = await res.json();
-        errors.push(err);
-      }
-    }); // this sleep is here, to let elasticsearch, wait for
-    // index our operations... (will work 99% of use cases)
+  async getContext(path) {
+    switch (path) {
+      case '/':
+        return await this.rest.get('');
 
-    actions.push(sleep(cfg.DelayActions));
-    await Promise.all(actions);
+      default:
+        if (path.startsWith('/')) {
+          path = path.substring(1);
+        }
 
-    if (errors.length === 0) {
-      Ctx.flash(`Items removed!`, 'success');
-      Ctx.refresh();
-    } else {
-      const errorstr = errors.map(err => JSON.stringify(err)).join('\n');
-      Ctx.flash(`Something went wrong!! ${errorstr}`, 'danger');
+        return await this.rest.get(path);
     }
-
-    setLoading(false);
-    Ctx.cancelAction();
   }
 
-  return /*#__PURE__*/React.createElement(Confirm, {
-    loading: loading,
-    onCancel: () => Ctx.cancelAction(),
-    onConfirm: removeItems,
-    message: `Are you sure to remove: ${itemsNames}?`
-  });
-}
-
-const Checkbox = (_ref) => {
-  let {
-    id,
-    className,
-    classNameInput,
-    loading,
-    disabled,
-    indeterminate = false,
-    value = false,
-    children,
-    placeholder,
-    onChange,
-    dataTest
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["id", "className", "classNameInput", "loading", "disabled", "indeterminate", "value", "color", "backgroundColor", "borderColor", "children", "placeholder", "onChange", "dataTest"]);
+  async get(path) {
+    if (path.startsWith('/')) {
+      path = path.slice(1);
+    }
 
-  const inputRef = useRef(null);
-  const [state, setState] = React.useState(value);
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
+    return await this.rest.get(path);
+  }
+
+  getQueryParamsPostresql({
+    start = 0,
+    pageSize = 10,
+    withDepth = true
+  }) {
+    let result = [];
+    result = [...parser(start.toString(), 'b_start'), ...parser(pageSize.toString(), 'b_size')];
+
+    if (withDepth) {
+      var _parser;
+
+      result = [...result, ...((_parser = parser('1', 'depth')) != null ? _parser : [])];
     }
-  }, [indeterminate]);
 
-  const updateState = ev => {
-    setState(ev.target.checked);
-    onChange(ev.target.checked);
-  };
+    return result;
+  }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    className: classnames(['checkbox', className])
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef,
-    disabled: disabled || loading,
-    id: id,
-    type: "checkbox",
-    className: classnames(['checkbox', classNameInput]),
-    checked: state,
-    onChange: updateState,
-    "data-test": dataTest
-  }, rest)), children || placeholder));
-};
+  getQueryParamsElasticsearch({
+    start = 0,
+    pageSize = 10,
+    path,
+    withDepth = true
+  }) {
+    let result = [];
+    let containerPath = this.getContainerFromPath(path);
 
-const ErrorZone = ({
-  children,
-  id,
-  className
-}) => {
-  return /*#__PURE__*/React.createElement("p", {
-    className: classnames(['help is-danger', className]),
-    id: id
-  }, children);
-};
+    if (containerPath.startsWith('/')) {
+      containerPath = containerPath.slice(1);
+    }
 
-ErrorZone.propTypes = {
-  children: PropTypes.node,
-  id: PropTypes.string,
-  className: PropTypes.string
-};
+    let objectPath = path.replace(containerPath, '');
 
-const applyValidators = (value, validators) => {
-  let validation = Array.isArray(validators) ? validators : [validators];
-  let result = true;
-  validation.forEach(func => {
-    if (func(value) === false) {
-      result = false;
+    if (objectPath.endsWith('/')) {
+      objectPath = objectPath.slice(0, -1);
     }
-  });
-  return result;
-};
 
-const useInput = (onChange, value, validator) => {
-  let [state, setState] = React.useState({
-    hasError: false,
-    value: value
-  });
+    result = [...parser(start.toString(), '_from'), ...parser(pageSize.toString(), 'size')];
 
-  const onUpdate = ev => {
-    const value = ev && ev.target ? ev.target.value : ev ? ev : '';
-    setState({
-      value,
-      hasError: false
-    });
-    if (onChange) onChange(value);
-  };
+    if (withDepth) {
+      var _parser2;
 
-  const onBlur = () => {
-    const hasError = applyValidators(state.value, validator) === false;
-    if (hasError) setState({
-      value: state.value,
-      hasError
-    });
-  };
+      result = [...result, ...((_parser2 = parser('1', 'depth')) != null ? _parser2 : [])];
+    }
 
-  const onFocus = () => {
-    if (state.hasError) {
-      setState({
-        value: state.value,
-        hasError: false
-      });
+    if (objectPath !== '') {
+      result = [...result, ...parser(objectPath, 'path__wildcard')];
     }
-  };
 
-  React.useEffect(() => {
-    setState({
-      value,
-      hasError: false
-    });
-  }, [value]);
-  return {
-    onChange: onUpdate,
-    onFocus,
-    onBlur,
-    state
-  };
-};
+    return result;
+  }
 
-// From github.com/protonmail/proton-shared
+  getItemsColumn() {
+    const smallcss = {
+      width: 25
+    };
+    const mediumcss = {
+      width: 120
+    };
+    return [{
+      label: '',
+      child: m => /*#__PURE__*/React.createElement("td", {
+        style: smallcss
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: m.icon
+      }))
+    }, {
+      label: 'type',
+      child: m => /*#__PURE__*/React.createElement(TdLink, {
+        style: smallcss,
+        model: m
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "tag"
+      }, m.type))
+    }, {
+      label: 'id/name',
+      child: (m, navigate, search) => /*#__PURE__*/React.createElement(TdLink, {
+        model: m
+      }, m.name, search && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
+        className: "is-size-7 tag is-light"
+      }, m.path)))
+    }, {
+      label: 'created',
+      child: m => /*#__PURE__*/React.createElement("td", {
+        style: mediumcss,
+        className: "is-size-7 is-vcentered"
+      }, m.created)
+    }, {
+      label: 'modified',
+      child: m => /*#__PURE__*/React.createElement("td", {
+        style: mediumcss,
+        className: "is-size-7 is-vcentered"
+      }, m.updated)
+    }];
+  } // BBB API changes. Compat G5 and G6
 
-/* eslint-disable no-useless-escape */
-const REGEX_EMAIL = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/i;
-const REGEX_URL = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
-const REGEX_HEX_COLOR = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/i;
-const REGEX_NUMBER = /^\d+$/;
-const isEmpty = (value = '') => !value.length;
-const maxLength = (value = '', limit = 0) => value.length <= limit;
-const minLength = (value = '', limit = 0) => value.length >= limit;
-const isEmail = (value = '') => REGEX_EMAIL.test(value);
-const isURL = (value = '') => REGEX_URL.test(value);
-const isHexColor = (value = '') => REGEX_HEX_COLOR.test(value);
-const isNumber = (value = '') => REGEX_NUMBER.test(value);
-const notEmpty = value => !!value.length;
 
-const noop$2 = () => true;
-/** @type any */
+  applyCompat(data) {
+    data.member = data.items;
+    data.items_count = data.items_total;
+    return data;
+  }
 
+  async search(path, params, container = false, prepare = true) {
+    if (path.startsWith('/')) {
+      path = path.slice(1);
+    }
 
-const Input = React.forwardRef((_ref, ref) => {
-  let {
-    icon,
-    iconPosition = 'has-icons-right',
-    error,
-    errorZoneClassName,
-    autoComplete = 'off',
-    className = '',
-    widget = 'input',
-    type = 'text',
-    loading = false,
-    required = false,
-    id,
-    placeholder,
-    value,
-    autofocus = false,
-    onChange,
-    validator = noop$2,
-    errorMessage,
-    dataTest = 'testInput'
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["icon", "iconPosition", "error", "errorZoneClassName", "autoComplete", "className", "widget", "type", "onPressEnter", "isSubmitted", "loading", "required", "id", "placeholder", "value", "autofocus", "onChange", "validator", "errorMessage", "dataTest"]);
+    if (container) {
+      path = this.getContainerFromPath(path);
+    }
 
-  if (required) {
-    validator = Array.isArray(validator) ? validator.push(notEmpty) : [validator, notEmpty];
+    let query = prepare ? toQueryString(params) : params;
+    const url = `${path}@search?${query}`;
+    let res = await this.rest.get(url);
+    let data = await res.json();
+    return this.applyCompat(data);
   }
 
-  const _useInput = useInput(onChange, value != null ? value : '', validator),
-        {
-    state
-  } = _useInput,
-        handlers = _objectWithoutPropertiesLoose(_useInput, ["state"]);
+  async canido(path, permissions) {
+    if (path.startsWith('/')) {
+      path = path.slice(1);
+    }
+
+    if (Array.isArray(permissions)) {
+      permissions.join(',');
+    }
+
+    const url = `${path}@canido?permissions=${permissions}`;
+    return await this.rest.get(url);
+  }
+
+  async createObject(path, data) {
+    return await this.rest.post(path, data);
+  }
+
+  cleanPath(path) {
+    let url = path.split('/').slice(3);
+    return `${url.join('/')}`;
+  }
 
-  const [uid] = useState(generateUID('input'));
-  const [mounted, setMounted] = useState(false); // eslint-disable-next-line
+  async delete(path, data) {
+    return await this.rest.delete(path, data);
+  }
 
-  ref = ref || React.useRef();
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (autofocus && !error) {
-      ref.current.focus();
+  async create(path, data) {
+    if (path.startsWith('/')) {
+      path = path.substring(1);
     }
-  }, [mounted, autofocus, ref, error]);
-  const theError = state.hasError ? errorMessage || 'invalid field' : '';
-  const statusClasses = state.hasError ? 'is-danger' : '';
 
-  const cssControl = () => icon ? ['control', iconPosition] : ['control'];
+    return await this.rest.post(path, data);
+  }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
-    className: "label",
-    htmlFor: id
-  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
-    className: classnames(cssControl())
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    className: classnames([widget, className, statusClasses]),
-    "aria-invalid": theError,
-    "aria-describedby": uid,
-    id: id,
-    ref: ref,
-    type: type,
-    value: state.value,
-    placeholder: placeholder,
-    autoComplete: autoComplete,
-    disabled: loading || rest.disabled,
-    required: required,
-    "data-test": dataTest
-  }, handlers, rest)), icon && icon), /*#__PURE__*/React.createElement(ErrorZone, {
-    className: errorZoneClassName,
-    id: uid
-  }, state.hasError ? theError : ''));
-});
-Input.propTypes = {
-  icon: PropTypes.node,
-  iconPosition: PropTypes.arrayOf(PropTypes.oneOf(['has-icons-left', 'has-icons-right', ''])),
-  error: PropTypes.string,
-  errorZoneClassName: PropTypes.string,
-  autoComplete: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onPressEnter: PropTypes.func,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  required: PropTypes.bool,
-  type: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
-};
+  async post(path, data) {
+    return await this.create(path, data);
+  }
 
-const EmailInput = (_ref) => {
-  let {
-    value = '',
-    dataTest
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["value", "dataTest"]);
+  async patch(path, data) {
+    if (path.startsWith('/')) {
+      path = path.substring(1);
+    }
 
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    type: "email",
-    validator: isEmail,
-    errorMessage: "Email address invalid",
-    value: value,
-    "data-test": dataTest,
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: "fas fa-envelope"
-    })
-  }, rest));
-};
+    return await this.rest.patch(path, data);
+  }
 
-const Form = (_ref) => {
-  let {
-    children,
-    className = '',
-    onSubmit = noop,
-    onReset = noop,
-    autoComplete = 'off',
-    title,
-    error,
-    dataTest
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onSubmit", "onReset", "autoComplete", "title", "error", "dataTest"]);
+  async upload(path, file) {
+    if (path.startsWith('/')) {
+      path = path.substring(1);
+    }
 
-  const handleSubmit = event => {
-    event.preventDefault();
-    onSubmit(event);
-  };
+    return await this.rest.upload(path, file);
+  }
 
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest
-  }, title && /*#__PURE__*/React.createElement("div", {
-    className: "level"
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: "title is-size-4"
-  }, title)), error && /*#__PURE__*/React.createElement("div", {
-    className: "notification is-danger"
-  }, error), /*#__PURE__*/React.createElement("form", _extends({
-    onSubmit: handleSubmit,
-    onReset: onReset,
-    autoComplete: autoComplete,
-    className: classnames(['form', className])
-  }, rest), children));
-};
-Form.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  onSubmit: PropTypes.func,
-  onReset: PropTypes.func,
-  autoComplete: PropTypes.string
-};
+  async download(path) {
+    if (path.startsWith('/')) {
+      path = path.substring(1);
+    }
 
-const PasswordInput = (_ref) => {
-  let {
-    value = ''
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["value"]);
+    return await this.rest.get(path);
+  }
 
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    value: value,
-    type: "password"
-  }, rest));
-};
+  async getTypeSchema(path, name) {
+    if (!cacheSchemas[name]) {
+      let url = this.getContainerFromPath(path); // todo: handle db case (only addable containers)
 
-const formComponents = {
-  string: Input,
-  password: PasswordInput,
-  boolean: Checkbox,
-  email: EmailInput
-};
-function FormBuilder(_ref) {
-  let {
-    schema,
-    formData,
-    onSubmit,
-    actionName,
-    children,
-    exclude = [],
-    remotes = [],
-    submitButton = true
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "formData", "title", "onSubmit", "actionName", "children", "exclude", "remotes", "submitButton"]);
+      const res = await this.rest.get(`${url}@types/${name}`);
+      cacheSchemas[name] = await res.json();
+    }
 
-  const ref = React.useRef();
-  const {
-    properties,
-    required
-  } = schema;
-  const values = Object.assign({}, formData || {}); // build initial state
+    return cacheSchemas[name];
+  }
 
-  let initialState = {};
-  const fields = Object.keys(properties).filter(x => !exclude.includes(x));
-  fields.forEach(element => {
-    initialState[element] = values[element] || undefined;
-  }); // Register remotes
+  async getAddons(path) {
+    return await this.rest.get(`${path}@addons`);
+  }
 
-  if (!ref.current) {
-    ref.current = {};
-    Object.keys(remotes).forEach(item => ref.current[item] = remotes[item]);
-  } else {
-    // apply remote changes
-    Object.keys(remotes).forEach(key => {
-      if (JSON.stringify(ref.current[key]) !== JSON.stringify(remotes[key])) {
-        ref.current[key] = remotes[key];
-      }
+  async installAddon(path, key) {
+    return await this.rest.post(`${path}@addons`, {
+      id: key
     });
   }
 
-  ref.current = ref.current || {};
+  async removeAddon(path, key) {
+    return await this.rest.delete(`${path}@addons`, {
+      id: key
+    });
+  }
 
-  const onUpdate = field => ev => {
-    ref.current[field] = ev.target ? ev.target.value : ev.value || ev;
-  };
+  async getGroups(path) {
+    const endpoint = `${this.getContainerFromPath(path)}@groups`;
+    return await this.rest.get(endpoint);
+  }
 
-  const GetTag = ({
-    field
-  }) => {
-    const Tag = formComponents[properties[field].widget || properties[field].type];
-    const props = {
-      label: properties[field].title,
-      value: initialState[field],
-      onChange: onUpdate(field),
-      placeholder: properties[field].title || '',
-      id: generateUID(),
-      dataTest: `${field}TestInput`
+  async getUsers(path) {
+    const endpoint = `${this.getContainerFromPath(path)}@users`;
+    return await this.rest.get(endpoint);
+  }
+
+  async getPrincipals(path) {
+    const groups = this.getGroups(path);
+    const users = this.getUsers(path);
+    const [gr, usr] = await Promise.all([groups, users]);
+    return {
+      groups: gr.ok ? await gr.json() : [],
+      users: usr.ok ? await usr.json() : []
     };
+  }
+
+  async getRoles(path) {
+    const endpoint = `${this.getContainerFromPath(path)}@available-roles`;
+    return await this.rest.get(endpoint);
+  }
+
+  async getAllPermissions(path) {
+    // paths used to query the API always has to start without a "/"
+    if (path.startsWith('/')) {
+      path = path.slice(1);
+    }
+
+    const req = await this.rest.get(path + '@all_permissions');
+    const resp = await req.json();
+    const permissions = Array.from(new Set(extractPermissions(resp)));
+    return permissions;
+  }
 
-    if (required.includes(field)) {
-      props.required = true;
-      props.placeholder += ' *';
+  async getTypes(path) {
+    if (path.startsWith('/')) {
+      path = path.slice(1);
     }
 
-    Tag.displayName = `${field}Field`;
-    return /*#__PURE__*/React.createElement(Tag, props);
-  };
+    if (!cacheTypes[path]) {
+      const types = await this.rest.get(path + '@addable-types');
 
-  const children_ = React.Children.map(children, child => React.cloneElement(child, {
-    onChange: onUpdate
-  }));
+      if (types.status === 401 || types.status === 404) {
+        cacheTypes[path] = [];
+      } else {
+        const res = await types.json();
+        cacheTypes[path] = res;
+      }
+    }
 
-  const changes = () => {
-    onSubmit(ref.current, values);
-  };
+    return cacheTypes[path];
+  }
 
-  return /*#__PURE__*/React.createElement(Form, _extends({
-    onSubmit: changes
-  }, rest), fields.map(field => /*#__PURE__*/React.createElement(GetTag, {
-    field: field,
-    key: field
-  })), children_, submitButton && /*#__PURE__*/React.createElement(Button, null, actionName));
 }
+function getClient(url, container, auth) {
+  return new GuillotinaClient(new RestClient(url, container, auth), container === '/');
+}
+const lightFileReader = async file => {
+  return new Promise(resolve => {
+    const reader = new FileReader();
+    reader.readAsArrayBuffer(file);
 
-/** @type any */
-
-const Select = React.forwardRef((_ref, ref) => {
-  let {
-    options,
-    error,
-    errorZoneClassName,
-    size = 1,
-    placeholder,
-    id,
-    className = '',
-    classWrap = '',
-    multiple = false,
-    loading = false,
-    onChange,
-    appendDefault = false,
-    style = {},
-    dataTest
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["options", "error", "errorZoneClassName", "size", "placeholder", "id", "className", "classWrap", "multiple", "loading", "isSubmitted", "onChange", "appendDefault", "style", "dataTest"]);
-
-  const [uid] = useState(generateUID('select'));
-
-  const onUpdate = ev => {
-    if (ev.target.value === '') {
-      onChange({
-        target: {
-          value: undefined
-        }
+    reader.onloadend = e => {
+      const fileData = e.target.result;
+      resolve({
+        filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
+        data: fileData,
+        'content-type': file.type
       });
-    } else {
-      onChange(ev);
-    }
-  };
+    };
+  });
+};
 
-  if (appendDefault) {
-    options = [{
-      text: 'Choose..',
-      value: ''
-    }].concat(options);
-  }
+const extractPermissions = data => {
+  let result = [];
 
-  const statusClasses = error ? 'is-danger' : '';
-  const cssWrap = ['select', statusClasses, multiple ? 'is-multiple' : '', classWrap];
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
-    className: "label",
-    htmlFor: id
-  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
-    className: classnames(cssWrap)
-  }, /*#__PURE__*/React.createElement("select", _extends({
-    className: classnames(['', className]),
-    size: size,
-    multiple: multiple,
-    disabled: loading || rest.disabled,
-    onChange: onUpdate
-  }, rest, {
-    ref: ref,
-    style: style,
-    "data-test": dataTest
-  }), options.map((_ref2, index) => {
-    let {
-      text
-    } = _ref2,
-        rest = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+  if (typeof data !== 'object') ; else if (!Array.isArray(data) && data.permission) {
+    result = result.concat([data.permission]);
+  } else if (!Array.isArray(data)) {
+    Object.keys(data).map(key => result = result.concat(extractPermissions(data[key])));
+  } else if (Array.isArray(data)) {
+    data.map(item => result = result.concat(extractPermissions(item)));
+  }
 
-    return /*#__PURE__*/React.createElement("option", _extends({
-      key: index.toString()
-    }, rest), text);
-  }))), error && /*#__PURE__*/React.createElement(ErrorZone, {
-    className: errorZoneClassName,
-    id: uid
-  }, error ? error : ''));
-});
-Select.propTypes = {
-  error: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  size: PropTypes.number,
-  onChange: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.object),
-  multiple: PropTypes.bool,
-  className: PropTypes.string
+  return result;
 };
 
 function FileUpload(_ref) {
@@ -2147,7 +2176,7 @@ function Dropdown(_ref) {
       // eslint-disable-next-line jsx-a11y/anchor-is-valid
       React.createElement("a", {
         className: disabled ? 'dropdown-item is-active' : 'dropdown-item',
-        "data-test": `dropdownItemTest-${option.text.toLowerCase()}`,
+        "data-test": `dropdownItemTest-${option.value.toLowerCase()}`,
         key: option.text,
         onClick: disabled ? undefined : () => onChange(option.value),
         style: disabled ? {
@@ -2161,57 +2190,6 @@ function Dropdown(_ref) {
   }))));
 }
 
-const plain = ['string', 'number', 'boolean'];
-function RenderField({
-  value,
-  Widget
-}) {
-  if (value === null || value === undefined) return '';
-
-  if (Widget) {
-    return /*#__PURE__*/React.createElement(Widget, {
-      value: value
-    });
-  }
-
-  const type = typeof value;
-
-  if (plain.includes(type)) {
-    return value;
-  }
-
-  if (type === 'object') {
-    if (Array.isArray(value)) {
-      return value.map(item => /*#__PURE__*/React.createElement("div", {
-        key: item
-      }, /*#__PURE__*/React.createElement(RenderField, {
-        value: item
-      })));
-    }
-
-    return Object.keys(value).map(key => /*#__PURE__*/React.createElement(FieldValue, {
-      field: key,
-      value: value[key],
-      key: key
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement("p", null, "No render for ", JSON.stringify(value));
-}
-
-const FieldValue = ({
-  field,
-  value
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "field"
-}, /*#__PURE__*/React.createElement("div", {
-  className: "label"
-}, field), /*#__PURE__*/React.createElement("div", {
-  className: "value"
-}, /*#__PURE__*/React.createElement(RenderField, {
-  value: value
-})));
-
 const formatDate = str => {
   const d = new Date(str);
   const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
@@ -2234,74 +2212,7 @@ function getNewId(id = '') {
     return `${suffix}${num + 1}`;
   });
 }
-
-const DownloadField = ({
-  value
-}) => {
-  const Ctx = useTraversal();
-  const {
-    data,
-    field
-  } = value;
-
-  const getField = async downloadFile => {
-    const endpoint = `${Ctx.path}@download/${field}`;
-    const res = await Ctx.client.download(endpoint);
-    const text = await res.blob();
-    const blob = new Blob([text], {
-      type: data.content_type
-    });
-    const url = window.URL.createObjectURL(blob); // Create blob link to download
-
-    const link = document.createElement('a');
-    link.href = url;
-
-    if (downloadFile) {
-      link.setAttribute('download', `${data.filename}`);
-    } else {
-      link.setAttribute('target', `_blank`);
-    }
-
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(function () {
-      var _link$parentNode;
-
-      // For Firefox it is necessary to delay revoking the ObjectURL
-      window.URL.revokeObjectURL(url);
-      (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
-    }, 100);
-  };
-
-  return /*#__PURE__*/createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/createElement("div", {
-    className: "label"
-  }, data.filename), /*#__PURE__*/createElement("div", {
-    className: "columns"
-  }, /*#__PURE__*/createElement("div", {
-    className: "column"
-  }, /*#__PURE__*/createElement("button", {
-    className: "button is-small is-primary level-left",
-    onClick: async event => {
-      event.preventDefault();
-      event.stopPropagation();
-      getField(false);
-    }
-  }, "Open")), /*#__PURE__*/createElement("div", {
-    className: "column"
-  }, /*#__PURE__*/createElement("button", {
-    className: "button is-small is-primary level-right",
-    onClick: async event => {
-      event.preventDefault();
-      event.stopPropagation();
-      getField(true);
-    }
-  }, "Download"))));
-};
-
-const DEFAULT_VALUE_EDITABLE_FIELD = 'Click to edit';
-const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+
 function EditableField({
   field,
   value,
@@ -2318,36 +2229,17 @@ function EditableField({
     loading,
     Ctx
   } = useCrudContext();
+  const {
+    fieldHaveDeleteButton
+  } = useConfig();
   const EditComponent = Ctx.registry.get('components', 'EditComponent');
+  const RenderFieldComponent = Ctx.registry.get('components', 'RenderFieldComponent');
   useEffect(() => {
     if (isEdit && ref.current) {
       ref.current.focus();
     }
   });
   const canModified = modifyContent && !get$1(schema, 'readonly', false);
-  const haveDeleteBtn = (schema == null ? void 0 : schema.widget) === 'file' || (schema == null ? void 0 : schema.widget) === 'select' || (schema == null ? void 0 : schema.type) === 'array';
-
-  const getRenderProps = () => {
-    const renderProps = {
-      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
-    };
-
-    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
-      renderProps['value'] = {
-        data: val,
-        field: field
-      };
-      renderProps['Widget'] = DownloadField;
-    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
-      var _val$toString;
-
-      renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
-    } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
-      renderProps['value'] = new Date(val).toLocaleString();
-    }
-
-    return renderProps;
-  };
 
   const saveField = async ev => {
     if (ev) ev.preventDefault();
@@ -2437,7 +2329,12 @@ function EditableField({
       setEdit(!!canModified);
     },
     "data-test": `editableFieldTest-${field}`
-  }, /*#__PURE__*/React.createElement(RenderField, getRenderProps()), canModified && /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(RenderFieldComponent, {
+    schema: schema,
+    field: field,
+    val: val,
+    modifyContent: modifyContent
+  }), canModified && /*#__PURE__*/React.createElement(Icon, {
     icon: "fas fa-edit"
   })), isEdit && /*#__PURE__*/React.createElement("div", {
     className: "field",
@@ -2465,7 +2362,7 @@ function EditableField({
     className: "is-small",
     onClick: () => setEdit(false),
     dataTest: "editableFieldBtnCancelTest"
-  }, "Cancel")), !required && haveDeleteBtn && /*#__PURE__*/React.createElement("div", {
+  }, "Cancel")), !required && fieldHaveDeleteButton(schema) && /*#__PURE__*/React.createElement("div", {
     className: "control"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "is-small is-danger",
@@ -2474,6 +2371,155 @@ function EditableField({
   }, "Delete")))));
 }
 
+const DownloadField = ({
+  value
+}) => {
+  const Ctx = useTraversal();
+  const {
+    data,
+    field
+  } = value;
+
+  const getField = async downloadFile => {
+    const endpoint = `${Ctx.path}@download/${field}`;
+    const res = await Ctx.client.download(endpoint);
+    const text = await res.blob();
+    const blob = new Blob([text], {
+      type: data.content_type
+    });
+    const url = window.URL.createObjectURL(blob); // Create blob link to download
+
+    const link = document.createElement('a');
+    link.href = url;
+
+    if (downloadFile) {
+      link.setAttribute('download', `${data.filename}`);
+    } else {
+      link.setAttribute('target', `_blank`);
+    }
+
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(function () {
+      var _link$parentNode;
+
+      // For Firefox it is necessary to delay revoking the ObjectURL
+      window.URL.revokeObjectURL(url);
+      (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
+    }, 100);
+  };
+
+  return /*#__PURE__*/createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/createElement("div", {
+    className: "label"
+  }, data.filename), /*#__PURE__*/createElement("div", {
+    className: "columns"
+  }, /*#__PURE__*/createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/createElement("button", {
+    className: "button is-small is-primary level-left",
+    onClick: async event => {
+      event.preventDefault();
+      event.stopPropagation();
+      getField(false);
+    }
+  }, "Open")), /*#__PURE__*/createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/createElement("button", {
+    className: "button is-small is-primary level-right",
+    onClick: async event => {
+      event.preventDefault();
+      event.stopPropagation();
+      getField(true);
+    }
+  }, "Download"))));
+};
+
+const plain = ['string', 'number', 'boolean'];
+function RenderField({
+  value,
+  Widget
+}) {
+  if (value === null || value === undefined) return '';
+
+  if (Widget) {
+    return /*#__PURE__*/React.createElement(Widget, {
+      value: value
+    });
+  }
+
+  const type = typeof value;
+
+  if (plain.includes(type)) {
+    return value;
+  }
+
+  if (type === 'object') {
+    if (Array.isArray(value)) {
+      return value.map(item => /*#__PURE__*/React.createElement("div", {
+        key: item
+      }, /*#__PURE__*/React.createElement(RenderField, {
+        value: item
+      })));
+    }
+
+    return Object.keys(value).map(key => /*#__PURE__*/React.createElement(FieldValue, {
+      field: key,
+      value: value[key],
+      key: key
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("p", null, "No render for ", JSON.stringify(value));
+}
+
+const FieldValue = ({
+  field,
+  value
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "field"
+}, /*#__PURE__*/React.createElement("div", {
+  className: "label"
+}, field), /*#__PURE__*/React.createElement("div", {
+  className: "value"
+}, /*#__PURE__*/React.createElement(RenderField, {
+  value: value
+})));
+
+const DEFAULT_VALUE_EDITABLE_FIELD = 'Click to edit';
+const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+function RenderFieldComponent({
+  schema,
+  field,
+  val,
+  modifyContent
+}) {
+  const getRenderProps = () => {
+    const renderProps = {
+      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
+    };
+
+    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
+      renderProps['value'] = {
+        data: val,
+        field: field
+      };
+      renderProps['Widget'] = DownloadField;
+    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
+      var _val$toString;
+
+      renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
+    } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
+      renderProps['value'] = new Date(val).toLocaleString();
+    }
+
+    return renderProps;
+  };
+
+  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+}
+
 function IAttachment({
   properties,
   values
@@ -2916,7 +2962,9 @@ function ItemsActionsProvider({
  * and it select/unselect all items of the page.
  */
 
-function AllItemsCheckbox() {
+function AllItemsCheckbox({
+  dataTest
+}) {
   const {
     onSelectAllItems,
     selected
@@ -2927,7 +2975,8 @@ function AllItemsCheckbox() {
     style: {
       marginLeft: 2
     },
-    value: selected.all
+    value: selected.all,
+    dataTest: dataTest
   });
 }
 /**
@@ -2935,7 +2984,8 @@ function AllItemsCheckbox() {
  */
 
 function ItemCheckbox({
-  item
+  item,
+  dataTest
 }) {
   const {
     selected,
@@ -2946,7 +2996,8 @@ function ItemCheckbox({
   return /*#__PURE__*/React.createElement(Checkbox, {
     key: value,
     onChange: () => onSelectOneItem(item),
-    value: value
+    value: value,
+    dataTest: dataTest
   });
 }
 /**
@@ -2970,7 +3021,9 @@ function ItemsActionsDropdown() {
     onChange: onAction,
     optionDisabledWhen: o => actions[o.value].perms.some(perm => !traversal.hasPerm(perm)),
     options: options
-  }, "Choose action...");
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": "btnChooseActionTest"
+  }, "Choose action..."));
 }
 
 /* eslint jsx-a11y/anchor-is-valid: "off" */
@@ -3190,7 +3243,8 @@ function RItem({
   }, /*#__PURE__*/React.createElement("td", {
     style: smallcss
   }, /*#__PURE__*/React.createElement(ItemCheckbox, {
-    item: item
+    item: item,
+    dataTest: "itemCheckboxRowTest"
   })), columns.map(i => /*#__PURE__*/React.createElement(React.Fragment, {
     key: i.label
   }, i.child(model, link, search))), /*#__PURE__*/React.createElement("td", {
@@ -4734,7 +4788,7 @@ function CopyItems(props) {
 
   return /*#__PURE__*/React.createElement(PathTree, {
     title: "Copy to...",
-    defaultPath: `/${Ctx.path.split(getContainerFromPath(Ctx.path))[1]}`,
+    defaultPath: Ctx.client.clearContainerFromPath(Ctx.path),
     onConfirm: copyItems,
     onCancel: () => Ctx.cancelAction()
   }, items.map(item => /*#__PURE__*/React.createElement(React.Fragment, {
@@ -4747,11 +4801,14 @@ function CopyItems(props) {
   }, `New id for "${item.id}" copy`), /*#__PURE__*/React.createElement("input", {
     type: "text",
     className: "input",
+    "data-test": `inputCopyIdTest-${item['@name']}`,
     defaultValue: getNewId(item.id)
   }))), "\xA0");
 }
 
 function CopyItem(props) {
+  var _item$parent$Name;
+
   const Ctx = useTraversal();
   const {
     post
@@ -4782,7 +4839,7 @@ function CopyItem(props) {
 
   return /*#__PURE__*/React.createElement(PathTree, {
     title: "Copy to...",
-    defaultPath: `/${item['parent']['@name']}`,
+    defaultPath: `/${(_item$parent$Name = item['parent']['@name']) != null ? _item$parent$Name : '/'}`,
     onConfirm: copyItem,
     onCancel: () => Ctx.cancelAction()
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("small", {
@@ -4793,6 +4850,7 @@ function CopyItem(props) {
   }, `New id for "${item['@name']}" copy`), /*#__PURE__*/React.createElement("input", {
     type: "text",
     className: "input",
+    "data-test": `inputCopyIdTest-${item['@name']}`,
     defaultValue: getNewId(item['@name'])
   })));
 }
@@ -5196,7 +5254,7 @@ function GroupCtx() {
   }, /*#__PURE__*/React.createElement("h3", {
     className: "title is-size-6"
   }, "Users"), /*#__PURE__*/React.createElement("p", null, "Add a User"), /*#__PURE__*/React.createElement(SearchInput, {
-    path: getContainerFromPath(Ctx.path),
+    path: Ctx.containerPath,
     qs: [...searchParsed, ...sortParsed],
     traversal: Ctx,
     onChange: addUser,
@@ -5310,7 +5368,8 @@ function Path() {
       key: indx
     }, /*#__PURE__*/React.createElement("a", {
       href: path,
-      onClick: onClick
+      onClick: onClick,
+      "data-test": `breadcrumbItemTest-home`
     }, /*#__PURE__*/React.createElement("span", {
       className: "icon"
     }, /*#__PURE__*/React.createElement("i", {
@@ -5473,7 +5532,8 @@ let registry = {
   properties: {},
   components: {
     Path: Path,
-    EditComponent: EditComponent
+    EditComponent: EditComponent,
+    RenderFieldComponent: RenderFieldComponent
   },
   searchEngineQueryParamsFunction: {
     PostreSQL: 'getQueryParamsPostresql',
@@ -5815,132 +5875,113 @@ const ERRORS = {
   failed_to_fetch: 'Failed to fetch data: Backend not running?',
   invalid_credentials: 'Failed! Invalid credentials'
 };
-class Login extends Component {
-  constructor(props) {
-    var _this;
-
-    super(props);
-    _this = this;
-    this.state = {
-      username: '',
-      password: '',
-      loading: undefined,
-      schema: '',
-      errors: undefined
-    };
-    this.ref = React.createRef();
-
-    this.doLogin = async function (ev) {
-      ev.preventDefault();
-
-      _this.setState({
-        loading: true,
-        errors: undefined
-      });
-
-      const {
-        username,
-        password,
-        schema
-      } = _this.state;
-
-      if (schema !== '') {
-        _this.props.auth.setAccount(schema);
-      }
-
-      const auth = _this.props.auth;
-      const res = await auth.login(username, password);
+const initialState$4 = {
+  username: '',
+  password: '',
+  loading: undefined,
+  errors: undefined
+};
+const Login = ({
+  currentSchema,
+  setCurrentSchema,
+  schemas,
+  auth,
+  onLogin
+}) => {
+  const [state, setState] = useSetState(initialState$4);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
 
-      if (!res) {
-        _this.setState({
-          errors: auth.errors,
-          loading: false
-        });
+  const doLogin = async ev => {
+    ev.preventDefault();
+    setState({
+      loading: true,
+      errors: undefined
+    });
+    const {
+      username,
+      password
+    } = state;
 
-        return;
-      }
+    if (currentSchema !== '') {
+      auth.setAccount(currentSchema);
+    }
 
-      if (_this.props.onLogin) {
-        _this.props.onLogin();
-      }
-    };
+    const res = await auth.login(username, password);
 
-    if (props.schemas) {
-      this.state.schema = props.schemas[0];
+    if (!res) {
+      setState({
+        errors: auth.errors,
+        loading: false
+      });
+      return;
     }
-  }
-
-  componentDidMount() {
-    this.ref.current.focus();
-  }
 
-  render() {
-    let {
-      password,
-      username,
-      errors
-    } = this.state;
-    const {
-      schemas
-    } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
-      className: "login__form",
-      action: "",
-      onSubmit: this.doLogin,
-      "data-test": "formLoginTest"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("label", {
-      className: "label"
-    }, "Username:"), /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: "input",
-      placeholder: "Username",
-      onChange: e => this.setState({
-        username: e.target.value
-      }),
-      value: username,
-      ref: this.ref,
-      "data-test": "inputUsernameLoginTest"
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("label", {
-      className: "label"
-    }, "Password:"), /*#__PURE__*/React.createElement("input", {
-      type: "password",
-      className: "input",
-      onChange: e => this.setState({
-        password: e.target.value
-      }),
-      value: password,
-      "data-test": "inputPasswordLoginTest"
-    })), schemas && /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("label", {
-      className: "label"
-    }, "Schema:"), /*#__PURE__*/React.createElement("div", {
-      className: "select"
-    }, /*#__PURE__*/React.createElement("select", {
-      onChange: e => this.setState({
-        schema: e.target.value
-      })
-    }, schemas.map(s => /*#__PURE__*/React.createElement("option", {
-      value: s,
-      key: s
-    }, s))))), /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("button", {
-      className: "button is-warning",
-      type: "submit",
-      "data-test": "btnLoginTest"
-    }, "Login")), /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, errors && /*#__PURE__*/React.createElement("p", {
-      className: "has-text-danger"
-    }, ERRORS[errors] || 'Generic error'))));
-  }
+    if (onLogin) {
+      onLogin();
+    }
+  };
 
-}
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
+    className: "login__form",
+    action: "",
+    onSubmit: doLogin,
+    "data-test": "formLoginTest"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "label"
+  }, "Username:"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    className: "input",
+    placeholder: "Username",
+    onChange: e => setState({
+      username: e.target.value
+    }),
+    value: state.username,
+    ref: inputRef,
+    "data-test": "inputUsernameLoginTest"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "label"
+  }, "Password:"), /*#__PURE__*/React.createElement("input", {
+    type: "password",
+    className: "input",
+    placeholder: "Password",
+    onChange: e => setState({
+      password: e.target.value
+    }),
+    value: state.password,
+    "data-test": "inputPasswordLoginTest"
+  })), schemas && schemas.length > 1 && /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "label"
+  }, "Schema:"), /*#__PURE__*/React.createElement("div", {
+    className: "select"
+  }, /*#__PURE__*/React.createElement("select", {
+    "data-test": "selectSchemaTest",
+    onChange: e => setCurrentSchema(e.target.value)
+  }, schemas.map(s => /*#__PURE__*/React.createElement("option", {
+    value: s,
+    key: s
+  }, s))))), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "button is-warning",
+    type: "submit",
+    "data-test": "btnLoginTest"
+  }, "Login")), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, state.errors && /*#__PURE__*/React.createElement("p", {
+    className: "has-text-danger"
+  }, ERRORS[state.errors] || 'Generic error'))));
+};
 
 const ignoreFiels = [];
 const extraFields = ['title'];
@@ -6219,5 +6260,5 @@ class Auth {
 
 }
 
-export { ACTIONS_OBJECT, AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DEFAULT_VALUE_EDITABLE_FIELD, DEFAULT_VALUE_NO_EDITABLE_FIELD, DatabaseCtx, Delete, DownloadField, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IDublinCore, IMultiAttachment, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, actions, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getClient, getContainerFromPath, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal };
+export { ACTIONS_OBJECT, AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DEFAULT_VALUE_EDITABLE_FIELD, DEFAULT_VALUE_NO_EDITABLE_FIELD, DatabaseCtx, Delete, DownloadField, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IDublinCore, IMultiAttachment, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, actions, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal };
 //# sourceMappingURL=react-gmi.modern.js.map