@webiny/app-admin 0.0.0-mt-1

package/components/FileManager/FileDetails.js

@@ -0,0 +1,392 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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({
+  "&.mdc-drawer": {
+    width: 360
+  }
+}, "label:fileDetailsSidebar;");
+var style = {
+  wrapper: /*#__PURE__*/css({
+    height: "100vh",
+    overflowY: "auto"
+  }, "label:wrapper;"),
+  header: /*#__PURE__*/css({
+    textAlign: "center",
+    marginBottom: 24,
+    paddingTop: 16,
+    "& span": {
+      textTransform: "capitalize",
+      color: "var(--mdc-theme-on-surface)",
+      fontWeight: 600
+    }
+  }, "label:header;"),
+  preview: /*#__PURE__*/css({
+    boxSizing: "border-box",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    width: "100%",
+    height: 300,
+    margin: "0 auto 24px",
+    img: {
+      objectFit: "contain",
+      maxHeight: 300,
+      maxWidth: 300,
+      width: "100%",
+      position: "static",
+      transform: "none"
+    },
+    "&.dark": {
+      backgroundColor: "var(--mdc-theme-background)"
+    }
+  }, "label:preview;"),
+  download: /*#__PURE__*/css({
+    textAlign: "center",
+    margin: "0 auto",
+    width: "100%",
+    "& .icon--active": {
+      "&.mdc-icon-button": {
+        color: "var(--mdc-theme-text-on-primary)"
+      }
+    }
+  }, "label:download;"),
+  list: /*#__PURE__*/css({
+    textAlign: "left",
+    color: "var(--mdc-theme-on-surface)",
+    li: {
+      padding: "12px 16px",
+      lineHeight: "22px",
+      "li-title": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        minHeight: 48,
+        "& .list-item__title": {
+          fontWeight: 600
+        },
+        "& .list-item__icon": {
+          marginRight: 24
+        },
+        "& .list-item__content": {
+          flex: "1 0 200px"
+        }
+      },
+      "li-content": {
+        width: "100%",
+        display: "block",
+        "& .list-item__truncate": {
+          display: "block",
+          width: "100%",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      }
+    }
+  }, "label:list;"),
+  drawerContent: /*#__PURE__*/css({
+    "&.mdc-drawer__content": {
+      height: "auto",
+      overflowY: "inherit"
+    }
+  }, "label:drawerContent;")
+};
+
+var isImage = function isImage(file) {
+  var fileType = mime.getType(file && file.name);
+
+  if (fileType && typeof fileType === "string") {
+    return fileType.includes("image");
+  }
+
+  return false;
+};
+
+export default 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 _useFileManager = useFileManager(),
+      hideFileDetails = _useFileManager.hideFileDetails,
+      queryParams = _useFileManager.queryParams;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      darkImageBackground = _useState2[0],
+      setDarkImageBackground = _useState2[1];
+
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var fmFilePermission = useMemo(function () {
+    return identity.getPermission("fm.file");
+  }, []);
+  var canDelete = 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;
+    }
+
+    if (typeof fmFilePermission.rwd === "string") {
+      return fmFilePermission.rwd.includes("d");
+    }
+
+    return true;
+  }, [fmFilePermission]);
+  useHotkeys({
+    zIndex: 55,
+    disabled: !file,
+    keys: {
+      esc: hideFileDetails
+    }
+  });
+
+  var _useMutation = useMutation(DELETE_FILE, {
+    update: function update(cache) {
+      // 1. Update files list cache
+      var data = cloneDeep(cache.readQuery({
+        query: LIST_FILES,
+        variables: queryParams
+      }));
+      var filteredList = data.fileManager.listFiles.data.filter(function (item) {
+        return item.id !== file.id;
+      });
+      var selectedFile = data.fileManager.listFiles.data.find(function (item) {
+        return item.id === file.id;
+      });
+      cache.writeQuery({
+        query: LIST_FILES,
+        variables: queryParams,
+        data: set(data, "fileManager.listFiles.data", filteredList)
+      }); // 2. Update "ListTags" cache
+
+      // 2. Update "ListTags" cache
+      if (Array.isArray(selectedFile.tags)) {
+        var tagCountMap = {}; // Prepare "tag" count map
+
+        // Prepare "tag" count map
+        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
+
+        // 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;
+          }
+
+          return tagCountMap[tag] > 1;
+        }); // Write it to cache
+
+        // Write it to cache
+        cache.writeQuery({
+          query: LIST_TAGS,
+          data: set(data, "fileManager.listTags", filteredTags)
+        });
+      }
+    }
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 1),
+      deleteFile = _useMutation2[0];
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var renderDeleteImageAction = 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?"])))({
+        name: file.name
+      }))
+    };
+    return /*#__PURE__*/React.createElement(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"])))),
+        placement: "bottom"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        "data-testid": "fm-delete-file-button",
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          style: {
+            margin: "0 8px 0 0"
+          }
+        }),
+        onClick: function onClick() {
+          return showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return deleteFile({
+                      variables: {
+                        id: file.id
+                      }
+                    });
+
+                  case 2:
+                    showSnackbar(t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["File deleted successfully."]))));
+
+                  case 3:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          })));
+        }
+      }));
+    });
+  }, []);
+  var fileTypeIcon = useMemo(function () {
+    if (file && typeof file.type === "string") {
+      return file.type.includes("image") ? /*#__PURE__*/React.createElement(ImageIcon, null) : /*#__PURE__*/React.createElement(FileIcon, null);
+    }
+
+    return /*#__PURE__*/React.createElement(ImageIcon, null);
+  }, [file]);
+  return /*#__PURE__*/React.createElement(Drawer, {
+    className: fileDetailsSidebar,
+    dir: "rtl",
+    modal: true,
+    open: Boolean(file),
+    onClose: hideFileDetails,
+    "data-testid": "fm.file-details.drawer"
+  }, file && /*#__PURE__*/React.createElement("div", {
+    className: style.wrapper,
+    dir: "ltr"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.header
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "headline5"
+  }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["File details"]))))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(style.preview, {
+      dark: darkImageBackground
+    })
+  }, filePlugin.render({
+    file: file,
+    uploadFile: uploadFile,
+    validateFiles: validateFiles
+  })), /*#__PURE__*/React.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"])))),
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      navigator.clipboard.writeText(file.src);
+      showSnackbar(t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["URL copied successfully."]))));
+    },
+    icon: /*#__PURE__*/React.createElement(CopyContentIcon, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    })
+  })), actions.map(function (Component, index) {
+    return /*#__PURE__*/React.createElement(Component, Object.assign({
+      key: index
+    }, props));
+  }), renderDeleteImageAction(file), /*#__PURE__*/React.createElement(Tooltip, {
+    content: t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Toggle background"]))),
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(HighlightIcon, null),
+    onClick: function onClick() {
+      return setDarkImageBackground(!darkImageBackground);
+    },
+    className: classNames({
+      "icon--active": darkImageBackground
+    })
+  })))), /*#__PURE__*/React.createElement(DrawerContent, {
+    dir: "ltr",
+    className: style.drawerContent
+  }, /*#__PURE__*/React.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, {
+    className: "list-item__icon",
+    icon: fileTypeIcon
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle1"
+  }, file.type), " ", " - ", /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle1"
+  }, bytes.format(file.size, {
+    unitSeparator: " "
+  }))))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
+    className: "list-item__icon",
+    icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle1"
+  }, dayjs(file.createdOn).format("DD MMM YYYY [at] HH:mm"))))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Tags, Object.assign({
+    key: props.file.id
+  }, props)))))));
+}

