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

package/components/FileManager/FileDetails/Name.js

@@ -1,51 +1,32 @@
 "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;
+    canEdit = _ref.canEdit;
   var name = file.name || "";
-
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
+    showSnackbar = _useSnackbar.showSnackbar;
   var client = (0, _reactHooks.useApolloClient)();
-
   var _useFileManager = (0, _FileManagerContext.useFileManager)(),
-      queryParams = _useFileManager.queryParams;
-
+    queryParams = _useFileManager.queryParams;
   var editContent = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_form.Form, {
       data: {
@@ -55,69 +36,59 @@ var Name = function Name(_ref) {
         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
+            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;
+                        }
                       });
                     }
-                  });
-
-                case 5:
-                  showSnackbar("Name successfully updated.");
-
-                case 6:
-                case "end":
-                  return _context.stop();
-              }
+                    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;
+        submit = _ref4.submit;
       return /*#__PURE__*/_react.default.createElement(Bind, {
         name: "name",
         validators: _validation.validation.create("required")
@@ -133,6 +104,5 @@ var Name = function Name(_ref) {
   }, [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 +1 @@
-{"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,IAA4B,OAAuB;EAAA,IAApBC,IAAoB,QAApBA,IAAoB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EACrD,IAAMC,IAAI,GAAGF,IAAI,CAACE,IAAL,IAAa,EAA1B;;EACA,mBAAyB,IAAAC,yBAAA,GAAzB;EAAA,IAAQC,YAAR,gBAAQA,YAAR;;EACA,IAAMC,MAAM,GAAG,IAAAC,2BAAA,GAAf;;EAEA,sBAAwB,IAAAC,kCAAA,GAAxB;EAAA,IAAQC,WAAR,mBAAQA,WAAR;;EAEA,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAAQ,YAAM;IAC9B,oBACI,6BAAC,UAAD;MACI,IAAI,EAAE;QACFR,IAAI,EAAJA;MADE,CADV;MAII,QAAQ;QAAA,mGAAE;UAAA;UAAA;YAAA;cAAA;gBAAA;kBAASA,IAAT,SAASA,IAAT;;kBAAA,MAEFA,IAAI,KAAKF,IAAI,CAACE,IAFZ;oBAAA;oBAAA;kBAAA;;kBAAA;;gBAAA;kBAAA;kBAAA,OAMAG,MAAM,CAACM,MAAP,CAAuE;oBACzEC,QAAQ,EAAEC,oBAD+D;oBAEzEC,SAAS,EAAE;sBACPC,EAAE,EAAEf,IAAI,CAACe,EADF;sBAEPC,IAAI,EAAE;wBAAEd,IAAI,EAAJA;sBAAF;oBAFC,CAF8D;oBAMzEe,MAAM,EAAE,gBAACC,KAAD,EAAQC,OAAR,EAAoB;sBACxB,IAAMC,WAAW,GAAG,mBAChBD,OADgB,EAEhB,kCAFgB,CAApB;sBAIA,IAAMH,IAAI,GAAG,yBACTE,KAAK,CAACG,SAAN,CAAwC;wBACpCC,KAAK,EAAEC,mBAD6B;wBAEpCT,SAAS,EAAEN;sBAFyB,CAAxC,CADS,CAAb;;sBAOA,IAAIQ,IAAJ,EAAU;wBACNA,IAAI,CAACQ,WAAL,CAAiBC,SAAjB,CAA2BT,IAA3B,CAAgCU,OAAhC,CAAwC,UAAAC,IAAI,EAAI;0BAC5C,IAAIA,IAAI,CAACC,GAAL,KAAaR,WAAW,CAACQ,GAA7B,EAAkC;4BAC9BD,IAAI,CAACzB,IAAL,GAAYkB,WAAW,CAAClB,IAAxB;0BACH;wBACJ,CAJD;sBAKH;;sBAEDgB,KAAK,CAACW,UAAN,CAAiB;wBACbP,KAAK,EAAEC,mBADM;wBAEbT,SAAS,EAAEN,WAFE;wBAGbQ,IAAI,EAAEA;sBAHO,CAAjB;oBAKH;kBA/BwE,CAAvE,CANA;;gBAAA;kBAwCNZ,YAAY,CAAC,4BAAD,CAAZ;;gBAxCM;gBAAA;kBAAA;cAAA;YAAA;UAAA;QAAA,CAAF;;QAAA;UAAA;QAAA;MAAA;IAJZ,GA+CK;MAAA,IAAG0B,IAAH,SAAGA,IAAH;MAAA,IAASC,MAAT,SAASA,MAAT;MAAA,oBACG,6BAAC,IAAD;QAAM,IAAI,EAAE,MAAZ;QAAoB,UAAU,EAAEC,sBAAA,CAAWC,MAAX,CAAkB,UAAlB;MAAhC,gBACI,6BAAC,YAAD;QACI,QAAQ,EAAE,CAAChC,OAAO,CAACD,IAAD,CADtB;QAEI,SAAS,MAFb;QAGI,WAAW,EAAE,YAHjB;QAII,SAAS,EAAE,IAJf;QAKI,MAAM,EAAE+B,MALZ;QAMI,WAAW,EAAE;MANjB,EADJ,CADH;IAAA,CA/CL,CADJ;EA8DH,CA/DmB,EA+DjB,CAAC7B,IAAD,EAAOF,IAAI,CAACE,IAAZ,EAAkBD,OAAlB,CA/DiB,CAApB;EAiEA,oBAAO,iDAAaQ,WAAb,CAAP;AACH,CAzED;;eA2EeV,I"}
+{"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.js

@@ -1,71 +1,42 @@
 "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;
@@ -73,7 +44,6 @@ var tagWithoutScopePrefix = function tagWithoutScopePrefix(tags, scope) {
     return formatTagAsLabel(tag, scope);
   });
 };
-
 exports.tagWithoutScopePrefix = tagWithoutScopePrefix;
 var chipsStyle = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-chip-set": {
@@ -104,33 +74,26 @@ var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
     marginRight: 16
   }
 }, "label:actionWrapperStyle;");
