@webiny/app-admin 5.20.0-beta.1 → 5.21.0

package/base/ui/Navigation.js

@@ -0,0 +1,147 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { Fragment, useEffect, createContext, useCallback, useMemo, useState, useContext } from "react";
+import { nanoid } from "nanoid";
+import { makeComposable, Plugins } from "@webiny/app-admin-core";
+import { AddMenu as Menu, Tags } from "../..";
+import { plugins } from "@webiny/plugins";
+var NavigationContext = /*#__PURE__*/createContext(null);
+NavigationContext.displayName = "NavigationContext";
+export function useNavigation() {
+  return useContext(NavigationContext);
+} // IMPORTANT! The following component is for BACKWARDS COMPATIBILITY purposes only!
+// It is not a public component, and is not even exported from this file. We need it to take care of
+// scaffolded plugins in users' projects, as well as our own applications (Page Builder and Form Builder).
+
+var LegacyMenu = function LegacyMenu(props) {
+  return /*#__PURE__*/React.createElement(Menu, Object.assign({}, props, {
+    name: props.name || nanoid(),
+    label: props.label
+  }), props.children);
+};
+
+var LegacyMenuPlugins = function LegacyMenuPlugins() {
+  // IMPORTANT! The following piece of code is for BACKWARDS COMPATIBILITY purposes only!
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      menus = _useState2[0],
+      setMenus = _useState2[1];
+
+  useEffect(function () {
+    var menuPlugins = plugins.byType("admin-menu");
+
+    if (!menuPlugins) {
+      return;
+    }
+
+    var menuElements = menuPlugins.map(function (plugin) {
+      return /*#__PURE__*/React.createElement(Plugins, {
+        key: plugin.name
+      }, plugin.render({
+        Menu: LegacyMenu,
+        Item: LegacyMenu,
+        Section: LegacyMenu
+      }));
+    });
+    setMenus(menuElements);
+  }, []);
+  return menus;
+};
+
+export var NavigationProvider = function NavigationProvider(Component) {
+  return function NavigationProvider(_ref) {
+    var children = _ref.children;
+
+    var _useState3 = useState([]),
+        _useState4 = _slicedToArray(_useState3, 2),
+        menuItems = _useState4[0],
+        setState = _useState4[1];
+
+    var mergeMenuItems = function mergeMenuItems(item1, item2) {
+      var _item2$label, _item2$icon;
+
+      return _objectSpread(_objectSpread({}, item1), {}, {
+        label: (_item2$label = item2.label) !== null && _item2$label !== void 0 ? _item2$label : item1.label,
+        icon: (_item2$icon = item2.icon) !== null && _item2$icon !== void 0 ? _item2$icon : item1.icon,
+        children: item2.children.reduce(function (acc, menu) {
+          var index = acc.findIndex(function (i) {
+            return i.name === menu.name;
+          });
+
+          if (index > -1) {
+            acc[index] = mergeMenuItems(acc[index], menu);
+          } else {
+            acc.push(menu);
+          }
+
+          return acc;
+        }, _toConsumableArray(item1.children))
+      });
+    };
+
+    var setMenu = function setMenu(id, menuItem) {
+      setState(function (state) {
+        var index = state.findIndex(function (m) {
+          return m.name === id;
+        });
+        return index > -1 ? [].concat(_toConsumableArray(state.slice(0, index)), [mergeMenuItems(state[index], menuItem)], _toConsumableArray(state.slice(index + 1))) : [].concat(_toConsumableArray(state), [menuItem]);
+      });
+    };
+
+    var removeMenu = useCallback(function (id) {
+      setState(function (state) {
+        var index = state.findIndex(function (m) {
+          return m.name === id;
+        });
+
+        if (index < 0) {
+          return state;
+        }
+
+        return [].concat(_toConsumableArray(state.slice(0, index)), _toConsumableArray(state.slice(index + 1)));
+      });
+    }, [setState]);
+    var context = useMemo(function () {
+      return {
+        menuItems: menuItems,
+        setMenu: setMenu,
+        removeMenu: removeMenu
+      };
+    }, [menuItems, setMenu, removeMenu]);
+    return /*#__PURE__*/React.createElement(NavigationContext.Provider, {
+      value: context
+    }, /*#__PURE__*/React.createElement(LegacyMenuPlugins, null), /*#__PURE__*/React.createElement(Component, null, children));
+  };
+};
+export var Navigation = function Navigation() {
+  return /*#__PURE__*/React.createElement(Tags, {
+    tags: {
+      location: "navigation"
+    }
+  }, /*#__PURE__*/React.createElement(NavigationRenderer, null));
+};
+export var NavigationRenderer = makeComposable("NavigationRenderer");
+var MenuItemContext = /*#__PURE__*/React.createContext(null);
+MenuItemContext.displayName = "MenuItemContext";
+export function useMenuItem() {
+  return React.useContext(MenuItemContext);
+}
+export var MenuItems = makeComposable("MenuItems", function (_ref2) {
+  var menuItems = _ref2.menuItems;
+  var menuItem = useMenuItem();
+  var depth = menuItem ? menuItem.depth : -1;
+  return /*#__PURE__*/React.createElement(Fragment, null, menuItems.map(function (menuItem) {
+    return /*#__PURE__*/React.createElement(MenuItemContext.Provider, {
+      key: menuItem.name,
+      value: {
+        menuItem: menuItem,
+        depth: depth + 1
+      }
+    }, /*#__PURE__*/React.createElement(MenuItem, null));
+  }));
+});
+export var MenuItem = function MenuItem() {
+  return /*#__PURE__*/React.createElement(MenuItemRenderer, null);
+};
+export var MenuItemRenderer = makeComposable("MenuItemRenderer");

