cozy-viewer 3.0.1 → 5.0.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@4.0.0...cozy-viewer@5.0.0) (2024-11-27)
+
+
+### Features
+
+* **Viewer:** Add summary block ([ceebd77](https://github.com/cozy/cozy-libs/commit/ceebd77ba11c5033368fa891810abd0e8c5b391d))
+* **Viewer:** Upgrade cozy-ui ([1c9c1ba](https://github.com/cozy/cozy-libs/commit/1c9c1ba7314daa07967a02c4de6eb574d9908e48))
+
+
+### BREAKING CHANGES
+
+* **Viewer:** You must have `cozy-ui >= 113.7.0`
+
+
+
+
+
+# [4.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@3.0.1...cozy-viewer@4.0.0) (2024-11-27)
+
+
+### Features
+
+* **Viewer:** Upgrade cozy-harvest-lib ([c8c3457](https://github.com/cozy/cozy-libs/commit/c8c345788586a70b177fd0735c01a8342d027a44))
+
+
+### BREAKING CHANGES
+
+* **Viewer:** You must have `cozy-harvest-lib >= 30.8.0`
+
+
+
+
+
 ## [3.0.1](https://github.com/cozy/cozy-libs/compare/cozy-viewer@3.0.0...cozy-viewer@3.0.1) (2024-11-27)
 
 **Note:** Version bump only for package cozy-viewer

package/dist/Panel/QualificationListItemText.d.ts

@@ -6,7 +6,7 @@ declare function QualificationListItemText({ primary, secondary, disabled }: {
 }): JSX.Element;
 declare namespace QualificationListItemText {
     namespace propTypes {
-        const primary: PropTypes.Validator<string>;
+        const primary: PropTypes.Requireable<string>;
         const secondary: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     }
 }

package/dist/Panel/QualificationListItemText.js

@@ -35,7 +35,7 @@ var QualificationListItemText = function QualificationListItemText(_ref) {
 };
 
 QualificationListItemText.propTypes = {
-  primary: _propTypes.default.string.isRequired,
+  primary: _propTypes.default.string,
   secondary: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
 };
 var _default = QualificationListItemText;

package/dist/Panel/Summary.d.ts

@@ -0,0 +1,2 @@
+declare var _default: any;
+export default _default;

package/dist/Panel/Summary.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ActionsMenu = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu"));
+
+var _Actions = require("cozy-ui/transpiled/react/ActionsMenu/Actions");
+
+var _ActionsMenuMobileHeader = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Dots = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Dots"));
+
+var _Right = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Right"));
+
+var _Text = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Text"));
+
+var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemSecondaryAction = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemSecondaryAction"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _Alert = require("cozy-ui/transpiled/react/providers/Alert");
+
+var _QualificationListItemText = _interopRequireDefault(require("./QualificationListItemText"));
+
+var _SummaryDialog = _interopRequireDefault(require("./SummaryDialog"));
+
+var _withViewerLocales = require("../hoc/withViewerLocales");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Summary = function Summary(_ref) {
+  var file = _ref.file,
+      t = _ref.t;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showMenu = _useState4[0],
+      setShowMenu = _useState4[1];
+
+  var anchorRef = (0, _react.useRef)();
+
+  var _useAlert = (0, _Alert.useAlert)(),
+      showAlert = _useAlert.showAlert;
+
+  var label = t('Viewer.panel.summary');
+  var value = file.metadata.description;
+  var actions = (0, _Actions.makeActions)([_Actions.copyToClipboard, _Actions.editAttribute]);
+
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!value) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 3;
+              return (0, _Actions.copyToClipboard)().action(undefined, {
+                showAlert: showAlert,
+                copyValue: value
+              });
+
+            case 3:
+              _context.next = 6;
+              break;
+
+            case 5:
+              setShowModal(true);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Text.default
+  })), /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
+    primary: value && label,
+    secondary: value || label,
+    disabled: !value
+  }), value ? /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    ref: anchorRef,
+    onClick: function onClick() {
+      return setShowMenu(function (v) {
+        return !v;
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Dots.default
+  }))) : /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Right.default
+  }))), showModal && /*#__PURE__*/_react.default.createElement(_SummaryDialog.default, {
+    file: file,
+    onClose: function onClose() {
+      return setShowModal(false);
+    }
+  }), showMenu && /*#__PURE__*/_react.default.createElement(_ActionsMenu.default, {
+    ref: anchorRef,
+    open: true,
+    docs: [file],
+    actions: actions,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    autoClose: true,
+    componentsProps: {
+      actionsItems: {
+        actionOptions: {
+          showAlert: showAlert,
+          copyValue: value,
+          editAttributeCallback: function editAttributeCallback() {
+            return setShowModal(true);
+          }
+        }
+      }
+    },
+    onClose: function onClose() {
+      return setShowMenu(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ActionsMenuMobileHeader.default, null, /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: label,
+    primaryTypographyProps: {
+      align: 'center',
+      variant: 'h6'
+    }
+  }))));
+};
+
+Summary.propTypes = {
+  file: _propTypes.default.object.isRequired,
+  t: _propTypes.default.func
+};
+
+var _default = (0, _withViewerLocales.withViewerLocales)(Summary);
+
+exports.default = _default;

