cozy-viewer 2.9.1 → 3.0.1

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
+# [3.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@2.9.1...cozy-viewer@3.0.0) (2024-11-26)
+
+
+### Bug Fixes
+
+* **Viewer:** Remove useless typography wrapper around PanelBlock ([d15c875](https://github.com/cozy/cozy-libs/commit/d15c875c13632dbd3b469bc6886ff85a53f43228))
+
+
+### Features
+
+* **Viewer:** Add action menu on information block ([a696472](https://github.com/cozy/cozy-libs/commit/a6964729cb28dd6006aaaec108b5d91ae33be491))
+* **Viewer:** Add Informations block ([8c54678](https://github.com/cozy/cozy-libs/commit/8c546784a63da98a47c993091f73d2dd0e50a7fa))
+* **Viewer:** Move Certifications block inside Informations block ([c583e35](https://github.com/cozy/cozy-libs/commit/c583e3502d307f55920d99bd1674e2f7027b0f78))
+* **Viewer:** Upgrade cozy-ui ([76f7d4f](https://github.com/cozy/cozy-libs/commit/76f7d4f15f9b975834a92d570ad6030206e00261))
+
+
+### BREAKING CHANGES
+
+* **Viewer:** You must have `cozy-ui >= 113.4.0`
+
+
+
+
+
 ## [2.9.1](https://github.com/cozy/cozy-libs/compare/cozy-viewer@2.9.0...cozy-viewer@2.9.1) (2024-11-22)
 
 **Note:** Version bump only for package cozy-viewer

package/dist/Panel/Informations.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _has = _interopRequireDefault(require("lodash/has"));
+
+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 _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Calendar = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Calendar"));
+
+var _CarbonCopy = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CarbonCopy"));
+
+var _Dots = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Dots"));
+
+var _FileOutline = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/FileOutline"));
+
+var _Folder = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Folder"));
+
+var _Safe = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Safe"));
+
+var _Server = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Server"));
+
+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 _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _helpers = require("./helpers");
+
+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 Informations = function Informations(_ref) {
+  var file = _ref.file,
+      t = _ref.t;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      f = _useI18n.f,
+      lang = _useI18n.lang;
+
+  var format = (0, _helpers.makeFormat)(file);
+  var path = (0, _helpers.makePath)(file);
+  var size = (0, _helpers.makeSize)(file.size);
+  var creation = f(file.created_at, (0, _helpers.makeDate)(lang));
+  var modification = f(file.updated_at, (0, _helpers.makeDate)(lang));
+  var hasCarbonCopy = (0, _has.default)(file, 'metadata.carbonCopy');
+  var hasElectronicSafe = (0, _has.default)(file, 'metadata.electronicSafe');
+  var anchorRef = (0, _react.useRef)();
+  var actions = (0, _Actions.makeActions)([_Actions.viewInDrive]);
+  return /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _FileOutline.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('Viewer.panel.informations.format.title', {
+      format: format
+    }),
+    secondary: t('Viewer.panel.informations.format.subtitle')
+  })), /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Server.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: size,
+    secondary: t('Viewer.panel.informations.size')
+  })), /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Folder.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: path,
+    secondary: t('Viewer.panel.informations.location')
+  }), /*#__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
+  })))), showMenu && /*#__PURE__*/_react.default.createElement(_ActionsMenu.default, {
+    ref: anchorRef,
+    open: true,
+    docs: [file],
+    actions: actions,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    autoClose: true,
+    onClose: function onClose() {
+      return setShowMenu(false);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Calendar.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: creation,
+    secondary: t('Viewer.panel.informations.creation')
+  })), /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Calendar.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: modification,
+    secondary: t('Viewer.panel.informations.modification')
+  })), hasCarbonCopy && /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    ellipsis: false
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _CarbonCopy.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('Viewer.panel.certifications.carbonCopy.title'),
+    secondary: t('Viewer.panel.certifications.carbonCopy.caption')
+  })), hasElectronicSafe && /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    ellipsis: false
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Safe.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('Viewer.panel.certifications.electronicSafe.title'),
+    secondary: t('Viewer.panel.certifications.electronicSafe.caption')
+  })));
+};
+
+Informations.propTypes = {
+  file: _propTypes.default.object.isRequired,
+  t: _propTypes.default.func
+};
+
+var _default = (0, _withViewerLocales.withViewerLocales)(Informations);
+
+exports.default = _default;

package/dist/Panel/PanelContent.js

