@webiny/app-admin-rmwc 0.0.0-unstable.c2780f51fe → 0.0.0-unstable.c7dec08bb0

package/modules/Overlays/Dialog.js

@@ -6,18 +6,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogContainer = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _get3 = _interopRequireDefault(require("lodash/get"));
 var _react = _interopRequireWildcard(require("react"));
 var _useUi = require("@webiny/app/hooks/useUi");
 var _Dialog = require("@webiny/ui/Dialog");
 var _Button = require("@webiny/ui/Button");
 var DialogContainer = function DialogContainer() {
+  var _ui$dialog;
   var ui = (0, _useUi.useUi)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
   var message = (0, _get3.default)(ui, "dialog.message");
   var _get2 = (0, _get3.default)(ui, "dialog.options", {}),
     dataTestId = _get2.dataTestId,
     title = _get2.title,
+    loading = _get2.loading,
     _get2$actions = _get2.actions,
     actions = _get2$actions === void 0 ? {
       cancel: null,
@@ -33,18 +42,55 @@ var DialogContainer = function DialogContainer() {
       });
     });
   }, [ui]);
+  /**
+   * We need this part because message can change while the dialog is opened and in loading state.
+   */
+  (0, _react.useEffect)(function () {
+    setIsLoading(false);
+  }, [ui === null || ui === void 0 ? void 0 : (_ui$dialog = ui.dialog) === null || _ui$dialog === void 0 ? void 0 : _ui$dialog.message]);
+  var handleConfirm = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (actions.accept.onClick) {
+              _context.next = 4;
+              break;
+            }
+            /**
+             * Should not happen as users should define "accept.onClick" function, but just in case lets show the information.
+             * Possible to happen in development process.
+             */
+            console.info("There is no actions.accept.onClick callback defined.");
+            hideDialog();
+            return _context.abrupt("return");
+          case 4:
+            setIsLoading(true);
+            _context.next = 7;
+            return actions.accept.onClick();
+          case 7:
+            setIsLoading(false);
+            hideDialog();
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleConfirm() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
     open: !!message,
     onClose: hideDialog,
     "data-testid": dataTestId,
     style: style
-  }, title && /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, title), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, message), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, actions.cancel && /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+  }, isLoading ? loading : null, title && /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, title), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, message), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, actions.cancel && /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
     onClick: actions.cancel.onClick
   }, actions.cancel.label), actions.accept && /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-    onClick: function onClick() {
-      actions.accept.onClick();
-      hideDialog();
-    }
+    "data-testid": "confirmationdialog-confirm-action",
+    onClick: handleConfirm
   }, actions.accept.label)));
 };
 exports.DialogContainer = DialogContainer;

