@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.1e66d121db

package/components/FileManager/FileManagerView.js

@@ -1,45 +1,92 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _emotion = require("emotion");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
+
+var _Button = require("@webiny/ui/Button");
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _File = _interopRequireDefault(require("./File"));
+
+var _reactHooks = require("@apollo/react-hooks");
+
+var _graphql = require("./graphql");
+
+var _getFileTypePlugin = _interopRequireDefault(require("./getFileTypePlugin"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _getFileUploader = _interopRequireDefault(require("./getFileUploader"));
+
+var _outputFileSelectionError = require("./outputFileSelectionError");
+
+var _DropFilesHere = _interopRequireDefault(require("./DropFilesHere"));
+
+var _NoResults = _interopRequireDefault(require("./NoResults"));
+
+var _FileDetails = _interopRequireDefault(require("./FileDetails"));
+
+var _LeftSidebar = _interopRequireDefault(require("./LeftSidebar"));
+
+var _BottomInfoBar = _interopRequireDefault(require("./BottomInfoBar"));
+
+var _OverlayLayout = require("../OverlayLayout");
+
+var _useSnackbar2 = require("../../hooks/useSnackbar");
+
+var _Scrollbar = require("@webiny/ui/Scrollbar");
+
+var _Progress = require("@webiny/ui/Progress");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _appSecurity = require("@webiny/app-security");
+
+var _reactHotkeyz = require("react-hotkeyz");
+
+var _FileManagerContext = require("./FileManagerContext");
+
+var _roundSearch24px = require("./icons/round-search-24px.svg");
+
+var _roundCloud_upload24px = require("./icons/round-cloud_upload-24px.svg");
+
+var _NoPermissionView = _interopRequireDefault(require("./NoPermissionView"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useRef, useCallback, useMemo } from "react";
-import { css } from "emotion";
-import styled from "@emotion/styled";
-import Files from "react-butterfiles";
-import { ButtonPrimary, ButtonIcon } from "@webiny/ui/Button";
-import { Icon } from "@webiny/ui/Icon";
-import File from "./File";
-import { useQuery, useMutation, useApolloClient } from "@apollo/react-hooks";
-import { LIST_FILES, CREATE_FILE, GET_FILE_SETTINGS } from "./graphql";
-import getFileTypePlugin from "./getFileTypePlugin";
-import get from "lodash/get";
-import debounce from "lodash/debounce";
-import getFileUploader from "./getFileUploader";
-import outputFileSelectionError from "./outputFileSelectionError";
-import DropFilesHere from "./DropFilesHere";
-import NoResults from "./NoResults";
-import FileDetails from "./FileDetails";
-import LeftSidebar from "./LeftSidebar";
-import BottomInfoBar from "./BottomInfoBar";
-import { OverlayLayout } from "../OverlayLayout";
-import { useSnackbar } from "../../hooks/useSnackbar";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { i18n } from "@webiny/app/i18n";
-import { useSecurity } from "@webiny/app-security";
-import { useHotkeys } from "react-hotkeyz";
-import { useFileManager } from "./FileManagerContext";
-import { ReactComponent as SearchIcon } from "@svgr/webpack!./icons/round-search-24px.svg";
-import { ReactComponent as UploadIcon } from "@svgr/webpack!./icons/round-cloud_upload-24px.svg";
-import NoPermissionView from "./NoPermissionView";
-var t = i18n.ns("app-admin/file-manager/file-manager-view");
+var t = _i18n.i18n.ns("app-admin/file-manager/file-manager-view");
+
 var style = {
-  draggingFeedback: /*#__PURE__*/css({
+  draggingFeedback: /*#__PURE__*/(0, _emotion.css)({
     position: "fixed",
     top: 0,
     left: 0,
@@ -50,7 +97,7 @@ var style = {
     zIndex: 100
   }, "label:draggingFeedback;"),
   leftDrawer: {
-    header: /*#__PURE__*/css({
+    header: /*#__PURE__*/(0, _emotion.css)({
       textAlign: "center",
       fontSize: 18,
       padding: 10,
@@ -59,7 +106,7 @@ var style = {
     }, "label:header;")
   }
 };
-var InputSearch = /*#__PURE__*/styled("div", {
+var InputSearch = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ee8m09m0",
   label: "InputSearch"
 })({
@@ -80,7 +127,7 @@ var InputSearch = /*#__PURE__*/styled("div", {
     color: "var(--mdc-theme-text-primary-on-background)"
   }
 });
-var searchIcon = /*#__PURE__*/css({
+var searchIcon = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-button__icon": {
     color: "var(--mdc-theme-text-secondary-on-background)",
     position: "absolute",
@@ -90,7 +137,7 @@ var searchIcon = /*#__PURE__*/css({
     top: 7
   }
 }, "label:searchIcon;");
-var FileListWrapper = /*#__PURE__*/styled("div", {
+var FileListWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ee8m09m1",
   label: "FileListWrapper"
 })({
@@ -99,7 +146,7 @@ var FileListWrapper = /*#__PURE__*/styled("div", {
   width: "calc(100vw - 270px)",
   height: "100%"
 });
-var FileList = /*#__PURE__*/styled("div", {
+var FileList = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ee8m09m2",
   label: "FileList"
 })({
@@ -111,15 +158,24 @@ var FileList = /*#__PURE__*/styled("div", {
   marginBottom: 95
 });
 
-function renderFile(props) {
+var renderFile = function renderFile(props) {
   var file = props.file;
-  var plugin = getFileTypePlugin(file);
-  return /*#__PURE__*/React.createElement(File, Object.assign({}, props, {
+  var plugin = (0, _getFileTypePlugin.default)(file);
+
+  if (!plugin) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({}, props, {
     key: file.id
   }), plugin.render({
+    /**
+     * TODO @ts-refactor
+     */
+    // @ts-ignore
     file: file
   }));
-}
+};
 
 var renderEmpty = function renderEmpty(_ref) {
   var hasPreviouslyUploadedFiles = _ref.hasPreviouslyUploadedFiles,
@@ -127,30 +183,33 @@ var renderEmpty = function renderEmpty(_ref) {
       fmFilePermission = _ref.fmFilePermission;
 
   if (!fmFilePermission) {
-    return /*#__PURE__*/React.createElement(NoPermissionView, null);
+    return /*#__PURE__*/_react.default.createElement(_NoPermissionView.default, null);
   }
 
   if (hasPreviouslyUploadedFiles) {
-    return /*#__PURE__*/React.createElement(NoResults, null);
+    return /*#__PURE__*/_react.default.createElement(_NoResults.default, null);
   }
 
-  return /*#__PURE__*/React.createElement(DropFilesHere, {
+  return /*#__PURE__*/_react.default.createElement(_DropFilesHere.default, {
     empty: true,
-    onClick: browseFiles
+    onClick: function onClick() {
+      return browseFiles();
+    }
   });
 };
 
-function FileManagerView(props) {
+var FileManagerView = function FileManagerView(props) {
   var onClose = props.onClose,
       onChange = props.onChange,
       accept = props.accept,
-      multiple = props.multiple,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? false : _props$multiple,
       maxSize = props.maxSize,
       multipleMaxCount = props.multipleMaxCount,
       multipleMaxSize = props.multipleMaxSize,
       onUploadCompletion = props.onUploadCompletion;
 
-  var _useFileManager = useFileManager(),
+  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
       selected = _useFileManager.selected,
       toggleSelected = _useFileManager.toggleSelected,
       dragging = _useFileManager.dragging,
@@ -164,16 +223,17 @@ function FileManagerView(props) {
       hasPreviouslyUploadedFiles = _useFileManager.hasPreviouslyUploadedFiles,
       setHasPreviouslyUploadedFiles = _useFileManager.setHasPreviouslyUploadedFiles;
 
-  var _useSnackbar = useSnackbar(),
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  var _useSecurity = useSecurity(),
-      identity = _useSecurity.identity;
+  var _useSecurity = (0, _appSecurity.useSecurity)(),
+      identity = _useSecurity.identity,
+      getPermission = _useSecurity.getPermission;
 
-  var fmFilePermission = useMemo(function () {
-    return identity.getPermission("fm.file");
-  }, []);
-  var canCreate = useMemo(function () {
+  var fmFilePermission = (0, _react.useMemo)(function () {
+    return getPermission("fm.file");
+  }, [identity]);
+  var canCreate = (0, _react.useMemo)(function () {
     // Bail out early if no access
     if (!fmFilePermission) {
       return false;
@@ -189,16 +249,16 @@ function FileManagerView(props) {
 
     return true;
   }, [fmFilePermission]);
-  var canEdit = useCallback(function (item) {
+  var canEdit = (0, _react.useCallback)(function (item) {
     // Bail out early if no access
     if (!fmFilePermission) {
       return false;
     }
 
-    var creatorId = get(item, "createdBy.id");
+    var creatorId = (0, _get.default)(item, "createdBy.id");
 
     if (fmFilePermission.own && creatorId) {
-      var identityId = identity.id || identity.login;
+      var identityId = identity ? identity.id || identity.login : null;
       return creatorId === identityId;
     }
 
@@ -208,22 +268,22 @@ function FileManagerView(props) {
 
     return true;
   }, [fmFilePermission]);
-  var searchOnChange = useCallback( // @ts-ignore
-  debounce(function (search) {
+  var searchOnChange = (0, _react.useCallback)( // @ts-ignore
+  (0, _debounce.default)(function (search) {
     return setQueryParams({
       search: search
     });
   }, 500), []);
 
-  var _toggleTag = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+  var _toggleTag = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
       var tag, queryParams, finalTags;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               tag = _ref2.tag, queryParams = _ref2.queryParams;
-              finalTags = Array.isArray(queryParams.tags) ? _toConsumableArray(queryParams.tags) : [];
+              finalTags = Array.isArray(queryParams.tags) ? (0, _toConsumableArray2.default)(queryParams.tags) : [];
 
               if (finalTags.includes(tag)) {
                 finalTags.splice(finalTags.indexOf(tag), 1);
@@ -231,7 +291,7 @@ function FileManagerView(props) {
                 finalTags.push(tag);
               }
 
-              setQueryParams(_objectSpread(_objectSpread({}, queryParams), {}, {
+              setQueryParams((0, _objectSpread2.default)((0, _objectSpread2.default)({}, queryParams), {}, {
                 tags: finalTags
               }));
 
@@ -248,12 +308,12 @@ function FileManagerView(props) {
     };
   }(), []);
 
-  var getFileUploadErrorMessage = useCallback(function (e) {
+  var getFileUploadErrorMessage = (0, _react.useCallback)(function (e) {
     if (typeof e === "string") {
       var match = e.match(/Message>(.*?)<\/Message/);
 
       if (match) {
-        var _match = _slicedToArray(match, 2),
+        var _match = (0, _slicedToArray2.default)(match, 2),
             message = _match[1];
 
         return message;
@@ -266,71 +326,72 @@ function FileManagerView(props) {
   }, []);
 
   var updateCacheAfterCreateFile = function updateCacheAfterCreateFile(cache, newFile) {
-    var newFileData = get(newFile, "data.fileManager.createFile.data");
+    var _data$fileManager;
+
+    var newFileData = (0, _get.default)(newFile, "data.fileManager.createFile.data");
     var data = cache.readQuery({
-      query: LIST_FILES,
+      query: _graphql.LIST_FILES,
       variables: queryParams
     });
     cache.writeQuery({
-      query: LIST_FILES,
+      query: _graphql.LIST_FILES,
       variables: queryParams,
       data: {
-        fileManager: _objectSpread(_objectSpread({}, data.fileManager), {}, {
-          listFiles: _objectSpread(_objectSpread({}, data.fileManager.listFiles), {}, {
-            data: [newFileData].concat(_toConsumableArray(data.fileManager.listFiles.data || []))
+        fileManager: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (data === null || data === void 0 ? void 0 : data.fileManager) || {}), {}, {
+          listFiles: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ((data === null || data === void 0 ? void 0 : data.fileManager) || {}).listFiles), {}, {
+            data: [newFileData].concat((0, _toConsumableArray2.default)(((data === null || data === void 0 ? void 0 : (_data$fileManager = data.fileManager) === null || _data$fileManager === void 0 ? void 0 : _data$fileManager.listFiles) || {}).data || []))
           })
         })
       }
     });
   };
 
-  var getFileDetailsFile = useCallback(function getFileDetailsFile(_ref4) {
+  var getFileDetailsFile = (0, _react.useCallback)(function (_ref4) {
     var src = _ref4.src,
         list = _ref4.list;
     return list.find(function (item) {
       return item.src === src;
     });
   }, []);
-  useHotkeys({
+  (0, _reactHotkeyz.useHotkeys)({
     zIndex: 50,
     keys: {
       esc: onClose
     }
   });
-  var searchInput = useRef();
-  var apolloClient = useApolloClient();
-  var gqlQuery = useQuery(LIST_FILES, {
+  var searchInput = (0, _react.useRef)(null);
+  var apolloClient = (0, _reactHooks.useApolloClient)();
+  var gqlQuery = (0, _reactHooks.useQuery)(_graphql.LIST_FILES, {
     variables: queryParams,
     onCompleted: function onCompleted(response) {
-      var list = get(response, "fileManager.listFiles.data") || [];
+      var list = (0, _get.default)(response, "fileManager.listFiles.data") || [];
 
       if (hasPreviouslyUploadedFiles === null) {
         setHasPreviouslyUploadedFiles(list.length > 0);
       }
     }
   });
-  var refreshOnScroll = useCallback(debounce(function (_ref5) {
+  var refreshOnScroll = (0, _react.useCallback)((0, _debounce.default)(function (_ref5) {
     var scrollFrame = _ref5.scrollFrame,
         fetchMore = _ref5.fetchMore;
 
     if (scrollFrame.top > 0.9) {
-      var cursor = get(gqlQuery.data, "fileManager.listFiles.meta.cursor");
+      var cursor = (0, _get.default)(gqlQuery.data, "fileManager.listFiles.meta.cursor");
 
       if (cursor) {
         fetchMore({
           variables: {
             after: cursor
           },
-          updateQuery: function updateQuery(prev, _ref6) {
-            var fetchMoreResult = _ref6.fetchMoreResult;
+          updateQuery: function updateQuery(prev, result) {
+            var fetchMoreResult = result.fetchMoreResult;
 
             if (!fetchMoreResult) {
               return prev;
             }
 
-            var next = _objectSpread({}, fetchMoreResult);
-
-            next.fileManager.listFiles.data = [].concat(_toConsumableArray(prev.fileManager.listFiles.data), _toConsumableArray(fetchMoreResult.fileManager.listFiles.data));
+            var next = (0, _objectSpread2.default)({}, fetchMoreResult);
+            next.fileManager.listFiles.data = [].concat((0, _toConsumableArray2.default)(prev.fileManager.listFiles.data), (0, _toConsumableArray2.default)(fetchMoreResult.fileManager.listFiles.data));
             return next;
           }
         });
@@ -340,18 +401,18 @@ function FileManagerView(props) {
   var data = gqlQuery.data,
       fetchMore = gqlQuery.fetchMore,
       loading = gqlQuery.loading;
-  var list = get(data, "fileManager.listFiles.data") || [];
+  var list = (0, _get.default)(data, "fileManager.listFiles.data") || [];
 
-  var _useMutation = useMutation(CREATE_FILE, {
+  var _useMutation = (0, _reactHooks.useMutation)(_graphql.CREATE_FILE, {
     update: updateCacheAfterCreateFile
   }),
-      _useMutation2 = _slicedToArray(_useMutation, 1),
+      _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 1),
       createFile = _useMutation2[0];
 
   var uploadFile = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(files) {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(files) {
       var list, errors, uploadedFiles;
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
@@ -361,15 +422,15 @@ function FileManagerView(props) {
               uploadedFiles = [];
               _context3.next = 6;
               return Promise.all(list.map( /*#__PURE__*/function () {
-                var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file) {
+                var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(file) {
                   var response, createFileResponse;
-                  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
                     while (1) {
                       switch (_context2.prev = _context2.next) {
                         case 0:
                           _context2.prev = 0;
                           _context2.next = 3;
-                          return getFileUploader()(file, {
+                          return (0, _getFileUploader.default)()(file, {
                             apolloClient: apolloClient
                           });
 
@@ -378,14 +439,16 @@ function FileManagerView(props) {
                           _context2.next = 6;
                           return createFile({
                             variables: {
-                              data: response
+                              data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, response), {}, {
+                                tags: queryParams.scope ? [queryParams.scope] : []
+                              })
                             }
                           });
 
                         case 6:
                           createFileResponse = _context2.sent;
                           // Save create file data for later
-                          uploadedFiles.push(get(createFileResponse, "data.fileManager.createFile.data"));
+                          uploadedFiles.push((0, _get.default)(createFileResponse, "data.fileManager.createFile.data"));
                           _context2.next = 13;
                           break;
 
@@ -406,7 +469,7 @@ function FileManagerView(props) {
                 }));
 
                 return function (_x3) {
-                  return _ref8.apply(this, arguments);
+                  return _ref7.apply(this, arguments);
                 };
               }()));
 
@@ -423,30 +486,35 @@ function FileManagerView(props) {
               }
 
               return _context3.abrupt("return", setTimeout(function () {
-                showSnackbar( /*#__PURE__*/React.createElement(React.Fragment, null, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["One or more files were not uploaded successfully:"]))), /*#__PURE__*/React.createElement("ol", null, errors.map(function (_ref9) {
-                  var file = _ref9.file,
-                      e = _ref9.e;
-                  return /*#__PURE__*/React.createElement("li", {
+                showSnackbar( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["One or more files were not uploaded successfully:"]))), /*#__PURE__*/_react.default.createElement("ol", null, errors.map(function (_ref8) {
+                  var file = _ref8.file,
+                      e = _ref8.e;
+                  return /*#__PURE__*/_react.default.createElement("li", {
                     key: file.name
-                  }, /*#__PURE__*/React.createElement("strong", null, file.name), ": ", getFileUploadErrorMessage(e));
-                }))));
+                  }, /*#__PURE__*/_react.default.createElement("strong", null, file.name), ": ", getFileUploadErrorMessage(e));
+                })))); // TODO @ts-refactor
               }, 750));
 
             case 10:
               // We wait 750ms, just for everything to settle down a bit.
               setTimeout(function () {
-                return showSnackbar(t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["File upload complete."]))));
+                return showSnackbar(t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["File upload complete."]))));
               }, 750);
 
-              if (typeof onUploadCompletion === "function") {
-                // We wait 750ms, just for everything to settle down a bit.
-                setTimeout(function () {
-                  onUploadCompletion(uploadedFiles);
-                  onClose();
-                }, 750);
+              if (!(typeof onUploadCompletion === "function")) {
+                _context3.next = 13;
+                break;
               }
 
-            case 12:
+              return _context3.abrupt("return", setTimeout(function () {
+                onUploadCompletion(uploadedFiles);
+                onClose && onClose(); // TODO @ts-refactor
+              }, 750));
+
+            case 13:
+              return _context3.abrupt("return", null);
+
+            case 14:
             case "end":
               return _context3.stop();
           }
@@ -455,87 +523,101 @@ function FileManagerView(props) {
     }));
 
     return function uploadFile(_x2) {
-      return _ref7.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
 
-  var renderUploadFileAction = useCallback(function (_ref10) {
-    var browseFiles = _ref10.browseFiles;
+  var renderUploadFileAction = (0, _react.useCallback)(function (_ref9) {
+    var browseFiles = _ref9.browseFiles;
 
     if (!canCreate) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ButtonPrimary, {
+    return /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
       onClick: browseFiles,
       disabled: uploading
-    }, /*#__PURE__*/React.createElement(ButtonIcon, {
-      icon: /*#__PURE__*/React.createElement(UploadIcon, null)
-    }), t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Upload..."]))));
+    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
+      icon: /*#__PURE__*/_react.default.createElement(_roundCloud_upload24px.ReactComponent, null)
+    }), t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Upload..."]))));
   }, [uploading, canCreate]);
-  var settingsQuery = useQuery(GET_FILE_SETTINGS);
-  var settings = get(settingsQuery.data, "fileManager.getSettings.data") || {};
-  return /*#__PURE__*/React.createElement(Files, {
+  var settingsQuery = (0, _reactHooks.useQuery)(_graphql.GET_FILE_SETTINGS);
+  var settings = (0, _get.default)(settingsQuery.data, "fileManager.getSettings.data") || {};
+  return /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
     multiple: true,
     maxSize: settings.uploadMaxFileSize ? settings.uploadMaxFileSize + "b" : maxSize,
     multipleMaxSize: multipleMaxSize,
     multipleMaxCount: multipleMaxCount,
     accept: accept,
     onSuccess: function onSuccess(files) {
-      return uploadFile(files.map(function (file) {
+      uploadFile(files.map(function (file) {
         return file.src.file;
-      }));
+      }).filter(Boolean));
     },
     onError: function onError(errors) {
-      var message = outputFileSelectionError(errors);
+      console.log("onError", errors);
+      /**
+       * TODO @ts-refactor
+       * Figure out if incoming errors var is wrong or the one in the outputFileSelectionError
+       */
+      // @ts-ignore
+
+      var message = (0, _outputFileSelectionError.outputFileSelectionError)(errors);
       showSnackbar(message);
     }
-  }, function (_ref11) {
-    var getDropZoneProps = _ref11.getDropZoneProps,
-        browseFiles = _ref11.browseFiles,
-        validateFiles = _ref11.validateFiles;
-    return /*#__PURE__*/React.createElement(OverlayLayout, Object.assign({}, getDropZoneProps({
+  }, function (_ref10) {
+    var getDropZoneProps = _ref10.getDropZoneProps,
+        browseFiles = _ref10.browseFiles,
+        validateFiles = _ref10.validateFiles;
+    return /*#__PURE__*/_react.default.createElement(_OverlayLayout.OverlayLayout, Object.assign({}, getDropZoneProps({
       onDragEnter: function onDragEnter() {
         return hasPreviouslyUploadedFiles && setDragging(true);
       },
       onExited: onClose
     }), {
-      barLeft: /*#__PURE__*/React.createElement(InputSearch, null, /*#__PURE__*/React.createElement(Icon, {
+      barLeft: /*#__PURE__*/_react.default.createElement(InputSearch, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
         className: searchIcon,
-        icon: /*#__PURE__*/React.createElement(SearchIcon, null)
-      }), /*#__PURE__*/React.createElement("input", {
+        icon: /*#__PURE__*/_react.default.createElement(_roundSearch24px.ReactComponent, null)
+      }), /*#__PURE__*/_react.default.createElement("input", {
         ref: searchInput,
         onChange: function onChange(e) {
           return searchOnChange(e.target.value);
         },
-        placeholder: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Search by filename or tags"]))),
+        placeholder: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Search by filename or tags"]))),
         disabled: !fmFilePermission,
         "data-testid": "file-manager.search-input"
       })),
-      barRight: selected.length > 0 ? /*#__PURE__*/React.createElement(ButtonPrimary, {
+      barRight: selected.length > 0 ? /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
         disabled: uploading,
-        onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-          return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-            while (1) {
-              switch (_context4.prev = _context4.next) {
-                case 0:
-                  _context4.next = 2;
-                  return onChange(multiple ? selected : selected[0]);
-
-                case 2:
-                  onClose();
-
-                case 3:
-                case "end":
-                  return _context4.stop();
+        onClick: function onClick() {
+          (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+            return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+              while (1) {
+                switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (!(typeof onChange === "function")) {
+                      _context4.next = 4;
+                      break;
+                    }
+
+                    _context4.next = 3;
+                    return onChange(multiple ? selected : selected[0]);
+
+                  case 3:
+                    onClose && onClose();
+
+                  case 4:
+                  case "end":
+                    return _context4.stop();
+                }
               }
-            }
-          }, _callee4);
-        }))
-      }, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Select"]))), " ", multiple && "(".concat(selected.length, ")")) : renderUploadFileAction({
+            }, _callee4);
+          }))();
+        }
+      }, t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Select"]))), " ", multiple && "(".concat(selected.length, ")")) : renderUploadFileAction({
         browseFiles: browseFiles
       })
-    }), /*#__PURE__*/React.createElement(React.Fragment, null, dragging && hasPreviouslyUploadedFiles && /*#__PURE__*/React.createElement(DropFilesHere // @ts-ignore TODO: @adrian - className is never rendered?!
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dragging && hasPreviouslyUploadedFiles && /*#__PURE__*/_react.default.createElement(_DropFilesHere.default // @ts-ignore TODO: @adrian - className is never rendered?!
     , {
       className: style.draggingFeedback,
       onDragLeave: function onDragLeave() {
@@ -544,7 +626,7 @@ function FileManagerView(props) {
       onDrop: function onDrop() {
         return setDragging(false);
       }
-    }), /*#__PURE__*/React.createElement(FileDetails, {
+    }), /*#__PURE__*/_react.default.createElement(_FileDetails.default, {
       validateFiles: validateFiles,
       uploadFile: uploadFile,
       file: getFileDetailsFile({
@@ -552,7 +634,7 @@ function FileManagerView(props) {
         src: showingFileDetails
       }),
       canEdit: canEdit
-    }), /*#__PURE__*/React.createElement(LeftSidebar, {
+    }), /*#__PURE__*/_react.default.createElement(_LeftSidebar.default, {
       queryParams: queryParams,
       toggleTag: function toggleTag(tag) {
         return _toggleTag({
@@ -560,21 +642,21 @@ function FileManagerView(props) {
           queryParams: queryParams
         });
       }
-    }), /*#__PURE__*/React.createElement(FileListWrapper, {
+    }), /*#__PURE__*/_react.default.createElement(FileListWrapper, {
       "data-testid": "fm-list-wrapper"
-    }, loading && /*#__PURE__*/React.createElement(CircularProgress, {
-      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Loading Files..."]))),
+    }, loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+      label: t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Loading Files..."]))),
       style: {
         opacity: 1
       }
-    }), /*#__PURE__*/React.createElement(Scrollbar, {
+    }), /*#__PURE__*/_react.default.createElement(_Scrollbar.Scrollbar, {
       onScrollFrame: function onScrollFrame(scrollFrame) {
         return refreshOnScroll({
           scrollFrame: scrollFrame,
           fetchMore: fetchMore
         });
       }
-    }, /*#__PURE__*/React.createElement(FileList, null, list.length ? list.map(function (file) {
+    }, /*#__PURE__*/_react.default.createElement(FileList, null, list.length ? list.map(function (file) {
       return renderFile({
         uploadFile: uploadFile,
         file: file,
@@ -584,44 +666,57 @@ function FileManagerView(props) {
         selected: selected.find(function (current) {
           return current.src === file.src;
         }),
-        onSelect: typeof onChange === "undefined" ? undefined : /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-          return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-            while (1) {
-              switch (_context5.prev = _context5.next) {
-                case 0:
-                  if (!multiple) {
-                    _context5.next = 3;
-                    break;
-                  }
-
-                  toggleSelected(file);
-                  return _context5.abrupt("return");
-
-                case 3:
-                  _context5.next = 5;
-                  return onChange(file);
-
-                case 5:
-                  onClose();
-
-                case 6:
-                case "end":
-                  return _context5.stop();
+        onSelect: function () {
+          var _onSelect = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
+            return (0, _regeneratorRuntime2.default)().wrap(function _callee5$(_context5) {
+              while (1) {
+                switch (_context5.prev = _context5.next) {
+                  case 0:
+                    if (!(typeof onChange === "function")) {
+                      _context5.next = 7;
+                      break;
+                    }
+
+                    if (!multiple) {
+                      _context5.next = 4;
+                      break;
+                    }
+
+                    toggleSelected(file);
+                    return _context5.abrupt("return");
+
+                  case 4:
+                    _context5.next = 6;
+                    return onChange(file);
+
+                  case 6:
+                    onClose && onClose();
+
+                  case 7:
+                  case "end":
+                    return _context5.stop();
+                }
               }
-            }
-          }, _callee5);
-        }))
+            }, _callee5);
+          }));
+
+          function onSelect() {
+            return _onSelect.apply(this, arguments);
+          }
+
+          return onSelect;
+        }()
       });
     }) : renderEmpty({
       hasPreviouslyUploadedFiles: hasPreviouslyUploadedFiles,
       browseFiles: browseFiles,
       fmFilePermission: fmFilePermission
-    }))), /*#__PURE__*/React.createElement(BottomInfoBar, {
+    }))), /*#__PURE__*/_react.default.createElement(_BottomInfoBar.default, {
       accept: accept,
       uploading: uploading
     }))));
   });
-}
+};
 
 FileManagerView.defaultProps = {
   multiple: false,
@@ -629,4 +724,5 @@ FileManagerView.defaultProps = {
   multipleMaxSize: "1000mb",
   multipleMaxCount: 100
 };
-export default FileManagerView;
+var _default = FileManagerView;
+exports.default = _default;