@webiny/app-admin 0.0.0-unstable.e3f4727c56 → 0.0.0-unstable.eb196ccd2f

package/components/FileManager/File.js

@@ -1,142 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactLazyLoad = _interopRequireDefault(require("react-lazy-load"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _emotion = require("emotion");
-var _Ripple = require("@webiny/ui/Ripple");
-var _Button = require("@webiny/ui/Button");
-var _roundCheck_box24px = require("./icons/round-check_box-24px.svg");
-var _roundSettings24px = require("../../assets/icons/round-settings-24px.svg");
-/**
- * Package react-lazy-load has no types.
- */
-// @ts-ignore
-
-var COMPONENT_WIDTH = 200;
-var COMPONENT_HEIGHT = 200;
-var grow = /*#__PURE__*/(0, _emotion.keyframes)("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
-var styles = /*#__PURE__*/(0, _emotion.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;");
-var File = function File(props) {
-  var file = props.file,
-    selected = props.selected,
-    onSelect = props.onSelect,
-    children = props.children,
-    showFileDetails = props.showFileDetails;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(styles, {
-      "disable-select": !onSelect
-    }),
-    "data-testid": "fm-list-wrapper-file"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "body"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "checkedIcon",
-    onClick: onSelect
-  }, selected ? /*#__PURE__*/_react.default.createElement(_roundCheck_box24px.ReactComponent, null) : null), /*#__PURE__*/_react.default.createElement("div", {
-    className: "infoIcon"
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_roundSettings24px.ReactComponent, null),
-    onClick: showFileDetails,
-    "data-testid": "fm-file-wrapper-file-info-icon"
-  })), /*#__PURE__*/_react.default.createElement(_reactLazyLoad.default, {
-    height: 200,
-    offsetVertical: 300
-  }, /*#__PURE__*/_react.default.createElement(_Ripple.Ripple, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "filePreview"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "clickableArea",
-    onClick: onSelect
-  }), children)))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "label",
-    onClick: onSelect
-  }, file.name));
-};
-var MemoizedFile = /*#__PURE__*/_react.default.memo(File, function (prev, next) {
-  if (prev.selected !== next.selected) {
-    return false;
-  } else if (prev.file.name !== next.file.name) {
-    return false;
-  }
-  return true;
-});
-MemoizedFile.displayName = "MemoizedFile";
-var _default = MemoizedFile;
-exports.default = _default;