package/modules/Overlays/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["DialogContainer","ui","useUi","message","dataTestId","title","actions","cancel","accept","label","style","hideDialog","useCallback","setState","dialog","onClick"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { get } from \"lodash\";\nimport { useUi } from \"@webiny/app/hooks/useUi\";\nimport { Dialog, DialogAccept, DialogTitle, DialogActions, DialogContent } from \"@webiny/ui/Dialog\";\nimport { ButtonPrimary } from \"@webiny/ui/Button\";\n\nexport const DialogContainer: React.FC = () => {\n    const ui = useUi();\n    const message: React.ReactNode = get(ui, \"dialog.message\");\n    const {\n        dataTestId,\n        title,\n        actions = { cancel: null, accept: { label: \"OK\" } },\n        style\n    } = get(ui, \"dialog.options\", {});\n\n    const hideDialog = useCallback(() => {\n        ui.setState(ui => ({ ...ui, dialog: null }));\n    }, [ui]);\n\n    return (\n        <Dialog open={!!message} onClose={hideDialog} data-testid={dataTestId} style={style}>\n            {title && <DialogTitle>{title}</DialogTitle>}\n            <DialogContent>{message}</DialogContent>\n            <DialogActions>\n                {actions.cancel && (\n                    <DialogAccept onClick={actions.cancel.onClick}>\n                        {actions.cancel.label}\n                    </DialogAccept>\n                )}\n                {actions.accept && (\n                    <ButtonPrimary\n                        onClick={() => {\n                            actions.accept.onClick();\n                            hideDialog();\n                        }}\n                    >\n                        {actions.accept.label}\n                    </ButtonPrimary>\n                )}\n            </DialogActions>\n        </Dialog>\n    );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AAEO,IAAMA,eAAyB,GAAG,SAA5BA,eAAyB,GAAS;EAC3C,IAAMC,EAAE,GAAG,IAAAC,YAAK,GAAE;EAClB,IAAMC,OAAwB,GAAG,mBAAIF,EAAE,EAAE,gBAAgB,CAAC;EAC1D,YAKI,mBAAIA,EAAE,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAJ7BG,UAAU,SAAVA,UAAU;IACVC,KAAK,SAALA,KAAK;IAAA,sBACLC,OAAO;IAAPA,OAAO,8BAAG;MAAEC,MAAM,EAAE,IAAI;MAAEC,MAAM,EAAE;QAAEC,KAAK,EAAE;MAAK;IAAE,CAAC;IACnDC,KAAK,SAALA,KAAK;EAGT,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjCX,EAAE,CAACY,QAAQ,CAAC,UAAAZ,EAAE;MAAA,mEAAUA,EAAE;QAAEa,MAAM,EAAE;MAAI;IAAA,CAAG,CAAC;EAChD,CAAC,EAAE,CAACb,EAAE,CAAC,CAAC;EAER,oBACI,6BAAC,cAAM;IAAC,IAAI,EAAE,CAAC,CAACE,OAAQ;IAAC,OAAO,EAAEQ,UAAW;IAAC,eAAaP,UAAW;IAAC,KAAK,EAAEM;EAAM,GAC/EL,KAAK,iBAAI,6BAAC,mBAAW,QAAEA,KAAK,CAAe,eAC5C,6BAAC,qBAAa,QAAEF,OAAO,CAAiB,eACxC,6BAAC,qBAAa,QACTG,OAAO,CAACC,MAAM,iBACX,6BAAC,oBAAY;IAAC,OAAO,EAAED,OAAO,CAACC,MAAM,CAACQ;EAAQ,GACzCT,OAAO,CAACC,MAAM,CAACE,KAAK,CAE5B,EACAH,OAAO,CAACE,MAAM,iBACX,6BAAC,qBAAa;IACV,OAAO,EAAE,mBAAM;MACXF,OAAO,CAACE,MAAM,CAACO,OAAO,EAAE;MACxBJ,UAAU,EAAE;IAChB;EAAE,GAEDL,OAAO,CAACE,MAAM,CAACC,KAAK,CAE5B,CACW,CACX;AAEjB,CAAC;AAAC"}
+{"version":3,"names":["DialogContainer","ui","useUi","useState","isLoading","setIsLoading","message","dataTestId","title","loading","actions","cancel","accept","label","style","hideDialog","useCallback","setState","dialog","useEffect","handleConfirm","onClick","console","info"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { get } from \"lodash\";\nimport { useUi } from \"@webiny/app/hooks/useUi\";\nimport { Dialog, DialogAccept, DialogActions, DialogContent, DialogTitle } from \"@webiny/ui/Dialog\";\nimport { ButtonPrimary } from \"@webiny/ui/Button\";\n\nexport const DialogContainer: React.FC = () => {\n    const ui = useUi();\n    const [isLoading, setIsLoading] = useState(false);\n    const message: React.ReactNode = get(ui, \"dialog.message\");\n    const {\n        dataTestId,\n        title,\n        loading,\n        actions = { cancel: null, accept: { label: \"OK\" } },\n        style\n    } = get(ui, \"dialog.options\", {});\n\n    const hideDialog = useCallback(() => {\n        ui.setState(ui => ({ ...ui, dialog: null }));\n    }, [ui]);\n    /**\n     * We need this part because message can change while the dialog is opened and in loading state.\n     */\n    useEffect(() => {\n        setIsLoading(false);\n    }, [ui?.dialog?.message]);\n\n    const handleConfirm = async () => {\n        if (!actions.accept.onClick) {\n            /**\n             * Should not happen as users should define \"accept.onClick\" function, but just in case lets show the information.\n             * Possible to happen in development process.\n             */\n            console.info(\"There is no actions.accept.onClick callback defined.\");\n            hideDialog();\n            return;\n        }\n        setIsLoading(true);\n        await actions.accept.onClick();\n        setIsLoading(false);\n        hideDialog();\n    };\n\n    return (\n        <Dialog open={!!message} onClose={hideDialog} data-testid={dataTestId} style={style}>\n            {isLoading ? loading : null}\n            {title && <DialogTitle>{title}</DialogTitle>}\n            <DialogContent>{message}</DialogContent>\n            <DialogActions>\n                {actions.cancel && (\n                    <DialogAccept onClick={actions.cancel.onClick}>\n                        {actions.cancel.label}\n                    </DialogAccept>\n                )}\n                {actions.accept && (\n                    <ButtonPrimary\n                        data-testid={\"confirmationdialog-confirm-action\"}\n                        onClick={handleConfirm}\n                    >\n                        {actions.accept.label}\n                    </ButtonPrimary>\n                )}\n            </DialogActions>\n        </Dialog>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;AAEA;AACA;AACA;AAEO,IAAMA,eAAyB,GAAG,SAA5BA,eAAyB,GAAS;EAAA;EAC3C,IAAMC,EAAE,GAAG,IAAAC,YAAK,GAAE;EAClB,gBAAkC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA1CC,SAAS;IAAEC,YAAY;EAC9B,IAAMC,OAAwB,GAAG,mBAAIL,EAAE,EAAE,gBAAgB,CAAC;EAC1D,YAMI,mBAAIA,EAAE,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAL7BM,UAAU,SAAVA,UAAU;IACVC,KAAK,SAALA,KAAK;IACLC,OAAO,SAAPA,OAAO;IAAA,sBACPC,OAAO;IAAPA,OAAO,8BAAG;MAAEC,MAAM,EAAE,IAAI;MAAEC,MAAM,EAAE;QAAEC,KAAK,EAAE;MAAK;IAAE,CAAC;IACnDC,KAAK,SAALA,KAAK;EAGT,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjCf,EAAE,CAACgB,QAAQ,CAAC,UAAAhB,EAAE;MAAA,mEAAUA,EAAE;QAAEiB,MAAM,EAAE;MAAI;IAAA,CAAG,CAAC;EAChD,CAAC,EAAE,CAACjB,EAAE,CAAC,CAAC;EACR;AACJ;AACA;EACI,IAAAkB,gBAAS,EAAC,YAAM;IACZd,YAAY,CAAC,KAAK,CAAC;EACvB,CAAC,EAAE,CAACJ,EAAE,aAAFA,EAAE,qCAAFA,EAAE,CAAEiB,MAAM,+CAAV,WAAYZ,OAAO,CAAC,CAAC;EAEzB,IAAMc,aAAa;IAAA,kGAAG;MAAA;QAAA;UAAA;YAAA,IACbV,OAAO,CAACE,MAAM,CAACS,OAAO;cAAA;cAAA;YAAA;YACvB;AACZ;AACA;AACA;YACYC,OAAO,CAACC,IAAI,CAAC,sDAAsD,CAAC;YACpER,UAAU,EAAE;YAAC;UAAA;YAGjBV,YAAY,CAAC,IAAI,CAAC;YAAC;YAAA,OACbK,OAAO,CAACE,MAAM,CAACS,OAAO,EAAE;UAAA;YAC9BhB,YAAY,CAAC,KAAK,CAAC;YACnBU,UAAU,EAAE;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CAChB;IAAA,gBAdKK,aAAa;MAAA;IAAA;EAAA,GAclB;EAED,oBACI,6BAAC,cAAM;IAAC,IAAI,EAAE,CAAC,CAACd,OAAQ;IAAC,OAAO,EAAES,UAAW;IAAC,eAAaR,UAAW;IAAC,KAAK,EAAEO;EAAM,GAC/EV,SAAS,GAAGK,OAAO,GAAG,IAAI,EAC1BD,KAAK,iBAAI,6BAAC,mBAAW,QAAEA,KAAK,CAAe,eAC5C,6BAAC,qBAAa,QAAEF,OAAO,CAAiB,eACxC,6BAAC,qBAAa,QACTI,OAAO,CAACC,MAAM,iBACX,6BAAC,oBAAY;IAAC,OAAO,EAAED,OAAO,CAACC,MAAM,CAACU;EAAQ,GACzCX,OAAO,CAACC,MAAM,CAACE,KAAK,CAE5B,EACAH,OAAO,CAACE,MAAM,iBACX,6BAAC,qBAAa;IACV,eAAa,mCAAoC;IACjD,OAAO,EAAEQ;EAAc,GAEtBV,OAAO,CAACE,MAAM,CAACC,KAAK,CAE5B,CACW,CACX;AAEjB,CAAC;AAAC"}

package/modules/Overlays/OmniSearch/Dialog.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const Dialog: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/modules/Overlays/OmniSearch/Dialog.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dialog = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var Dialog = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Dialog",
+  target: "eruevcs0"
+})("background-color:rgba(0,0,0,0.32);height:100%;width:100%;position:fixed;z-index:2312321;top:0;.dialog{position:fixed;top:350px;left:50%;transform:translate(-50%,-50%);background-color:white;width:700px;height:500px;z-index:auto;box-shadow:0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);> ul{overflow-y:scroll;height:444px;margin-bottom:10px;> li{.section-title{bottom-bottom:1px solid var(--mdc-theme-on-background);padding:10px 15px 5px 15px;}ul{li{padding:10px 15px;cursor:pointer;&.focused{background-color:var(--mdc-theme-background);}.section-item-title{margin-bottom:3px;color:var(--mdc-theme-primary);}.section-item-description{color:var(--mdc-theme-text-primary-on-background);}}}}}}");
+exports.Dialog = Dialog;

