@webiny/app-admin 0.0.0-unstable.d7f521b032 → 0.0.0-unstable.ecd8734205

package/components/FileManager/FileDetails/Tags.js

@@ -28,6 +28,7 @@ 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 _useUpdateFile2 = require("./useUpdateFile");
 var _excluded = ["value"];
 var SCOPE_SEPARATOR = ":";
 var formatTagAsLabel = function formatTagAsLabel(tag, scope) {
@@ -77,19 +78,17 @@ var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
 var Tags = function Tags(_ref) {
   var file = _ref.file,
     canEdit = _ref.canEdit;
-  var client = (0, _reactHooks.useApolloClient)();
+  var _useUpdateFile = (0, _useUpdateFile2.useUpdateFile)(file),
+    updateFile = _useUpdateFile.updateFile,
+    updateInProgress = _useUpdateFile.updateInProgress;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     editing = _useState2[0],
     setEdit = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(Array.isArray(file.tags) ? (0, _toConsumableArray2.default)(file.tags) : []),
     _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];
+    initialTags = _useState4[0],
+    setInitialTags = _useState4[1];
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
     showSnackbar = _useSnackbar.showSnackbar;
   var _useFileManager = (0, _FileManagerContext.useFileManager)(),
@@ -118,10 +117,9 @@ var Tags = function Tags(_ref) {
       }, 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)
+          key: tag + index,
+          label: formatTagAsLabel(tag, queryParams.scope)
         });
       })), isEditingAllowed && /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
         className: iconButtonStyle,
@@ -137,94 +135,85 @@ var Tags = function Tags(_ref) {
       "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
+  var 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;
+            _context.next = 3;
+            return updateFile({
+              tags: tags
+            }, function (cache) {
+              // 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 === file.key) {
+                    item.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(tags)) {
+                // Get list tags data
+                var listTagsData = (0, _cloneDeep.default)(cache.readQuery({
+                  query: _graphql.LIST_TAGS,
+                  variables: {
+                    where: (0, _FileManagerContext.getWhere)(queryParams.scope)
                   }
-                  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);
-                        }
-                      });
+                }));
+                if (!listTagsData) {
+                  return;
+                }
+                // Add new tag in list
+                var updatedTagsList = (0, _toConsumableArray2.default)(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);
-      };
-    }()
+                (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
+                });
+              }
+            });
+          case 3:
+            setInitialTags(tags);
+            setEdit(false);
+            showSnackbar("Tags successfully updated.");
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmit(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: {
+      tags: initialTags
+    },
+    onSubmit: onSubmit
   }, function (_ref5) {
     var Bind = _ref5.Bind,
       data = _ref5.data,
@@ -234,8 +223,6 @@ var Tags = function Tags(_ref) {
       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",
@@ -263,15 +250,13 @@ var Tags = function Tags(_ref) {
         unique: true,
         allowFreeInput: true,
         useSimpleValues: true,
-        disabled: saving
+        disabled: updateInProgress
       }));
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: actionWrapperStyle
     }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
       small: true,
-      onClick: function onClick(ev) {
-        submit(ev);
-      },
+      onClick: submit,
       "data-testid": "fm.tags.submit"
     }, "Submit"), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
       small: true,

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

