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

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","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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"}

package/components/FileManager/FileDetails.js

@@ -1,88 +1,48 @@
 "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.default = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _bytes = _interopRequireDefault(require("bytes"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _emotion = require("emotion");
-
 var _Drawer = require("@webiny/ui/Drawer");
-
 var _Button = require("@webiny/ui/Button");
-
 var _getFileTypePlugin = _interopRequireDefault(require("./getFileTypePlugin"));
-
 var _dayjs = _interopRequireDefault(require("dayjs"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 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 _Tooltip = require("@webiny/ui/Tooltip");
-
 var _Icon = require("@webiny/ui/Icon");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var _reactHotkeyz = require("react-hotkeyz");
-
 var _content_copyBlack24px = require("./icons/content_copy-black-24px.svg");
-
 var _delete = require("./icons/delete.svg");
-
 var _insert_photo24px = require("../../assets/icons/insert_photo-24px.svg");
-
 var _insert_drive_file24px = require("../../assets/icons/insert_drive_file-24px.svg");
-
 var _today24px = require("../../assets/icons/today-24px.svg");
-
 var _highlight24px = require("../../assets/icons/highlight-24px.svg");
-
 var _FileManagerContext = require("./FileManagerContext");
-
 var _reactHooks = require("@apollo/react-hooks");
-
 var _useSnackbar2 = require("../../hooks/useSnackbar");
-
 var _appSecurity = require("@webiny/app-security");
-
 var _ConfirmationDialog = require("@webiny/ui/ConfirmationDialog");
-
 var _graphql = require("./graphql");
-
 var _i18n = require("@webiny/app/i18n");
-
 var _mime = _interopRequireDefault(require("mime"));
-
 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)({
   "&.mdc-drawer": {
     width: 360
@@ -175,37 +135,29 @@ var style = {
     }
   }, "label:drawerContent;")
 };
-
 var isImage = function isImage(file) {
   var fileType = _mime.default.getType(file && file.name);
-
   if (fileType && typeof fileType === "string") {
     return fileType.includes("image");
   }
-
   return false;
 };
-
 var FileDetails = function FileDetails(props) {
   var file = props.file,
-      uploadFile = props.uploadFile,
-      validateFiles = props.validateFiles;
+    uploadFile = props.uploadFile,
+    validateFiles = props.validateFiles;
   var filePlugin = (0, _getFileTypePlugin.default)(file);
   var actions = (0, _get.default)(filePlugin, "fileDetails.actions") || (0, _get.default)(filePlugin, "actions") || [];
-
   var _useFileManager = (0, _FileManagerContext.useFileManager)(),
-      hideFileDetails = _useFileManager.hideFileDetails,
-      queryParams = _useFileManager.queryParams;
-
+    hideFileDetails = _useFileManager.hideFileDetails,
+    queryParams = _useFileManager.queryParams;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      darkImageBackground = _useState2[0],
-      setDarkImageBackground = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    darkImageBackground = _useState2[0],
+    setDarkImageBackground = _useState2[1];
   var _useSecurity = (0, _appSecurity.useSecurity)(),
-      identity = _useSecurity.identity,
-      getPermission = _useSecurity.getPermission;
-
+    identity = _useSecurity.identity,
+    getPermission = _useSecurity.getPermission;
   var fmFilePermission = (0, _react.useMemo)(function () {
     return getPermission("fm.file");
   }, [identity]);
@@ -214,21 +166,16 @@ var FileDetails = function FileDetails(props) {
     if (!fmFilePermission) {
       return false;
     }
-
     if (fmFilePermission.own) {
       var identityId = identity ? identity.id || identity.login : null;
-
       if (!identityId) {
         return false;
       }
-
       return (0, _get.default)(item, "createdBy.id") === identityId;
     }
-
     if (typeof fmFilePermission.rwd === "string") {
       return fmFilePermission.rwd.includes("d");
     }
-
     return true;
   }, [fmFilePermission]);
   (0, _reactHotkeyz.useHotkeys)({
@@ -238,100 +185,92 @@ var FileDetails = function FileDetails(props) {
       esc: hideFileDetails
     }
   });
-
   var _useMutation = (0, _reactHooks.useMutation)(_graphql.DELETE_FILE, {
-    update: function update(cache) {
-      var _listTagsData$fileMan;
-
-      // 1. Update files list cache
-      var data = (0, _cloneDeep.default)(cache.readQuery({
-        query: _graphql.LIST_FILES,
-        variables: queryParams
-      }));
-
-      if (!data) {
-        data = {
-          fileManager: {
-            listFiles: {
-              data: [],
-              error: null,
-              meta: {
-                hasMoreItems: false,
-                cursor: null,
-                totalItem: 0
+      update: function update(cache) {
+        var _listTagsData$fileMan;
+        // 1. Update files list cache
+        var data = (0, _cloneDeep.default)(cache.readQuery({
+          query: _graphql.LIST_FILES,
+          variables: queryParams
+        }));
+        if (!data) {
+          data = {
+            fileManager: {
+              listFiles: {
+                data: [],
+                error: null,
+                meta: {
+                  hasMoreItems: false,
+                  cursor: null,
+                  totalItem: 0
+                }
               }
             }
-          }
-        };
-      }
-
-      var filteredList = data.fileManager.listFiles.data.filter(function (item) {
-        return item.id !== file.id;
-      });
-      var selectedFile = data.fileManager.listFiles.data.find(function (item) {
-        return item.id === file.id;
-      });
-      cache.writeQuery({
-        query: _graphql.LIST_FILES,
-        variables: queryParams,
-        data: (0, _set.default)(data, "fileManager.listFiles.data", filteredList)
-      }); // 2. Update "ListTags" cache
-
-      if (!selectedFile || Array.isArray(selectedFile.tags) === false) {
-        return;
-      }
-
-      var tagCountMap = {}; // Prepare "tag" count map
-
-      data.fileManager.listFiles.data.forEach(function (file) {
-        if (!Array.isArray(file.tags)) {
+          };
+        }
+        var filteredList = data.fileManager.listFiles.data.filter(function (item) {
+          return item.id !== file.id;
+        });
+        var selectedFile = data.fileManager.listFiles.data.find(function (item) {
+          return item.id === file.id;
+        });
+        cache.writeQuery({
+          query: _graphql.LIST_FILES,
+          variables: queryParams,
+          data: (0, _set.default)(data, "fileManager.listFiles.data", filteredList)
+        });
+        // 2. Update "ListTags" cache
+        if (!selectedFile || Array.isArray(selectedFile.tags) === false) {
           return;
         }
-
-        file.tags.forEach(function (tag) {
-          if (tagCountMap[tag]) {
-            tagCountMap[tag] += 1;
-          } else {
-            tagCountMap[tag] = 1;
+        var tagCountMap = {};
+        // Prepare "tag" count map
+        data.fileManager.listFiles.data.forEach(function (file) {
+          if (!Array.isArray(file.tags)) {
+            return;
           }
+          file.tags.forEach(function (tag) {
+            if (tagCountMap[tag]) {
+              tagCountMap[tag] += 1;
+            } else {
+              tagCountMap[tag] = 1;
+            }
+          });
         });
-      }); // Get tags from cache
 
-      var listTagsData = (0, _cloneDeep.default)(cache.readQuery({
-        query: _graphql.LIST_TAGS,
-        variables: {
-          where: (0, _FileManagerContext.getWhere)(queryParams.scope)
-        }
-      })); // Remove selected file tags from list.
-
-      var filteredTags = ((listTagsData === null || listTagsData === void 0 ? void 0 : (_listTagsData$fileMan = listTagsData.fileManager) === null || _listTagsData$fileMan === void 0 ? void 0 : _listTagsData$fileMan.listTags) || []).filter(function (tag) {
-        if (!selectedFile.tags.includes(tag)) {
-          return true;
-        }
-
-        return tagCountMap[tag] > 1;
-      }); // Write it to cache
-
-      cache.writeQuery({
-        query: _graphql.LIST_TAGS,
-        variables: {
-          where: (0, _FileManagerContext.getWhere)(queryParams.scope)
-        },
-        data: (0, _set.default)(data, "fileManager.listTags", filteredTags)
-      });
-    }
-  }),
-      _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 1),
-      deleteFile = _useMutation2[0];
+        // Get tags from cache
+        var listTagsData = (0, _cloneDeep.default)(cache.readQuery({
+          query: _graphql.LIST_TAGS,
+          variables: {
+            where: (0, _FileManagerContext.getWhere)(queryParams.scope)
+          }
+        }));
+        // Remove selected file tags from list.
+        var filteredTags = ((listTagsData === null || listTagsData === void 0 ? void 0 : (_listTagsData$fileMan = listTagsData.fileManager) === null || _listTagsData$fileMan === void 0 ? void 0 : _listTagsData$fileMan.listTags) || []).filter(function (tag) {
+          if (!selectedFile.tags.includes(tag)) {
+            return true;
+          }
+          return tagCountMap[tag] > 1;
+        });
 
+        // Write it to cache
+        cache.writeQuery({
+          query: _graphql.LIST_TAGS,
+          variables: {
+            where: (0, _FileManagerContext.getWhere)(queryParams.scope)
+          },
+          data: (0, _set.default)(data, "fileManager.listTags", filteredTags)
+        });
+      }
+    }),
+    _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 1),
+    deleteFile = _useMutation2[0];
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
+    showSnackbar = _useSnackbar.showSnackbar;
   var renderDeleteImageAction = (0, _react.useCallback)(function (file) {
     if (!canDelete(file)) {
       return null;
     }
-
     var fileDeleteConfirmationProps = {
       title: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Delete file"]))),
       message: file && /*#__PURE__*/_react.default.createElement("span", null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["You're about to delete file {name}. Are you sure you want to continue?"])))({
@@ -358,23 +297,19 @@ var FileDetails = function FileDetails(props) {
         onClick: function onClick() {
           return showConfirmation( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
             return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    return deleteFile({
-                      variables: {
-                        id: file.id
-                      }
-                    });
-
-                  case 2:
-                    showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["File deleted successfully."]))));
-
-                  case 3:
-                  case "end":
-                    return _context.stop();
-                }
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return deleteFile({
+                    variables: {
+                      id: file.id
+                    }
+                  });
+                case 2:
+                  showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["File deleted successfully."]))));
+                case 3:
+                case "end":
+                  return _context.stop();
               }
             }, _callee);
           })));
