@webiny/app-file-manager 5.34.8 → 5.35.0-beta.1

package/FileManagerFileTypePlugin.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Plugin } from "@webiny/plugins";
+import { FileItem } from "@webiny/app-admin/types";
+export interface RenderParams {
+    file: FileItem;
+}
+interface Config {
+    types: string[];
+    actions?: React.ComponentType<RenderParams>[];
+    render(params: RenderParams): React.ReactNode;
+}
+export declare class FileManagerFileTypePlugin extends Plugin {
+    static readonly type: string;
+    private readonly config;
+    constructor(config?: Config);
+    get types(): string[];
+    get actions(): React.ComponentType<RenderParams>[];
+    render(params: RenderParams): React.ReactNode;
+}
+export {};

package/FileManagerFileTypePlugin.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileManagerFileTypePlugin = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _plugins = require("@webiny/plugins");
+var FileManagerFileTypePlugin = /*#__PURE__*/function (_Plugin) {
+  (0, _inherits2.default)(FileManagerFileTypePlugin, _Plugin);
+  var _super = (0, _createSuper2.default)(FileManagerFileTypePlugin);
+  function FileManagerFileTypePlugin(config) {
+    var _this;
+    (0, _classCallCheck2.default)(this, FileManagerFileTypePlugin);
+    _this = _super.call(this);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "config", void 0);
+    _this.config = config || {};
+    return _this;
+  }
+  (0, _createClass2.default)(FileManagerFileTypePlugin, [{
+    key: "types",
+    get: function get() {
+      return this.config.types || [];
+    }
+  }, {
+    key: "actions",
+    get: function get() {
+      return this.config.actions || [];
+    }
+  }, {
+    key: "render",
+    value: function render(params) {
+      if (!this.config.render) {
+        return null;
+      }
+      return this.config.render(params);
+    }
+  }]);
+  return FileManagerFileTypePlugin;
+}(_plugins.Plugin);
+exports.FileManagerFileTypePlugin = FileManagerFileTypePlugin;
+(0, _defineProperty2.default)(FileManagerFileTypePlugin, "type", "admin-file-manager-file-type");

package/FileManagerFileTypePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FileManagerFileTypePlugin","config","types","actions","params","render","Plugin"],"sources":["FileManagerFileTypePlugin.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Plugin } from \"@webiny/plugins\";\nimport { FileItem } from \"@webiny/app-admin/types\";\n\nexport interface RenderParams {\n    file: FileItem;\n}\n\ninterface Config {\n    types: string[];\n    actions?: React.ComponentType<RenderParams>[];\n    render(params: RenderParams): React.ReactNode;\n}\n\nexport class FileManagerFileTypePlugin extends Plugin {\n    public static override readonly type: string = \"admin-file-manager-file-type\";\n    private readonly config: Partial<Config>;\n\n    public constructor(config?: Config) {\n        super();\n        this.config = config || {};\n    }\n\n    get types(): string[] {\n        return this.config.types || [];\n    }\n\n    get actions(): React.ComponentType<RenderParams>[] {\n        return this.config.actions || [];\n    }\n\n    public render(params: RenderParams): React.ReactNode {\n        if (!this.config.render) {\n            return null;\n        }\n        return this.config.render(params);\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AACA;AAAyC,IAa5BA,yBAAyB;EAAA;EAAA;EAIlC,mCAAmBC,MAAe,EAAE;IAAA;IAAA;IAChC;IAAQ;IACR,MAAKA,MAAM,GAAGA,MAAM,IAAI,CAAC,CAAC;IAAC;EAC/B;EAAC;IAAA;IAAA,KAED,eAAsB;MAClB,OAAO,IAAI,CAACA,MAAM,CAACC,KAAK,IAAI,EAAE;IAClC;EAAC;IAAA;IAAA,KAED,eAAmD;MAC/C,OAAO,IAAI,CAACD,MAAM,CAACE,OAAO,IAAI,EAAE;IACpC;EAAC;IAAA;IAAA,OAED,gBAAcC,MAAoB,EAAmB;MACjD,IAAI,CAAC,IAAI,CAACH,MAAM,CAACI,MAAM,EAAE;QACrB,OAAO,IAAI;MACf;MACA,OAAO,IAAI,CAACJ,MAAM,CAACI,MAAM,CAACD,MAAM,CAAC;IACrC;EAAC;EAAA;AAAA,EAtB0CE,eAAM;AAAA;AAAA,8BAAxCN,yBAAyB,UACa,8BAA8B"}

package/app.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const FileManager: React.FC;