-
 var Tags = function Tags(_ref) {
   var file = _ref.file,
-      canEdit = _ref.canEdit;
+    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];
-
+    _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];
-
+    _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];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    initialTags = _useState6[0],
+    setInitialTags = _useState6[1];
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
+    showSnackbar = _useSnackbar.showSnackbar;
   var _useFileManager = (0, _FileManagerContext.useFileManager)(),
-      queryParams = _useFileManager.queryParams;
-
+    queryParams = _useFileManager.queryParams;
   var handleEdit = (0, _react.useCallback)(function () {
     return setEdit(true);
   }, []);
@@ -144,13 +107,10 @@ var Tags = function Tags(_ref) {
   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, {
@@ -168,9 +128,8 @@ var Tags = function Tags(_ref) {
         icon: /*#__PURE__*/_react.default.createElement(_roundEdit24px.ReactComponent, null),
         onClick: handleEdit
       }));
-    } // Render "add tags" action.
-
-
+    }
+    // Render "add tags" action.
     return /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
       className: addTagsStyle,
       onClick: handleEdit,
@@ -186,100 +145,91 @@ var Tags = function Tags(_ref) {
       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
+          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 (data) {
-                      data.fileManager.listFiles.data.forEach(function (item) {
-                        if (item.key === newFileData.key) {
-                          item.tags = newFileData.tags;
-                        }
-                      });
+                    if (!listTagsData) {
+                      return;
                     }
-
-                    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)
+                    // 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)(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
                       });
                     }
+                    (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();
-            }
+                }
+              }).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;
+      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)
@@ -295,18 +245,16 @@ var Tags = function Tags(_ref) {
           /**
            * 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);
+        bindProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
       return /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bindProps, {
         value: tagWithoutScopePrefix(value, queryParams.scope),
         options: allTags,
@@ -334,6 +282,5 @@ var Tags = function Tags(_ref) {
     }, "Cancel"))));
   });
 };
-
 var _default = Tags;
 exports.default = _default;