package/components/FileManager/File.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["COMPONENT_WIDTH","COMPONENT_HEIGHT","grow","keyframes","styles","css","display","float","position","zIndex","margin","cursor","width","maxWidth","border","borderRadius","transition","height","overflow","color","top","left","opacity","right","animationName","animationDuration","animationTimingFunction","animationDelay","textAlign","backgroundColor","padding","whiteSpace","textOverflow","fontSize","File","props","file","selected","onSelect","children","showFileDetails","classNames","name","MemoizedFile","React","memo","prev","next","displayName"],"sources":["File.tsx"],"sourcesContent":["import React from \"react\";\n/**\n * Package react-lazy-load has no types.\n */\n// @ts-ignore\nimport LazyLoad from \"react-lazy-load\";\nimport classNames from \"classnames\";\nimport { css, keyframes } from \"emotion\";\nimport { Ripple } from \"@webiny/ui/Ripple\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as Checked } from \"./icons/round-check_box-24px.svg\";\nimport { ReactComponent as SettingsIcon } from \"../../assets/icons/round-settings-24px.svg\";\n\nconst COMPONENT_WIDTH = 200;\nconst COMPONENT_HEIGHT = 200;\n\nconst grow = keyframes`\n  0% {\n    transform: scale(1)\n  }\n  50% {\n    transform: scale(1.2)\n  }\n  100% {\n    transform: scale(1)\n  }\n`;\nconst styles = css({\n    display: \"inline-block\",\n    float: \"left\",\n    position: \"relative\",\n    zIndex: 1,\n    margin: 10,\n    cursor: \"pointer\",\n    width: \"100%\",\n    maxWidth: COMPONENT_WIDTH,\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    borderRadius: 2,\n    \"> .body\": {\n        transition: \"200ms ease-in opacity\",\n        width: COMPONENT_WIDTH,\n        height: COMPONENT_HEIGHT,\n        overflow: \"hidden\",\n        \"--icon-color\": \"var(--mdc-theme-on-background)\",\n        \".checkedIcon\": {\n            color: \"var(--mdc-theme-secondary)\",\n            position: \"absolute\",\n            top: 4,\n            left: 4,\n            zIndex: 11\n        },\n        \".infoIcon\": {\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            right: 0,\n            zIndex: 10,\n            transition: \"all 150ms ease-in\",\n            \"& .mdc-icon-button svg\": {\n                color: \"var(--mdc-theme-secondary)\"\n            },\n            \"&:hover\": {\n                animationName: grow,\n                animationDuration: \".4s\",\n                animationTimingFunction: \"ease-in\",\n                animationDelay: \".2s\"\n            }\n        },\n        \".filePreview\": {\n            textAlign: \"center\",\n            position: \"relative\",\n            backgroundColor: \"#fff\",\n            width: \"100%\",\n            height: \"100%\",\n            \".clickableArea\": {\n                position: \"absolute\",\n                top: 30,\n                left: 0,\n                width: \"100%\",\n                height: 170,\n                zIndex: 2\n            }\n        },\n        \"&:hover .infoIcon\": {\n            opacity: 1\n        }\n    },\n    \"> .label\": {\n        padding: \"15px 10px\",\n        whiteSpace: \"nowrap\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        fontSize: \"0.8rem\",\n        color: \"var(--mdc-theme-on-surface)\",\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&.disable-select\": {\n        cursor: \"auto\"\n    }\n});\n\nexport interface FileProps {\n    file: FileItem;\n    selected: boolean;\n    uploadFile: (item: FileItem[] | FileItem) => Promise<number | null>;\n    onSelect: (event?: React.MouseEvent) => void;\n    onClick?: (event?: React.MouseEvent) => void;\n    options?: Array<{ label: string; onClick: (file: Object) => void }>;\n    children: React.ReactNode;\n    showFileDetails: (event?: React.MouseEvent) => void;\n}\n\nconst File: React.FC<FileProps> = props => {\n    const { file, selected, onSelect, children, showFileDetails } = props;\n\n    return (\n        <div\n            className={classNames(styles, { \"disable-select\": !onSelect })}\n            data-testid={\"fm-list-wrapper-file\"}\n        >\n            <div className={\"body\"}>\n                <div className={\"checkedIcon\"} onClick={onSelect}>\n                    {selected ? <Checked /> : null}\n                </div>\n                <div className={\"infoIcon\"}>\n                    <IconButton\n                        icon={<SettingsIcon />}\n                        onClick={showFileDetails}\n                        data-testid={\"fm-file-wrapper-file-info-icon\"}\n                    />\n                </div>\n                <LazyLoad height={200} offsetVertical={300}>\n                    <Ripple>\n                        <div className={\"filePreview\"}>\n                            <div className=\"clickableArea\" onClick={onSelect} />\n                            {children}\n                        </div>\n                    </Ripple>\n                </LazyLoad>\n            </div>\n            <div className={\"label\"} onClick={onSelect}>\n                {file.name}\n            </div>\n        </div>\n    );\n};\n\nconst MemoizedFile = React.memo(File, (prev, next) => {\n    if (prev.selected !== next.selected) {\n        return false;\n    } else if (prev.file.name !== next.file.name) {\n        return false;\n    }\n\n    return true;\n});\n\nMemoizedFile.displayName = \"MemoizedFile\";\nexport default MemoizedFile;\n"],"mappings":"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"}

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { FileItem } from "../types";
-interface NameProps {
-    file: FileItem;
-    canEdit: (file: FileItem) => boolean;
-}
-declare const Name: React.FC<NameProps>;
-export default Name;