package/app.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileManager = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Settings = require("./modules/Settings");
+var _FileManagerApiProvider = require("./modules/FileManagerApiProvider");
+var _FileTypes = require("./modules/FileTypes");
+var _FileManagerRenderer = require("./modules/FileManagerRenderer");
+var FileManager = function FileManager() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Settings.SettingsModule, null), /*#__PURE__*/_react.default.createElement(_FileManagerApiProvider.FileManagerApiProviderModule, null), /*#__PURE__*/_react.default.createElement(_FileTypes.FileTypesModule, null), /*#__PURE__*/_react.default.createElement(_FileManagerRenderer.FileManagerRendererModule, null));
+};
+exports.FileManager = FileManager;

package/app.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FileManager"],"sources":["app.tsx"],"sourcesContent":["import React from \"react\";\nimport { SettingsModule } from \"~/modules/Settings\";\nimport { FileManagerApiProviderModule } from \"~/modules/FileManagerApiProvider\";\nimport { FileTypesModule } from \"~/modules/FileTypes\";\nimport { FileManagerRendererModule } from \"~/modules/FileManagerRenderer\";\n\nexport const FileManager: React.FC = () => {\n    return (\n        <>\n            <SettingsModule />\n            <FileManagerApiProviderModule />\n            <FileTypesModule />\n            <FileManagerRendererModule />\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEO,IAAMA,WAAqB,GAAG,SAAxBA,WAAqB,GAAS;EACvC,oBACI,yEACI,6BAAC,wBAAc,OAAG,eAClB,6BAAC,oDAA4B,OAAG,eAChC,6BAAC,0BAAe,OAAG,eACnB,6BAAC,8CAAyB,OAAG,CAC9B;AAEX,CAAC;AAAC"}

package/components/FileDetails/Aliases.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const AliasEditor: () => JSX.Element;
+export declare const Aliases: () => JSX.Element;

package/components/FileDetails/Aliases.js

