@webiny/app-admin 0.0.0-mt-1

package/components/AppInstaller/useInstaller.js

@@ -0,0 +1,279 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useReducer, useEffect, Suspense } from "react";
+import { Graph, alg } from "graphlib";
+import { sort, gt, lte } from "semver";
+import { useApolloClient } from "@apollo/react-hooks";
+import { plugins } from "@webiny/plugins";
+import { CircularProgress } from "@webiny/ui/Progress";
+
+var Loader = function Loader(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(CircularProgress, {
+      label: "Loading..."
+    })
+  }, /*#__PURE__*/React.cloneElement(children, props));
+};
+
+export var useInstaller = function useInstaller(_ref2) {
+  var isInstalled = _ref2.isInstalled;
+
+  var _useReducer = useReducer(function (prev, next) {
+    return _objectSpread(_objectSpread({}, prev), next);
+  }, {
+    loading: true,
+    installers: [],
+    installerIndex: -1,
+    showLogin: false,
+    skippingVersions: false
+  }),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _useReducer2$ = _useReducer2[0],
+      loading = _useReducer2$.loading,
+      installers = _useReducer2$.installers,
+      installerIndex = _useReducer2$.installerIndex,
+      showLogin = _useReducer2$.showLogin,
+      skippingVersions = _useReducer2$.skippingVersions,
+      setState = _useReducer2[1];
+
+  var client = useApolloClient();
+
+  var validateGraph = function validateGraph(graph) {
+    var isAcyclic = alg.isAcyclic(graph);
+
+    if (!isAcyclic) {
+      var cycles = alg.findCycles(graph);
+      var msg = ["Your installers have circular dependencies:"];
+      cycles.forEach(function (cycle, index) {
+        var fromAToB = cycle.join(" --> ");
+        fromAToB = "".concat(index + 1, ". ").concat(fromAToB);
+        var fromBToA = cycle.reverse().join(" <-- ");
+        var padLength = fromAToB.length + 4;
+        msg.push(fromAToB.padStart(padLength));
+        msg.push(fromBToA.padStart(padLength));
+      }, cycles);
+      throw new Error(msg.join("\n"));
+    }
+  };
+
+  var createGraph = function createGraph(installers) {
+    var graph = new Graph();
+    installers.forEach(function (_ref3) {
+      var plugin = _ref3.plugin;
+      graph.setNode(plugin.name, plugin);
+    });
+    installers.forEach(function (_ref4) {
+      var pl = _ref4.plugin;
+
+      if (Array.isArray(pl.dependencies)) {
+        pl.dependencies.forEach(function (dep) {
+          graph.setEdge(pl.name, dep);
+        });
+      }
+    });
+    validateGraph(graph);
+    return graph;
+  };
+
+  var getInstallers = useCallback(function (installers, graph) {
+    var toInstall = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    var toUpgrade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+    var leaf = graph.sinks()[0];
+
+    if (leaf) {
+      var installer = installers.find(function (inst) {
+        return inst.plugin.name === leaf;
+      });
+
+      if (!installer) {
+        throw new Error("Missing installer plugin \"".concat(leaf, "\"!"));
+      }
+
+      graph.removeNode(leaf);
+
+      if (!installer.installed) {
+        toInstall.push({
+          type: "install",
+          name: "".concat(installer.plugin.name, "-install"),
+          title: installer.plugin.title,
+          render: installer.plugin.render,
+          secure: installer.plugin.secure,
+          installed: false
+        });
+      } else {
+        var upgrades = (installer.plugin.upgrades || []).filter(function (_ref5) {
+          var version = _ref5.version;
+          return lte(version, process.env.REACT_APP_WEBINY_VERSION) && gt(version, installer.installed);
+        });
+
+        if (upgrades.length > 1) {
+          var availableUpgrades = sort(upgrades.map(function (u) {
+            return u.version;
+          }));
+          var latestUpgrade = availableUpgrades[availableUpgrades.length - 1];
+          setState({
+            skippingVersions: {
+              current: installer.installed,
+              latest: latestUpgrade,
+              availableUpgrades: availableUpgrades
+            }
+          });
+        } else if (upgrades.length === 1) {
+          toUpgrade.push({
+            type: "upgrade",
+            name: "".concat(installer.plugin.name, "-upgrade"),
+            title: installer.plugin.title,
+            secure: true,
+            installed: false,
+            render: function render(_ref6) {
+              var onInstalled = _ref6.onInstalled;
+              var Component = upgrades[0].getComponent();
+              return /*#__PURE__*/React.createElement(Loader, null, /*#__PURE__*/React.createElement(Component, {
+                onInstalled: onInstalled
+              }));
+            }
+          });
+        }
+      }
+
+      return getInstallers(installers, graph, toInstall, toUpgrade);
+    }
+
+    toInstall.sort(function (a, b) {
+      if (a.secure && !b.secure) {
+        return 1;
+      } else if (!a.secure && b.secure) {
+        return -1;
+      }
+
+      return 0;
+    });
+    return {
+      toInstall: toInstall,
+      toUpgrade: toUpgrade
+    };
+  }, []);
+
+  var onUser = function onUser() {
+    setState({
+      showLogin: false
+    });
+  };
+
+  var showNextInstaller = function showNextInstaller() {
+    var prevInstaller = installers[installerIndex];
+    installers[installerIndex].installed = true;
+    setState({
+      installers: installers
+    });
+
+    if (installers.length < installerIndex + 1) {
+      setState({
+        installerIndex: null
+      });
+      return;
+    }
+
+    var nextIndex = installerIndex + 1;
+    var showLogin = false;
+    var nextInstaller = installers[nextIndex];
+    var prevSecure = prevInstaller && prevInstaller.secure;
+    var nextSecure = nextInstaller && nextInstaller.secure;
+
+    if (!prevSecure && nextSecure) {
+      showLogin = true;
+    }
+
+    setState({
+      installerIndex: nextIndex,
+      showLogin: showLogin
+    });
+  };
+
+  useEffect(function () {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var allInstallers, graph, _getInstallers, toInstall, toUpgrade, installers;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!isInstalled) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              allInstallers = [];
+              _context2.next = 5;
+              return Promise.all(plugins.byType("admin-installation").map( /*#__PURE__*/function () {
+                var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pl) {
+                  var installed;
+                  return _regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) {
+                      switch (_context.prev = _context.next) {
+                        case 0:
+                          _context.next = 2;
+                          return pl.getInstalledVersion({
+                            client: client
+                          });
+
+                        case 2:
+                          installed = _context.sent;
+                          allInstallers.push({
+                            plugin: pl,
+                            installed: installed
+                          });
+
+                        case 4:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }
+                  }, _callee);
+                }));
+
+                return function (_x) {
+                  return _ref8.apply(this, arguments);
+                };
+              }()));
+
+            case 5:
+              graph = createGraph(allInstallers);
+              _getInstallers = getInstallers(allInstallers, graph), toInstall = _getInstallers.toInstall, toUpgrade = _getInstallers.toUpgrade;
+              installers = [].concat(_toConsumableArray(toUpgrade), _toConsumableArray(toInstall));
+              setState({
+                installers: installers,
+                installerIndex: 0,
+                loading: false,
+                showLogin: toUpgrade.length > 0 || toInstall.length > 0 && toInstall[0].secure
+              });
+
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+  }, []);
+  return {
+    loading: loading,
+    installers: installers,
+    installer: installers[installerIndex],
+    showNextInstaller: showNextInstaller,
+    showLogin: showLogin,
+    onUser: onUser,
+    skippingVersions: skippingVersions
+  };
+};