package/components/FileManager/FileDetails/Name.js

@@ -1,108 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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 _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
-var _get2 = _interopRequireDefault(require("lodash/get"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactHooks = require("@apollo/react-hooks");
-var _Input = require("@webiny/ui/Input");
-var _form = require("@webiny/form");
-var _validation = require("@webiny/validation");
-var _useSnackbar2 = require("../../../hooks/useSnackbar");
-var _graphql = require("./../graphql");
-var _FileManagerContext = require("./../FileManagerContext");
-var Name = function Name(_ref) {
-  var file = _ref.file,
-    canEdit = _ref.canEdit;
-  var name = file.name || "";
-  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  var client = (0, _reactHooks.useApolloClient)();
-  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
-    queryParams = _useFileManager.queryParams;
-  var editContent = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react.default.createElement(_form.Form, {
-      data: {
-        name: name
-      },
-      onSubmit: /*#__PURE__*/function () {
-        var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
-          var name;
-          return (0, _regeneratorRuntime2.default)().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: _graphql.UPDATE_FILE,
-                  variables: {
-                    id: file.id,
-                    data: {
-                      name: name
-                    }
-                  },
-                  update: function update(cache, updated) {
-                    var newFileData = (0, _get2.default)(updated, "data.fileManager.updateFile.data");
-                    var data = (0, _cloneDeep2.default)(cache.readQuery({
-                      query: _graphql.LIST_FILES,
-                      variables: queryParams
-                    }));
-                    if (data) {
-                      data.fileManager.listFiles.data.forEach(function (item) {
-                        if (item.src === newFileData.src) {
-                          item.name = newFileData.name;
-                        }
-                      });
-                    }
-                    cache.writeQuery({
-                      query: _graphql.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.default.createElement(Bind, {
-        name: "name",
-        validators: _validation.validation.create("required")
-      }, /*#__PURE__*/_react.default.createElement(_Input.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.default.createElement("li-content", null, editContent);
-};
-var _default = Name;
-exports.default = _default;

package/components/FileManager/FileDetails/Name.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Name","file","canEdit","name","useSnackbar","showSnackbar","client","useApolloClient","useFileManager","queryParams","editContent","useMemo","mutate","mutation","UPDATE_FILE","variables","id","data","update","cache","updated","newFileData","readQuery","query","LIST_FILES","fileManager","listFiles","forEach","item","src","writeQuery","Bind","submit","validation","create"],"sources":["Name.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { get, cloneDeep } from \"lodash\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    UpdateFileMutationResponse,\n    UpdateFileMutationVariables,\n    ListFilesQueryResponse\n} from \"./../graphql\";\nimport { useFileManager } from \"./../FileManagerContext\";\nimport { FileItem } from \"../types\";\n\ninterface NameProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\nconst Name: React.FC<NameProps> = ({ file, canEdit }) => {\n    const name = file.name || \"\";\n    const { showSnackbar } = useSnackbar();\n    const client = useApolloClient();\n\n    const { queryParams } = useFileManager();\n\n    const editContent = useMemo(() => {\n        return (\n            <Form\n                data={{\n                    name\n                }}\n                onSubmit={async ({ name }) => {\n                    // Bail out if name is same as the current file name.\n                    if (name === file.name) {\n                        return;\n                    }\n                    // Update file.\n                    await client.mutate<UpdateFileMutationResponse, UpdateFileMutationVariables>({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { name }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            ) as unknown as FileItem;\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.src === newFileData.src) {\n                                        item.name = newFileData.name;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data: data\n                            });\n                        }\n                    });\n\n                    showSnackbar(\"Name successfully updated.\");\n                }}\n            >\n                {({ Bind, submit }) => (\n                    <Bind name={\"name\"} validators={validation.create(\"required\")}>\n                        <Input\n                            disabled={!canEdit(file)}\n                            autoFocus\n                            placeholder={\"Enter name\"}\n                            fullwidth={true}\n                            onBlur={submit}\n                            description={\"A descriptive name is easier to remember.\"}\n                        />\n                    </Bind>\n                )}\n            </Form>\n        );\n    }, [name, file.name, canEdit]);\n\n    return <li-content>{editContent}</li-content>;\n};\n\nexport default Name;\n"],"mappings":";;;;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAOA;AAOA,IAAMA,IAAyB,GAAG,SAA5BA,IAAyB,OAA0B;EAAA,IAApBC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EAC9C,IAAMC,IAAI,GAAGF,IAAI,CAACE,IAAI,IAAI,EAAE;EAC5B,mBAAyB,IAAAC,yBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EACpB,IAAMC,MAAM,GAAG,IAAAC,2BAAe,GAAE;EAEhC,sBAAwB,IAAAC,kCAAc,GAAE;IAAhCC,WAAW,mBAAXA,WAAW;EAEnB,IAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC9B,oBACI,6BAAC,UAAI;MACD,IAAI,EAAE;QACFR,IAAI,EAAJA;MACJ,CAAE;MACF,QAAQ;QAAA,mGAAE;UAAA;UAAA;YAAA;cAAA;gBAASA,IAAI,SAAJA,IAAI;gBAAA,MAEfA,IAAI,KAAKF,IAAI,CAACE,IAAI;kBAAA;kBAAA;gBAAA;gBAAA;cAAA;gBAAA;gBAAA,OAIhBG,MAAM,CAACM,MAAM,CAA0D;kBACzEC,QAAQ,EAAEC,oBAAW;kBACrBC,SAAS,EAAE;oBACPC,EAAE,EAAEf,IAAI,CAACe,EAAE;oBACXC,IAAI,EAAE;sBAAEd,IAAI,EAAJA;oBAAK;kBACjB,CAAC;kBACDe,MAAM,EAAE,gBAACC,KAAK,EAAEC,OAAO,EAAK;oBACxB,IAAMC,WAAW,GAAG,mBAChBD,OAAO,EACP,kCAAkC,CACd;oBACxB,IAAMH,IAAI,GAAG,yBACTE,KAAK,CAACG,SAAS,CAAyB;sBACpCC,KAAK,EAAEC,mBAAU;sBACjBT,SAAS,EAAEN;oBACf,CAAC,CAAC,CACL;oBAED,IAAIQ,IAAI,EAAE;sBACNA,IAAI,CAACQ,WAAW,CAACC,SAAS,CAACT,IAAI,CAACU,OAAO,CAAC,UAAAC,IAAI,EAAI;wBAC5C,IAAIA,IAAI,CAACC,GAAG,KAAKR,WAAW,CAACQ,GAAG,EAAE;0BAC9BD,IAAI,CAACzB,IAAI,GAAGkB,WAAW,CAAClB,IAAI;wBAChC;sBACJ,CAAC,CAAC;oBACN;oBAEAgB,KAAK,CAACW,UAAU,CAAC;sBACbP,KAAK,EAAEC,mBAAU;sBACjBT,SAAS,EAAEN,WAAW;sBACtBQ,IAAI,EAAEA;oBACV,CAAC,CAAC;kBACN;gBACJ,CAAC,CAAC;cAAA;gBAEFZ,YAAY,CAAC,4BAA4B,CAAC;cAAC;cAAA;gBAAA;YAAA;UAAA;QAAA,CAC9C;QAAA;UAAA;QAAA;MAAA;IAAC,GAED;MAAA,IAAG0B,IAAI,SAAJA,IAAI;QAAEC,MAAM,SAANA,MAAM;MAAA,oBACZ,6BAAC,IAAI;QAAC,IAAI,EAAE,MAAO;QAAC,UAAU,EAAEC,sBAAU,CAACC,MAAM,CAAC,UAAU;MAAE,gBAC1D,6BAAC,YAAK;QACF,QAAQ,EAAE,CAAChC,OAAO,CAACD,IAAI,CAAE;QACzB,SAAS;QACT,WAAW,EAAE,YAAa;QAC1B,SAAS,EAAE,IAAK;QAChB,MAAM,EAAE+B,MAAO;QACf,WAAW,EAAE;MAA4C,EAC3D,CACC;IAAA,CACV,CACE;EAEf,CAAC,EAAE,CAAC7B,IAAI,EAAEF,IAAI,CAACE,IAAI,EAAED,OAAO,CAAC,CAAC;EAE9B,oBAAO,iDAAaQ,WAAW,CAAc;AACjD,CAAC;AAAC,eAEaV,IAAI;AAAA"}

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

@@ -1,10 +0,0 @@
-import React from "react";
-import { FileItem } from "../types";
-export declare const formatTagAsLabel: (tag: string, scope: string | undefined) => string;
-export declare const tagWithoutScopePrefix: (tags: string[], scope: string) => string[];
-interface TagsProps {
-    file: FileItem;
-    canEdit: (file: FileItem) => boolean;
-}
-declare const Tags: React.FC<TagsProps>;
-export default Tags;

package/components/FileManager/FileDetails/Tags.js

@@ -1,286 +0,0 @@
-"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.tagWithoutScopePrefix = exports.formatTagAsLabel = exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _emotion = require("emotion");
-var _reactHooks = require("@apollo/react-hooks");
-var _set = _interopRequireDefault(require("lodash/set"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-var _Chips = require("@webiny/ui/Chips");
-var _Button = require("@webiny/ui/Button");
-var _AutoComplete = require("@webiny/ui/AutoComplete");
-var _Icon = require("@webiny/ui/Icon");
-var _form = require("@webiny/form");
-var _useSnackbar2 = require("../../../hooks/useSnackbar");
-var _FileManagerContext = require("./../FileManagerContext");
-var _graphql = require("./../graphql");
-var _roundEdit24px = require("./../icons/round-edit-24px.svg");
-var _roundLabel24px = require("./../icons/round-label-24px.svg");
-var _excluded = ["value"];
-var SCOPE_SEPARATOR = ":";
-var formatTagAsLabel = function formatTagAsLabel(tag, scope) {
-  if (!scope) {
-    return tag;
-  }
-  return tag.replace("".concat(scope).concat(SCOPE_SEPARATOR), "");
-};
-exports.formatTagAsLabel = formatTagAsLabel;
-var tagWithoutScopePrefix = function tagWithoutScopePrefix(tags, scope) {
-  return tags.filter(function (tag) {
-    return tag !== scope;
-  }).map(function (tag) {
-    return formatTagAsLabel(tag, scope);
-  });
-};
-exports.tagWithoutScopePrefix = tagWithoutScopePrefix;
-var chipsStyle = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-chip-set": {
-    padding: 0,
-    marginLeft: -4,
-    "& .mdc-chip": {
-      backgroundColor: "var(--mdc-theme-background)"
-    }
-  }
-}, "label:chipsStyle;");
-var iconButtonStyle = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-icon-button svg": {
-    width: 20,
-    height: 20
-  }
-}, "label:iconButtonStyle;");
-var addTagsStyle = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-button:not(:disabled)": {
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    textTransform: "capitalize",
-    letterSpacing: "initial",
-    marginLeft: -8
-  }
-}, "label:addTagsStyle;");
-var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
-  marginTop: 16,
-  "& button:first-child": {
-    marginRight: 16
-  }
-}, "label:actionWrapperStyle;");
-var Tags = function Tags(_ref) {
-  var file = _ref.file,
-    canEdit = _ref.canEdit;
-  var client = (0, _reactHooks.useApolloClient)();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    editing = _useState2[0],
-    setEdit = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    saving = _useState4[0],
-    setSaving = _useState4[1];
-  var _useState5 = (0, _react.useState)(Array.isArray(file.tags) ? (0, _toConsumableArray2.default)(file.tags) : []),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    initialTags = _useState6[0],
-    setInitialTags = _useState6[1];
-  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
-    queryParams = _useFileManager.queryParams;
-  var handleEdit = (0, _react.useCallback)(function () {
-    return setEdit(true);
-  }, []);
-  var listTagsQuery = (0, _reactHooks.useQuery)(_graphql.LIST_TAGS, {
-    variables: {
-      where: (0, _FileManagerContext.getWhere)(queryParams.scope)
-    }
-  });
-  var listTags = (0, _get.default)(listTagsQuery, "data.fileManager.listTags", []);
-  var allTags = tagWithoutScopePrefix(listTags, queryParams.scope);
-  var isEditingAllowed = canEdit(file);
-  var renderHeaderContent = (0, _react.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
-        className: (0, _classnames.default)("list-item__content", chipsStyle)
-      }, data.tags.filter(function (tag) {
-        return tag !== queryParams.scope;
-      }).map(function (tag, index) {
-        var label = typeof tag === "string" ? tag : tag.name;
-        return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
-          key: label + index,
-          label: formatTagAsLabel(label, queryParams.scope)
-        });
-      })), isEditingAllowed && /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-        className: iconButtonStyle,
-        icon: /*#__PURE__*/_react.default.createElement(_roundEdit24px.ReactComponent, null),
-        onClick: handleEdit
-      }));
-    }
-    // Render "add tags" action.
-    return /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
-      className: addTagsStyle,
-      onClick: handleEdit,
-      disabled: !isEditingAllowed,
-      "data-testid": "fm.tags.add"
-    }, "Add tags...");
-  }, [editing, isEditingAllowed]);
-  return /*#__PURE__*/_react.default.createElement(_form.Form, {
-    data: {
-      tags: initialTags
-    },
-    onSubmit: /*#__PURE__*/function () {
-      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref3) {
-        var tags;
-        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              tags = _ref3.tags;
-              setSaving(true);
-              client.mutate({
-                mutation: _graphql.UPDATE_FILE,
-                variables: {
-                  id: file.id,
-                  data: {
-                    tags: tags
-                  }
-                },
-                update: function update(cache, updated) {
-                  var newFileData = (0, _get.default)(updated, "data.fileManager.updateFile.data");
-
-                  // 1. Update files list cache
-                  var data = (0, _cloneDeep.default)(cache.readQuery({
-                    query: _graphql.LIST_FILES,
-                    variables: queryParams
-                  }));
-                  if (data) {
-                    data.fileManager.listFiles.data.forEach(function (item) {
-                      if (item.key === newFileData.key) {
-                        item.tags = newFileData.tags;
-                      }
-                    });
-                  }
-                  cache.writeQuery({
-                    query: _graphql.LIST_FILES,
-                    variables: queryParams,
-                    data: data
-                  });
-                  // 2. Update "LIST_TAGS" cache
-                  if (Array.isArray(newFileData.tags)) {
-                    // Get list tags data
-                    var listTagsData = (0, _cloneDeep.default)(cache.readQuery({
-                      query: _graphql.LIST_TAGS,
-                      variables: {
-                        where: (0, _FileManagerContext.getWhere)(queryParams.scope)
-                      }
-                    }));
-                    if (!listTagsData) {
-                      return;
-                    }
-                    // Add new tag in list
-                    var updatedTagsList = (0, _toConsumableArray2.default)(newFileData.tags);
-                    if (Array.isArray(listTagsData.fileManager.listTags)) {
-                      listTagsData.fileManager.listTags.forEach(function (tag) {
-                        if (!updatedTagsList.includes(tag)) {
-                          updatedTagsList.push(tag);
-                        }
-                      });
-                    }
-                    (0, _set.default)(listTagsData, "fileManager.listTags", updatedTagsList);
-                    // Write it to cache
-                    cache.writeQuery({
-                      query: _graphql.LIST_TAGS,
-                      variables: {
-                        where: (0, _FileManagerContext.getWhere)(queryParams.scope)
-                      },
-                      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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-      className: "list-item__icon",
-      icon: /*#__PURE__*/_react.default.createElement(_roundLabel24px.ReactComponent, null)
-    }), renderHeaderContent({
-      // TODO @ts-refactor
-      // @ts-ignore
-      data: data
-    })), editing && /*#__PURE__*/_react.default.createElement("li-content", null, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "tags",
-      beforeChange: function beforeChange(tags, baseOnChange) {
-        var formattedTags = tags.map(function (tag) {
-          var tagInLowerCase = tag.toLowerCase();
-          /**
-           * If "scope" exists, prefix tag with "scope" if not already.
-           */
-          if (queryParams.scope && !tagInLowerCase.startsWith(queryParams.scope)) {
-            return "".concat(queryParams.scope).concat(SCOPE_SEPARATOR).concat(tagInLowerCase);
-          }
-          return tagInLowerCase;
-        });
-        baseOnChange(formattedTags);
-      }
-    }, function (_ref6) {
-      var value = _ref6.value,
-        bindProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bindProps, {
-        value: tagWithoutScopePrefix(value, queryParams.scope),
-        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.default.createElement("div", {
-      className: actionWrapperStyle
-    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-      small: true,
-      onClick: function onClick(ev) {
-        submit(ev);
-      },
-      "data-testid": "fm.tags.submit"
-    }, "Submit"), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
-      small: true,
-      onClick: function onClick() {
-        setValue("tags", initialTags);
-        setEdit(false);
-      }
-    }, "Cancel"))));
-  });
-};
-var _default = Tags;
-exports.default = _default;