@@ -0,0 +1,228 @@
+"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.Aliases = exports.AliasEditor = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _DynamicFieldset = require("@webiny/ui/DynamicFieldset");
+var _Input = require("@webiny/ui/Input");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Typography = require("@webiny/ui/Typography");
+var _Button = require("@webiny/ui/Button");
+var _validation = require("@webiny/validation");
+var _form = require("@webiny/form");
+var _Icon = require("@webiny/ui/Icon");
+var _link = require("@material-design-icons/svg/outlined/link.svg");
+var _edit = require("@material-design-icons/svg/outlined/edit.svg");
+var _delete = require("@material-design-icons/svg/outlined/delete.svg");
+var _appAdmin = require("@webiny/app-admin");
+var _ = require("../..");
+var Fieldset = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1buhfku0",
+  label: "Fieldset"
+})({
+  position: "relative",
+  width: "100%",
+  marginBottom: 15,
+  ".webiny-ui-button": {
+    position: "absolute",
+    display: "block",
+    right: 10,
+    top: 13
+  }
+});
+var Header = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1buhfku1",
+  label: "Header"
+})({
+  display: "flex",
+  justifyContent: "space-between",
+  marginBottom: 15
+});
+var DeleteAliasButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
+  label: "DeleteAliasButton",
+  target: "e1buhfku2"
+})("position:absolute;top:5px;right:5px;");
+var AliasList = /*#__PURE__*/(0, _styled.default)("ul", {
+  label: "AliasList",
+  target: "e1buhfku3"
+})("padding-left:48px;li{padding:0;}");
+var PATHNAME_REGEX = /^\/[/.a-zA-Z0-9-]+$/;
+var AliasEditor = function AliasEditor() {
+  var _useBind = (0, _form.useBind)({
+      name: "aliases"
+    }),
+    value = _useBind.value,
+    onChange = _useBind.onChange;
+  var addAlias = function addAlias() {
+    var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+    newValue.push("");
+    if (!onChange) {
+      return;
+    }
+    onChange(newValue);
+  };
+  var aliasValidator = (0, _react.useMemo)(function () {
+    return [_validation.validation.create("required"), function (value) {
+      if (!PATHNAME_REGEX.test(value)) {
+        throw new Error("Value must be a valid pathname.");
+      }
+    }];
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_DynamicFieldset.DynamicFieldset, {
+    value: value || [""],
+    onChange: onChange
+  }, function (_ref) {
+    var actions = _ref.actions,
+      header = _ref.header,
+      row = _ref.row,
+      empty = _ref.empty;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row(function (_ref2) {
+      var index = _ref2.index;
+      return /*#__PURE__*/_react.default.createElement(Fieldset, null, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+        validators: aliasValidator,
+        name: "aliases.".concat(index)
+      }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+        placeholder: "Alias",
+        description: "Enter a file path, e.g., /my/custom/file/path.png"
+      })), /*#__PURE__*/_react.default.createElement(DeleteAliasButton, {
+        icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null),
+        onClick: actions.remove(index)
+      }));
+    }), empty(function () {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "overline"
+      }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        onClick: addAlias
+      }, "+ Add Alias")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "body2"
+      }, "To make your file accessible via custom paths, add one or more aliases."));
+    }), header(function () {
+      return /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "overline"
+      }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        onClick: addAlias
+      }, "+ Add Alias"));
+    }));
+  });
+};
+exports.AliasEditor = AliasEditor;
+var EditButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
+  label: "EditButton",
+  target: "e1buhfku4"
+})("&.mdc-icon-button svg{width:20px;height:20px;}");
+var EmptyAddAlias = /*#__PURE__*/(0, _styled.default)(_Button.ButtonDefault, {
+  label: "EmptyAddAlias",
+  target: "e1buhfku5"
+})("&.mdc-button:not(:disabled){color:var(--mdc-theme-text-secondary-on-background);text-transform:capitalize;letter-spacing:initial;margin-left:-8px;}");
+var ButtonsWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "ButtonsWrapper",
+  target: "e1buhfku6"
+})("margin-top:16px;& button:first-of-type{margin-right:16px;}");
+var Aliases = function Aliases() {
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canEdit = _useFileManagerApi.canEdit;
+  var _useFileManagerView = (0, _.useFileManagerView)(),
+    updateFile = _useFileManagerView.updateFile;
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    updating = _useState4[0],
+    setUpdating = _useState4[1];
+  var isEditingAllowed = canEdit(file);
+  var getUrlWithAlias = function getUrlWithAlias(alias) {
+    var url = new URL(file.src);
+    url.pathname = alias;
+    return url.toString();
+  };
+  var onEdit = function onEdit() {
+    return setIsEditing(true);
+  };
+  var cancelEdit = function cancelEdit() {
+    return setIsEditing(false);
+  };
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref3) {
+      var aliases;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            aliases = _ref3.aliases;
+            setUpdating(true);
+            _context.next = 4;
+            return updateFile(file.id, {
+              aliases: aliases
+            });
+          case 4:
+            setUpdating(false);
+            setIsEditing(false);
+            showSnackbar("Aliases successfully updated.");
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmit(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var aliases = file.aliases || [];
+  return /*#__PURE__*/_react.default.createElement(_form.Form, {
+    // An empty string immediately creates an input, for better UX.
+    data: {
+      aliases: aliases.length ? aliases : [""]
+    },
+    onSubmit: onSubmit
+  }, function (_ref5) {
+    var 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(_link.ReactComponent, null)
+    }), aliases.length && !isEditing ? /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+      use: "subtitle1",
+      className: "list-item__content"
+    }, "File aliases") : null, !aliases.length && !isEditing ? /*#__PURE__*/_react.default.createElement(EmptyAddAlias, {
+      onClick: onEdit,
+      disabled: !isEditingAllowed,
+      "data-testid": "fm.alias.add"
+    }, "Add aliases...") : null, isEditingAllowed && aliases.length && !isEditing ? /*#__PURE__*/_react.default.createElement(EditButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
+      onClick: onEdit
+    }) : null), isEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AliasEditor, null), /*#__PURE__*/_react.default.createElement(ButtonsWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+      small: true,
+      onClick: submit,
+      disabled: updating,
+      "data-testid": "fm.aliases.submit"
+    }, updating ? "Saving..." : "Save changes"), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+      small: true,
+      onClick: cancelEdit
+    }, "Cancel"))) : /*#__PURE__*/_react.default.createElement(AliasList, null, aliases.map(function (alias) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: alias
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "subtitle1",
+        className: "list-item__content"
+      }, "-", " ", /*#__PURE__*/_react.default.createElement("a", {
+        rel: "noreferrer",
+        href: getUrlWithAlias(alias),
+        target: "_blank"
+      }, alias)));
+    })));
+  });
+};
+exports.Aliases = Aliases;