package/base/ui/NotFound.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const NotFound: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const NotFoundRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};

package/base/ui/NotFound.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+export var NotFound = makeComposable("NotFound", function () {
+  return /*#__PURE__*/React.createElement(NotFoundRenderer, null);
+});
+export var NotFoundRenderer = makeComposable("NotFoundRenderer");

package/base/ui/Search.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface SearchOptionData {
+    route: string;
+    label: string;
+    search?: {
+        operator?: "and" | "or";
+        fields?: Array<string>;
+    };
+}
+export interface SearchContext {
+    options: SearchOptionData[];
+    addOption(option: SearchOptionData): void;
+}
+export declare function useSearch(): SearchContext;
+export declare const SearchProvider: (Component: any) => ({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}) => JSX.Element;
+export declare const Search: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const SearchRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare type SearchOptionProps = SearchOptionData;
+export declare const SearchOption: (props: SearchOptionProps) => any;

package/base/ui/Search.js

@@ -0,0 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { useCallback, useEffect, useState } from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+var SearchContext = /*#__PURE__*/React.createContext(null);
+SearchContext.displayName = "SearchContext";
+export function useSearch() {
+  return React.useContext(SearchContext);
+}
+export var SearchProvider = function SearchProvider(Component) {
+  return function SearchProvider(_ref) {
+    var children = _ref.children,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    var _useState = useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        options = _useState2[0],
+        setOptions = _useState2[1];
+
+    var addOption = useCallback(function (option) {
+      return setOptions(function (options) {
+        return [].concat(_toConsumableArray(options), [option]);
+      });
+    }, [setOptions]);
+    var context = {
+      options: options,
+      addOption: addOption
+    };
+    return /*#__PURE__*/React.createElement(SearchContext.Provider, {
+      value: context
+    }, /*#__PURE__*/React.createElement(Component, props, children));
+  };
+};
+export var Search = makeComposable("Search", function () {
+  return /*#__PURE__*/React.createElement(SearchRenderer, null);
+});
+export var SearchRenderer = makeComposable("SearchRenderer");
+export var SearchOption = function SearchOption(props) {
+  var _useSearch = useSearch(),
+      addOption = _useSearch.addOption;
+
+  useEffect(function () {
+    addOption(props);
+  }, []);
+  return null;
+};