package/components/FileManager/FileManagerContext.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+declare function FileManagerProvider({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): JSX.Element;
+declare function useFileManager(): {
+    selected: any;
+    toggleSelected(file: any): void;
+    hasPreviouslyUploadedFiles: any;
+    setHasPreviouslyUploadedFiles(hasPreviouslyUploadedFiles: any): void;
+    queryParams: any;
+    setQueryParams(queryParams: any): void;
+    setDragging(state?: boolean): void;
+    dragging: any;
+    setUploading(state?: boolean): void;
+    uploading: any;
+    showFileDetails(src: any): void;
+    hideFileDetails(): void;
+    showingFileDetails: any;
+    state: any;
+    dispatch: any;
+};
+export { FileManagerProvider, useFileManager };

package/components/FileManager/FileManagerContext.js

@@ -0,0 +1,174 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+var _excluded = ["children"];
+import React from "react";
+var ListFilesSort;
+
+(function (ListFilesSort) {
+  ListFilesSort[ListFilesSort["CREATED_ON_ASC"] = 0] = "CREATED_ON_ASC";
+  ListFilesSort[ListFilesSort["CREATED_ON_DESC"] = 1] = "CREATED_ON_DESC";
+  ListFilesSort[ListFilesSort["SIZE_ASC"] = 2] = "SIZE_ASC";
+  ListFilesSort[ListFilesSort["SIZE_DESC"] = 3] = "SIZE_DESC";
+})(ListFilesSort || (ListFilesSort = {}));
+
+function init(_ref) {
+  var accept = _ref.accept;
+  return {
+    showingFileDetails: null,
+    selected: [],
+    hasPreviouslyUploadedFiles: null,
+    queryParams: {
+      types: accept,
+      limit: 50,
+      sort: ListFilesSort.CREATED_ON_DESC
+    }
+  };
+}
+
+function fileManagerReducer(state, action) {
+  var next = _objectSpread({}, state);
+
+  switch (action.type) {
+    case "toggleSelected":
+      {
+        var existingIndex = state.selected.findIndex(function (item) {
+          return item.src === action.file.src;
+        });
+
+        if (existingIndex < 0) {
+          next.selected.push(action.file);
+        } else {
+          next.selected.splice(existingIndex, 1);
+        }
+
+        break;
+      }
+
+    case "queryParams":
+      {
+        next.selected = [];
+        next.queryParams = _objectSpread(_objectSpread(_objectSpread({}, state.queryParams), action.queryParams), {}, {
+          types: state.queryParams.types,
+          limit: 40,
+          sort: ListFilesSort.CREATED_ON_DESC
+        });
+        break;
+      }
+
+    case "showFileDetails":
+      {
+        next.showingFileDetails = action.src;
+        break;
+      }
+
+    case "dragging":
+      {
+        next.dragging = action.state;
+        break;
+      }
+
+    case "hasPreviouslyUploadedFiles":
+      {
+        next.hasPreviouslyUploadedFiles = action.hasPreviouslyUploadedFiles;
+        break;
+      }
+
+    case "uploading":
+      {
+        next.uploading = action.state;
+        break;
+      }
+  }
+
+  return next;
+}
+
+var FileManagerContext = /*#__PURE__*/React.createContext({});
+
+function FileManagerProvider(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var _React$useReducer = React.useReducer(fileManagerReducer, props, init),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      state = _React$useReducer2[0],
+      dispatch = _React$useReducer2[1];
+
+  var value = React.useMemo(function () {
+    return {
+      state: state,
+      dispatch: dispatch
+    };
+  }, [state]);
+  return /*#__PURE__*/React.createElement(FileManagerContext.Provider, Object.assign({
+    value: value
+  }, props), children);
+}
+
+function useFileManager() {
+  var context = React.useContext(FileManagerContext);
+
+  if (!context) {
+    throw new Error("useFileManager must be used within a FileManagerProvider");
+  }
+
+  var state = context.state,
+      dispatch = context.dispatch;
+  return {
+    selected: state.selected,
+    toggleSelected: function toggleSelected(file) {
+      dispatch({
+        type: "toggleSelected",
+        file: file
+      });
+    },
+    hasPreviouslyUploadedFiles: state.hasPreviouslyUploadedFiles,
+    setHasPreviouslyUploadedFiles: function setHasPreviouslyUploadedFiles(hasPreviouslyUploadedFiles) {
+      dispatch({
+        type: "hasPreviouslyUploadedFiles",
+        hasPreviouslyUploadedFiles: hasPreviouslyUploadedFiles
+      });
+    },
+    queryParams: state.queryParams,
+    setQueryParams: function setQueryParams(queryParams) {
+      dispatch({
+        type: "queryParams",
+        queryParams: queryParams
+      });
+    },
+    setDragging: function setDragging() {
+      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      dispatch({
+        type: "dragging",
+        state: state
+      });
+    },
+    dragging: state.dragging,
+    setUploading: function setUploading() {
+      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      dispatch({
+        type: "uploading",
+        state: state
+      });
+    },
+    uploading: state.uploading,
+    showFileDetails: function showFileDetails(src) {
+      dispatch({
+        type: "showFileDetails",
+        src: src
+      });
+    },
+    hideFileDetails: function hideFileDetails() {
+      dispatch({
+        type: "showFileDetails",
+        src: null
+      });
+    },
+    showingFileDetails: state.showingFileDetails,
+    state: state,
+    dispatch: dispatch
+  };
+}
+
+export { FileManagerProvider, useFileManager };

package/components/FileManager/FileManagerView.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { FilesRules } from "react-butterfiles";
+declare type FileManagerViewProps = {
+    onChange: Function;
+    onClose: Function;
+    files?: FilesRules;
+    multiple: boolean;
+    accept: Array<string>;
+    maxSize: number | string;
+    multipleMaxCount: number;
+    multipleMaxSize: number | string;
+    onUploadCompletion?: Function;
+};
+declare function FileManagerView(props: FileManagerViewProps): JSX.Element;
+declare namespace FileManagerView {
+    var defaultProps: {
+        multiple: boolean;
+        maxSize: string;
+        multipleMaxSize: string;
+        multipleMaxCount: number;
+    };
+}
+export default FileManagerView;