@@ -52,12 +52,9 @@ var PanelContent = function PanelContent(_ref) {
       }),
       elevation: 2,
       square: true
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h4",
-      className: "u-pv-1"
     }, /*#__PURE__*/_react.default.createElement(PanelBlock, {
       file: file
-    })));
+    }));
   }));
 };
 

package/dist/Panel/getPanelBlocks.js

@@ -7,18 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPanelBlocksSpecs = exports.default = void 0;
 
-var _cozyClient = require("cozy-client");
+var _file = require("cozy-client/dist/models/file");
 
 var _KonnectorBlock = _interopRequireDefault(require("cozy-harvest-lib/dist/components/KonnectorBlock"));
 
-var _Certifications = _interopRequireDefault(require("./Certifications"));
+var _Informations = _interopRequireDefault(require("./Informations"));
 
 var _Qualification = _interopRequireDefault(require("./Qualification"));
 
-var _models$file = _cozyClient.models.file,
-    isFromKonnector = _models$file.isFromKonnector,
-    hasQualifications = _models$file.hasQualifications,
-    hasCertifications = _models$file.hasCertifications;
 /**
  * @typedef {Object} PanelBlockSpec
  * @property {Function} condition - Function that returns true if the block should be displayed
@@ -34,23 +30,24 @@ var _models$file = _cozyClient.models.file,
  * @param {boolean} isPublic - Whether the panel is displayed in public view
  * @returns {PanelBlocksSpecs}
  */
-
 var getPanelBlocksSpecs = function getPanelBlocksSpecs() {
   var isPublic = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return {
     qualifications: {
-      condition: hasQualifications,
+      condition: _file.hasQualifications,
       component: _Qualification.default
     },
     konnector: {
       condition: function condition(file) {
-        return isFromKonnector(file) && !isPublic;
+        return (0, _file.isFromKonnector)(file) && !isPublic;
       },
       component: _KonnectorBlock.default
     },
-    certifications: {
-      condition: hasCertifications,
-      component: _Certifications.default
+    informations: {
+      condition: function condition() {
+        return true;
+      },
+      component: _Informations.default
     }
   };
 };

package/dist/Panel/helpers.d.ts

@@ -0,0 +1,4 @@
+export function makeFormat(file: any): string;
+export function makeDate(lang: string): string;
+export function makeSize(bytes: number): string;
+export function makePath(file: any): string;

package/dist/Panel/helpers.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeSize = exports.makePath = exports.makeFormat = exports.makeDate = void 0;
+
+var _file = require("cozy-client/dist/models/file");
+
+/**
+ * Returns file extension or class
+ * @param {import("cozy-client/types").IOCozyFile} file - io.cozy.file
+ * @returns {string}
+ */
+var makeFormat = function makeFormat(file) {
+  var _splitFilename = (0, _file.splitFilename)(file),
+      extension = _splitFilename.extension;
+
+  return (extension.replace('.', '') || file.class).toUpperCase();
+};
+/**
+ * Returns a formatted date
+ * @param {string} lang - language in ISO 639-1 format
+ * @returns {string}
+ */
+
+
+exports.makeFormat = makeFormat;
+
+var makeDate = function makeDate(lang) {
+  return lang === 'fr' ? 'DD MMM YYYY à HH:mm' : 'MMM DD YYYY at HH:mm';
+};
+/**
+ * Returns a formatted size
+ * @param {number} bytes - file bytes
+ * @returns {string}
+ */
+
+
+exports.makeDate = makeDate;
+
+var makeSize = function makeSize(bytes) {
+  if (!+bytes) return '0';
+  var k = 1024;
+  var dm = 2;
+  var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  var i = Math.floor(Math.log(bytes) / Math.log(k));
+  return "".concat(parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), " ").concat(sizes[i]);
+};
+/**
+ * Returns file path
+ * @param {import("cozy-client/types").IOCozyFile} file - io.cozy.file
+ * @returns {string}
+ */
+
+
+exports.makeSize = makeSize;
+
+var makePath = function makePath(file) {
+  var _file$path;
+
+  return (_file$path = file.path) === null || _file$path === void 0 ? void 0 : _file$path.replace("/".concat(file.name), '');
+};
+
+exports.makePath = makePath;

package/dist/locales/index.js