package/modules/Overlays/OmniSearch/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","styled"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Dialog = styled.div`\n    background-color: rgba(0, 0, 0, 0.32);\n    height: 100%;\n    width: 100%;\n    position: fixed;\n    z-index: 2312321;\n    top: 0;\n\n    .dialog {\n        position: fixed;\n        top: 350px;\n        left: 50%;\n        /* bring your own prefixes */\n        transform: translate(-50%, -50%);\n        background-color: white;\n        width: 700px;\n        height: 500px;\n        z-index: auto;\n        box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),\n            0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n\n        > ul {\n            overflow-y: scroll;\n            height: 444px;\n            margin-bottom: 10px;\n\n            > li {\n                .section-title {\n                    bottom-bottom: 1px solid var(--mdc-theme-on-background);\n                    padding: 10px 15px 5px 15px;\n                }\n\n                ul {\n                    li {\n                        padding: 10px 15px;\n                        cursor: pointer;\n\n                        &.focused {\n                            background-color: var(--mdc-theme-background);\n                        }\n\n                        .section-item-title {\n                            margin-bottom: 3px;\n                            color: var(--mdc-theme-primary);\n                        }\n\n                        .section-item-description {\n                            color: var(--mdc-theme-text-primary-on-background);\n                        }\n                    }\n                }\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAM;EAAA;EAAA;AAAA,kvBAsD3B;AAAC"}