package/components/FileDetails/Aliases.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Fieldset","styled","position","width","marginBottom","display","right","top","Header","justifyContent","DeleteAliasButton","IconButton","AliasList","PATHNAME_REGEX","AliasEditor","useBind","name","value","onChange","addAlias","newValue","Array","isArray","push","aliasValidator","useMemo","validation","create","test","Error","actions","header","row","empty","index","remove","EditButton","EmptyAddAlias","ButtonDefault","ButtonsWrapper","Aliases","useFileManagerApi","canEdit","useFileManagerView","updateFile","useFile","file","useState","isEditing","setIsEditing","useSnackbar","showSnackbar","updating","setUpdating","isEditingAllowed","getUrlWithAlias","alias","url","URL","src","pathname","toString","onEdit","cancelEdit","onSubmit","aliases","id","length","submit","map"],"sources":["Aliases.tsx"],"sourcesContent":["import React, { Fragment, useMemo, useState } from \"react\";\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Input } from \"@webiny/ui/Input\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ButtonSecondary, ButtonDefault, IconButton, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { validation } from \"@webiny/validation\";\nimport { Form, Bind, FormOnSubmit, useBind } from \"@webiny/form\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { ReactComponent as LinkIcon } from \"@material-design-icons/svg/outlined/link.svg\";\nimport { ReactComponent as EditIcon } from \"@material-design-icons/svg/outlined/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete.svg\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerView } from \"~/index\";\n\nconst Fieldset = styled(\"div\")({\n    position: \"relative\",\n    width: \"100%\",\n    marginBottom: 15,\n    \".webiny-ui-button\": {\n        position: \"absolute\",\n        display: \"block\",\n        right: 10,\n        top: 13\n    }\n});\n\nconst Header = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    marginBottom: 15\n});\n\nconst DeleteAliasButton = styled(IconButton)`\n    position: absolute;\n    top: 5px;\n    right: 5px;\n`;\n\nconst AliasList = styled.ul`\n    padding-left: 48px;\n    li {\n        padding: 0;\n    }\n`;\n\nconst PATHNAME_REGEX = /^\\/[/.a-zA-Z0-9-]+$/;\n\nexport const AliasEditor = () => {\n    const { value, onChange } = useBind<string[]>({ name: \"aliases\" });\n\n    const addAlias = () => {\n        const newValue = Array.isArray(value) ? [...value] : [];\n        newValue.push(\"\");\n        if (!onChange) {\n            return;\n        }\n        onChange(newValue);\n    };\n\n    const aliasValidator = useMemo(() => {\n        return [\n            validation.create(\"required\"),\n            (value: string) => {\n                if (!PATHNAME_REGEX.test(value)) {\n                    throw new Error(\"Value must be a valid pathname.\");\n                }\n            }\n        ];\n    }, []);\n\n    return (\n        <DynamicFieldset value={value || [\"\"]} onChange={onChange}>\n            {({ actions, header, row, empty }) => (\n                <>\n                    {row(({ index }) => (\n                        <Fieldset>\n                            <Bind validators={aliasValidator} name={`aliases.${index}`}>\n                                <Input\n                                    placeholder={\"Alias\"}\n                                    description={\n                                        \"Enter a file path, e.g., /my/custom/file/path.png\"\n                                    }\n                                />\n                            </Bind>\n                            <DeleteAliasButton\n                                icon={<DeleteIcon />}\n                                onClick={actions.remove(index)}\n                            />\n                        </Fieldset>\n                    ))}\n                    {empty(() => (\n                        <Fragment>\n                            <Header>\n                                <Typography use={\"overline\"}>File Aliases</Typography>\n                                <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n                            </Header>\n                            <Typography use={\"body2\"}>\n                                To make your file accessible via custom paths, add one or more\n                                aliases.\n                            </Typography>\n                        </Fragment>\n                    ))}\n                    {header(() => (\n                        <Header>\n                            <Typography use={\"overline\"}>File Aliases</Typography>\n                            <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n                        </Header>\n                    ))}\n                </>\n            )}\n        </DynamicFieldset>\n    );\n};\n\nconst EditButton = styled(IconButton)`\n    &.mdc-icon-button svg {\n        width: 20px;\n        height: 20px;\n    }\n`;\n\nconst EmptyAddAlias = styled(ButtonDefault)`\n    &.mdc-button:not(:disabled) {\n        color: var(--mdc-theme-text-secondary-on-background);\n        text-transform: capitalize;\n        letter-spacing: initial;\n        margin-left: -8px;\n    }\n`;\n\nconst ButtonsWrapper = styled.div`\n    margin-top: 16px;\n    & button:first-of-type {\n        margin-right: 16px;\n    }\n`;\n\ninterface AliasesFormData {\n    aliases: string[];\n}\n\nexport const Aliases = () => {\n    const { canEdit } = useFileManagerApi();\n    const { updateFile } = useFileManagerView();\n    const { file } = useFile();\n    const [isEditing, setIsEditing] = useState(false);\n    const { showSnackbar } = useSnackbar();\n    const [updating, setUpdating] = useState(false);\n    const isEditingAllowed = canEdit(file);\n\n    const getUrlWithAlias = (alias: string) => {\n        const url = new URL(file.src);\n        url.pathname = alias;\n        return url.toString();\n    };\n\n    const onEdit = () => setIsEditing(true);\n    const cancelEdit = () => setIsEditing(false);\n\n    const onSubmit: FormOnSubmit<AliasesFormData> = async ({ aliases }) => {\n        setUpdating(true);\n        await updateFile(file.id, { aliases });\n        setUpdating(false);\n        setIsEditing(false);\n        showSnackbar(\"Aliases successfully updated.\");\n    };\n\n    const aliases = file.aliases || [];\n\n    return (\n        <Form<AliasesFormData>\n            // An empty string immediately creates an input, for better UX.\n            data={{ aliases: aliases.length ? aliases : [\"\"] }}\n            onSubmit={onSubmit}\n        >\n            {({ submit }) => (\n                <>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LinkIcon />} />\n                        {aliases.length && !isEditing ? (\n                            <Typography use={\"subtitle1\"} className={\"list-item__content\"}>\n                                File aliases\n                            </Typography>\n                        ) : null}\n                        {!aliases.length && !isEditing ? (\n                            <EmptyAddAlias\n                                onClick={onEdit}\n                                disabled={!isEditingAllowed}\n                                data-testid=\"fm.alias.add\"\n                            >\n                                Add aliases...\n                            </EmptyAddAlias>\n                        ) : null}\n\n                        {isEditingAllowed && aliases.length && !isEditing ? (\n                            <EditButton icon={<EditIcon />} onClick={onEdit} />\n                        ) : null}\n                    </li-title>\n                    {isEditing ? (\n                        <>\n                            <AliasEditor />\n                            <ButtonsWrapper>\n                                <ButtonPrimary\n                                    small\n                                    onClick={submit}\n                                    disabled={updating}\n                                    data-testid={\"fm.aliases.submit\"}\n                                >\n                                    {updating ? \"Saving...\" : \"Save changes\"}\n                                </ButtonPrimary>\n                                <ButtonSecondary small onClick={cancelEdit}>\n                                    Cancel\n                                </ButtonSecondary>\n                            </ButtonsWrapper>\n                        </>\n                    ) : (\n                        <AliasList>\n                            {aliases.map(alias => (\n                                <li key={alias}>\n                                    <Typography use={\"subtitle1\"} className={\"list-item__content\"}>\n                                        -{\" \"}\n                                        <a\n                                            rel=\"noreferrer\"\n                                            href={getUrlWithAlias(alias)}\n                                            target={\"_blank\"}\n                                        >\n                                            {alias}\n                                        </a>\n                                    </Typography>\n                                </li>\n                            ))}\n                        </AliasList>\n                    )}\n                </>\n            )}\n        </Form>\n    );\n};\n"],"mappings":"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"}