package/dist/Panel/SummaryDialog.d.ts

@@ -0,0 +1,2 @@
+declare var _default: any;
+export default _default;

package/dist/Panel/SummaryDialog.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
+
+var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));
+
+var _withViewerLocales = require("../hoc/withViewerLocales");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var SummaryDialog = function SummaryDialog(_ref) {
+  var file = _ref.file,
+      t = _ref.t,
+      onClose = _ref.onClose;
+
+  var _useState = (0, _react.useState)(file.metadata.description),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      busy = _useState4[0],
+      setBusy = _useState4[1];
+
+  var client = (0, _cozyClient.useClient)();
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setBusy(true);
+              _context.next = 3;
+              return client.collection('io.cozy.files').updateMetadataAttribute(file._id, _objectSpread(_objectSpread({}, file.metadata), {}, {
+                description: value
+              }));
+
+            case 3:
+              onClose();
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_CozyDialogs.ConfirmDialog, {
+    open: true,
+    title: t('Viewer.panel.summary'),
+    content: /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      multiline: true,
+      value: value,
+      rows: 4,
+      autoFocus: true,
+      fullWidth: true,
+      required: true,
+      variant: "outlined",
+      onChange: function onChange(ev) {
+        return setValue(ev.target.value);
+      }
+    }),
+    actions: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      className: "u-miw-4",
+      variant: "secondary",
+      label: t('Viewer.cancel'),
+      onClick: onClose
+    }), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      className: "u-miw-4",
+      label: t('Viewer.ok'),
+      busy: busy,
+      onClick: handleSubmit
+    })),
+    onClose: onClose
+  });
+};
+
+SummaryDialog.propTypes = {
+  file: _propTypes.default.object.isRequired,
+  t: _propTypes.default.func,
+  onClose: _propTypes.default.func
+};
+
+var _default = (0, _withViewerLocales.withViewerLocales)(SummaryDialog);
+
+exports.default = _default;

package/dist/Panel/getPanelBlocks.js

@@ -15,6 +15,8 @@ var _Informations = _interopRequireDefault(require("./Informations"));
 
 var _Qualification = _interopRequireDefault(require("./Qualification"));
 