package/components/FileManager/FileDetails/Tags.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SCOPE_SEPARATOR","formatTagAsLabel","tag","scope","replace","tagWithoutScopePrefix","tags","filter","map","chipsStyle","css","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","file","canEdit","client","useApolloClient","useState","editing","setEdit","saving","setSaving","Array","isArray","initialTags","setInitialTags","useSnackbar","showSnackbar","useFileManager","queryParams","handleEdit","useCallback","listTagsQuery","useQuery","LIST_TAGS","variables","where","getWhere","listTags","get","allTags","isEditingAllowed","renderHeaderContent","data","hasTags","length","classNames","index","label","name","mutate","mutation","UPDATE_FILE","id","update","cache","updated","newFileData","cloneDeep","readQuery","query","LIST_FILES","fileManager","listFiles","forEach","item","key","writeQuery","listTagsData","updatedTagsList","includes","push","set","then","Bind","setValue","submit","baseOnChange","formattedTags","tagInLowerCase","toLowerCase","startsWith","value","bindProps","ev"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { useApolloClient, useQuery } from \"@apollo/react-hooks\";\nimport set from \"lodash/set\";\nimport get from \"lodash/get\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form } from \"@webiny/form\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { getWhere, useFileManager } from \"./../FileManagerContext\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./../graphql\";\nimport { ReactComponent as EditIcon } from \"./../icons/round-edit-24px.svg\";\nimport { ReactComponent as LabelIcon } from \"./../icons/round-label-24px.svg\";\nimport { FileItem } from \"../types\";\n\nconst SCOPE_SEPARATOR = \":\";\n\nexport const formatTagAsLabel = (tag: string, scope: string | undefined) => {\n    if (!scope) {\n        return tag;\n    }\n    return tag.replace(`${scope}${SCOPE_SEPARATOR}`, \"\");\n};\n\nexport const tagWithoutScopePrefix = (tags: string[], scope: string) => {\n    return tags.filter(tag => tag !== scope).map(tag => formatTagAsLabel(tag, scope));\n};\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\n\nconst Tags: React.FC<TagsProps> = ({ file, canEdit }) => {\n    const client = useApolloClient();\n\n    const [editing, setEdit] = useState(false);\n    const [saving, setSaving] = useState(false);\n    const [initialTags, setInitialTags] = useState(Array.isArray(file.tags) ? [...file.tags] : []);\n    const { showSnackbar } = useSnackbar();\n    const { queryParams } = useFileManager();\n    const handleEdit = useCallback(() => setEdit(true), []);\n    const listTagsQuery = useQuery(LIST_TAGS, {\n        variables: { where: getWhere(queryParams.scope) }\n    });\n    const listTags = get(listTagsQuery, \"data.fileManager.listTags\", []);\n    const allTags = tagWithoutScopePrefix(listTags, queryParams.scope);\n\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: { tags: { name: string }[] } }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {data.tags\n                                .filter(tag => tag !== queryParams.scope)\n                                .map((tag, index) => {\n                                    const label = typeof tag === \"string\" ? tag : tag.name;\n                                    return (\n                                        <Chip\n                                            key={label + index}\n                                            label={formatTagAsLabel(label, queryParams.scope)}\n                                        />\n                                    );\n                                })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                    data-testid=\"fm.tags.add\"\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    return (\n        <Form\n            data={{\n                tags: initialTags\n            }}\n            onSubmit={async ({ tags }) => {\n                setSaving(true);\n                client\n                    .mutate({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { tags }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData: FileItem = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            );\n\n                            // 1. Update files list cache\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.key === newFileData.key) {\n                                        item.tags = newFileData.tags;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data\n                            });\n                            // 2. Update \"LIST_TAGS\" cache\n                            if (Array.isArray(newFileData.tags)) {\n                                // Get list tags data\n                                const listTagsData = cloneDeep(\n                                    cache.readQuery<ListFileTagsQueryResponse>({\n                                        query: LIST_TAGS,\n                                        variables: { where: getWhere(queryParams.scope) }\n                                    })\n                                );\n                                if (!listTagsData) {\n                                    return;\n                                }\n                                // Add new tag in list\n                                const updatedTagsList = [...newFileData.tags];\n\n                                if (Array.isArray(listTagsData.fileManager.listTags)) {\n                                    listTagsData.fileManager.listTags.forEach(tag => {\n                                        if (!updatedTagsList.includes(tag)) {\n                                            updatedTagsList.push(tag);\n                                        }\n                                    });\n                                }\n\n                                set(listTagsData, \"fileManager.listTags\", updatedTagsList);\n                                // Write it to cache\n                                cache.writeQuery({\n                                    query: LIST_TAGS,\n                                    variables: { where: getWhere(queryParams.scope) },\n                                    data: listTagsData\n                                });\n                            }\n                        }\n                    })\n                    .then(() => {\n                        setInitialTags(tags);\n                        setSaving(false);\n                        setEdit(false);\n                        showSnackbar(\"Tags successfully updated.\");\n                    });\n            }}\n        >\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({\n                            // TODO @ts-refactor\n                            // @ts-ignore\n                            data\n                        })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind\n                                name={\"tags\"}\n                                beforeChange={(\n                                    tags: string[],\n                                    baseOnChange: (tags: string[]) => void\n                                ) => {\n                                    const formattedTags = tags.map(tag => {\n                                        const tagInLowerCase = tag.toLowerCase();\n                                        /**\n                                         * If \"scope\" exists, prefix tag with \"scope\" if not already.\n                                         */\n                                        if (\n                                            queryParams.scope &&\n                                            !tagInLowerCase.startsWith(queryParams.scope)\n                                        ) {\n                                            return `${queryParams.scope}${SCOPE_SEPARATOR}${tagInLowerCase}`;\n                                        }\n                                        return tagInLowerCase;\n                                    });\n                                    baseOnChange(formattedTags);\n                                }}\n                            >\n                                {({ value, ...bindProps }) => (\n                                    <MultiAutoComplete\n                                        {...bindProps}\n                                        value={tagWithoutScopePrefix(value, queryParams.scope)}\n                                        options={allTags}\n                                        placeholder={\"homepage asset\"}\n                                        description={\"Type in a new tag or select an existing one.\"}\n                                        unique={true}\n                                        allowFreeInput={true}\n                                        useSimpleValues={true}\n                                        disabled={saving}\n                                    />\n                                )}\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={ev => {\n                                        submit(ev);\n                                    }}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}