package/components/FileDetails/DeleteImageAction.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DeleteImageAction: () => JSX.Element | null;

package/components/FileDetails/DeleteImageAction.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteImageAction = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _mime = _interopRequireDefault(require("mime"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ConfirmationDialog = require("@webiny/ui/ConfirmationDialog");
+var _Tooltip = require("@webiny/ui/Tooltip");
+var _Button = require("@webiny/ui/Button");
+var _delete = require("@material-design-icons/svg/outlined/delete.svg");
+var _appAdmin = require("@webiny/app-admin");
+var _ = require("../..");
+var isImage = function isImage(file) {
+  var fileType = _mime.default.getType(file && file.name);
+  if (fileType) {
+    return fileType.includes("image");
+  }
+  return false;
+};
+var Filename = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "Filename",
+  target: "e112uu8j0"
+})("font-weight:bold;");
+var DeleteImageAction = function DeleteImageAction() {
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canEdit = _useFileManagerApi.canEdit;
+  var _useFileManagerView = (0, _.useFileManagerView)(),
+    deleteFile = _useFileManagerView.deleteFile;
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  if (!canEdit(file)) {
+    return null;
+  }
+  var fileDeleteConfirmationProps = {
+    title: "Delete file",
+    message: file && /*#__PURE__*/_react.default.createElement("span", null, "You're about to delete file ", /*#__PURE__*/_react.default.createElement(Filename, null, file.name), ".", /*#__PURE__*/_react.default.createElement("br", null), "Are you sure you want to continue?")
+  };
+  return /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.ConfirmationDialog, Object.assign({}, fileDeleteConfirmationProps, {
+    "data-testid": "fm-delete-file-confirmation-dialog",
+    style: {
+      zIndex: 100
+    }
+  }), function (_ref) {
+    var showConfirmation = _ref.showConfirmation;
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      content: isImage(file) ? /*#__PURE__*/_react.default.createElement("span", null, "Delete image") : /*#__PURE__*/_react.default.createElement("span", null, "Delete file"),
+      placement: "bottom"
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      "data-testid": "fm-delete-file-button",
+      icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, {
+        style: {
+          margin: "0 8px 0 0"
+        }
+      }),
+      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(file.id);
+              case 2:
+                showSnackbar("File deleted successfully.");
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        })));
+      }
+    }));
+  });
+};
+exports.DeleteImageAction = DeleteImageAction;