package/modules/Overlays/OmniSearch.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const OmniSearch: () => JSX.Element | null;

package/modules/Overlays/OmniSearch.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OmniSearch = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _appAdmin = require("@webiny/app-admin");
+var _reactRouter = require("@webiny/react-router");
+var _utils = require("@webiny/app/utils");
+var _search = require("@material-design-icons/svg/outlined/search.svg");
+var _reactHotkeyz = require("react-hotkeyz");
+var _Input = require("@webiny/ui/Input");
+var _Typography = require("@webiny/ui/Typography");
+var _Dialog = require("./OmniSearch/Dialog");
+// @ts-ignore Library doesn't have types.
+
+var getIndexedItemsList = function getIndexedItemsList(items) {
+  var lastUsedItemIndex = 0;
+  return items.map(function (itemsSection) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemsSection), {}, {
+      items: itemsSection.items.map(function (item) {
+        var index = lastUsedItemIndex++;
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          index: index
+        });
+      })
+    });
+  });
+};
+var getItemFromIndexedItemsList = function getItemFromIndexedItemsList(itemsSections, index) {
+  if (index < 0) {
+    return null;
+  }
+  for (var i = 0; i < itemsSections.length; i++) {
+    var itemsSection = itemsSections[i];
+    for (var j = 0; j < itemsSection.items.length; j++) {
+      var item = itemsSection.items[j];
+      if (item.index === index) {
+        return item;
+      }
+    }
+  }
+  return null;
+};
+var OmniSearch = function OmniSearch() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    omniSearchVisible = _useState2[0],
+    setShowOmniSearch = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    filter = _useState4[0],
+    setFilter = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    focusedItemIndex = _useState6[0],
+    focusItemAtIndex = _useState6[1];
+  var _useNavigation = (0, _appAdmin.useNavigation)(),
+    menuItems = _useNavigation.menuItems;
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var navigate = (0, _reactRouter.useNavigate)();
+  var showOmniSearch = (0, _react.useCallback)(function () {
+    setShowOmniSearch(true);
+  }, []);
+  var hideOmniSearch = (0, _react.useCallback)(function () {
+    setShowOmniSearch(false);
+    setFilter("");
+  }, []);
+  var onFilter = (0, _react.useCallback)(function (searchString) {
+    setFilter(searchString);
+    focusItemAtIndex(0);
+  }, []);
+  var selectItem = (0, _react.useCallback)(function (item) {
+    if (item.link) {
+      navigate(item.link);
+    } else if (item.callback) {
+      item.callback();
+    }
+    hideOmniSearch();
+  }, []);
+
+  // TODO: should be pulled from registered plugins.
+  var fullItemsList = (0, _react.useMemo)(function () {
+    return [{
+      id: "apps",
+      title: "Apps",
+      items: menuItems.map(function (level1Item) {
+        return (0, _toConsumableArray2.default)(level1Item.children.map(function (level2Item) {
+          return (0, _toConsumableArray2.default)(level2Item.children.map(function (child) {
+            var description = [level1Item.label, level2Item.label].join(" / ");
+            return {
+              id: description + child.label,
+              title: child.label,
+              description: description,
+              link: child.path
+            };
+          }));
+        })).flat();
+      }).flat()
+    }, {
+      id: "other",
+      title: "Other",
+      items: [{
+        id: "back",
+        title: "← Back",
+        description: "Navigates to the previous page.",
+        callback: function callback() {
+          navigate(-1);
+        }
+      }]
+    }, (0, _utils.getTenantId)() && {
+      id: "development",
+      title: "Development",
+      items: [{
+        id: "copy-tenant-id",
+        title: "Copy current tenant ID",
+        description: "Copies current tenant ID into clipboard.",
+        callback: function callback() {
+          navigator.clipboard.writeText((0, _utils.getTenantId)());
+          showSnackbar("Tenant ID copied to clipboard.");
+        }
+      }]
+    }].filter(Boolean);
+  }, [menuItems]);
+  var filteredIndexedItemsList = (0, _react.useMemo)(function () {
+    if (!filter) {
+      return getIndexedItemsList(fullItemsList);
+    }
+    var filteredItems1stPass = fullItemsList.map(function (itemsSection) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemsSection), {}, {
+        items: itemsSection.items.filter(function (item) {
+          var _item$title;
+          return (_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toLowerCase().includes(filter.toLowerCase());
+        })
+      });
+    });
+    var filteredItems2ndPass = filteredItems1stPass.filter(function (itemsSection) {
+      return itemsSection.items.length > 0;
+    });
+    return getIndexedItemsList(filteredItems2ndPass);
+  }, [fullItemsList, filter]);
+  var selectFocusedItem = (0, _react.useCallback)(function () {
+    var focusedItem = getItemFromIndexedItemsList(filteredIndexedItemsList, focusedItemIndex);
+    if (focusedItem) {
+      selectItem(focusedItem);
+    }
+  }, [filteredIndexedItemsList, focusedItemIndex]);
+  var focusNextItem = (0, _react.useCallback)(function () {
+    var nextIndex = focusedItemIndex + 1;
+    var itemToFocus = getItemFromIndexedItemsList(filteredIndexedItemsList, nextIndex);
+    if (itemToFocus) {
+      focusItemAtIndex(itemToFocus.index);
+    }
+  }, [filteredIndexedItemsList, focusedItemIndex]);
+  var focusPrevItem = (0, _react.useCallback)(function () {
+    var prevIndex = focusedItemIndex - 1;
+    var itemToFocus = getItemFromIndexedItemsList(filteredIndexedItemsList, prevIndex);
+    if (itemToFocus) {
+      focusItemAtIndex(itemToFocus.index);
+    }
+  }, [filteredIndexedItemsList, focusedItemIndex]);
+  (0, _reactHotkeyz.useHotkeys)({
+    zIndex: 1000,
+    keys: {
+      "mod+k": showOmniSearch,
+      esc: hideOmniSearch
+    }
+  });
+  (0, _reactHotkeyz.useHotkeys)({
+    zIndex: 1000,
+    keys: {
+      enter: selectFocusedItem,
+      arrowUp: focusPrevItem,
+      arrowDown: focusNextItem
+    },
+    disabled: !omniSearchVisible
+  });
+  if (!omniSearchVisible) {
+    return null;
+  }
+  var renderedResults = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Nothing to show.");
+  if (filteredIndexedItemsList.length > 0) {
+    renderedResults = /*#__PURE__*/_react.default.createElement("ul", null, filteredIndexedItemsList.map(function (itemsSection) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: itemsSection.id
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "section-title"
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "overline"
+      }, itemsSection.title)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "section-items"
+      }, /*#__PURE__*/_react.default.createElement("ul", null, itemsSection.items.map(function (item) {
+        var isFocused = item.index === focusedItemIndex;
+        return /*#__PURE__*/_react.default.createElement("li", {
+          className: isFocused ? "focused" : "",
+          key: item.id,
+          onClick: function onClick() {
+            return selectFocusedItem();
+          },
+          onMouseEnter: function onMouseEnter() {
+            return focusItemAtIndex(item.index);
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "section-item-title"
+        }, item.title), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+          use: "caption",
+          className: "section-item-description"
+        }, item.description));
+      }))));
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-input"
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    icon: /*#__PURE__*/_react.default.createElement(_search.ReactComponent, null),
+    placeholder: "Search...",
+    autoFocus: true,
+    value: filter,
+    onChange: onFilter
+  })), renderedResults));
+};
+exports.OmniSearch = OmniSearch;