package/components/EmptyView.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+export declare type EmptyViewProps = {
+    icon?: ReactElement;
+    title: string;
+    action: ReactElement;
+};
+declare const EmptyView: ({ icon, title, action }: EmptyViewProps) => JSX.Element;
+export default EmptyView;

package/components/EmptyView.js

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Typography } from "@webiny/ui/Typography";
+import { ReactComponent as TouchIcon } from "@svgr/webpack!../assets/icons/touch_app.svg";
+var EmptyViewWrapper = /*#__PURE__*/styled("div", {
+  target: "eu81oh40",
+  label: "EmptyViewWrapper"
+})({
+  width: "100%",
+  height: "80%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  "& .media": {
+    "& svg": {
+      width: 75,
+      height: 75,
+      fill: "var(--mdc-theme-text-icon-on-background)"
+    },
+    marginBottom: 30
+  },
+  "& .title__container": {
+    maxWidth: 276,
+    textAlign: "center",
+    marginBottom: 24,
+    "& .title": {
+      color: "var(--mdc-theme-text-secondary-on-background)"
+    }
+  },
+  "& .action__container": {
+    "& .mdc-button": {
+      padding: "0px 16px",
+      backgroundColor: "var(--mdc-theme-surface)"
+    }
+  }
+});
+
+var EmptyView = function EmptyView(_ref) {
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(TouchIcon, null) : _ref$icon,
+      title = _ref.title,
+      action = _ref.action;
+  return /*#__PURE__*/React.createElement(EmptyViewWrapper, null, /*#__PURE__*/React.createElement("div", {
+    className: "media"
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: "title__container"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle1",
+    className: "title"
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: "action__container"
+  }, action));
+};
+
+export default EmptyView;

