@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/components/FileManager/FileDetails.js

@@ -1,53 +1,99 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+"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 _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _bytes = _interopRequireDefault(require("bytes"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _emotion = require("emotion");
+
+var _Drawer = require("@webiny/ui/Drawer");
+
+var _Button = require("@webiny/ui/Button");
+
+var _getFileTypePlugin = _interopRequireDefault(require("./getFileTypePlugin"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _set = _interopRequireDefault(require("lodash/set"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _Tags = _interopRequireDefault(require("./FileDetails/Tags"));
+
+var _Name = _interopRequireDefault(require("./FileDetails/Name"));
+
+var _Tooltip = require("@webiny/ui/Tooltip");
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _reactHotkeyz = require("react-hotkeyz");
+
+var _content_copyBlack24px = require("./icons/content_copy-black-24px.svg");
+
+var _delete = require("./icons/delete.svg");
+
+var _insert_photo24px = require("../../assets/icons/insert_photo-24px.svg");
+
+var _insert_drive_file24px = require("../../assets/icons/insert_drive_file-24px.svg");
+
+var _today24px = require("../../assets/icons/today-24px.svg");
+
+var _highlight24px = require("../../assets/icons/highlight-24px.svg");
+
+var _FileManagerContext = require("./FileManagerContext");
+
+var _reactHooks = require("@apollo/react-hooks");
+
+var _useSnackbar2 = require("../../hooks/useSnackbar");
+
+var _appSecurity = require("@webiny/app-security");
+
+var _ConfirmationDialog = require("@webiny/ui/ConfirmationDialog");
+
+var _graphql = require("./graphql");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _mime = _interopRequireDefault(require("mime"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useMemo, useState } from "react";
-import bytes from "bytes";
-import classNames from "classnames";
-import { css } from "emotion";
-import { Drawer, DrawerContent } from "@webiny/ui/Drawer";
-import { IconButton } from "@webiny/ui/Button";
-import getFileTypePlugin from "./getFileTypePlugin";
-import dayjs from "dayjs";
-import get from "lodash/get";
-import set from "lodash/set";
-import cloneDeep from "lodash/cloneDeep";
-import Tags from "./FileDetails/Tags";
-import Name from "./FileDetails/Name";
-import { Tooltip } from "@webiny/ui/Tooltip";
-import { Icon } from "@webiny/ui/Icon";
-import { Typography } from "@webiny/ui/Typography";
-import { useHotkeys } from "react-hotkeyz";
-import { ReactComponent as CopyContentIcon } from "@svgr/webpack!./icons/content_copy-black-24px.svg";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!./icons/delete.svg";
-import { ReactComponent as ImageIcon } from "@svgr/webpack!../../assets/icons/insert_photo-24px.svg";
-import { ReactComponent as FileIcon } from "@svgr/webpack!../../assets/icons/insert_drive_file-24px.svg";
-import { ReactComponent as CalendarIcon } from "@svgr/webpack!../../assets/icons/today-24px.svg";
-import { ReactComponent as HighlightIcon } from "@svgr/webpack!../../assets/icons/highlight-24px.svg";
-import { useFileManager } from "./FileManagerContext";
-import { useMutation } from "@apollo/react-hooks";
-import { useSnackbar } from "../../hooks/useSnackbar";
-import { useSecurity } from "@webiny/app-security";
-import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
-import { DELETE_FILE, LIST_FILES, LIST_TAGS } from "./graphql";
-import { i18n } from "@webiny/app/i18n";
-import mime from "mime";
-var t = i18n.ns("app-admin/file-manager/file-details");
-var fileDetailsSidebar = /*#__PURE__*/css({
+var t = _i18n.i18n.ns("app-admin/file-manager/file-details");
+
+var fileDetailsSidebar = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-drawer": {
     width: 360
   }
 }, "label:fileDetailsSidebar;");
 var style = {
-  wrapper: /*#__PURE__*/css({
+  wrapper: /*#__PURE__*/(0, _emotion.css)({
     height: "100vh",
     overflowY: "auto"
   }, "label:wrapper;"),
-  header: /*#__PURE__*/css({
+  header: /*#__PURE__*/(0, _emotion.css)({
     textAlign: "center",
     marginBottom: 24,
     paddingTop: 16,
@@ -57,7 +103,7 @@ var style = {
       fontWeight: 600
     }
   }, "label:header;"),
-  preview: /*#__PURE__*/css({
+  preview: /*#__PURE__*/(0, _emotion.css)({
     boxSizing: "border-box",
     display: "flex",
     justifyContent: "center",
@@ -78,7 +124,7 @@ var style = {
       backgroundColor: "var(--mdc-theme-background)"
     }
   }, "label:preview;"),
-  download: /*#__PURE__*/css({
+  download: /*#__PURE__*/(0, _emotion.css)({
     textAlign: "center",
     margin: "0 auto",
     width: "100%",
@@ -88,7 +134,7 @@ var style = {
       }
     }
   }, "label:download;"),
-  list: /*#__PURE__*/css({
+  list: /*#__PURE__*/(0, _emotion.css)({
     textAlign: "left",
     color: "var(--mdc-theme-on-surface)",
     li: {
@@ -122,7 +168,7 @@ var style = {
       }
     }
   }, "label:list;"),
-  drawerContent: /*#__PURE__*/css({
+  drawerContent: /*#__PURE__*/(0, _emotion.css)({
     "&.mdc-drawer__content": {
       height: "auto",
       overflowY: "inherit"
@@ -131,7 +177,7 @@ var style = {
 };
 
 var isImage = function isImage(file) {
-  var fileType = mime.getType(file && file.name);
+  var fileType = _mime.default.getType(file && file.name);
 
   if (fileType && typeof fileType === "string") {
     return fileType.includes("image");
@@ -140,37 +186,43 @@ var isImage = function isImage(file) {
   return false;
 };
 
-export default function FileDetails(props) {
+var FileDetails = function FileDetails(props) {
   var file = props.file,
       uploadFile = props.uploadFile,
       validateFiles = props.validateFiles;
-  var filePlugin = getFileTypePlugin(file);
-  var actions = get(filePlugin, "fileDetails.actions") || get(filePlugin, "actions") || [];
+  var filePlugin = (0, _getFileTypePlugin.default)(file);
+  var actions = (0, _get.default)(filePlugin, "fileDetails.actions") || (0, _get.default)(filePlugin, "actions") || [];
 
-  var _useFileManager = useFileManager(),
+  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
       hideFileDetails = _useFileManager.hideFileDetails,
       queryParams = _useFileManager.queryParams;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       darkImageBackground = _useState2[0],
       setDarkImageBackground = _useState2[1];
 
-  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 canDelete = useCallback(function (item) {
+  var fmFilePermission = (0, _react.useMemo)(function () {
+    return getPermission("fm.file");
+  }, [identity]);
+  var canDelete = (0, _react.useCallback)(function (item) {
     // Bail out early if no access
     if (!fmFilePermission) {
       return false;
     }
 
     if (fmFilePermission.own) {
-      var identityId = identity.id || identity.login;
-      return get(item, "createdBy.id") === identityId;
+      var identityId = identity ? identity.id || identity.login : null;
+
+      if (!identityId) {
+        return false;
+      }
+
+      return (0, _get.default)(item, "createdBy.id") === identityId;
     }
 
     if (typeof fmFilePermission.rwd === "string") {
@@ -179,7 +231,7 @@ export default function FileDetails(props) {
 
     return true;
   }, [fmFilePermission]);
-  useHotkeys({
+  (0, _reactHotkeyz.useHotkeys)({
     zIndex: 55,
     disabled: !file,
     keys: {
@@ -187,13 +239,32 @@ export default function FileDetails(props) {
     }
   });
 
-  var _useMutation = useMutation(DELETE_FILE, {
+  var _useMutation = (0, _reactHooks.useMutation)(_graphql.DELETE_FILE, {
     update: function update(cache) {
+      var _listTagsData$fileMan;
+
       // 1. Update files list cache
-      var data = cloneDeep(cache.readQuery({
-        query: LIST_FILES,
+      var data = (0, _cloneDeep.default)(cache.readQuery({
+        query: _graphql.LIST_FILES,
         variables: queryParams
       }));
+
+      if (!data) {
+        data = {
+          fileManager: {
+            listFiles: {
+              data: [],
+              error: null,
+              meta: {
+                hasMoreItems: false,
+                cursor: null,
+                totalItem: 0
+              }
+            }
+          }
+        };
+      }
+
       var filteredList = data.fileManager.listFiles.data.filter(function (item) {
         return item.id !== file.id;
       });
@@ -201,89 +272,92 @@ export default function FileDetails(props) {
         return item.id === file.id;
       });
       cache.writeQuery({
-        query: LIST_FILES,
+        query: _graphql.LIST_FILES,
         variables: queryParams,
-        data: set(data, "fileManager.listFiles.data", filteredList)
+        data: (0, _set.default)(data, "fileManager.listFiles.data", filteredList)
       }); // 2. Update "ListTags" cache
 
-      // 2. Update "ListTags" cache
-      if (Array.isArray(selectedFile.tags)) {
-        var tagCountMap = {}; // Prepare "tag" count map
+      if (!selectedFile || Array.isArray(selectedFile.tags) === false) {
+        return;
+      }
 
-        // Prepare "tag" count map
-        data.fileManager.listFiles.data.forEach(function (file) {
-          if (!Array.isArray(file.tags)) {
-            return;
-          }
+      var tagCountMap = {}; // Prepare "tag" count map
 
-          file.tags.forEach(function (tag) {
-            if (tagCountMap[tag]) {
-              tagCountMap[tag] += 1;
-            } else {
-              tagCountMap[tag] = 1;
-            }
-          });
-        }); // Get tags from cache
-
-        // Get tags from cache
-        var listTagsData = cloneDeep(cache.readQuery({
-          query: LIST_TAGS
-        })); // Remove selected file tags from list.
-
-        // Remove selected file tags from list.
-        var filteredTags = listTagsData.fileManager.listTags.filter(function (tag) {
-          if (!selectedFile.tags.includes(tag)) {
-            return true;
+      data.fileManager.listFiles.data.forEach(function (file) {
+        if (!Array.isArray(file.tags)) {
+          return;
+        }
+
+        file.tags.forEach(function (tag) {
+          if (tagCountMap[tag]) {
+            tagCountMap[tag] += 1;
+          } else {
+            tagCountMap[tag] = 1;
           }
+        });
+      }); // Get tags from cache
 
-          return tagCountMap[tag] > 1;
-        }); // Write it to cache
+      var listTagsData = (0, _cloneDeep.default)(cache.readQuery({
+        query: _graphql.LIST_TAGS,
+        variables: {
+          where: (0, _FileManagerContext.getWhere)(queryParams.scope)
+        }
+      })); // Remove selected file tags from list.
 
-        // Write it to cache
-        cache.writeQuery({
-          query: LIST_TAGS,
-          data: set(data, "fileManager.listTags", filteredTags)
-        });
-      }
+      var filteredTags = ((listTagsData === null || listTagsData === void 0 ? void 0 : (_listTagsData$fileMan = listTagsData.fileManager) === null || _listTagsData$fileMan === void 0 ? void 0 : _listTagsData$fileMan.listTags) || []).filter(function (tag) {
+        if (!selectedFile.tags.includes(tag)) {
+          return true;
+        }
+
+        return tagCountMap[tag] > 1;
+      }); // Write it to cache
+
+      cache.writeQuery({
+        query: _graphql.LIST_TAGS,
+        variables: {
+          where: (0, _FileManagerContext.getWhere)(queryParams.scope)
+        },
+        data: (0, _set.default)(data, "fileManager.listTags", filteredTags)
+      });
     }
   }),
-      _useMutation2 = _slicedToArray(_useMutation, 1),
+      _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 1),
       deleteFile = _useMutation2[0];
 
-  var _useSnackbar = useSnackbar(),
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  var renderDeleteImageAction = useCallback(function (file) {
+  var renderDeleteImageAction = (0, _react.useCallback)(function (file) {
     if (!canDelete(file)) {
       return null;
     }
 
     var fileDeleteConfirmationProps = {
-      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Delete file"]))),
-      message: file && /*#__PURE__*/React.createElement("span", null, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["You're about to delete file {name}. Are you sure you want to continue?"])))({
+      title: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Delete file"]))),
+      message: file && /*#__PURE__*/_react.default.createElement("span", null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["You're about to delete file {name}. Are you sure you want to continue?"])))({
         name: file.name
       }))
     };
-    return /*#__PURE__*/React.createElement(ConfirmationDialog, Object.assign({}, fileDeleteConfirmationProps, {
+    return /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.ConfirmationDialog, Object.assign({}, fileDeleteConfirmationProps, {
       "data-testid": "fm-delete-file-confirmation-dialog",
       style: {
         zIndex: 100
       }
     }), function (_ref) {
       var showConfirmation = _ref.showConfirmation;
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: isImage ? /*#__PURE__*/React.createElement("span", null, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Delete image"])))) : /*#__PURE__*/React.createElement("span", null, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Delete file"])))),
+      return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+        content: isImage(file) ? /*#__PURE__*/_react.default.createElement("span", null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Delete image"])))) : /*#__PURE__*/_react.default.createElement("span", null, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Delete file"])))),
         placement: "bottom"
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
         "data-testid": "fm-delete-file-button",
-        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+        icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, {
           style: {
             margin: "0 8px 0 0"
           }
         }),
         onClick: function onClick() {
-          return showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
+          return showConfirmation( /*#__PURE__*/(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:
@@ -295,7 +369,7 @@ export default function FileDetails(props) {
                     });
 
                   case 2:
-                    showSnackbar(t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["File deleted successfully."]))));
+                    showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["File deleted successfully."]))));
 
                   case 3:
                   case "end":
@@ -308,85 +382,93 @@ export default function FileDetails(props) {
       }));
     });
   }, []);
-  var fileTypeIcon = useMemo(function () {
+  var fileTypeIcon = (0, _react.useMemo)(function () {
     if (file && typeof file.type === "string") {
-      return file.type.includes("image") ? /*#__PURE__*/React.createElement(ImageIcon, null) : /*#__PURE__*/React.createElement(FileIcon, null);
+      return file.type.includes("image") ? /*#__PURE__*/_react.default.createElement(_insert_photo24px.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_insert_drive_file24px.ReactComponent, null);
     }
 
-    return /*#__PURE__*/React.createElement(ImageIcon, null);
+    return /*#__PURE__*/_react.default.createElement(_insert_photo24px.ReactComponent, null);
   }, [file]);
-  return /*#__PURE__*/React.createElement(Drawer, {
+  return /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
     className: fileDetailsSidebar,
     dir: "rtl",
     modal: true,
     open: Boolean(file),
     onClose: hideFileDetails,
     "data-testid": "fm.file-details.drawer"
-  }, file && /*#__PURE__*/React.createElement("div", {
+  }, file && /*#__PURE__*/_react.default.createElement("div", {
     className: style.wrapper,
     dir: "ltr"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: style.header
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "headline5"
-  }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["File details"]))))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(style.preview, {
+  }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["File details"]))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(style.preview, {
       dark: darkImageBackground
     })
-  }, filePlugin.render({
+  }, filePlugin && filePlugin.render({
+    /**
+     * TODO: @ts-refactor
+     * Figure out which type is the file
+     */
+    // @ts-ignore
     file: file,
     uploadFile: uploadFile,
     validateFiles: validateFiles
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: style.download
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement("span", null, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Copy URL"])))),
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement("span", null, t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Copy URL"])))),
     placement: "bottom"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     onClick: function onClick() {
       navigator.clipboard.writeText(file.src);
-      showSnackbar(t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["URL copied successfully."]))));
+      showSnackbar(t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["URL copied successfully."]))));
     },
-    icon: /*#__PURE__*/React.createElement(CopyContentIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_content_copyBlack24px.ReactComponent, {
       style: {
         margin: "0 8px 0 0"
       }
     })
   })), actions.map(function (Component, index) {
-    return /*#__PURE__*/React.createElement(Component, Object.assign({
+    return /*#__PURE__*/_react.default.createElement(Component, Object.assign({
       key: index
     }, props));
-  }), renderDeleteImageAction(file), /*#__PURE__*/React.createElement(Tooltip, {
-    content: t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Toggle background"]))),
+  }), renderDeleteImageAction(file), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Toggle background"]))),
     placement: "bottom"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(HighlightIcon, null),
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_highlight24px.ReactComponent, null),
     onClick: function onClick() {
       return setDarkImageBackground(!darkImageBackground);
     },
-    className: classNames({
+    className: (0, _classnames.default)({
       "icon--active": darkImageBackground
     })
-  })))), /*#__PURE__*/React.createElement(DrawerContent, {
+  })))), /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, {
     dir: "ltr",
     className: style.drawerContent
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/_react.default.createElement("ul", {
     className: style.list
-  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Name, props)), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Name.default, props)), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     className: "list-item__icon",
     icon: fileTypeIcon
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
-  }, file.type), " ", " - ", /*#__PURE__*/React.createElement(Typography, {
+  }, file.type), " ", " - ", /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
-  }, bytes.format(file.size, {
+  }, _bytes.default.format(file.size, {
     unitSeparator: " "
-  }))))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
+  }))))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     className: "list-item__icon",
-    icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    icon: /*#__PURE__*/_react.default.createElement(_today24px.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
-  }, dayjs(file.createdOn).format("DD MMM YYYY [at] HH:mm"))))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Tags, Object.assign({
+  }, (0, _dayjs.default)(file.createdOn).format("DD MMM YYYY [at] HH:mm"))))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Tags.default, Object.assign({
     key: props.file.id
   }, props)))))));