package/modules/Overlays/OmniSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getIndexedItemsList","items","lastUsedItemIndex","map","itemsSection","item","index","getItemFromIndexedItemsList","itemsSections","i","length","j","OmniSearch","useState","omniSearchVisible","setShowOmniSearch","filter","setFilter","focusedItemIndex","focusItemAtIndex","useNavigation","menuItems","useSnackbar","showSnackbar","navigate","useNavigate","showOmniSearch","useCallback","hideOmniSearch","onFilter","searchString","selectItem","link","callback","fullItemsList","useMemo","id","title","level1Item","children","level2Item","child","description","label","join","path","flat","getTenantId","navigator","clipboard","writeText","Boolean","filteredIndexedItemsList","filteredItems1stPass","toLowerCase","includes","filteredItems2ndPass","selectFocusedItem","focusedItem","focusNextItem","nextIndex","itemToFocus","focusPrevItem","prevIndex","useHotkeys","zIndex","keys","esc","enter","arrowUp","arrowDown","disabled","renderedResults","isFocused"],"sources":["OmniSearch.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { useNavigation } from \"@webiny/app-admin\";\nimport { useNavigate } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { getTenantId } from \"@webiny/app/utils\";\nimport { ReactComponent as SearchIcon } from \"@material-design-icons/svg/outlined/search.svg\";\n\n// @ts-ignore Library doesn't have types.\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nimport { Dialog } from \"./OmniSearch/Dialog\";\n\ninterface Item {\n    id: string;\n    title: string;\n    description: string;\n    link?: string;\n    callback?: () => void | Promise<void>;\n}\n\ninterface ItemsSection {\n    id: string;\n    title: string;\n    items: Item[];\n}\n\ninterface IndexedItem extends Item {\n    index: number;\n}\n\ninterface IndexedItemsSection extends Omit<ItemsSection, \"items\"> {\n    id: string;\n    title: string;\n    items: IndexedItem[];\n}\n\nconst getIndexedItemsList = (items: ItemsSection[]): IndexedItemsSection[] => {\n    let lastUsedItemIndex = 0;\n    return items.map(itemsSection => {\n        return {\n            ...itemsSection,\n            items: itemsSection.items.map(item => {\n                const index = lastUsedItemIndex++;\n                return {\n                    ...item,\n                    index\n                };\n            })\n        };\n    });\n};\n\nconst getItemFromIndexedItemsList = (\n    itemsSections: IndexedItemsSection[],\n    index: number\n): IndexedItem | null => {\n    if (index < 0) {\n        return null;\n    }\n\n    for (let i = 0; i < itemsSections.length; i++) {\n        const itemsSection = itemsSections[i];\n        for (let j = 0; j < itemsSection.items.length; j++) {\n            const item = itemsSection.items[j];\n            if (item.index === index) {\n                return item;\n            }\n        }\n    }\n\n    return null;\n};\n\nexport const OmniSearch = () => {\n    const [omniSearchVisible, setShowOmniSearch] = useState(false);\n    const [filter, setFilter] = useState(\"\");\n    const [focusedItemIndex, focusItemAtIndex] = useState(0);\n    const { menuItems } = useNavigation();\n    const { showSnackbar } = useSnackbar();\n    const navigate = useNavigate();\n    const showOmniSearch = useCallback(() => {\n        setShowOmniSearch(true);\n    }, []);\n\n    const hideOmniSearch = useCallback(() => {\n        setShowOmniSearch(false);\n        setFilter(\"\");\n    }, []);\n\n    const onFilter = useCallback(searchString => {\n        setFilter(searchString);\n        focusItemAtIndex(0);\n    }, []);\n\n    const selectItem = useCallback((item: Item) => {\n        if (item.link) {\n            navigate(item.link);\n        } else if (item.callback) {\n            item.callback();\n        }\n\n        hideOmniSearch();\n    }, []);\n\n    // TODO: should be pulled from registered plugins.\n    const fullItemsList = useMemo<ItemsSection[]>(() => {\n        return [\n            {\n                id: \"apps\",\n                title: \"Apps\",\n                items: menuItems\n                    .map(level1Item => {\n                        return [\n                            ...level1Item.children.map(level2Item => {\n                                return [\n                                    ...level2Item.children.map(child => {\n                                        const description = [\n                                            level1Item.label,\n                                            level2Item.label\n                                        ].join(\" / \");\n\n                                        return {\n                                            id: description + child.label,\n                                            title: child.label!,\n                                            description,\n                                            link: child.path\n                                        };\n                                    })\n                                ];\n                            })\n                        ].flat();\n                    })\n                    .flat()\n            },\n            {\n                id: \"other\",\n                title: \"Other\",\n                items: [\n                    {\n                        id: \"back\",\n                        title: \"← Back\",\n                        description: \"Navigates to the previous page.\",\n                        callback: () => {\n                            navigate(-1);\n                        }\n                    }\n                ]\n            },\n            getTenantId() && {\n                id: \"development\",\n                title: \"Development\",\n                items: [\n                    {\n                        id: \"copy-tenant-id\",\n                        title: \"Copy current tenant ID\",\n                        description: \"Copies current tenant ID into clipboard.\",\n                        callback: () => {\n                            navigator.clipboard.writeText(getTenantId()!);\n                            showSnackbar(\"Tenant ID copied to clipboard.\");\n                        }\n                    }\n                ]\n            }\n        ].filter(Boolean) as ItemsSection[];\n    }, [menuItems]);\n\n    const filteredIndexedItemsList = useMemo(() => {\n        if (!filter) {\n            return getIndexedItemsList(fullItemsList);\n        }\n\n        const filteredItems1stPass = fullItemsList.map(itemsSection => {\n            return {\n                ...itemsSection,\n                items: itemsSection.items.filter(item => {\n                    return item.title?.toLowerCase().includes(filter.toLowerCase());\n                })\n            };\n        });\n\n        const filteredItems2ndPass = filteredItems1stPass.filter(\n            itemsSection => itemsSection.items.length > 0\n        );\n\n        return getIndexedItemsList(filteredItems2ndPass);\n    }, [fullItemsList, filter]);\n\n    const selectFocusedItem = useCallback(() => {\n        const focusedItem = getItemFromIndexedItemsList(filteredIndexedItemsList, focusedItemIndex);\n        if (focusedItem) {\n            selectItem(focusedItem);\n        }\n    }, [filteredIndexedItemsList, focusedItemIndex]);\n\n    const focusNextItem = useCallback(() => {\n        const nextIndex = focusedItemIndex + 1;\n        const itemToFocus = getItemFromIndexedItemsList(filteredIndexedItemsList, nextIndex);\n        if (itemToFocus) {\n            focusItemAtIndex(itemToFocus.index);\n        }\n    }, [filteredIndexedItemsList, focusedItemIndex]);\n\n    const focusPrevItem = useCallback(() => {\n        const prevIndex = focusedItemIndex - 1;\n        const itemToFocus = getItemFromIndexedItemsList(filteredIndexedItemsList, prevIndex);\n        if (itemToFocus) {\n            focusItemAtIndex(itemToFocus.index);\n        }\n    }, [filteredIndexedItemsList, focusedItemIndex]);\n\n    useHotkeys({\n        zIndex: 1000,\n        keys: {\n            \"mod+k\": showOmniSearch,\n            esc: hideOmniSearch\n        }\n    });\n\n    useHotkeys({\n        zIndex: 1000,\n        keys: {\n            enter: selectFocusedItem,\n            arrowUp: focusPrevItem,\n            arrowDown: focusNextItem\n        },\n        disabled: !omniSearchVisible\n    });\n\n    if (!omniSearchVisible) {\n        return null;\n    }\n\n    let renderedResults = <>Nothing to show.</>;\n    if (filteredIndexedItemsList.length > 0) {\n        renderedResults = (\n            <ul>\n                {filteredIndexedItemsList.map(itemsSection => (\n                    <li key={itemsSection.id}>\n                        <div className={\"section-title\"}>\n                            <Typography use={\"overline\"}>{itemsSection.title}</Typography>\n                        </div>\n                        <div className={\"section-items\"}>\n                            <ul>\n                                {itemsSection.items.map(item => {\n                                    const isFocused = item.index === focusedItemIndex;\n                                    return (\n                                        <li\n                                            className={isFocused ? \"focused\" : \"\"}\n                                            key={item.id}\n                                            onClick={() => selectFocusedItem()}\n                                            onMouseEnter={() => focusItemAtIndex(item.index)}\n                                        >\n                                            <div className={\"section-item-title\"}>{item.title}</div>\n                                            <Typography\n                                                use={\"caption\"}\n                                                className={\"section-item-description\"}\n                                            >\n                                                {item.description}\n                                            </Typography>\n                                        </li>\n                                    );\n                                })}\n                            </ul>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        );\n    }\n\n    return (\n        <Dialog>\n            <div className={\"dialog\"}>\n                <div className={\"search-input\"}>\n                    <Input\n                        icon={<SearchIcon />}\n                        placeholder={\"Search...\"}\n                        autoFocus\n                        value={filter}\n                        onChange={onFilter}\n                    />\n                </div>\n                {renderedResults}\n            </div>\n        </Dialog>\n    );\n};\n"],"mappings":"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"}

