@webiny/app-admin 0.0.0-mt-1

package/components/FileManager/File.js

@@ -0,0 +1,129 @@
+import React from "react";
+import LazyLoad from "react-lazy-load";
+import classNames from "classnames";
+import { css, keyframes } from "emotion";
+import { Ripple } from "@webiny/ui/Ripple";
+import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as Checked } from "@svgr/webpack!./icons/round-check_box-24px.svg";
+import { ReactComponent as SettingsIcon } from "@svgr/webpack!../../assets/icons/round-settings-24px.svg";
+var COMPONENT_WIDTH = 200;
+var COMPONENT_HEIGHT = 200;
+var grow = /*#__PURE__*/keyframes("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
+var styles = /*#__PURE__*/css({
+  display: "inline-block",
+  float: "left",
+  position: "relative",
+  zIndex: 1,
+  margin: 10,
+  cursor: "pointer",
+  width: "100%",
+  maxWidth: COMPONENT_WIDTH,
+  border: "1px solid var(--mdc-theme-on-background)",
+  borderRadius: 2,
+  "> .body": {
+    transition: "200ms ease-in opacity",
+    width: COMPONENT_WIDTH,
+    height: COMPONENT_HEIGHT,
+    overflow: "hidden",
+    "--icon-color": "var(--mdc-theme-on-background)",
+    ".checkedIcon": {
+      color: "var(--mdc-theme-secondary)",
+      position: "absolute",
+      top: 4,
+      left: 4,
+      zIndex: 11
+    },
+    ".infoIcon": {
+      opacity: 0,
+      position: "absolute",
+      top: 0,
+      right: 0,
+      zIndex: 10,
+      transition: "all 150ms ease-in",
+      "& .mdc-icon-button svg": {
+        color: "var(--mdc-theme-secondary)"
+      },
+      "&:hover": {
+        animationName: grow,
+        animationDuration: ".4s",
+        animationTimingFunction: "ease-in",
+        animationDelay: ".2s"
+      }
+    },
+    ".filePreview": {
+      textAlign: "center",
+      position: "relative",
+      backgroundColor: "#fff",
+      width: "100%",
+      height: "100%",
+      ".clickableArea": {
+        position: "absolute",
+        top: 30,
+        left: 0,
+        width: "100%",
+        height: 170,
+        zIndex: 2
+      }
+    },
+    "&:hover .infoIcon": {
+      opacity: 1
+    }
+  },
+  "> .label": {
+    padding: "15px 10px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    fontSize: "0.8rem",
+    color: "var(--mdc-theme-on-surface)",
+    backgroundColor: "var(--mdc-theme-on-background)"
+  },
+  "&.disable-select": {
+    cursor: "auto"
+  }
+}, "label:styles;");
+export default /*#__PURE__*/React.memo(function File(props) {
+  var file = props.file,
+      selected = props.selected,
+      onSelect = props.onSelect,
+      children = props.children,
+      showFileDetails = props.showFileDetails;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles, {
+      "disable-select": !onSelect
+    }),
+    "data-testid": "fm-list-wrapper-file"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "checkedIcon",
+    onClick: onSelect
+  }, selected ? /*#__PURE__*/React.createElement(Checked, null) : null), /*#__PURE__*/React.createElement("div", {
+    className: "infoIcon"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    onClick: showFileDetails,
+    "data-testid": "fm-file-wrapper-file-info-icon"
+  })), /*#__PURE__*/React.createElement(LazyLoad, {
+    height: 200,
+    offsetVertical: 300
+  }, /*#__PURE__*/React.createElement(Ripple, null, /*#__PURE__*/React.createElement("div", {
+    className: "filePreview"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "clickableArea",
+    onClick: onSelect
+  }), children)))), /*#__PURE__*/React.createElement("div", {
+    className: "label",
+    onClick: onSelect
+  }, file.name));
+}, function (prev, next) {
+  if (prev.selected !== next.selected) {
+    return false;
+  }
+
+  if (prev.file.name !== next.file.name) {
+    return false;
+  }
+
+  return true;
+});

package/components/FileManager/FileDetails/Name.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function Name({ file, canEdit }: {
+    file: any;
+    canEdit: any;
+}): JSX.Element;
+export default Name;

package/components/FileManager/FileDetails/Name.js