@@ -30,6 +30,16 @@ var en = {
     openWith: "Open with...",
     openInOnlyOffice: "Open with Only Office",
     panel: {
+      informations: {
+        format: {
+          title: "%{format} Document",
+          subtitle: "Format"
+        },
+        size: "Size",
+        location: "Location",
+        creation: "Creation",
+        modification: "Last modification"
+      },
       certifications: {
         carbonCopy: {
           title: "Carbon Copy",
@@ -96,6 +106,16 @@ var fr = {
     openWith: "Ouvrir avec...",
     openInOnlyOffice: "Ouvrir avec Only Office",
     panel: {
+      informations: {
+        format: {
+          title: "Document %{format}",
+          subtitle: "Format"
+        },
+        size: "Taille",
+        location: "Emplacement",
+        creation: "Cr\xE9ation",
+        modification: "Derni\xE8re modification"
+      },
       certifications: {
         carbonCopy: {
           title: "Copie conforme",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-viewer",
-  "version": "2.9.1",
+  "version": "3.0.1",
   "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.7.0",
+    "cozy-harvest-lib": "^30.8.0",
     "cozy-intent": "^2.29.1",
     "cozy-logger": "^1.16.1",
     "cozy-sharing": "14.1.0",
-    "cozy-ui": "^112.2.0",
+    "cozy-ui": "^113.4.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
@@ -56,9 +56,9 @@
     "cozy-intent": ">=2.26.0",
     "cozy-logger": ">=1.9.0",
     "cozy-sharing": ">=14.1.0",
-    "cozy-ui": ">=112.2.0",
+    "cozy-ui": ">=113.4.0",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0"
   },
-  "gitHead": "7b897f6e8327175b29bb2b35d388ef8753c8e846"
+  "gitHead": "38b8eacca88975853144d089f51c939b4ec2fe43"
 }

package/src/Panel/Informations.jsx

@@ -0,0 +1,140 @@
+import has from 'lodash/has'
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import {
+  makeActions,
+  viewInDrive
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CalendarIcon from 'cozy-ui/transpiled/react/Icons/Calendar'
+import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+import FileOutlineIcon from 'cozy-ui/transpiled/react/Icons/FileOutline'
+import FolderIcon from 'cozy-ui/transpiled/react/Icons/Folder'
+import SafeIcon from 'cozy-ui/transpiled/react/Icons/Safe'
+import ServerIcon from 'cozy-ui/transpiled/react/Icons/Server'
+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 { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { makeFormat, makeSize, makeDate, makePath } from './helpers'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const Informations = ({ file, t }) => {
+  const [showMenu, setShowMenu] = useState(false)
+  const { f, lang } = useI18n()
+  const format = makeFormat(file)
+  const path = makePath(file)
+  const size = makeSize(file.size)
+  const creation = f(file.created_at, makeDate(lang))
+  const modification = f(file.updated_at, makeDate(lang))
+  const hasCarbonCopy = has(file, 'metadata.carbonCopy')
+  const hasElectronicSafe = has(file, 'metadata.electronicSafe')
+  const anchorRef = useRef()
+
+  const actions = makeActions([viewInDrive])
+
+  return (
+    <List>
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={FileOutlineIcon} />
+        </ListItemIcon>
+        <ListItemText
+          primary={t('Viewer.panel.informations.format.title', { format })}
+          secondary={t('Viewer.panel.informations.format.subtitle')}
+        />
+      </ListItem>
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={ServerIcon} />
+        </ListItemIcon>
+        <ListItemText
+          primary={size}
+          secondary={t('Viewer.panel.informations.size')}
+        />
+      </ListItem>
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={FolderIcon} />
+        </ListItemIcon>
+        <ListItemText
+          primary={path}
+          secondary={t('Viewer.panel.informations.location')}
+        />
+        <ListItemSecondaryAction>
+          <IconButton ref={anchorRef} onClick={() => setShowMenu(v => !v)}>
+            <Icon icon={DotsIcon} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+      {showMenu && (
+        <ActionsMenu
+          ref={anchorRef}
+          open={true}
+          docs={[file]}
+          actions={actions}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+          autoClose
+          onClose={() => setShowMenu(false)}
+        />
+      )}
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={CalendarIcon} />
+        </ListItemIcon>
+        <ListItemText
+          primary={creation}
+          secondary={t('Viewer.panel.informations.creation')}
+        />
+      </ListItem>
+      <ListItem>
+        <ListItemIcon>
+          <Icon icon={CalendarIcon} />
+        </ListItemIcon>
+        <ListItemText
+          primary={modification}
+          secondary={t('Viewer.panel.informations.modification')}
+        />
+      </ListItem>
+      {hasCarbonCopy && (
+        <ListItem ellipsis={false}>
+          <ListItemIcon>
+            <Icon icon={CarbonCopyIcon} />
+          </ListItemIcon>
+          <ListItemText
+            primary={t('Viewer.panel.certifications.carbonCopy.title')}
+            secondary={t('Viewer.panel.certifications.carbonCopy.caption')}
+          />
+        </ListItem>
+      )}
+      {hasElectronicSafe && (
+        <ListItem ellipsis={false}>
+          <ListItemIcon>
+            <Icon icon={SafeIcon} />
+          </ListItemIcon>
+          <ListItemText
+            primary={t('Viewer.panel.certifications.electronicSafe.title')}
+            secondary={t('Viewer.panel.certifications.electronicSafe.caption')}
+          />
+        </ListItem>
+      )}
+    </List>
+  )
+}
+
+Informations.propTypes = {
+  file: PropTypes.object.isRequired,
+  t: PropTypes.func
+}
+
+export default withViewerLocales(Informations)

package/src/Panel/PanelContent.jsx

@@ -33,9 +33,7 @@ const PanelContent = ({ file, isPublic, t }) => {
           elevation={2}
           square
         >
-          <Typography variant="h4" className="u-pv-1">
-            <PanelBlock file={file} />
-          </Typography>
+          <PanelBlock file={file} />
         </Paper>
       ))}
     </Stack>

package/src/Panel/getPanelBlocks.jsx

@@ -1,11 +1,12 @@
-import { models } from 'cozy-client'
+import {
+  isFromKonnector,
+  hasQualifications
+} from 'cozy-client/dist/models/file'
 import KonnectorBlock from 'cozy-harvest-lib/dist/components/KonnectorBlock'
 
-import Certifications from './Certifications'
+import Informations from './Informations'
 import Qualification from './Qualification'
 
-const { isFromKonnector, hasQualifications, hasCertifications } = models.file
-
 /**
  * @typedef {Object} PanelBlockSpec
  * @property {Function} condition - Function that returns true if the block should be displayed
@@ -30,9 +31,9 @@ export const getPanelBlocksSpecs = (isPublic = false) => ({
     condition: file => isFromKonnector(file) && !isPublic,
     component: KonnectorBlock
   },
-  certifications: {
-    condition: hasCertifications,
-    component: Certifications
+  informations: {
+    condition: () => true,
+    component: Informations
   }
 })
 

package/src/Panel/getPanelBlocks.spec.jsx

@@ -70,7 +70,7 @@ describe('getPanelBlocksSpecs', () => {
         condition: expect.any(Function),
         component: expect.anything()
       },
-      certifications: {
+      informations: {
         condition: expect.any(Function),
         component: expect.anything()
       }

package/src/Panel/helpers.js

@@ -0,0 +1,43 @@
+import { splitFilename } from 'cozy-client/dist/models/file'
+
+/**
+ * Returns file extension or class
+ * @param {import("cozy-client/types").IOCozyFile} file - io.cozy.file
+ * @returns {string}
+ */
+export const makeFormat = file => {
+  const { extension } = splitFilename(file)
+  return (extension.replace('.', '') || file.class).toUpperCase()
+}
+
+/**
+ * Returns a formatted date
+ * @param {string} lang - language in ISO 639-1 format
+ * @returns {string}
+ */
+export const makeDate = lang =>
+  lang === 'fr' ? 'DD MMM YYYY à HH:mm' : 'MMM DD YYYY at HH:mm'
+
+/**
+ * Returns a formatted size
+ * @param {number} bytes - file bytes
+ * @returns {string}
+ */
+export const makeSize = bytes => {
+  if (!+bytes) return '0'
+
+  const k = 1024
+  const dm = 2
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+}
+
+/**
+ * Returns file path
+ * @param {import("cozy-client/types").IOCozyFile} file - io.cozy.file
+ * @returns {string}
+ */
+export const makePath = file => file.path?.replace(`/${file.name}`, '')

package/src/locales/en.json

@@ -24,6 +24,16 @@
     "openWith": "Open with...",
     "openInOnlyOffice": "Open with Only Office",
     "panel": {
+      "informations": {
+        "format": {
+          "title": "%{format} Document",
+          "subtitle": "Format"
+        },
+        "size": "Size",
+        "location": "Location",
+        "creation": "Creation",
+        "modification": "Last modification"
+      },
       "certifications": {
         "carbonCopy": {
           "title": "Carbon Copy",

package/src/locales/fr.json

@@ -24,6 +24,16 @@
     "openWith": "Ouvrir avec...",
     "openInOnlyOffice": "Ouvrir avec Only Office",
     "panel": {
+      "informations": {
+        "format": {
+          "title": "Document %{format}",
+          "subtitle": "Format"
+        },
+        "size": "Taille",
+        "location": "Emplacement",
+        "creation": "Création",
+        "modification": "Dernière modification"
+      },
       "certifications": {
         "carbonCopy": {
           "title": "Copie conforme",

package/dist/Panel/Certifications.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _has = _interopRequireDefault(require("lodash/has"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Icon = _interopRequireWildcard(require("cozy-ui/transpiled/react/Icon"));
-
-var _CarbonCopy = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CarbonCopy"));
-
-var _Safe = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Safe"));
-
-var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
-
-var _Media = require("cozy-ui/transpiled/react/deprecated/Media");
-
-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 Certification = function Certification(_ref) {
-  var icon = _ref.icon,
-      title = _ref.title,
-      caption = _ref.caption;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-ph-2 u-pv-1"
-  }, /*#__PURE__*/_react.default.createElement(_Media.Media, {
-    className: "u-mb-half",
-    align: "top"
-  }, /*#__PURE__*/_react.default.createElement(_Media.Img, {
-    className: "u-mr-half"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icon: icon
-  })), /*#__PURE__*/_react.default.createElement(_Media.Bd, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "body1"
-  }, title))), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "caption"
-  }, caption));
-};
-
-Certification.propTypes = {
-  icon: _Icon.iconPropType.isRequired,
-  title: _propTypes.default.string.isRequired,
-  caption: _propTypes.default.string.isRequired
-};
-
-var Certifications = function Certifications(_ref2) {
-  var file = _ref2.file,
-      t = _ref2.t;
-  var hasCarbonCopy = (0, _has.default)(file, 'metadata.carbonCopy');
-  var hasElectronicSafe = (0, _has.default)(file, 'metadata.electronicSafe');
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasCarbonCopy && /*#__PURE__*/_react.default.createElement(Certification, {
-    icon: _CarbonCopy.default,
-    title: t('Viewer.panel.certifications.carbonCopy.title'),
-    caption: t('Viewer.panel.certifications.carbonCopy.caption')
-  }), hasElectronicSafe && /*#__PURE__*/_react.default.createElement(Certification, {
-    icon: _Safe.default,
-    title: t('Viewer.panel.certifications.electronicSafe.title'),
-    caption: t('Viewer.panel.certifications.electronicSafe.caption')
-  }));
-};
-
-Certifications.propTypes = {
-  file: _propTypes.default.object.isRequired
-};
-
-var _default = (0, _withViewerLocales.withViewerLocales)(Certifications);
-
-exports.default = _default;

package/src/Panel/Certifications.jsx

@@ -1,63 +0,0 @@
-import has from 'lodash/has'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
-import SafeIcon from 'cozy-ui/transpiled/react/Icons/Safe'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
-
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const Certification = ({ icon, title, caption }) => {
-  return (
-    <div className="u-ph-2 u-pv-1">
-      <Media className="u-mb-half" align="top">
-        <Img className="u-mr-half">
-          <Icon icon={icon} />
-        </Img>
-        <Bd>
-          <Typography variant="body1">{title}</Typography>
-        </Bd>
-      </Media>
-      <Typography variant="caption">{caption}</Typography>
-    </div>
-  )
-}
-
-Certification.propTypes = {
-  icon: iconPropType.isRequired,
-  title: PropTypes.string.isRequired,
-  caption: PropTypes.string.isRequired
-}
-
-const Certifications = ({ file, t }) => {
-  const hasCarbonCopy = has(file, 'metadata.carbonCopy')
-  const hasElectronicSafe = has(file, 'metadata.electronicSafe')
-
-  return (
-    <>
-      {hasCarbonCopy && (
-        <Certification
-          icon={CarbonCopyIcon}
-          title={t('Viewer.panel.certifications.carbonCopy.title')}
-          caption={t('Viewer.panel.certifications.carbonCopy.caption')}
-        />
-      )}
-      {hasElectronicSafe && (
-        <Certification
-          icon={SafeIcon}
-          title={t('Viewer.panel.certifications.electronicSafe.title')}
-          caption={t('Viewer.panel.certifications.electronicSafe.caption')}
-        />
-      )}
-    </>
-  )
-}
-
-Certifications.propTypes = {
-  file: PropTypes.object.isRequired
-}
-
-export default withViewerLocales(Certifications)