package/modules/Overlays/index.js

@@ -10,6 +10,8 @@ var _appAdmin = require("@webiny/app-admin/");
 var _Snackbar = _interopRequireDefault(require("./Snackbar"));
 var _Dialog = require("./Dialog");
 var _base = require("@rmwc/base");
+var _featureFlags = require("@webiny/feature-flags");
+var _OmniSearch = require("./OmniSearch");
 /**
  * Dialogs, Menus and Snackbars require a container to be rendered, and we want to place it outside of
  * any other views that are constructed by developers. We need these 2 containers to always be
@@ -23,7 +25,7 @@ var OverlaysHOC = function OverlaysHOC(Component) {
         zIndex: 30,
         position: "absolute"
       }
-    }, /*#__PURE__*/_react.default.createElement(_Snackbar.default, null)), /*#__PURE__*/_react.default.createElement(_base.Portal, null), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContainer, null));
+    }, /*#__PURE__*/_react.default.createElement(_Snackbar.default, null)), /*#__PURE__*/_react.default.createElement(_base.Portal, null), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContainer, null), _featureFlags.featureFlags.experimentalAdminOmniSearch && /*#__PURE__*/_react.default.createElement(_OmniSearch.OmniSearch, null));
   };
 };
 var Overlays = function Overlays() {

package/modules/Overlays/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["OverlaysHOC","Component","Overlays","children","zIndex","position"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Provider } from \"@webiny/app-admin/\";\nimport Snackbar from \"./Snackbar\";\nimport { DialogContainer } from \"./Dialog\";\nimport { Portal } from \"@rmwc/base\";\n\n/**\n * Dialogs, Menus and Snackbars require a container to be rendered, and we want to place it outside of\n * any other views that are constructed by developers. We need these 2 containers to always be\n * present, even if there is no <Layout> mounted.\n */\nconst OverlaysHOC = (Component: React.FC): React.FC => {\n    return function Overlays({ children }) {\n        return (\n            <Component>\n                {children}\n                <div style={{ zIndex: 30, position: \"absolute\" }}>\n                    <Snackbar />\n                </div>\n                <Portal />\n                <DialogContainer />\n            </Component>\n        );\n    };\n};\n\nexport const Overlays: React.FC = () => {\n    /**\n     * TODO @ts-refactor @pavel\n     */\n    // @ts-ignore\n    return <Provider hoc={OverlaysHOC} />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAW,CAAIC,SAAmB,EAAe;EACnD,OAAO,SAASC,QAAQ,OAAe;IAAA,IAAZC,QAAQ,QAARA,QAAQ;IAC/B,oBACI,6BAAC,SAAS,QACLA,QAAQ,eACT;MAAK,KAAK,EAAE;QAAEC,MAAM,EAAE,EAAE;QAAEC,QAAQ,EAAE;MAAW;IAAE,gBAC7C,6BAAC,iBAAQ,OAAG,CACV,eACN,6BAAC,YAAM,OAAG,eACV,6BAAC,uBAAe,OAAG,CACX;EAEpB,CAAC;AACL,CAAC;AAEM,IAAMH,QAAkB,GAAG,SAArBA,QAAkB,GAAS;EACpC;AACJ;AACA;EACI;EACA,oBAAO,6BAAC,kBAAQ;IAAC,GAAG,EAAEF;EAAY,EAAG;AACzC,CAAC;AAAC"}
+{"version":3,"names":["OverlaysHOC","Component","Overlays","children","zIndex","position","featureFlags","experimentalAdminOmniSearch"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Provider } from \"@webiny/app-admin/\";\nimport Snackbar from \"./Snackbar\";\nimport { DialogContainer } from \"./Dialog\";\nimport { Portal } from \"@rmwc/base\";\nimport { featureFlags } from \"@webiny/feature-flags\";\nimport { OmniSearch } from \"./OmniSearch\";\n\n/**\n * Dialogs, Menus and Snackbars require a container to be rendered, and we want to place it outside of\n * any other views that are constructed by developers. We need these 2 containers to always be\n * present, even if there is no <Layout> mounted.\n */\nconst OverlaysHOC = (Component: React.FC): React.FC => {\n    return function Overlays({ children }) {\n        return (\n            <Component>\n                {children}\n                <div style={{ zIndex: 30, position: \"absolute\" }}>\n                    <Snackbar />\n                </div>\n                <Portal />\n                <DialogContainer />\n                {featureFlags.experimentalAdminOmniSearch && <OmniSearch />}\n            </Component>\n        );\n    };\n};\n\nexport const Overlays: React.FC = () => {\n    /**\n     * TODO @ts-refactor @pavel\n     */\n    // @ts-ignore\n    return <Provider hoc={OverlaysHOC} />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAW,CAAIC,SAAmB,EAAe;EACnD,OAAO,SAASC,QAAQ,OAAe;IAAA,IAAZC,QAAQ,QAARA,QAAQ;IAC/B,oBACI,6BAAC,SAAS,QACLA,QAAQ,eACT;MAAK,KAAK,EAAE;QAAEC,MAAM,EAAE,EAAE;QAAEC,QAAQ,EAAE;MAAW;IAAE,gBAC7C,6BAAC,iBAAQ,OAAG,CACV,eACN,6BAAC,YAAM,OAAG,eACV,6BAAC,uBAAe,OAAG,EAClBC,0BAAY,CAACC,2BAA2B,iBAAI,6BAAC,sBAAU,OAAG,CACnD;EAEpB,CAAC;AACL,CAAC;AAEM,IAAML,QAAkB,GAAG,SAArBA,QAAkB,GAAS;EACpC;AACJ;AACA;EACI;EACA,oBAAO,6BAAC,kBAAQ;IAAC,GAAG,EAAEF;EAAY,EAAG;AACzC,CAAC;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-admin-rmwc",
-	"version": "0.0.0-unstable.c2780f51fe",
+	"version": "0.0.0-unstable.c7dec08bb0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -11,38 +11,41 @@
 	"dependencies": {
 		"@babel/runtime": "7.20.13",
 		"@emotion/styled": "11.10.6",
+		"@material-design-icons/svg": "0.12.1",
 		"@rmwc/base": "7.0.3",
 		"@rmwc/provider": "7.0.3",
 		"@types/react": "17.0.39",
-		"@webiny/app": "0.0.0-unstable.c2780f51fe",
-		"@webiny/app-admin": "0.0.0-unstable.c2780f51fe",
-		"@webiny/app-plugin-admin-welcome-screen": "0.0.0-unstable.c2780f51fe",
-		"@webiny/app-security": "0.0.0-unstable.c2780f51fe",
-		"@webiny/plugins": "0.0.0-unstable.c2780f51fe",
-		"@webiny/react-router": "0.0.0-unstable.c2780f51fe",
-		"@webiny/ui": "0.0.0-unstable.c2780f51fe",
+		"@webiny/app": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/app-admin": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/app-plugin-admin-welcome-screen": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/app-security": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/feature-flags": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/plugins": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/react-router": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/ui": "0.0.0-unstable.c7dec08bb0",
 		"classnames": "2.3.2",
 		"emotion": "10.0.27",
 		"lodash": "4.17.21",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
 		"react-helmet": "6.1.0",
+		"react-hotkeyz": "1.0.4",
 		"react-transition-group": "4.4.5",
 		"store": "2.0.12"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.19.3",
-		"@babel/core": "^7.19.3",
-		"@babel/preset-env": "^7.19.4",
-		"@babel/preset-react": "^7.0.0",
-		"@babel/preset-typescript": "^7.18.6",
-		"@types/react-helmet": "^6.1.5",
-		"@webiny/cli": "^0.0.0-unstable.c2780f51fe",
-		"@webiny/project-utils": "^0.0.0-unstable.c2780f51fe",
-		"babel-plugin-emotion": "^9.2.8",
-		"babel-plugin-named-asset-import": "^1.0.0-next.3e165448",
-		"rimraf": "^3.0.2",
-		"ttypescript": "^1.5.12",
+		"@babel/cli": "7.20.7",
+		"@babel/core": "7.20.12",
+		"@babel/preset-env": "7.20.2",
+		"@babel/preset-react": "7.18.6",
+		"@babel/preset-typescript": "7.18.6",
+		"@types/react-helmet": "6.1.6",
+		"@webiny/cli": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/project-utils": "0.0.0-unstable.c7dec08bb0",
+		"babel-plugin-emotion": "9.2.11",
+		"babel-plugin-named-asset-import": "1.0.0-next.fb6e6f70",
+		"rimraf": "3.0.2",
+		"ttypescript": "1.5.15",
 		"typescript": "4.7.4"
 	},
 	"publishConfig": {
@@ -58,5 +61,5 @@
 			"removeViewBox": false
 		}
 	},
-	"gitHead": "c2780f51fe628e1ef0f6b55c2bce9b74d3470d79"
+	"gitHead": "c7dec08bb095467cca6a61381bd399d66b7bb147"
 }