package/components/FileManager/BottomInfoBar/SupportedFileTypes.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const SupportedFileTypes: ({ accept }: {
+    accept: any;
+}) => JSX.Element;
+export default SupportedFileTypes;

package/components/FileManager/BottomInfoBar/SupportedFileTypes.js

@@ -0,0 +1,35 @@
+import React from "react";
+import mime from "mime/lite";
+mime.define({
+  "image/x-icon": ["ico"]
+}, true);
+mime.define({
+  "image/jpg": ["jpg"]
+}, true);
+mime.define({
+  "image/vnd.microsoft.icon": ["ico"]
+}, true);
+
+var getUniqueFileExtensions = function getUniqueFileExtensions(accept) {
+  var exts = {};
+  accept.forEach(function (item) {
+    exts[mime.getExtension(item)] = true;
+  });
+  return Object.keys(exts);
+};
+
+var SupportedFileTypes = function SupportedFileTypes(_ref) {
+  var accept = _ref.accept;
+
+  if (!accept) {
+    return null;
+  }
+
+  if (accept.length === 0) {
+    return /*#__PURE__*/React.createElement("span", null, "Showing all file extensions.");
+  }
+
+  return /*#__PURE__*/React.createElement("span", null, "Showing the following file extensions: ", getUniqueFileExtensions(accept).join(", "), ".");
+};
+
+export default SupportedFileTypes;

package/components/FileManager/BottomInfoBar/UploadStatus.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const UploadStatus: ({ uploading }: {
+    uploading: any;
+}) => JSX.Element;
+export default UploadStatus;

package/components/FileManager/BottomInfoBar/UploadStatus.js

@@ -0,0 +1,47 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { CircularProgress } from "@webiny/ui/Progress";
+var StatusWrapper = /*#__PURE__*/styled("div", {
+  target: "e8hlyp40",
+  label: "StatusWrapper"
+})({
+  color: "var(--mdc-theme-primary)",
+  position: "absolute",
+  right: 0,
+  bottom: 10,
+  marginRight: 10,
+  display: "flex",
+  alignItems: "center",
+  "> div": {
+    display: "inline-block"
+  }
+});
+var CircularProgressHolder = /*#__PURE__*/styled("div", {
+  target: "e8hlyp41",
+  label: "CircularProgressHolder"
+})({
+  position: "relative",
+  height: 12,
+  width: 12
+});
+var UploadingLabel = /*#__PURE__*/styled("div", {
+  target: "e8hlyp42",
+  label: "UploadingLabel"
+})({
+  marginRight: 5
+});
+
+var UploadStatus = function UploadStatus(_ref) {
+  var uploading = _ref.uploading;
+
+  if (!uploading) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(StatusWrapper, null, /*#__PURE__*/React.createElement(UploadingLabel, null, "Uploading..."), /*#__PURE__*/React.createElement(CircularProgressHolder, null, /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 10,
+    spinnerWidth: 1
+  })));
+};
+
+export default UploadStatus;