-}
+};
+
+var _default = FileDetails;
+exports.default = _default;

package/components/FileManager/FileDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","fileDetailsSidebar","css","width","style","wrapper","height","overflowY","header","textAlign","marginBottom","paddingTop","textTransform","color","fontWeight","preview","boxSizing","display","justifyContent","alignItems","position","margin","img","objectFit","maxHeight","maxWidth","transform","backgroundColor","download","list","li","padding","lineHeight","minHeight","marginRight","flex","whiteSpace","overflow","textOverflow","drawerContent","isImage","file","fileType","mime","getType","name","includes","FileDetails","props","uploadFile","validateFiles","filePlugin","getFileTypePlugin","actions","get","useFileManager","hideFileDetails","queryParams","useState","darkImageBackground","setDarkImageBackground","useSecurity","identity","getPermission","fmFilePermission","useMemo","canDelete","useCallback","item","own","identityId","id","login","rwd","useHotkeys","zIndex","disabled","keys","esc","useMutation","DELETE_FILE","update","cache","data","cloneDeep","readQuery","query","LIST_FILES","variables","fileManager","listFiles","error","meta","hasMoreItems","cursor","totalItem","filteredList","filter","selectedFile","find","writeQuery","set","Array","isArray","tags","tagCountMap","forEach","tag","listTagsData","LIST_TAGS","where","getWhere","scope","filteredTags","listTags","deleteFile","useSnackbar","showSnackbar","renderDeleteImageAction","fileDeleteConfirmationProps","title","message","showConfirmation","fileTypeIcon","type","Boolean","classNames","dark","render","navigator","clipboard","writeText","src","map","Component","index","bytes","format","size","unitSeparator","dayjs","createdOn"],"sources":["FileDetails.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport bytes from \"bytes\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Drawer, DrawerContent } from \"@webiny/ui/Drawer\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport getFileTypePlugin from \"./getFileTypePlugin\";\nimport dayjs from \"dayjs\";\nimport get from \"lodash/get\";\nimport set from \"lodash/set\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport Tags from \"./FileDetails/Tags\";\nimport Name from \"./FileDetails/Name\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\n/**\n * Package react-hotkeyz has no types.\n */\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { ReactComponent as CopyContentIcon } from \"./icons/content_copy-black-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/delete.svg\";\nimport { ReactComponent as ImageIcon } from \"../../assets/icons/insert_photo-24px.svg\";\nimport { ReactComponent as FileIcon } from \"../../assets/icons/insert_drive_file-24px.svg\";\nimport { ReactComponent as CalendarIcon } from \"../../assets/icons/today-24px.svg\";\nimport { ReactComponent as HighlightIcon } from \"../../assets/icons/highlight-24px.svg\";\nimport { getWhere, useFileManager } from \"./FileManagerContext\";\nimport { useMutation } from \"@apollo/react-hooks\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { useSecurity } from \"@webiny/app-security\";\nimport { ConfirmationDialog } from \"@webiny/ui/ConfirmationDialog\";\nimport {\n    DELETE_FILE,\n    DeleteFileMutationResponse,\n    DeleteFileMutationVariables,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./graphql\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport mime from \"mime\";\nimport { FileItem, FileManagerSecurityPermission } from \"./types\";\nimport { FilesRenderChildren } from \"react-butterfiles\";\n\nconst t = i18n.ns(\"app-admin/file-manager/file-details\");\n\nconst fileDetailsSidebar = css({\n    \"&.mdc-drawer\": {\n        width: 360\n    }\n});\n\ndeclare global {\n    // eslint-disable-next-line\n    namespace JSX {\n        interface IntrinsicElements {\n            \"li-title\": {\n                children?: React.ReactNode;\n            };\n\n            \"li-content\": {\n                children?: React.ReactNode;\n            };\n        }\n    }\n}\n\nconst style: any = {\n    wrapper: css({\n        height: \"100vh\",\n        overflowY: \"auto\"\n    }),\n    header: css({\n        textAlign: \"center\",\n        marginBottom: 24,\n        paddingTop: 16,\n        \"& span\": {\n            textTransform: \"capitalize\",\n            color: \"var(--mdc-theme-on-surface)\",\n            fontWeight: 600\n        }\n    }),\n    preview: css({\n        boxSizing: \"border-box\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        position: \"relative\",\n        width: \"100%\",\n        height: 300,\n        margin: \"0 auto 24px\",\n        img: {\n            objectFit: \"contain\",\n            maxHeight: 300,\n            maxWidth: 300,\n            width: \"100%\",\n            position: \"static\",\n            transform: \"none\"\n        },\n        \"&.dark\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }),\n    download: css({\n        textAlign: \"center\",\n        margin: \"0 auto\",\n        width: \"100%\",\n        \"& .icon--active\": {\n            \"&.mdc-icon-button\": {\n                color: \"var(--mdc-theme-text-on-primary)\"\n            }\n        }\n    }),\n    list: css({\n        textAlign: \"left\",\n        color: \"var(--mdc-theme-on-surface)\",\n        li: {\n            padding: \"12px 16px\",\n            lineHeight: \"22px\",\n            \"li-title\": {\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-start\",\n                minHeight: 48,\n                \"& .list-item__title\": {\n                    fontWeight: 600\n                },\n                \"& .list-item__icon\": {\n                    marginRight: 24\n                },\n                \"& .list-item__content\": {\n                    flex: \"1 0 200px\"\n                }\n            },\n            \"li-content\": {\n                width: \"100%\",\n                display: \"block\",\n                \"& .list-item__truncate\": {\n                    display: \"block\",\n                    width: \"100%\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\"\n                }\n            }\n        }\n    }),\n    drawerContent: css({\n        \"&.mdc-drawer__content\": {\n            height: \"auto\",\n            overflowY: \"inherit\"\n        }\n    })\n};\ninterface FileDetailsProps {\n    canEdit: (item: any) => boolean;\n    file: FileItem;\n    uploadFile: (files: FileItem[] | FileItem) => Promise<number | null>;\n    validateFiles: FilesRenderChildren[\"validateFiles\"];\n    [key: string]: any;\n}\n\nconst isImage = (file: FileItem) => {\n    const fileType = mime.getType(file && file.name);\n\n    if (fileType && typeof fileType === \"string\") {\n        return fileType.includes(\"image\");\n    }\n\n    return false;\n};\n\nconst FileDetails: React.FC<FileDetailsProps> = props => {\n    const { file, uploadFile, validateFiles } = props;\n\n    const filePlugin = getFileTypePlugin(file);\n    const actions: React.FC[] =\n        get(filePlugin, \"fileDetails.actions\") || get(filePlugin, \"actions\") || [];\n\n    const { hideFileDetails, queryParams } = useFileManager();\n    const [darkImageBackground, setDarkImageBackground] = useState(false);\n\n    const { identity, getPermission } = useSecurity();\n    const fmFilePermission = useMemo((): FileManagerSecurityPermission | null => {\n        return getPermission(\"fm.file\");\n    }, [identity]);\n    const canDelete = useCallback(\n        item => {\n            // Bail out early if no access\n            if (!fmFilePermission) {\n                return false;\n            }\n            if (fmFilePermission.own) {\n                const identityId = identity ? identity.id || identity.login : null;\n                if (!identityId) {\n                    return false;\n                }\n                return get(item, \"createdBy.id\") === identityId;\n            }\n            if (typeof fmFilePermission.rwd === \"string\") {\n                return fmFilePermission.rwd.includes(\"d\");\n            }\n            return true;\n        },\n        [fmFilePermission]\n    );\n\n    useHotkeys({\n        zIndex: 55,\n        disabled: !file,\n        keys: {\n            esc: hideFileDetails\n        }\n    });\n\n    const [deleteFile] = useMutation<DeleteFileMutationResponse, DeleteFileMutationVariables>(\n        DELETE_FILE,\n        {\n            update: cache => {\n                // 1. Update files list cache\n                let data = cloneDeep(\n                    cache.readQuery<ListFilesQueryResponse>({\n                        query: LIST_FILES,\n                        variables: queryParams\n                    })\n                );\n                if (!data) {\n                    data = {\n                        fileManager: {\n                            listFiles: {\n                                data: [],\n                                error: null,\n                                meta: {\n                                    hasMoreItems: false,\n                                    cursor: null,\n                                    totalItem: 0\n                                }\n                            }\n                        }\n                    };\n                }\n                const filteredList = data.fileManager.listFiles.data.filter(\n                    (item: FileItem) => item.id !== file.id\n                );\n                const selectedFile = data.fileManager.listFiles.data.find(\n                    (item: FileItem) => item.id === file.id\n                );\n\n                cache.writeQuery({\n                    query: LIST_FILES,\n                    variables: queryParams,\n                    data: set(data, \"fileManager.listFiles.data\", filteredList)\n                });\n                // 2. Update \"ListTags\" cache\n                if (!selectedFile || Array.isArray(selectedFile.tags) === false) {\n                    return;\n                }\n                const tagCountMap: Record<string, number> = {};\n                // Prepare \"tag\" count map\n                data.fileManager.listFiles.data.forEach((file: FileItem) => {\n                    if (!Array.isArray(file.tags)) {\n                        return;\n                    }\n                    file.tags.forEach(tag => {\n                        if (tagCountMap[tag]) {\n                            tagCountMap[tag] += 1;\n                        } else {\n                            tagCountMap[tag] = 1;\n                        }\n                    });\n                });\n\n                // Get tags from cache\n                const listTagsData = cloneDeep(\n                    cache.readQuery<ListFileTagsQueryResponse>({\n                        query: LIST_TAGS,\n                        variables: { where: getWhere(queryParams.scope) }\n                    })\n                );\n                // Remove selected file tags from list.\n                const filteredTags = (listTagsData?.fileManager?.listTags || []).filter(\n                    (tag: string) => {\n                        if (!selectedFile.tags.includes(tag)) {\n                            return true;\n                        }\n                        return tagCountMap[tag] > 1;\n                    }\n                );\n\n                // Write it to cache\n                cache.writeQuery({\n                    query: LIST_TAGS,\n                    variables: { where: getWhere(queryParams.scope) },\n                    data: set(data, \"fileManager.listTags\", filteredTags)\n                });\n            }\n        }\n    );\n    const { showSnackbar } = useSnackbar();\n\n    const renderDeleteImageAction = useCallback(file => {\n        if (!canDelete(file)) {\n            return null;\n        }\n        const fileDeleteConfirmationProps = {\n            title: t`Delete file`,\n            message: file && (\n                <span>\n                    {t`You're about to delete file {name}. Are you sure you want to continue?`({\n                        name: file.name\n                    })}\n                </span>\n            )\n        };\n        return (\n            <ConfirmationDialog\n                {...fileDeleteConfirmationProps}\n                data-testid={\"fm-delete-file-confirmation-dialog\"}\n                style={{ zIndex: 100 }}\n            >\n                {({ showConfirmation }) => {\n                    return (\n                        <Tooltip\n                            content={\n                                isImage(file) ? (\n                                    <span>{t`Delete image`}</span>\n                                ) : (\n                                    <span>{t`Delete file`}</span>\n                                )\n                            }\n                            placement={\"bottom\"}\n                        >\n                            <IconButton\n                                data-testid={\"fm-delete-file-button\"}\n                                icon={<DeleteIcon style={{ margin: \"0 8px 0 0\" }} />}\n                                onClick={() =>\n                                    showConfirmation(async () => {\n                                        await deleteFile({\n                                            variables: {\n                                                id: file.id\n                                            }\n                                        });\n                                        showSnackbar(t`File deleted successfully.`);\n                                    })\n                                }\n                            />\n                        </Tooltip>\n                    );\n                }}\n            </ConfirmationDialog>\n        );\n    }, []);\n\n    const fileTypeIcon = useMemo(() => {\n        if (file && typeof file.type === \"string\") {\n            return file.type.includes(\"image\") ? <ImageIcon /> : <FileIcon />;\n        }\n        return <ImageIcon />;\n    }, [file]);\n\n    return (\n        <Drawer\n            className={fileDetailsSidebar}\n            dir=\"rtl\"\n            modal\n            open={Boolean(file)}\n            onClose={hideFileDetails}\n            data-testid={\"fm.file-details.drawer\"}\n        >\n            {file && (\n                <div className={style.wrapper} dir=\"ltr\">\n                    <div className={style.header}>\n                        <Typography use={\"headline5\"}>{t`File details`}</Typography>\n                    </div>\n                    <div\n                        className={classNames(style.preview, {\n                            dark: darkImageBackground\n                        })}\n                    >\n                        {filePlugin &&\n                            filePlugin.render({\n                                /**\n                                 * TODO: @ts-refactor\n                                 * Figure out which type is the file\n                                 */\n                                // @ts-ignore\n                                file,\n                                uploadFile,\n                                validateFiles\n                            })}\n                    </div>\n                    <div className={style.download}>\n                        <>\n                            <Tooltip content={<span>{t`Copy URL`}</span>} placement={\"bottom\"}>\n                                <IconButton\n                                    onClick={() => {\n                                        navigator.clipboard.writeText(file.src);\n                                        showSnackbar(t`URL copied successfully.`);\n                                    }}\n                                    icon={<CopyContentIcon style={{ margin: \"0 8px 0 0\" }} />}\n                                />\n                            </Tooltip>\n\n                            {actions.map((Component: React.FC, index: number) => (\n                                <Component key={index} {...props} />\n                            ))}\n                            {renderDeleteImageAction(file)}\n                            {/* Render background switcher */}\n                            <Tooltip content={t`Toggle background`} placement={\"bottom\"}>\n                                <IconButton\n                                    icon={<HighlightIcon />}\n                                    onClick={() => setDarkImageBackground(!darkImageBackground)}\n                                    className={classNames({ \"icon--active\": darkImageBackground })}\n                                />\n                            </Tooltip>\n                        </>\n                    </div>\n                    <DrawerContent dir=\"ltr\" className={style.drawerContent}>\n                        <ul className={style.list}>\n                            <li>\n                                <Name {...props} />\n                            </li>\n                            <li>\n                                <li-title>\n                                    <Icon className={\"list-item__icon\"} icon={fileTypeIcon} />\n                                    <div>\n                                        <Typography use={\"subtitle1\"}>{file.type}</Typography>{\" \"}\n                                        {\" - \"}\n                                        <Typography use={\"subtitle1\"}>\n                                            {bytes.format(file.size, { unitSeparator: \" \" })}\n                                        </Typography>\n                                    </div>\n                                </li-title>\n                            </li>\n                            <li>\n                                <li-title>\n                                    <Icon className={\"list-item__icon\"} icon={<CalendarIcon />} />\n                                    <div>\n                                        <Typography use={\"subtitle1\"}>\n                                            {dayjs(file.createdOn).format(\"DD MMM YYYY [at] HH:mm\")}\n                                        </Typography>\n                                    </div>\n                                </li-title>\n                            </li>\n                            <li>\n                                <Tags key={props.file.id} {...props} />\n                            </li>\n                        </ul>\n                    </DrawerContent>\n                </div>\n            )}\n        </Drawer>\n    );\n};\n\nexport default FileDetails;\n"],"mappings":"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"}