package/components/FileDetails/DeleteImageAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isImage","file","fileType","mime","getType","name","includes","Filename","styled","DeleteImageAction","useFile","useFileManagerApi","canEdit","useFileManagerView","deleteFile","useSnackbar","showSnackbar","fileDeleteConfirmationProps","title","message","zIndex","showConfirmation","margin","id"],"sources":["DeleteImageAction.tsx"],"sourcesContent":["import React from \"react\";\nimport mime from \"mime\";\nimport styled from \"@emotion/styled\";\nimport { ConfirmationDialog } from \"@webiny/ui/ConfirmationDialog\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete.svg\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerView } from \"~/index\";\n\nconst isImage = (file: FileItem) => {\n    const fileType = mime.getType(file && file.name);\n\n    if (fileType) {\n        return fileType.includes(\"image\");\n    }\n\n    return false;\n};\n\nconst Filename = styled.span`\n    font-weight: bold;\n`;\n\nexport const DeleteImageAction = () => {\n    const { file } = useFile();\n    const { canEdit } = useFileManagerApi();\n    const { deleteFile } = useFileManagerView();\n    const { showSnackbar } = useSnackbar();\n\n    if (!canEdit(file)) {\n        return null;\n    }\n\n    const fileDeleteConfirmationProps = {\n        title: \"Delete file\",\n        message: file && (\n            <span>\n                You&apos;re about to delete file <Filename>{file.name}</Filename>.<br />\n                Are you sure you want to continue?\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) ? <span>Delete image</span> : <span>Delete file</span>\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(file.id);\n                                    showSnackbar(`File deleted successfully.`);\n                                })\n                            }\n                        />\n                    </Tooltip>\n                );\n            }}\n        </ConfirmationDialog>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAO,CAAIC,IAAc,EAAK;EAChC,IAAMC,QAAQ,GAAGC,aAAI,CAACC,OAAO,CAACH,IAAI,IAAIA,IAAI,CAACI,IAAI,CAAC;EAEhD,IAAIH,QAAQ,EAAE;IACV,OAAOA,QAAQ,CAACI,QAAQ,CAAC,OAAO,CAAC;EACrC;EAEA,OAAO,KAAK;AAChB,CAAC;AAED,IAAMC,QAAQ,oBAAGC,eAAM;EAAA;EAAA;AAAA,uBAEtB;AAEM,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;EACnC,eAAiB,IAAAC,SAAO,GAAE;IAAlBT,IAAI,YAAJA,IAAI;EACZ,yBAAoB,IAAAU,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,0BAAuB,IAAAC,oBAAkB,GAAE;IAAnCC,UAAU,uBAAVA,UAAU;EAClB,mBAAyB,IAAAC,qBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EAEpB,IAAI,CAACJ,OAAO,CAACX,IAAI,CAAC,EAAE;IAChB,OAAO,IAAI;EACf;EAEA,IAAMgB,2BAA2B,GAAG;IAChCC,KAAK,EAAE,aAAa;IACpBC,OAAO,EAAElB,IAAI,iBACT,2CAAM,8BAC+B,4CAAC,QAAQ,QAAEA,IAAI,CAACI,IAAI,CAAY,KAAC,uDAAM,sCAE5E;EAER,CAAC;EACD,oBACI,6BAAC,sCAAkB,oBACXY,2BAA2B;IAC/B,eAAa,oCAAqC;IAClD,KAAK,EAAE;MAAEG,MAAM,EAAE;IAAI;EAAE,IAEtB,gBAA0B;IAAA,IAAvBC,gBAAgB,QAAhBA,gBAAgB;IAChB,oBACI,6BAAC,gBAAO;MACJ,OAAO,EACHrB,OAAO,CAACC,IAAI,CAAC,gBAAG,2CAAM,cAAY,CAAO,gBAAG,2CAAM,aAAW,CAChE;MACD,SAAS,EAAE;IAAS,gBAEpB,6BAAC,kBAAU;MACP,eAAa,uBAAwB;MACrC,IAAI,eAAE,6BAAC,sBAAU;QAAC,KAAK,EAAE;UAAEqB,MAAM,EAAE;QAAY;MAAE,EAAI;MACrD,OAAO,EAAE;QAAA,OACLD,gBAAgB,sGAAC;UAAA;YAAA;cAAA;gBAAA;gBAAA,OACPP,UAAU,CAACb,IAAI,CAACsB,EAAE,CAAC;cAAA;gBACzBP,YAAY,8BAA8B;cAAC;cAAA;gBAAA;YAAA;UAAA;QAAA,CAC9C,GAAC;MAAA;IACL,EACH,CACI;EAElB,CAAC,CACgB;AAE7B,CAAC;AAAC"}