@@ -0,0 +1,113 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _cloneDeep from "lodash/cloneDeep";
+import _get from "lodash/get";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useMemo } from "react";
+import { useApolloClient } from "@apollo/react-hooks";
+import { Input } from "@webiny/ui/Input";
+import { Form } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { useSnackbar } from "../../../hooks/useSnackbar";
+import { UPDATE_FILE, LIST_FILES } from "./../graphql";
+import { useFileManager } from "./../FileManagerContext";
+
+function Name(_ref) {
+  var file = _ref.file,
+      canEdit = _ref.canEdit;
+  var name = file.name || "";
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var client = useApolloClient();
+
+  var _useFileManager = useFileManager(),
+      queryParams = _useFileManager.queryParams;
+
+  var editContent = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Form, {
+      data: {
+        name: name
+      },
+      onSubmit: /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+          var name;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  name = _ref2.name;
+
+                  if (!(name === file.name)) {
+                    _context.next = 3;
+                    break;
+                  }
+
+                  return _context.abrupt("return");
+
+                case 3:
+                  _context.next = 5;
+                  return client.mutate({
+                    mutation: UPDATE_FILE,
+                    variables: {
+                      id: file.id,
+                      data: {
+                        name: name
+                      }
+                    },
+                    update: function update(cache, updated) {
+                      var newFileData = _get(updated, "data.fileManager.updateFile.data");
+
+                      var data = _cloneDeep(cache.readQuery({
+                        query: LIST_FILES,
+                        variables: queryParams
+                      }));
+
+                      data.fileManager.listFiles.data.forEach(function (item) {
+                        if (item.src === newFileData.src) {
+                          item.name = newFileData.name;
+                        }
+                      });
+                      cache.writeQuery({
+                        query: LIST_FILES,
+                        variables: queryParams,
+                        data: data
+                      });
+                    }
+                  });
+
+                case 5:
+                  showSnackbar("Name successfully updated.");
+
+                case 6:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        return function (_x) {
+          return _ref3.apply(this, arguments);
+        };
+      }()
+    }, function (_ref4) {
+      var Bind = _ref4.Bind,
+          submit = _ref4.submit;
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: "name",
+        validators: validation.create("required")
+      }, /*#__PURE__*/React.createElement(Input, {
+        disabled: !canEdit(file),
+        autoFocus: true,
+        placeholder: "Enter name",
+        fullwidth: true,
+        onBlur: submit,
+        description: "A descriptive name is easier to remember."
+      }));
+    });
+  }, [name, file.name, canEdit]);
+  return /*#__PURE__*/React.createElement("li-content", null, editContent);
+}
+
+export default Name;

package/components/FileManager/FileDetails/Tags.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function Tags({ file, canEdit }: {
+    file: any;
+    canEdit: any;
+}): JSX.Element;
+export default Tags;

package/components/FileManager/FileDetails/Tags.js