@@ -386,7 +321,6 @@ var FileDetails = function FileDetails(props) {
     if (file && typeof file.type === "string") {
       return file.type.includes("image") ? /*#__PURE__*/_react.default.createElement(_insert_photo24px.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_insert_drive_file24px.ReactComponent, null);
     }
-
     return /*#__PURE__*/_react.default.createElement(_insert_photo24px.ReactComponent, null);
   }, [file]);
   return /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
@@ -469,6 +403,5 @@ var FileDetails = function FileDetails(props) {
     key: props.file.id
   }, props)))))));
 };
-
 var _default = FileDetails;
 exports.default = _default;

package/components/FileManager/FileDetails.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","fileDetailsSidebar","css","width","style","wrapper","height","overflowY","header","textAlign","marginBottom","paddingTop","textTransform","color","fontWeight","preview","boxSizing","display","justifyContent","alignItems","position","margin","img","objectFit","maxHeight","maxWidth","transform","backgroundColor","download","list","li","padding","lineHeight","minHeight","marginRight","flex","whiteSpace","overflow","textOverflow","drawerContent","isImage","file","fileType","mime","getType","name","includes","FileDetails","props","uploadFile","validateFiles","filePlugin","getFileTypePlugin","actions","get","useFileManager","hideFileDetails","queryParams","useState","darkImageBackground","setDarkImageBackground","useSecurity","identity","getPermission","fmFilePermission","useMemo","canDelete","useCallback","item","own","identityId","id","login","rwd","useHotkeys","zIndex","disabled","keys","esc","useMutation","DELETE_FILE","update","cache","data","cloneDeep","readQuery","query","LIST_FILES","variables","fileManager","listFiles","error","meta","hasMoreItems","cursor","totalItem","filteredList","filter","selectedFile","find","writeQuery","set","Array","isArray","tags","tagCountMap","forEach","tag","listTagsData","LIST_TAGS","where","getWhere","scope","filteredTags","listTags","deleteFile","useSnackbar","showSnackbar","renderDeleteImageAction","fileDeleteConfirmationProps","title","message","showConfirmation","fileTypeIcon","type","Boolean","classNames","dark","render","navigator","clipboard","writeText","src","map","Component","index","bytes","format","size","unitSeparator","dayjs","createdOn"],"sources":["FileDetails.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport bytes from \"bytes\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Drawer, DrawerContent } from \"@webiny/ui/Drawer\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport getFileTypePlugin from \"./getFileTypePlugin\";\nimport dayjs from \"dayjs\";\nimport get from \"lodash/get\";\nimport set from \"lodash/set\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport Tags from \"./FileDetails/Tags\";\nimport Name from \"./FileDetails/Name\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\n/**\n * Package react-hotkeyz has no types.\n */\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { ReactComponent as CopyContentIcon } from \"./icons/content_copy-black-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/delete.svg\";\nimport { ReactComponent as ImageIcon } from \"../../assets/icons/insert_photo-24px.svg\";\nimport { ReactComponent as FileIcon } from \"../../assets/icons/insert_drive_file-24px.svg\";\nimport { ReactComponent as CalendarIcon } from \"../../assets/icons/today-24px.svg\";\nimport { ReactComponent as HighlightIcon } from \"../../assets/icons/highlight-24px.svg\";\nimport { getWhere, useFileManager } from \"./FileManagerContext\";\nimport { useMutation } from \"@apollo/react-hooks\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { useSecurity } from \"@webiny/app-security\";\nimport { ConfirmationDialog } from \"@webiny/ui/ConfirmationDialog\";\nimport {\n    DELETE_FILE,\n    DeleteFileMutationResponse,\n    DeleteFileMutationVariables,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./graphql\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport mime from \"mime\";\nimport { FileItem, FileManagerSecurityPermission } from \"./types\";\nimport { FilesRenderChildren } from \"react-butterfiles\";\n\nconst t = i18n.ns(\"app-admin/file-manager/file-details\");\n\nconst fileDetailsSidebar = css({\n    \"&.mdc-drawer\": {\n        width: 360\n    }\n});\n\ndeclare global {\n    // eslint-disable-next-line\n    namespace JSX {\n        interface IntrinsicElements {\n            \"li-title\": {\n                children?: React.ReactNode;\n            };\n\n            \"li-content\": {\n                children?: React.ReactNode;\n            };\n        }\n    }\n}\n\nconst style: any = {\n    wrapper: css({\n        height: \"100vh\",\n        overflowY: \"auto\"\n    }),\n    header: css({\n        textAlign: \"center\",\n        marginBottom: 24,\n        paddingTop: 16,\n        \"& span\": {\n            textTransform: \"capitalize\",\n            color: \"var(--mdc-theme-on-surface)\",\n            fontWeight: 600\n        }\n    }),\n    preview: css({\n        boxSizing: \"border-box\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        position: \"relative\",\n        width: \"100%\",\n        height: 300,\n        margin: \"0 auto 24px\",\n        img: {\n            objectFit: \"contain\",\n            maxHeight: 300,\n            maxWidth: 300,\n            width: \"100%\",\n            position: \"static\",\n            transform: \"none\"\n        },\n        \"&.dark\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }),\n    download: css({\n        textAlign: \"center\",\n        margin: \"0 auto\",\n        width: \"100%\",\n        \"& .icon--active\": {\n            \"&.mdc-icon-button\": {\n                color: \"var(--mdc-theme-text-on-primary)\"\n            }\n        }\n    }),\n    list: css({\n        textAlign: \"left\",\n        color: \"var(--mdc-theme-on-surface)\",\n        li: {\n            padding: \"12px 16px\",\n            lineHeight: \"22px\",\n            \"li-title\": {\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-start\",\n                minHeight: 48,\n                \"& .list-item__title\": {\n                    fontWeight: 600\n                },\n                \"& .list-item__icon\": {\n                    marginRight: 24\n                },\n                \"& .list-item__content\": {\n                    flex: \"1 0 200px\"\n                }\n            },\n            \"li-content\": {\n                width: \"100%\",\n                display: \"block\",\n                \"& .list-item__truncate\": {\n                    display: \"block\",\n                    width: \"100%\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\"\n                }\n            }\n        }\n    }),\n    drawerContent: css({\n        \"&.mdc-drawer__content\": {\n            height: \"auto\",\n            overflowY: \"inherit\"\n        }\n    })\n};\ninterface FileDetailsProps {\n    canEdit: (item: any) => boolean;\n    file: FileItem;\n    uploadFile: (files: FileItem[] | FileItem) => Promise<number | null>;\n    validateFiles: FilesRenderChildren[\"validateFiles\"];\n    [key: string]: any;\n}\n\nconst isImage = (file: FileItem) => {\n    const fileType = mime.getType(file && file.name);\n\n    if (fileType && typeof fileType === \"string\") {\n        return fileType.includes(\"image\");\n    }\n\n    return false;\n};\n\nconst FileDetails: React.FC<FileDetailsProps> = props => {\n    const { file, uploadFile, validateFiles } = props;\n\n    const filePlugin = getFileTypePlugin(file);\n    const actions: React.FC[] =\n        get(filePlugin, \"fileDetails.actions\") || get(filePlugin, \"actions\") || [];\n\n    const { hideFileDetails, queryParams } = useFileManager();\n    const [darkImageBackground, setDarkImageBackground] = useState(false);\n\n    const { identity, getPermission } = useSecurity();\n    const fmFilePermission = useMemo((): FileManagerSecurityPermission | null => {\n        return getPermission(\"fm.file\");\n    }, [identity]);\n    const canDelete = useCallback(\n        item => {\n            // Bail out early if no access\n            if (!fmFilePermission) {\n                return false;\n            }\n            if (fmFilePermission.own) {\n                const identityId = identity ? identity.id || identity.login : null;\n                if (!identityId) {\n                    return false;\n                }\n                return get(item, \"createdBy.id\") === identityId;\n            }\n            if (typeof fmFilePermission.rwd === \"string\") {\n                return fmFilePermission.rwd.includes(\"d\");\n            }\n            return true;\n        },\n        [fmFilePermission]\n    );\n\n    useHotkeys({\n        zIndex: 55,\n        disabled: !file,\n        keys: {\n            esc: hideFileDetails\n        }\n    });\n\n    const [deleteFile] = useMutation<DeleteFileMutationResponse, DeleteFileMutationVariables>(\n        DELETE_FILE,\n        {\n            update: cache => {\n                // 1. Update files list cache\n                let data = cloneDeep(\n                    cache.readQuery<ListFilesQueryResponse>({\n                        query: LIST_FILES,\n                        variables: queryParams\n                    })\n                );\n                if (!data) {\n                    data = {\n                        fileManager: {\n                            listFiles: {\n                                data: [],\n                                error: null,\n                                meta: {\n                                    hasMoreItems: false,\n                                    cursor: null,\n                                    totalItem: 0\n                                }\n                            }\n                        }\n                    };\n                }\n                const filteredList = data.fileManager.listFiles.data.filter(\n                    (item: FileItem) => item.id !== file.id\n                );\n                const selectedFile = data.fileManager.listFiles.data.find(\n                    (item: FileItem) => item.id === file.id\n                );\n\n                cache.writeQuery({\n                    query: LIST_FILES,\n                    variables: queryParams,\n                    data: set(data, \"fileManager.listFiles.data\", filteredList)\n                });\n                // 2. Update \"ListTags\" cache\n                if (!selectedFile || Array.isArray(selectedFile.tags) === false) {\n                    return;\n                }\n                const tagCountMap: Record<string, number> = {};\n                // Prepare \"tag\" count map\n                data.fileManager.listFiles.data.forEach((file: FileItem) => {\n                    if (!Array.isArray(file.tags)) {\n                        return;\n                    }\n                    file.tags.forEach(tag => {\n                        if (tagCountMap[tag]) {\n                            tagCountMap[tag] += 1;\n                        } else {\n                            tagCountMap[tag] = 1;\n                        }\n                    });\n                });\n\n                // Get tags from cache\n                const listTagsData = cloneDeep(\n                    cache.readQuery<ListFileTagsQueryResponse>({\n                        query: LIST_TAGS,\n                        variables: { where: getWhere(queryParams.scope) }\n                    })\n                );\n                // Remove selected file tags from list.\n                const filteredTags = (listTagsData?.fileManager?.listTags || []).filter(\n                    (tag: string) => {\n                        if (!selectedFile.tags.includes(tag)) {\n                            return true;\n                        }\n                        return tagCountMap[tag] > 1;\n                    }\n                );\n\n                // Write it to cache\n                cache.writeQuery({\n                    query: LIST_TAGS,\n                    variables: { where: getWhere(queryParams.scope) },\n                    data: set(data, \"fileManager.listTags\", filteredTags)\n                });\n            }\n        }\n    );\n    const { showSnackbar } = useSnackbar();\n\n    const renderDeleteImageAction = useCallback(file => {\n        if (!canDelete(file)) {\n            return null;\n        }\n        const fileDeleteConfirmationProps = {\n            title: t`Delete file`,\n            message: file && (\n                <span>\n                    {t`You're about to delete file {name}. Are you sure you want to continue?`({\n                        name: file.name\n                    })}\n                </span>\n            )\n        };\n        return (\n            <ConfirmationDialog\n                {...fileDeleteConfirmationProps}\n                data-testid={\"fm-delete-file-confirmation-dialog\"}\n                style={{ zIndex: 100 }}\n            >\n                {({ showConfirmation }) => {\n                    return (\n                        <Tooltip\n                            content={\n                                isImage(file) ? (\n                                    <span>{t`Delete image`}</span>\n                                ) : (\n                                    <span>{t`Delete file`}</span>\n                                )\n                            }\n                            placement={\"bottom\"}\n                        >\n                            <IconButton\n                                data-testid={\"fm-delete-file-button\"}\n                                icon={<DeleteIcon style={{ margin: \"0 8px 0 0\" }} />}\n                                onClick={() =>\n                                    showConfirmation(async () => {\n                                        await deleteFile({\n                                            variables: {\n                                                id: file.id\n                                            }\n                                        });\n                                        showSnackbar(t`File deleted successfully.`);\n                                    })\n                                }\n                            />\n                        </Tooltip>\n                    );\n                }}\n            </ConfirmationDialog>\n        );\n    }, []);\n\n    const fileTypeIcon = useMemo(() => {\n        if (file && typeof file.type === \"string\") {\n            return file.type.includes(\"image\") ? <ImageIcon /> : <FileIcon />;\n        }\n        return <ImageIcon />;\n    }, [file]);\n\n    return (\n        <Drawer\n            className={fileDetailsSidebar}\n            dir=\"rtl\"\n            modal\n            open={Boolean(file)}\n            onClose={hideFileDetails}\n            data-testid={\"fm.file-details.drawer\"}\n        >\n            {file && (\n                <div className={style.wrapper} dir=\"ltr\">\n                    <div className={style.header}>\n                        <Typography use={\"headline5\"}>{t`File details`}</Typography>\n                    </div>\n                    <div\n                        className={classNames(style.preview, {\n                            dark: darkImageBackground\n                        })}\n                    >\n                        {filePlugin &&\n                            filePlugin.render({\n                                /**\n                                 * TODO: @ts-refactor\n                                 * Figure out which type is the file\n                                 */\n                                // @ts-ignore\n                                file,\n                                uploadFile,\n                                validateFiles\n                            })}\n                    </div>\n                    <div className={style.download}>\n                        <>\n                            <Tooltip content={<span>{t`Copy URL`}</span>} placement={\"bottom\"}>\n                                <IconButton\n                                    onClick={() => {\n                                        navigator.clipboard.writeText(file.src);\n                                        showSnackbar(t`URL copied successfully.`);\n                                    }}\n                                    icon={<CopyContentIcon style={{ margin: \"0 8px 0 0\" }} />}\n                                />\n                            </Tooltip>\n\n                            {actions.map((Component: React.FC, index: number) => (\n                                <Component key={index} {...props} />\n                            ))}\n                            {renderDeleteImageAction(file)}\n                            {/* Render background switcher */}\n                            <Tooltip content={t`Toggle background`} placement={\"bottom\"}>\n                                <IconButton\n                                    icon={<HighlightIcon />}\n                                    onClick={() => setDarkImageBackground(!darkImageBackground)}\n                                    className={classNames({ \"icon--active\": darkImageBackground })}\n                                />\n                            </Tooltip>\n                        </>\n                    </div>\n                    <DrawerContent dir=\"ltr\" className={style.drawerContent}>\n                        <ul className={style.list}>\n                            <li>\n                                <Name {...props} />\n                            </li>\n                            <li>\n                                <li-title>\n                                    <Icon className={\"list-item__icon\"} icon={fileTypeIcon} />\n                                    <div>\n                                        <Typography use={\"subtitle1\"}>{file.type}</Typography>{\" \"}\n                                        {\" - \"}\n                                        <Typography use={\"subtitle1\"}>\n                                            {bytes.format(file.size, { unitSeparator: \" \" })}\n                                        </Typography>\n                                    </div>\n                                </li-title>\n                            </li>\n                            <li>\n                                <li-title>\n                                    <Icon className={\"list-item__icon\"} icon={<CalendarIcon />} />\n                                    <div>\n                                        <Typography use={\"subtitle1\"}>\n                                            {dayjs(file.createdOn).format(\"DD MMM YYYY [at] HH:mm\")}\n                                        </Typography>\n                                    </div>\n                                </li-title>\n                            </li>\n                            <li>\n                                <Tags key={props.file.id} {...props} />\n                            </li>\n                        </ul>\n                    </DrawerContent>\n                </div>\n            )}\n        </Drawer>\n    );\n};\n\nexport default FileDetails;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","fileDetailsSidebar","css","width","style","wrapper","height","overflowY","header","textAlign","marginBottom","paddingTop","textTransform","color","fontWeight","preview","boxSizing","display","justifyContent","alignItems","position","margin","img","objectFit","maxHeight","maxWidth","transform","backgroundColor","download","list","li","padding","lineHeight","minHeight","marginRight","flex","whiteSpace","overflow","textOverflow","drawerContent","isImage","file","fileType","mime","getType","name","includes","FileDetails","props","uploadFile","validateFiles","filePlugin","getFileTypePlugin","actions","get","useFileManager","hideFileDetails","queryParams","useState","darkImageBackground","setDarkImageBackground","useSecurity","identity","getPermission","fmFilePermission","useMemo","canDelete","useCallback","item","own","identityId","id","login","rwd","useHotkeys","zIndex","disabled","keys","esc","useMutation","DELETE_FILE","update","cache","data","cloneDeep","readQuery","query","LIST_FILES","variables","fileManager","listFiles","error","meta","hasMoreItems","cursor","totalItem","filteredList","filter","selectedFile","find","writeQuery","set","Array","isArray","tags","tagCountMap","forEach","tag","listTagsData","LIST_TAGS","where","getWhere","scope","filteredTags","listTags","deleteFile","useSnackbar","showSnackbar","renderDeleteImageAction","fileDeleteConfirmationProps","title","message","showConfirmation","fileTypeIcon","type","Boolean","classNames","dark","render","navigator","clipboard","writeText","src","map","Component","index","bytes","format","size","unitSeparator","dayjs","createdOn"],"sources":["FileDetails.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport bytes from \"bytes\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Drawer, DrawerContent } from \"@webiny/ui/Drawer\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport getFileTypePlugin from \"./getFileTypePlugin\";\nimport dayjs from \"dayjs\";\nimport get from \"lodash/get\";\nimport set from \"lodash/set\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport Tags from \"./FileDetails/Tags\";\nimport Name from \"./FileDetails/Name\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\n/**\n * Package react-hotkeyz has no types.\n */\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { ReactComponent as CopyContentIcon } from \"./icons/content_copy-black-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/delete.svg\";\nimport { ReactComponent as ImageIcon } from \"../../assets/icons/insert_photo-24px.svg\";\nimport { ReactComponent as FileIcon } from \"../../assets/icons/insert_drive_file-24px.svg\";\nimport { ReactComponent as CalendarIcon } from \"../../assets/icons/today-24px.svg\";\nimport { ReactComponent as HighlightIcon } from \"../../assets/icons/highlight-24px.svg\";\nimport { getWhere, useFileManager } from \"./FileManagerContext\";\nimport { useMutation } from \"@apollo/react-hooks\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { useSecurity } from \"@webiny/app-security\";\nimport { ConfirmationDialog } from \"@webiny/ui/ConfirmationDialog\";\nimport {\n    DELETE_FILE,\n    DeleteFileMutationResponse,\n    DeleteFileMutationVariables,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./graphql\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport mime from \"mime\";\nimport { FileItem, FileManagerSecurityPermission } from \"./types\";\nimport { FilesRenderChildren } from \"react-butterfiles\";\n\nconst t = i18n.ns(\"app-admin/file-manager/file-details\");\n\nconst fileDetailsSidebar = css({\n    \"&.mdc-drawer\": {\n        width: 360\n    }\n});\n\ndeclare global {\n    // eslint-disable-next-line\n    namespace JSX {\n        interface IntrinsicElements {\n            \"li-title\": {\n                children?: React.ReactNode;\n            };\n\n            \"li-content\": {\n                children?: React.ReactNode;\n            };\n        }\n    }\n}\n\nconst style: any = {\n    wrapper: css({\n        height: \"100vh\",\n        overflowY: \"auto\"\n    }),\n    header: css({\n        textAlign: \"center\",\n        marginBottom: 24,\n        paddingTop: 16,\n        \"& span\": {\n            textTransform: \"capitalize\",\n            color: \"var(--mdc-theme-on-surface)\",\n            fontWeight: 600\n        }\n    }),\n    preview: css({\n        boxSizing: \"border-box\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        position: \"relative\",\n        width: \"100%\",\n        height: 300,\n        margin: \"0 auto 24px\",\n        img: {\n            objectFit: \"contain\",\n            maxHeight: 300,\n            maxWidth: 300,\n            width: \"100%\",\n            position: \"static\",\n            transform: \"none\"\n        },\n        \"&.dark\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }),\n    download: css({\n        textAlign: \"center\",\n        margin: \"0 auto\",\n        width: \"100%\",\n        \"& .icon--active\": {\n            \"&.mdc-icon-button\": {\n                color: \"var(--mdc-theme-text-on-primary)\"\n            }\n        }\n    }),\n    list: css({\n        textAlign: \"left\",\n        color: \"var(--mdc-theme-on-surface)\",\n        li: {\n            padding: \"12px 16px\",\n            lineHeight: \"22px\",\n            \"li-title\": {\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-start\",\n                minHeight: 48,\n                \"& .list-item__title\": {\n                    fontWeight: 600\n                },\n                \"& .list-item__icon\": {\n                    marginRight: 24\n                },\n                \"& .list-item__content\": {\n                    flex: \"1 0 200px\"\n                }\n            },\n            \"li-content\": {\n                width: \"100%\",\n                display: \"block\",\n                \"& .list-item__truncate\": {\n                    display: \"block\",\n                    width: \"100%\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\"\n                }\n            }\n        }\n    }),\n    drawerContent: css({\n        \"&.mdc-drawer__content\": {\n            height: \"auto\",\n            overflowY: \"inherit\"\n        }\n    })\n};\ninterface FileDetailsProps {\n    canEdit: (item: any) => boolean;\n    file: FileItem;\n    uploadFile: (files: FileItem[] | FileItem) => Promise<number | null>;\n    validateFiles: FilesRenderChildren[\"validateFiles\"];\n    [key: string]: any;\n}\n\nconst isImage = (file: FileItem) => {\n    const fileType = mime.getType(file && file.name);\n\n    if (fileType && typeof fileType === \"string\") {\n        return fileType.includes(\"image\");\n    }\n\n    return false;\n};\n\nconst FileDetails: React.FC<FileDetailsProps> = props => {\n    const { file, uploadFile, validateFiles } = props;\n\n    const filePlugin = getFileTypePlugin(file);\n    const actions: React.FC[] =\n        get(filePlugin, \"fileDetails.actions\") || get(filePlugin, \"actions\") || [];\n\n    const { hideFileDetails, queryParams } = useFileManager();\n    const [darkImageBackground, setDarkImageBackground] = useState(false);\n\n    const { identity, getPermission } = useSecurity();\n    const fmFilePermission = useMemo((): FileManagerSecurityPermission | null => {\n        return getPermission(\"fm.file\");\n    }, [identity]);\n    const canDelete = useCallback(\n        item => {\n            // Bail out early if no access\n            if (!fmFilePermission) {\n                return false;\n            }\n            if (fmFilePermission.own) {\n                const identityId = identity ? identity.id || identity.login : null;\n                if (!identityId) {\n                    return false;\n                }\n                return get(item, \"createdBy.id\") === identityId;\n            }\n            if (typeof fmFilePermission.rwd === \"string\") {\n                return fmFilePermission.rwd.includes(\"d\");\n            }\n            return true;\n        },\n        [fmFilePermission]\n    );\n\n    useHotkeys({\n        zIndex: 55,\n        disabled: !file,\n        keys: {\n            esc: hideFileDetails\n        }\n    });\n\n    const [deleteFile] = useMutation<DeleteFileMutationResponse, DeleteFileMutationVariables>(\n        DELETE_FILE,\n        {\n            update: cache => {\n                // 1. Update files list cache\n                let data = cloneDeep(\n                    cache.readQuery<ListFilesQueryResponse>({\n                        query: LIST_FILES,\n                        variables: queryParams\n                    })\n                );\n                if (!data) {\n                    data = {\n                        fileManager: {\n                            listFiles: {\n                                data: [],\n                                error: null,\n                                meta: {\n                                    hasMoreItems: false,\n                                    cursor: null,\n                                    totalItem: 0\n                                }\n                            }\n                        }\n                    };\n                }\n                const filteredList = data.fileManager.listFiles.data.filter(\n                    (item: FileItem) => item.id !== file.id\n                );\n                const selectedFile = data.fileManager.listFiles.data.find(\n                    (item: FileItem) => item.id === file.id\n                );\n\n                cache.writeQuery({\n                    query: LIST_FILES,\n                    variables: queryParams,\n                    data: set(data, \"fileManager.listFiles.data\", filteredList)\n                });\n                // 2. Update \"ListTags\" cache\n                if (!selectedFile || Array.isArray(selectedFile.tags) === false) {\n                    return;\n                }\n                const tagCountMap: Record<string, number> = {};\n                // Prepare \"tag\" count map\n                data.fileManager.listFiles.data.forEach((file: FileItem) => {\n                    if (!Array.isArray(file.tags)) {\n                        return;\n                    }\n                    file.tags.forEach(tag => {\n                        if (tagCountMap[tag]) {\n                            tagCountMap[tag] += 1;\n                        } else {\n                            tagCountMap[tag] = 1;\n                        }\n                    });\n                });\n\n                // Get tags from cache\n                const listTagsData = cloneDeep(\n                    cache.readQuery<ListFileTagsQueryResponse>({\n                        query: LIST_TAGS,\n                        variables: { where: getWhere(queryParams.scope) }\n                    })\n                );\n                // Remove selected file tags from list.\n                const filteredTags = (listTagsData?.fileManager?.listTags || []).filter(\n                    (tag: string) => {\n                        if (!selectedFile.tags.includes(tag)) {\n                            return true;\n                        }\n                        return tagCountMap[tag] > 1;\n                    }\n                );\n\n                // Write it to cache\n                cache.writeQuery({\n                    query: LIST_TAGS,\n                    variables: { where: getWhere(queryParams.scope) },\n                    data: set(data, \"fileManager.listTags\", filteredTags)\n                });\n            }\n        }\n    );\n    const { showSnackbar } = useSnackbar();\n\n    const renderDeleteImageAction = useCallback(file => {\n        if (!canDelete(file)) {\n            return null;\n        }\n        const fileDeleteConfirmationProps = {\n            title: t`Delete file`,\n            message: file && (\n                <span>\n                    {t`You're about to delete file {name}. Are you sure you want to continue?`({\n                        name: file.name\n                    })}\n                </span>\n            )\n        };\n        return (\n            <ConfirmationDialog\n                {...fileDeleteConfirmationProps}\n                data-testid={\"fm-delete-file-confirmation-dialog\"}\n                style={{ zIndex: 100 }}\n            >\n                {({ showConfirmation }) => {\n                    return (\n                        <Tooltip\n                            content={\n                                isImage(file) ? (\n                                    <span>{t`Delete image`}</span>\n                                ) : (\n                                    <span>{t`Delete file`}</span>\n                                )\n                            }\n                            placement={\"bottom\"}\n                        >\n                            <IconButton\n                                data-testid={\"fm-delete-file-button\"}\n                                icon={<DeleteIcon style={{ margin: \"0 8px 0 0\" }} />}\n                                onClick={() =>\n                                    showConfirmation(async () => {\n                                        await deleteFile({\n                                            variables: {\n                                                id: file.id\n                                            }\n                                        });\n                                        showSnackbar(t`File deleted successfully.`);\n                                    })\n                                }\n                            />\n                        </Tooltip>\n                    );\n                }}\n            </ConfirmationDialog>\n        );\n    }, []);\n\n    const fileTypeIcon = useMemo(() => {\n        if (file && typeof file.type === \"string\") {\n            return file.type.includes(\"image\") ? <ImageIcon /> : <FileIcon />;\n        }\n        return <ImageIcon />;\n    }, [file]);\n\n    return (\n        <Drawer\n            className={fileDetailsSidebar}\n            dir=\"rtl\"\n            modal\n            open={Boolean(file)}\n            onClose={hideFileDetails}\n            data-testid={\"fm.file-details.drawer\"}\n        >\n            {file && (\n                <div className={style.wrapper} dir=\"ltr\">\n                    <div className={style.header}>\n                        <Typography use={\"headline5\"}>{t`File details`}</Typography>\n                    </div>\n                    <div\n                        className={classNames(style.preview, {\n                            dark: darkImageBackground\n                        })}\n                    >\n                        {filePlugin &&\n                            filePlugin.render({\n                                /**\n                                 * TODO: @ts-refactor\n                                 * Figure out which type is the file\n                                 */\n                                // @ts-ignore\n                                file,\n                                uploadFile,\n                                validateFiles\n                            })}\n                    </div>\n                    <div className={style.download}>\n                        <>\n                            <Tooltip content={<span>{t`Copy URL`}</span>} placement={\"bottom\"}>\n                                <IconButton\n                                    onClick={() => {\n                                        navigator.clipboard.writeText(file.src);\n                                        showSnackbar(t`URL copied successfully.`);\n                                    }}\n                                    icon={<CopyContentIcon style={{ margin: \"0 8px 0 0\" }} />}\n                                />\n                            </Tooltip>\n\n                            {actions.map((Component: React.FC, index: number) => (\n                                <Component key={index} {...props} />\n                            ))}\n                            {renderDeleteImageAction(file)}\n                            {/* Render background switcher */}\n                            <Tooltip content={t`Toggle background`} placement={\"bottom\"}>\n                                <IconButton\n                                    icon={<HighlightIcon />}\n                                    onClick={() => setDarkImageBackground(!darkImageBackground)}\n                                    className={classNames({ \"icon--active\": darkImageBackground })}\n                                />\n                            </Tooltip>\n                        </>\n                    </div>\n                    <DrawerContent dir=\"ltr\" className={style.drawerContent}>\n                        <ul className={style.list}>\n                            <li>\n                                <Name {...props} />\n                            </li>\n                            <li>\n                                <li-title>\n                                    <Icon className={\"list-item__icon\"} icon={fileTypeIcon} />\n                                    <div>\n                                        <Typography use={\"subtitle1\"}>{file.type}</Typography>{\" \"}\n                                        {\" - \"}\n                                        <Typography use={\"subtitle1\"}>\n                                            {bytes.format(file.size, { unitSeparator: \" \" })}\n                                        </Typography>\n                                    </div>\n                                </li-title>\n                            </li>\n                            <li>\n                                <li-title>\n                                    <Icon className={\"list-item__icon\"} icon={<CalendarIcon />} />\n                                    <div>\n                                        <Typography use={\"subtitle1\"}>\n                                            {dayjs(file.createdOn).format(\"DD MMM YYYY [at] HH:mm\")}\n                                        </Typography>\n                                    </div>\n                                </li-title>\n                            </li>\n                            <li>\n                                <Tags key={props.file.id} {...props} />\n                            </li>\n                        </ul>\n                    </DrawerContent>\n                </div>\n            )}\n        </Drawer>\n    );\n};\n\nexport default FileDetails;\n"],"mappings":"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"}