package/components/FileDetails/FileProvider.d.ts

@@ -0,0 +1,13 @@
+import { FileItem } from "@webiny/app-admin/types";
+import React from "react";
+export interface FileContext {
+    file: FileItem;
+}
+export declare const FileContext: React.Context<FileContext | undefined>;
+interface FileProviderProps {
+    file: FileItem;
+    children: React.ReactNode;
+}
+export declare const FileProvider: ({ file, children }: FileProviderProps) => JSX.Element;
+export declare const useFile: () => FileContext;
+export {};

package/components/FileDetails/FileProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFile = exports.FileProvider = exports.FileContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var FileContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.FileContext = FileContext;
+var FileProvider = function FileProvider(_ref) {
+  var file = _ref.file,
+    children = _ref.children;
+  var value = {
+    file: file
+  };
+  return /*#__PURE__*/_react.default.createElement(FileContext.Provider, {
+    value: value
+  }, children);
+};
+exports.FileProvider = FileProvider;
+var useFile = function useFile() {
+  var context = _react.default.useContext(FileContext);
+  if (!context) {
+    throw Error("FileContext is missing in the component tree. Are you using \"useFile()\" hook in the right place?");
+  }
+  return context;
+};
+exports.useFile = useFile;

package/components/FileDetails/FileProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FileContext","createContext","undefined","FileProvider","file","children","value","useFile","context","React","useContext","Error"],"sources":["FileProvider.tsx"],"sourcesContent":["import { FileItem } from \"@webiny/app-admin/types\";\nimport React, { createContext } from \"react\";\n\nexport interface FileContext {\n    file: FileItem;\n}\n\nexport const FileContext = createContext<FileContext | undefined>(undefined);\n\ninterface FileProviderProps {\n    file: FileItem;\n    children: React.ReactNode;\n}\n\nexport const FileProvider = ({ file, children }: FileProviderProps) => {\n    const value: FileContext = { file };\n\n    return <FileContext.Provider value={value}>{children}</FileContext.Provider>;\n};\n\nexport const useFile = () => {\n    const context = React.useContext(FileContext);\n    if (!context) {\n        throw Error(\n            `FileContext is missing in the component tree. Are you using \"useFile()\" hook in the right place?`\n        );\n    }\n\n    return context;\n};\n"],"mappings":";;;;;;;AACA;AAMO,IAAMA,WAAW,gBAAG,IAAAC,oBAAa,EAA0BC,SAAS,CAAC;AAAC;AAOtE,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA8C;EAAA,IAAxCC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;EACzC,IAAMC,KAAkB,GAAG;IAAEF,IAAI,EAAJA;EAAK,CAAC;EAEnC,oBAAO,6BAAC,WAAW,CAAC,QAAQ;IAAC,KAAK,EAAEE;EAAM,GAAED,QAAQ,CAAwB;AAChF,CAAC;AAAC;AAEK,IAAME,OAAO,GAAG,SAAVA,OAAO,GAAS;EACzB,IAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACV,WAAW,CAAC;EAC7C,IAAI,CAACQ,OAAO,EAAE;IACV,MAAMG,KAAK,sGAEV;EACL;EAEA,OAAOH,OAAO;AAClB,CAAC;AAAC"}

package/components/FileDetails/Name.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Name: () => JSX.Element;
+export default Name;

package/components/FileDetails/Name.js