@@ -1 +1 @@
-{"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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"}
+{"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","useUpdateFile","updateFile","updateInProgress","useState","editing","setEdit","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","onSubmit","cache","cloneDeep","readQuery","query","LIST_FILES","fileManager","listFiles","forEach","item","key","writeQuery","listTagsData","updatedTagsList","includes","push","set","Bind","setValue","submit","baseOnChange","formattedTags","tagInLowerCase","toLowerCase","startsWith","value","bindProps"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { 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, FormOnSubmit } from \"@webiny/form\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { getWhere, useFileManager } from \"./../FileManagerContext\";\nimport {\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\";\nimport { useUpdateFile } from \"./useUpdateFile\";\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\ninterface TagsFormData {\n    tags: string[];\n}\n\nconst Tags: React.FC<TagsProps> = ({ file, canEdit }) => {\n    const { updateFile, updateInProgress } = useUpdateFile(file);\n    const [editing, setEdit] = 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: TagsFormData }) => {\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                                    return (\n                                        <Chip\n                                            key={tag + index}\n                                            label={formatTagAsLabel(tag, 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    const onSubmit: FormOnSubmit<TagsFormData> = async ({ tags }) => {\n        await updateFile({ tags }, cache => {\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 === file.key) {\n                        item.tags = 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(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 = [...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        setInitialTags(tags);\n        setEdit(false);\n        showSnackbar(\"Tags successfully updated.\");\n    };\n\n    return (\n        <Form<TagsFormData> data={{ tags: initialTags }} onSubmit={onSubmit}>\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({ data })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind\n                                name={\"tags\"}\n                                beforeChange={(\n                                    tags: TagsFormData[\"tags\"],\n                                    baseOnChange: (tags: TagsFormData[\"tags\"]) => 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={updateInProgress}\n                                    />\n                                )}\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={submit}\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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"}

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

@@ -0,0 +1,8 @@
+import { useApolloClient } from "@apollo/react-hooks";
+import { FileItem } from "../types";
+declare type UpdateApolloCache = Parameters<ReturnType<typeof useApolloClient>["mutate"]>[0]["update"];
+export declare const useUpdateFile: (file: FileItem) => {
+    updateFile: (data: Partial<FileItem>, updateCache?: UpdateApolloCache) => Promise<void>;
+    updateInProgress: boolean;
+};
+export {};

package/components/FileManager/FileDetails/useUpdateFile.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUpdateFile = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactHooks = require("@apollo/react-hooks");
+var _graphql = require("../graphql");
+var useUpdateFile = function useUpdateFile(file) {
+  var client = (0, _reactHooks.useApolloClient)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    saving = _useState2[0],
+    setSaving = _useState2[1];
+  var updateFile = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(data, updateCache) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setSaving(true);
+            _context.next = 3;
+            return client.mutate({
+              mutation: _graphql.UPDATE_FILE,
+              variables: {
+                id: file.id,
+                data: data
+              },
+              update: function update(cache, result) {
+                if (updateCache) {
+                  updateCache(cache, result);
+                }
+              }
+            });
+          case 3:
+            setSaving(false);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function updateFile(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return {
+    updateFile: updateFile,
+    updateInProgress: saving
+  };
+};
+exports.useUpdateFile = useUpdateFile;

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

@@ -0,0 +1 @@
+{"version":3,"names":["useUpdateFile","file","client","useApolloClient","useState","saving","setSaving","updateFile","data","updateCache","mutate","mutation","UPDATE_FILE","variables","id","update","cache","result","updateInProgress"],"sources":["useUpdateFile.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { FileItem } from \"../types\";\nimport { UPDATE_FILE } from \"~/components/FileManager/graphql\";\n\ntype UpdateApolloCache = Parameters<ReturnType<typeof useApolloClient>[\"mutate\"]>[0][\"update\"];\n\nexport const useUpdateFile = (file: FileItem) => {\n    const client = useApolloClient();\n    const [saving, setSaving] = useState(false);\n\n    const updateFile = async (data: Partial<FileItem>, updateCache?: UpdateApolloCache) => {\n        setSaving(true);\n        await client.mutate({\n            mutation: UPDATE_FILE,\n            variables: {\n                id: file.id,\n                data\n            },\n            update(cache, result) {\n                if (updateCache) {\n                    updateCache(cache, result);\n                }\n            }\n        });\n        setSaving(false);\n    };\n\n    return { updateFile, updateInProgress: saving };\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AAIO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CAAIC,IAAc,EAAK;EAC7C,IAAMC,MAAM,GAAG,IAAAC,2BAAe,GAAE;EAChC,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EAExB,IAAMC,UAAU;IAAA,kGAAG,iBAAOC,IAAuB,EAAEC,WAA+B;MAAA;QAAA;UAAA;YAC9EH,SAAS,CAAC,IAAI,CAAC;YAAC;YAAA,OACVJ,MAAM,CAACQ,MAAM,CAAC;cAChBC,QAAQ,EAAEC,oBAAW;cACrBC,SAAS,EAAE;gBACPC,EAAE,EAAEb,IAAI,CAACa,EAAE;gBACXN,IAAI,EAAJA;cACJ,CAAC;cACDO,MAAM,kBAACC,KAAK,EAAEC,MAAM,EAAE;gBAClB,IAAIR,WAAW,EAAE;kBACbA,WAAW,CAACO,KAAK,EAAEC,MAAM,CAAC;gBAC9B;cACJ;YACJ,CAAC,CAAC;UAAA;YACFX,SAAS,CAAC,KAAK,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CACpB;IAAA,gBAfKC,UAAU;MAAA;IAAA;EAAA,GAef;EAED,OAAO;IAAEA,UAAU,EAAVA,UAAU;IAAEW,gBAAgB,EAAEb;EAAO,CAAC;AACnD,CAAC;AAAC"}

package/components/FileManager/FileDetails.d.ts

@@ -13,7 +13,7 @@ declare global {
         }
     }
 }