package/base/ui/Tags.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface TagsProps {
+    tags: Record<string, string | boolean>;
+    children: React.ReactNode;
+}
+export declare const Tags: ({ tags, children }: TagsProps) => JSX.Element;
+export declare const useTags: () => Record<string, string | boolean>;
+export {};

package/base/ui/Tags.js

@@ -0,0 +1,13 @@
+import React, { createContext, useContext } from "react";
+var TagsContext = /*#__PURE__*/createContext({});
+TagsContext.displayName = "TagsContext";
+export var Tags = function Tags(_ref) {
+  var tags = _ref.tags,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(TagsContext.Provider, {
+    value: tags
+  }, children);
+};
+export var useTags = function useTags() {
+  return useContext(TagsContext);
+};

package/base/ui/UserMenu.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+export interface UserMenuItemData {
+    label?: string;
+    icon?: JSX.Element;
+    path?: string;
+    onClick?: () => void;
+    element?: JSX.Element;
+}
+export interface UserMenuContext {
+    menuItems: UserMenuItemData[];
+    addMenuItem(item: UserMenuItemData): void;
+}
+export declare function useUserMenu(): UserMenuContext;
+export declare const UserMenuProvider: (Component: any) => ({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}) => JSX.Element;
+export declare const UserMenu: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const UserMenuRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const UserMenuHandle: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const UserMenuHandleRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export interface UserMenuItemProps {
+    menuItem: UserMenuItemData;
+}
+export declare const UserMenuItem: React.FC<UserMenuItemProps> & {
+    original: React.ComponentType<UserMenuItemProps>;
+    originalName: string;
+};
+export declare const UserMenuItemRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const AddUserMenuItem: (props: UserMenuItemProps["menuItem"]) => any;
+export declare type UserMenuItemContext = UserMenuItemData;
+export declare function useUserMenuItem(): UserMenuItemData;
+export interface UserMenuItemsProps {
+    menuItems: UserMenuItemData[];
+}
+export declare const UserMenuItems: React.FC<UserMenuItemsProps> & {
+    original: React.ComponentType<UserMenuItemsProps>;
+    originalName: string;
+};

package/base/ui/UserMenu.js

@@ -0,0 +1,86 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { Fragment, useCallback, useEffect, useState } from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+var UserMenuContext = /*#__PURE__*/React.createContext(null);
+UserMenuContext.displayName = "UserMenuContext";
+export function useUserMenu() {
+  return React.useContext(UserMenuContext);
+}
+export var UserMenuProvider = function UserMenuProvider(Component) {
+  return function UserMenuProvider(_ref) {
+    var children = _ref.children,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    var _useState = useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        menuItems = _useState2[0],
+        setItems = _useState2[1];
+
+    var addMenuItem = useCallback(function (item) {
+      setItems(function (items) {
+        return [].concat(_toConsumableArray(items), [item]);
+      });
+      return function () {
+        setItems(function (items) {
+          var index = items.findIndex(function (i) {
+            return i === item;
+          });
+
+          if (index < 0) {
+            return items;
+          }
+
+          return [].concat(_toConsumableArray(items.slice(0, index)), _toConsumableArray(items.slice(index + 1)));
+        });
+      };
+    }, [setItems]);
+    var context = {
+      menuItems: menuItems,
+      addMenuItem: addMenuItem
+    };
+    return /*#__PURE__*/React.createElement(UserMenuContext.Provider, {
+      value: context
+    }, /*#__PURE__*/React.createElement(Component, props, children));
+  };
+};
+export var UserMenu = makeComposable("UserMenu", function () {
+  return /*#__PURE__*/React.createElement(UserMenuRenderer, null);
+});
+export var UserMenuRenderer = makeComposable("UserMenuRenderer");
+export var UserMenuHandle = makeComposable("UserMenuHandle", function () {
+  return /*#__PURE__*/React.createElement(UserMenuHandleRenderer, null);
+});
+export var UserMenuHandleRenderer = makeComposable("UserMenuHandleRenderer");
+export var UserMenuItem = makeComposable("UserMenuItem", function (_ref2) {
+  var menuItem = _ref2.menuItem;
+  return /*#__PURE__*/React.createElement(UserMenuItemContext.Provider, {
+    value: menuItem
+  }, /*#__PURE__*/React.createElement(UserMenuItemRenderer, null));
+});
+export var UserMenuItemRenderer = makeComposable("UserMenuItemRenderer");
+export var AddUserMenuItem = function AddUserMenuItem(props) {
+  var _useUserMenu = useUserMenu(),
+      addMenuItem = _useUserMenu.addMenuItem;
+
+  useEffect(function () {
+    return addMenuItem(props);
+  }, []);
+  return null;
+};
+var UserMenuItemContext = /*#__PURE__*/React.createContext(null);
+UserMenuItemContext.displayName = "UserMenuItemContext";
+export function useUserMenuItem() {
+  return React.useContext(UserMenuItemContext);
+}
+export var UserMenuItems = makeComposable("UserMenuItems", function (_ref3) {
+  var menuItems = _ref3.menuItems;
+  return /*#__PURE__*/React.createElement(Fragment, null, menuItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(UserMenuItem, {
+      key: index,
+      menuItem: item
+    });
+  }));
+});