@@ -0,0 +1,241 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useState } from "react";
+import classNames from "classnames";
+import { css } from "emotion";
+import { useApolloClient, useQuery } from "@apollo/react-hooks";
+import set from "lodash/set";
+import get from "lodash/get";
+import cloneDeep from "lodash/cloneDeep";
+import { Chips, Chip } from "@webiny/ui/Chips";
+import { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from "@webiny/ui/Button";
+import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
+import { Icon } from "@webiny/ui/Icon";
+import { Form } from "@webiny/form";
+import { useSnackbar } from "../../../hooks/useSnackbar";
+import { useFileManager } from "./../FileManagerContext";
+import { UPDATE_FILE, LIST_FILES, LIST_TAGS } from "./../graphql";
+import { ReactComponent as EditIcon } from "@svgr/webpack!./../icons/round-edit-24px.svg";
+import { ReactComponent as LabelIcon } from "@svgr/webpack!./../icons/round-label-24px.svg";
+var chipsStyle = /*#__PURE__*/css({
+  "&.mdc-chip-set": {
+    padding: 0,
+    marginLeft: -4,
+    "& .mdc-chip": {
+      backgroundColor: "var(--mdc-theme-background)"
+    }
+  }
+}, "label:chipsStyle;");
+var iconButtonStyle = /*#__PURE__*/css({
+  "&.mdc-icon-button svg": {
+    width: 20,
+    height: 20
+  }
+}, "label:iconButtonStyle;");
+var addTagsStyle = /*#__PURE__*/css({
+  "&.mdc-button:not(:disabled)": {
+    color: "var(--mdc-theme-text-secondary-on-background)",
+    textTransform: "capitalize",
+    letterSpacing: "initial",
+    marginLeft: -8
+  }
+}, "label:addTagsStyle;");
+var actionWrapperStyle = /*#__PURE__*/css({
+  marginTop: 16,
+  "& button:first-child": {
+    marginRight: 16
+  }
+}, "label:actionWrapperStyle;");
+
+function Tags(_ref) {
+  var file = _ref.file,
+      canEdit = _ref.canEdit;
+  var client = useApolloClient();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      editing = _useState2[0],
+      setEdit = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      saving = _useState4[0],
+      setSaving = _useState4[1];
+
+  var _useState5 = useState(Array.isArray(file.tags) ? _toConsumableArray(file.tags) : []),
+      _useState6 = _slicedToArray(_useState5, 2),
+      initialTags = _useState6[0],
+      setInitialTags = _useState6[1];
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useFileManager = useFileManager(),
+      queryParams = _useFileManager.queryParams;
+
+  var handleEdit = useCallback(function () {
+    return setEdit(true);
+  }, []);
+  var listTagsQuery = useQuery(LIST_TAGS);
+  var allTags = get(listTagsQuery, "data.fileManager.listTags") || [];
+  var isEditingAllowed = canEdit(file);
+  var renderHeaderContent = useCallback(function (_ref2) {
+    var data = _ref2.data;
+
+    if (editing) {
+      return null;
+    }
+
+    var hasTags = data.tags.length > 0;
+
+    if (hasTags) {
+      // Render existing tags and "edit tags" action.
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Chips, {
+        className: classNames("list-item__content", chipsStyle)
+      }, data.tags.map(function (tag, index) {
+        var label = typeof tag === "string" ? tag : tag.name;
+        return /*#__PURE__*/React.createElement(Chip, {
+          key: label + index,
+          label: label
+        });
+      })), isEditingAllowed && /*#__PURE__*/React.createElement(IconButton, {
+        className: iconButtonStyle,
+        icon: /*#__PURE__*/React.createElement(EditIcon, null),
+        onClick: handleEdit
+      }));
+    } // Render "add tags" action.
+
+
+    return /*#__PURE__*/React.createElement(ButtonDefault, {
+      className: addTagsStyle,
+      onClick: handleEdit,
+      disabled: !isEditingAllowed
+    }, "Add tags...");
+  }, [editing, isEditingAllowed]);
+  return /*#__PURE__*/React.createElement(Form, {
+    data: {
+      tags: initialTags
+    },
+    onSubmit: /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+        var tags;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                tags = _ref3.tags;
+                setSaving(true);
+                client.mutate({
+                  mutation: UPDATE_FILE,
+                  variables: {
+                    id: file.id,
+                    data: {
+                      tags: tags
+                    }
+                  },
+                  update: function update(cache, updated) {
+                    var newFileData = get(updated, "data.fileManager.updateFile.data"); // 1. Update files list cache
+
+                    var data = cloneDeep(cache.readQuery({
+                      query: LIST_FILES,
+                      variables: queryParams
+                    }));
+                    data.fileManager.listFiles.data.forEach(function (item) {
+                      if (item.key === newFileData.key) {
+                        item.tags = newFileData.tags;
+                      }
+                    });
+                    cache.writeQuery({
+                      query: LIST_FILES,
+                      variables: queryParams,
+                      data: data
+                    }); // 2. Update "LIST_TAGS" cache
+
+                    if (Array.isArray(newFileData.tags)) {
+                      // Get list tags data
+                      var listTagsData = cloneDeep(cache.readQuery({
+                        query: LIST_TAGS
+                      })); // Add new tag in list
+
+                      var updatedTagsList = _toConsumableArray(newFileData.tags);
+
+                      if (Array.isArray(listTagsData.fileManager.listTags)) {
+                        listTagsData.fileManager.listTags.forEach(function (tag) {
+                          if (!updatedTagsList.includes(tag)) {
+                            updatedTagsList.push(tag);
+                          }
+                        });
+                      }
+
+                      set(listTagsData, "fileManager.listTags", updatedTagsList); // Write it to cache
+
+                      cache.writeQuery({
+                        query: LIST_TAGS,
+                        data: listTagsData
+                      });
+                    }
+                  }
+                }).then(function () {
+                  setInitialTags(tags);
+                  setSaving(false);
+                  setEdit(false);
+                  showSnackbar("Tags successfully updated.");
+                });
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref4.apply(this, arguments);
+      };
+    }()
+  }, function (_ref5) {
+    var Bind = _ref5.Bind,
+        data = _ref5.data,
+        setValue = _ref5.setValue,
+        submit = _ref5.submit;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
+      className: "list-item__icon",
+      icon: /*#__PURE__*/React.createElement(LabelIcon, null)
+    }), renderHeaderContent({
+      data: data
+    })), editing && /*#__PURE__*/React.createElement("li-content", null, /*#__PURE__*/React.createElement(Bind, {
+      name: "tags",
+      beforeChange: function beforeChange(tags, baseOnChange) {
+        var formattedTags = tags.map(function (tag) {
+          return tag.toLowerCase();
+        });
+        baseOnChange(formattedTags);
+      }
+    }, /*#__PURE__*/React.createElement(MultiAutoComplete, {
+      options: allTags,
+      placeholder: "homepage asset",
+      description: "Type in a new tag or select an existing one.",
+      unique: true,
+      allowFreeInput: true,
+      useSimpleValues: true,
+      disabled: saving
+    })), /*#__PURE__*/React.createElement("div", {
+      className: actionWrapperStyle
+    }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+      small: true,
+      onClick: submit,
+      "data-testid": "fm.tags.submit"
+    }, "Submit"), /*#__PURE__*/React.createElement(ButtonSecondary, {
+      small: true,
+      onClick: function onClick() {
+        setValue("tags", initialTags);
+        setEdit(false);
+      }
+    }, "Cancel"))));
+  });
+}
+
+export default Tags;

package/components/FileManager/FileDetails.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "li-title": {
+                children?: React.ReactNode;
+            };
+            "li-content": {
+                children?: React.ReactNode;
+            };
+        }
+    }
+}
+declare type FileDetailsProps = {
+    canEdit: (item: any) => boolean;
+    file: {
+        name: string;
+        [key: string]: any;
+    };
+    [key: string]: any;
+};
+export default function FileDetails(props: FileDetailsProps): JSX.Element;
+export {};