-interface FileDetailsProps {
+export interface FileDetailsProps {
     canEdit: (item: any) => boolean;
     file: FileItem;
     uploadFile: (files: FileItem[] | FileItem) => Promise<number | null>;

package/components/FileManager/FileDetails.js

@@ -23,6 +23,7 @@ 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 _Aliases = require("./FileDetails/Aliases");
 var _Tooltip = require("@webiny/ui/Tooltip");
 var _Icon = require("@webiny/ui/Icon");
 var _Typography = require("@webiny/ui/Typography");
@@ -41,6 +42,7 @@ var _ConfirmationDialog = require("@webiny/ui/ConfirmationDialog");
 var _graphql = require("./graphql");
 var _i18n = require("@webiny/app/i18n");
 var _mime = _interopRequireDefault(require("mime"));
+var _FileProvider = require("./FileDetails/FileProvider");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 var t = _i18n.i18n.ns("app-admin/file-manager/file-details");
 var fileDetailsSidebar = /*#__PURE__*/(0, _emotion.css)({
@@ -143,9 +145,7 @@ var isImage = function isImage(file) {
   return false;
 };
 var FileDetails = function FileDetails(props) {
-  var file = props.file,
-    uploadFile = props.uploadFile,
-    validateFiles = props.validateFiles;
+  var file = props.file;
   var filePlugin = (0, _getFileTypePlugin.default)(file);
   var actions = (0, _get.default)(filePlugin, "fileDetails.actions") || (0, _get.default)(filePlugin, "actions") || [];
   var _useFileManager = (0, _FileManagerContext.useFileManager)(),
@@ -330,7 +330,10 @@ var FileDetails = function FileDetails(props) {
     open: Boolean(file),
     onClose: hideFileDetails,
     "data-testid": "fm.file-details.drawer"
-  }, file && /*#__PURE__*/_react.default.createElement("div", {
+  }, file && /*#__PURE__*/_react.default.createElement(_FileProvider.FileProvider, {
+    file: file,
+    canEdit: props.canEdit
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: style.wrapper,
     dir: "ltr"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -342,14 +345,7 @@ var FileDetails = function FileDetails(props) {
       dark: darkImageBackground
     })
   }, filePlugin && filePlugin.render({
-    /**
-     * TODO: @ts-refactor
-     * Figure out which type is the file
-     */
-    // @ts-ignore
-    file: file,
-    uploadFile: uploadFile,
-    validateFiles: validateFiles
+    file: file
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: style.download
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
@@ -401,7 +397,9 @@ var FileDetails = function FileDetails(props) {
     use: "subtitle1"
   }, (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)))))));
+  }, props))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Aliases.Aliases, Object.assign({
+    key: props.file.id
+  }, props))))))));
 };
 var _default = FileDetails;
 exports.default = _default;