package/components/AdminLayout.js

@@ -1,35 +1,9 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from "react";
-import { UIViewComponent } from "../ui/UIView";
-import { GenericElement } from "../ui/elements/GenericElement";
-import { AdminView } from "../ui/views/AdminView";
+import React from "react";
+import { Layout } from "./..";
 export var AdminLayout = function AdminLayout(_ref) {
   var title = _ref.title,
       children = _ref.children;
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      view = _useState2[0],
-      setView = _useState2[1];
-
-  useEffect(function () {
-    var view = new AdminView();
-
-    if (title) {
-      view.setTitle(title);
-    }
-
-    view.setContentElement(new GenericElement("admin-layout-content", function () {
-      return children;
-    }));
-    setView(view);
-  }, []);
-
-  if (!view) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(UIViewComponent, {
-    view: view
-  });
+  return /*#__PURE__*/React.createElement(Layout, {
+    title: title
+  }, children);
 };

package/components/AppInstaller/AppInstaller.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const AppInstaller: ({ children }: {
+    children: any;
+}) => JSX.Element;

package/components/AppInstaller/AppInstaller.js

@@ -0,0 +1,136 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from "react";
+import { default as localStorage } from "store";
+import { LoginScreen } from "../..";
+import { useSecurity } from "@webiny/app-security";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { ButtonPrimary } from "@webiny/ui/Button";
+import { SplitView, LeftPanel, RightPanel } from "../SplitView";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Typography } from "@webiny/ui/Typography";
+import { Elevation } from "@webiny/ui/Elevation";
+import { useInstaller } from "./useInstaller";
+import Sidebar from "./Sidebar";
+import { Wrapper, alertClass, InnerContent, InstallContent, installerSplitView, SuccessDialog } from "./styled";
+import { config as appConfig } from "@webiny/app/config";
+export var AppInstaller = function AppInstaller(_ref) {
+  var children = _ref.children;
+  var tenantId = localStorage.get("webiny_tenant") || "root";
+  var lsKey = "webiny_installation_".concat(tenantId);
+  var wbyVersion = appConfig.getKey("WEBINY_VERSION", process.env.REACT_APP_WEBINY_VERSION);
+
+  var markInstallerAsCompleted = function markInstallerAsCompleted() {
+    localStorage.set(lsKey, wbyVersion);
+  };
+
+  var isInstallerCompleted = function isInstallerCompleted() {
+    return localStorage.get(lsKey) === wbyVersion;
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      finished = _useState2[0],
+      setFinished = _useState2[1];
+
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var _useInstaller = useInstaller({
+    isInstalled: isInstallerCompleted()
+  }),
+      loading = _useInstaller.loading,
+      installers = _useInstaller.installers,
+      installer = _useInstaller.installer,
+      showNextInstaller = _useInstaller.showNextInstaller,
+      showLogin = _useInstaller.showLogin,
+      onUser = _useInstaller.onUser,
+      skippingVersions = _useInstaller.skippingVersions;
+
+  useEffect(function () {
+    if (identity) {
+      onUser();
+    }
+  }, [identity]);
+
+  if (isInstallerCompleted()) {
+    return /*#__PURE__*/React.createElement(LoginScreen, null, children);
+  }
+
+  var renderLayout = function renderLayout(content) {
+    var secure = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return /*#__PURE__*/React.createElement(SplitView, {
+      className: installerSplitView
+    }, /*#__PURE__*/React.createElement(LeftPanel, {
+      span: 2
+    }, /*#__PURE__*/React.createElement(Sidebar, {
+      allInstallers: installers,
+      installer: installer,
+      showLogin: showLogin
+    })), /*#__PURE__*/React.createElement(RightPanel, {
+      span: 10
+    }, !showLogin && !secure && content, (showLogin || secure) && /*#__PURE__*/React.createElement(LoginScreen, null, content)));
+  };
+
+  var renderBody = function renderBody(content) {
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(InstallContent, null, /*#__PURE__*/React.createElement(InnerContent, null, content)));
+  }; // Loading installers data
+
+
+  if (loading) {
+    return /*#__PURE__*/React.createElement(CircularProgress, {
+      label: "Checking apps..."
+    });
+  } // This means there are no installers to run or installation was finished
+
+
+  if (!loading && (installers.length === 0 || finished)) {
+    markInstallerAsCompleted();
+    return /*#__PURE__*/React.createElement(LoginScreen, null, children);
+  }
+
+  if (installer) {
+    return renderLayout(renderBody(installer.render({
+      onInstalled: showNextInstaller
+    })), installer.secure);
+  }
+
+  if (skippingVersions) {
+    return renderBody( /*#__PURE__*/React.createElement(Elevation, {
+      z: 1,
+      className: alertClass
+    }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "headline4"
+    }, "Important!")), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "body1",
+      tag: "div"
+    }, "We've detected that your current application is running Webiny", " ", /*#__PURE__*/React.createElement("strong", null, "v", skippingVersions.latest), ". However, your API is running ", /*#__PURE__*/React.createElement("strong", null, "v", skippingVersions.current), ". Unfortunately, we can't upgrade your system by skipping versions in between.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Here's a list of versions you skipped, that contain upgrades you need to install:", /*#__PURE__*/React.createElement("ul", null, skippingVersions.availableUpgrades.filter(function (v) {
+      return v !== skippingVersions.latest;
+    }).map(function (v) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: v
+      }, "v", v);
+    })), "For instructions on how to upgrade Webiny, please consult our", " ", /*#__PURE__*/React.createElement("a", {
+      href: "https://docs.webiny.com/docs/how-to-guides/upgrade-webiny",
+      target: "_blank",
+      rel: "noreferrer noopener"
+    }, "Upgrade Webiny"), " ", "guide. Note that some versions may have a dedicated article with upgrade instructions, so look out for those in the upgrade guide.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "If you run into problems, find us on our", " ", /*#__PURE__*/React.createElement("a", {
+      href: "https://www.webiny.com/slack",
+      target: "_blank",
+      rel: "noreferrer noopener"
+    }, "Slack community."))))));
+  }
+
+  return renderLayout(renderBody( /*#__PURE__*/React.createElement(Elevation, {
+    z: 1
+  }, /*#__PURE__*/React.createElement(SuccessDialog, null, /*#__PURE__*/React.createElement("p", null, "You have successfully installed all new applications!"), /*#__PURE__*/React.createElement(ButtonPrimary, {
+    "data-testid": "open-webiny-cms-admin-button",
+    onClick: function onClick() {
+      markInstallerAsCompleted();
+      setFinished(true);
+    }
+  }, "Open Admin Area")))), true);
+};

package/components/AppInstaller/index.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-export declare const AppInstaller: ({ Authentication, children }: {
-    Authentication: any;
-    children: any;
-}) => JSX.Element;
+export declare const AppInstaller: () => JSX.Element;