+var _Summary = _interopRequireDefault(require("./Summary"));
+
 /**
  * @typedef {Object} PanelBlockSpec
  * @property {Function} condition - Function that returns true if the block should be displayed
@@ -33,6 +35,12 @@ var _Qualification = _interopRequireDefault(require("./Qualification"));
 var getPanelBlocksSpecs = function getPanelBlocksSpecs() {
   var isPublic = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return {
+    summary: {
+      condition: function condition() {
+        return true;
+      },
+      component: _Summary.default
+    },
     qualifications: {
       condition: _file.hasQualifications,
       component: _Qualification.default

package/dist/locales/index.js

@@ -14,6 +14,8 @@ var en = {
       preparing: "Preparing your files\u2026"
     },
     close: "close",
+    cancel: "Cancel",
+    ok: "Ok",
     download: "Download",
     complete: "Complete the document",
     noImage: "No image",
@@ -30,6 +32,7 @@ var en = {
     openWith: "Open with...",
     openInOnlyOffice: "Open with Only Office",
     panel: {
+      summary: "Summary",
       informations: {
         format: {
           title: "%{format} Document",
@@ -90,6 +93,8 @@ var fr = {
       preparing: "Preparation de vos fichiers\u2026"
     },
     close: "Fermer",
+    cancel: "Annuler",
+    ok: "Ok",
     download: "T\xE9l\xE9charger",
     complete: "Compl\xE9ter le document",
     noImage: "Aucune image",
@@ -106,6 +111,7 @@ var fr = {
     openWith: "Ouvrir avec...",
     openInOnlyOffice: "Ouvrir avec Only Office",
     panel: {
+      summary: "R\xE9sum\xE9",
       informations: {
         format: {
           title: "Document %{format}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-viewer",
-  "version": "3.0.1",
+  "version": "5.0.0",
   "description": "Cozy-Viewer provides a component to show files in a viewer.",
   "main": "dist/index.js",
   "license": "MIT",
@@ -27,11 +27,11 @@
     "babel-preset-cozy-app": "^2.8.1",
     "cozy-client": "50.0.0",
     "cozy-device-helper": "2.0.0",
-    "cozy-harvest-lib": "^30.8.0",
+    "cozy-harvest-lib": "^30.8.2",
     "cozy-intent": "^2.29.1",
     "cozy-logger": "^1.16.1",
     "cozy-sharing": "14.1.0",
-    "cozy-ui": "^113.4.0",
+    "cozy-ui": "^113.7.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
@@ -52,13 +52,13 @@
   "peerDependencies": {
     "cozy-client": ">=50.0.0",
     "cozy-device-helper": ">=2.0.0",
-    "cozy-harvest-lib": ">=30.2.0",
+    "cozy-harvest-lib": ">=30.8.0",
     "cozy-intent": ">=2.26.0",
     "cozy-logger": ">=1.9.0",
     "cozy-sharing": ">=14.1.0",
-    "cozy-ui": ">=113.4.0",
+    "cozy-ui": ">=113.7.0",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0"
   },
-  "gitHead": "38b8eacca88975853144d089f51c939b4ec2fe43"
+  "gitHead": "65fc17fd76d5cbf63e3fa5c9b9c874edf5a6639c"
 }

package/src/Panel/QualificationListItemText.jsx

@@ -23,7 +23,7 @@ const QualificationListItemText = ({ primary, secondary, disabled }) => {
 }
 
 QualificationListItemText.propTypes = {
-  primary: PropTypes.string.isRequired,
+  primary: PropTypes.string,
   secondary: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 }
 

package/src/Panel/Summary.jsx

@@ -0,0 +1,110 @@
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
+
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import {
+  makeActions,
+  editAttribute,
+  copyToClipboard
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+import TextIcon from 'cozy-ui/transpiled/react/Icons/Text'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+
+import QualificationListItemText from './QualificationListItemText'
+import SummaryDialog from './SummaryDialog'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const Summary = ({ file, t }) => {
+  const [showModal, setShowModal] = useState(false)
+  const [showMenu, setShowMenu] = useState(false)
+  const anchorRef = useRef()
+  const { showAlert } = useAlert()
+
+  const label = t('Viewer.panel.summary')
+  const value = file.metadata.description
+  const actions = makeActions([copyToClipboard, editAttribute])
+
+  const handleClick = async () => {
+    if (value) {
+      await copyToClipboard().action(undefined, { showAlert, copyValue: value })
+    } else {
+      setShowModal(true)
+    }
+  }
+
+  return (
+    <List>
+      <ListItem button onClick={handleClick}>
+        <ListItemIcon>
+          <Icon icon={TextIcon} />
+        </ListItemIcon>
+        <QualificationListItemText
+          primary={value && label}
+          secondary={value || label}
+          disabled={!value}
+        />
+        {value ? (
+          <ListItemSecondaryAction>
+            <IconButton ref={anchorRef} onClick={() => setShowMenu(v => !v)}>
+              <Icon icon={DotsIcon} />
+            </IconButton>
+          </ListItemSecondaryAction>
+        ) : (
+          <ListItemIcon>
+            <Icon icon={RightIcon} />
+          </ListItemIcon>
+        )}
+      </ListItem>
+      {showModal && (
+        <SummaryDialog file={file} onClose={() => setShowModal(false)} />
+      )}
+      {showMenu && (
+        <ActionsMenu
+          ref={anchorRef}
+          open={true}
+          docs={[file]}
+          actions={actions}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+          autoClose
+          componentsProps={{
+            actionsItems: {
+              actionOptions: {
+                showAlert,
+                copyValue: value,
+                editAttributeCallback: () => setShowModal(true)
+              }
+            }
+          }}
+          onClose={() => setShowMenu(false)}
+        >
+          <ActionsMenuMobileHeader>
+            <ListItemText
+              primary={label}
+              primaryTypographyProps={{ align: 'center', variant: 'h6' }}
+            />
+          </ActionsMenuMobileHeader>
+        </ActionsMenu>
+      )}
+    </List>
+  )
+}
+
+Summary.propTypes = {
+  file: PropTypes.object.isRequired,
+  t: PropTypes.func
+}
+
+export default withViewerLocales(Summary)

package/src/Panel/SummaryDialog.jsx

@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const SummaryDialog = ({ file, t, onClose }) => {
+  const [value, setValue] = useState(file.metadata.description)
+  const [busy, setBusy] = useState(false)
+  const client = useClient()
+
+  const handleSubmit = async () => {
+    setBusy(true)
+    await client.collection('io.cozy.files').updateMetadataAttribute(file._id, {
+      ...file.metadata,
+      description: value
+    })
+    onClose()
+  }
+
+  return (
+    <ConfirmDialog
+      open
+      title={t('Viewer.panel.summary')}
+      content={
+        <TextField
+          multiline
+          value={value}
+          rows={4}
+          autoFocus
+          fullWidth
+          required
+          variant="outlined"
+          onChange={ev => setValue(ev.target.value)}
+        />
+      }
+      actions={
+        <>
+          <Button
+            className="u-miw-4"
+            variant="secondary"
+            label={t('Viewer.cancel')}
+            onClick={onClose}
+          />
+          <Button
+            className="u-miw-4"
+            label={t('Viewer.ok')}
+            busy={busy}
+            onClick={handleSubmit}
+          />
+        </>
+      }
+      onClose={onClose}
+    />
+  )
+}
+
+SummaryDialog.propTypes = {
+  file: PropTypes.object.isRequired,
+  t: PropTypes.func,
+  onClose: PropTypes.func
+}
+
+export default withViewerLocales(SummaryDialog)

package/src/Panel/getPanelBlocks.jsx

@@ -6,6 +6,7 @@ import KonnectorBlock from 'cozy-harvest-lib/dist/components/KonnectorBlock'
 
 import Informations from './Informations'
 import Qualification from './Qualification'
+import Summary from './Summary'
 
 /**
  * @typedef {Object} PanelBlockSpec
@@ -23,6 +24,10 @@ import Qualification from './Qualification'
  * @returns {PanelBlocksSpecs}
  */
 export const getPanelBlocksSpecs = (isPublic = false) => ({
+  summary: {
+    condition: () => true,
+    component: Summary
+  },
   qualifications: {
     condition: hasQualifications,
     component: Qualification

package/src/Panel/getPanelBlocks.spec.jsx

@@ -62,6 +62,10 @@ describe('getPanelBlocks', () => {
 describe('getPanelBlocksSpecs', () => {
   it('should return the specs of the blocks to display in the panel', () => {
     expect(getPanelBlocksSpecs()).toEqual({
+      summary: {
+        condition: expect.any(Function),
+        component: expect.anything()
+      },
       qualifications: {
         condition: expect.any(Function),
         component: expect.anything()

package/src/locales/en.json

@@ -8,6 +8,8 @@
       "preparing": "Preparing your files…"
     },
     "close": "close",
+    "cancel": "Cancel",
+    "ok": "Ok",
     "download": "Download",
     "complete": "Complete the document",
     "noImage": "No image",
@@ -24,6 +26,7 @@
     "openWith": "Open with...",
     "openInOnlyOffice": "Open with Only Office",
     "panel": {
+      "summary": "Summary",
       "informations": {
         "format": {
           "title": "%{format} Document",

package/src/locales/fr.json

@@ -8,6 +8,8 @@
       "preparing": "Preparation de vos fichiers…"
     },
     "close": "Fermer",
+    "cancel": "Annuler",
+    "ok": "Ok",
     "download": "Télécharger",
     "complete": "Compléter le document",
     "noImage": "Aucune image",
@@ -24,6 +26,7 @@
     "openWith": "Ouvrir avec...",
     "openInOnlyOffice": "Ouvrir avec Only Office",
     "panel": {
+      "summary": "Résumé",
       "informations": {
         "format": {
           "title": "Document %{format}",