package/components/FileManager/BottomInfoBar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const BottomInfoBar: (props: any) => JSX.Element;
+export default BottomInfoBar;

package/components/FileManager/BottomInfoBar.js

@@ -0,0 +1,42 @@
+import React from "react";
+import mime from "mime/lite";
+import styled from "@emotion/styled";
+import SupportedFileTypes from "./BottomInfoBar/SupportedFileTypes";
+import UploadStatus from "./BottomInfoBar/UploadStatus";
+mime.define({
+  "image/x-icon": ["ico"]
+}, true);
+mime.define({
+  "image/jpg": ["jpg"]
+}, true);
+mime.define({
+  "image/vnd.microsoft.icon": ["ico"]
+}, true);
+var BottomInfoBarWrapper = /*#__PURE__*/styled("div", {
+  target: "el4b0yq0",
+  label: "BottomInfoBarWrapper"
+})({
+  fontSize: "0.8rem",
+  position: "sticky",
+  bottom: 0,
+  height: 30,
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  borderTop: "1px solid var(--mdc-theme-on-background)",
+  backgroundColor: "var(--mdc-theme-surface)",
+  width: "100%",
+  transform: "translateZ(0)",
+  overflow: "hidden",
+  display: "flex",
+  alignItems: "center",
+  zIndex: 1,
+  "> div": {
+    padding: "0 10px",
+    width: "100%"
+  }
+});
+
+var BottomInfoBar = function BottomInfoBar(props) {
+  return /*#__PURE__*/React.createElement(BottomInfoBarWrapper, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SupportedFileTypes, props), /*#__PURE__*/React.createElement(UploadStatus, props)));
+};
+
+export default BottomInfoBar;

package/components/FileManager/DropFilesHere.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare type DropFilesHereProps = {
+    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;
+    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;
+    empty?: boolean;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+};
+export default function DropFilesHere({ onDrop, onDragLeave, empty, onClick }: DropFilesHereProps): JSX.Element;

package/components/FileManager/DropFilesHere.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { css } from "emotion";
+import classNames from "classnames";
+import { Icon } from "@webiny/ui/Icon";
+import { ReactComponent as UploadIcon } from "@svgr/webpack!./icons/round-cloud_upload-24px.svg";
+var styles = /*#__PURE__*/css({
+  margin: "0 auto",
+  paddingTop: 0,
+  height: "100%",
+  zIndex: 2,
+  width: "100%",
+  position: "absolute",
+  backgroundColor: "var(--mdc-theme-text-hint-on-light)",
+  "&.empty": {
+    backgroundColor: "transparent",
+    "> div": {
+      backgroundColor: "var(--mdc-theme-surface)"
+    }
+  },
+  "> div": {
+    textAlign: "center",
+    width: 300,
+    height: 300,
+    backgroundColor: "var(--mdc-theme-background)",
+    borderRadius: "50%",
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translateX(-50%) translateY(-100%)",
+    "> div": {
+      position: "absolute",
+      top: 90,
+      width: 300,
+      color: "var(--mdc-theme-on-surface)",
+      "svg.mdc-button__icon": {
+        width: 100,
+        display: "inline-block",
+        color: "var(--mdc-theme-on-surface)"
+      }
+    }
+  }
+}, "label:styles;");
+export default function DropFilesHere(_ref) {
+  var onDrop = _ref.onDrop,
+      onDragLeave = _ref.onDragLeave,
+      empty = _ref.empty,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles, {
+      empty: empty
+    }),
+    onDrop: onDrop,
+    onClick: onClick,
+    onDragLeave: onDragLeave
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(UploadIcon, null)
+  }), /*#__PURE__*/React.createElement("div", null, "Drop files here"))));
+}

package/components/FileManager/File.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+declare type Props = {
+    file: {
+        [key: string]: any;
+    };
+    selected: boolean;
+    uploadFile: Function;
+    onSelect: (event?: React.MouseEvent) => void;
+    onClick: (event?: React.MouseEvent) => void;
+    options?: Array<{
+        label: string;
+        onClick: (file: Object) => void;
+    }>;
+    children: React.ReactNode;
+    showFileDetails: (event?: React.MouseEvent) => void;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;