@@ -0,0 +1,81 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _Input = require("@webiny/ui/Input");
+var _form = require("@webiny/form");
+var _validation = require("@webiny/validation");
+var _appAdmin = require("@webiny/app-admin");
+var _ = require("../..");
+var Name = function Name() {
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var name = file.name || "";
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canEdit = _useFileManagerApi.canEdit;
+  var _useFileManagerView = (0, _.useFileManagerView)(),
+    updateFile = _useFileManagerView.updateFile;
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref) {
+      var name;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            name = _ref.name;
+            if (!(name === file.name)) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            _context.next = 5;
+            return updateFile(file.id, {
+              name: name
+            });
+          case 5:
+            showSnackbar("Name successfully updated.");
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var editContent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_form.Form, {
+      data: {
+        name: name
+      },
+      onSubmit: onSubmit
+    }, function (_ref3) {
+      var Bind = _ref3.Bind,
+        submit = _ref3.submit;
+      return /*#__PURE__*/_react.default.createElement(Bind, {
+        name: "name",
+        validators: _validation.validation.create("required")
+      }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+        disabled: !canEdit(file),
+        autoFocus: true,
+        placeholder: "Enter name",
+        fullwidth: true,
+        onBlur: submit,
+        description: "A descriptive name is easier to remember."
+      }));
+    });
+  }, [name, file.name, canEdit]);
+  return /*#__PURE__*/_react.default.createElement("li-content", null, editContent);
+};
+var _default = Name;
+exports.default = _default;

package/components/FileDetails/Name.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Name","useFile","file","name","useSnackbar","showSnackbar","useFileManagerApi","canEdit","useFileManagerView","updateFile","onSubmit","id","editContent","useMemo","Bind","submit","validation","create"],"sources":["Name.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerView } from \"~/index\";\n\ninterface NameFormData {\n    name: string;\n}\n\nconst Name = () => {\n    const { file } = useFile();\n    const name = file.name || \"\";\n    const { showSnackbar } = useSnackbar();\n    const { canEdit } = useFileManagerApi();\n    const { updateFile } = useFileManagerView();\n\n    const onSubmit: FormOnSubmit<NameFormData> = async ({ name }) => {\n        // Bail out if name is same as the current file name.\n        if (name === file.name) {\n            return;\n        }\n\n        await updateFile(file.id, { name });\n\n        showSnackbar(\"Name successfully updated.\");\n    };\n\n    const editContent = useMemo(() => {\n        return (\n            <Form<NameFormData> data={{ name }} onSubmit={onSubmit}>\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;AACA;AACA;AACA;AACA;AACA;AAMA,IAAMA,IAAI,GAAG,SAAPA,IAAI,GAAS;EACf,eAAiB,IAAAC,SAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,IAAMC,IAAI,GAAGD,IAAI,CAACC,IAAI,IAAI,EAAE;EAC5B,mBAAyB,IAAAC,qBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EACpB,yBAAoB,IAAAC,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EACf,0BAAuB,IAAAC,oBAAkB,GAAE;IAAnCC,UAAU,uBAAVA,UAAU;EAElB,IAAMC,QAAoC;IAAA,mGAAG;MAAA;MAAA;QAAA;UAAA;YAASP,IAAI,QAAJA,IAAI;YAAA,MAElDA,IAAI,KAAKD,IAAI,CAACC,IAAI;cAAA;cAAA;YAAA;YAAA;UAAA;YAAA;YAAA,OAIhBM,UAAU,CAACP,IAAI,CAACS,EAAE,EAAE;cAAER,IAAI,EAAJA;YAAK,CAAC,CAAC;UAAA;YAEnCE,YAAY,CAAC,4BAA4B,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CAC9C;IAAA,gBATKK,QAAoC;MAAA;IAAA;EAAA,GASzC;EAED,IAAME,WAAW,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC9B,oBACI,6BAAC,UAAI;MAAe,IAAI,EAAE;QAAEV,IAAI,EAAJA;MAAK,CAAE;MAAC,QAAQ,EAAEO;IAAS,GAClD;MAAA,IAAGI,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,CAACV,OAAO,CAACL,IAAI,CAAE;QACzB,SAAS;QACT,WAAW,EAAE,YAAa;QAC1B,SAAS,EAAE,IAAK;QAChB,MAAM,EAAEa,MAAO;QACf,WAAW,EAAE;MAA4C,EAC3D,CACC;IAAA,CACV,CACE;EAEf,CAAC,EAAE,CAACZ,IAAI,EAAED,IAAI,CAACC,IAAI,EAAEI,OAAO,CAAC,CAAC;EAE9B,oBAAO,iDAAaK,WAAW,CAAc;AACjD,CAAC;AAAC,eAEaZ,IAAI;AAAA"}

package/components/FileDetails/Tags.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Tags: () => JSX.Element;
+export default Tags;