cozy-ui 91.2.0 → 92.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [92.0.0](https://github.com/cozy/cozy-ui/compare/v91.2.0...v92.0.0) (2023-08-28)
+
+
+### Features
+
+* **Viewer:** Display file path into the toolbar ([e76e2f7](https://github.com/cozy/cozy-ui/commit/e76e2f7))
+* **Viewer:** Move toolbarProps into componentsProps ([b0582da](https://github.com/cozy/cozy-ui/commit/b0582da))
+* **Viewer:** Remove onlyOfficeProps ([9983c4a](https://github.com/cozy/cozy-ui/commit/9983c4a))
+
+
+### BREAKING CHANGES
+
+* **Viewer:** The `toolbarProps` attribute from Viewer property has been moved into the `componentsProps` attribute. 
+
+You can use this codemods to migrate. **Don't forget to run js linter after the codemods.**
+
+The `--parser` option is essential to manage any TSX files in the project.
+
+```
+yarn global add @cozy/codemods
+yarn global add jscodeshift@0.13.1
+jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-viewer-components-props.js src babel --ignore-pattern=src/targets/ --extensions js,jsx,tsx --parser tsx
+```
+
+You can do this manually by transferring the contents of `toolbarProps` to `componentsProps` under a `toolbarProps` property.
+* **Viewer:** The `onlyOfficeProps` attribute from Viewer property has been moved into the `componentsProps` attribute. 
+
+You have to move the contents of `onlyOfficeProps ` to `componentsProps` under a `OnlyOfficeViewer` property.
+
 # [91.2.0](https://github.com/cozy/cozy-ui/compare/v91.1.1...v91.2.0) (2023-08-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "91.2.0",
+  "version": "92.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Viewer/Readme.md

@@ -17,13 +17,8 @@ The `Viewer` can display an **information panel** to show additional information
 * **currentIndex** : `<number>` – Index of the file to show
 * **currentURL** : `<string>` – Optionnal URL of the file
 * **className** : `<string>` – CSS classes
-* **toolbarProps** : `<object>` – Toolbar properties
-  * **toolbarRef** : `<object>` – React reference of the toolbar node
-  * **showToolbar** : `<boolean>` – Whether to show the toolbar or not. Note that the built-in close button is in the toolbar
-  * **showClose** : `<boolean>` – Whether to show close button in toolbar
 * **showNavigation** : `<boolean>` – Whether to show left and right arrows to navigate between files
 * **renderFallbackExtraContent** : `<function>` – A render prop that is called when a file can't be displayed
-* **onlyOfficeProps** : `<object>` – Used to open an Only Office file (deprecated)
 * **disablePanel** : `<boolean>` – Show/Hide the panel containing more information about the file only on Desktop
 * **disableFooter** : `<boolean>` – Show/Hide the panel containing more information about the file only on Phone & Tablet devices
 * **editPathByModelProps** : `<object>` – Edit path by model properties
@@ -35,6 +30,12 @@ The `Viewer` can display an **information panel** to show additional information
   * **OnlyOfficeViewer** : `<object>` – Used to open an Only Office file
     * **isEnabled** : `<boolean>` – Whether Only Office is enabled on the server
     * **opener** : `<function>` – To open the Only Office file
+  * **toolbarProps** : `<object>` – Toolbar properties
+    * **toolbarRef** : `<object>` – React reference of the toolbar node
+    * **showToolbar** : `<boolean>` – Whether to show the toolbar or not. Note that the built-in close button is in the toolbar
+    * **showClose** : `<boolean>` – Whether to show close button in toolbar
+    * **showFilePath** : `<boolean>` – Whether to show file path below his name
+
 
 ### Demo
 
@@ -69,13 +70,15 @@ const files = [
     _id: 'audio',
     class: 'audio',
     name: 'Sample.mp3',
-    mime: 'audio/mp3'
+    mime: 'audio/mp3',
+    dir_id: 'parent_folder'
   },
   {
     _id: 'slide',
     class: 'slide',
     name: 'Slide.pptx',
-    mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+    mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    dir_id: 'parent_folder'
   },
   {
     _id: 'pdf',
@@ -99,7 +102,8 @@ const files = [
         sourceSubCategory: "transport",
         subjects: ["permit", "driving"]
       }
-    }
+    },
+    dir_id: 'parent_folder'
   },
   {
     _id: 'text',
@@ -163,7 +167,8 @@ const ShareButtonFake = () => {
 initialState = {
   viewerOpened: isTesting(),
   currentIndex: 0,
-  showToolbarCloseButton: true
+  showToolbarCloseButton: true,
+  showToolbarWithPath: false
 }
 
 const initialVariants = [
@@ -183,13 +188,12 @@ const getURL = (file) => {
 
 const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened })
 const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton })
+const handleToggleToolbarWithPath = () => setState({ showToolbarWithPath: !state.showToolbarWithPath })
 const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, currentURL: getURL(file) })
 const editPathByModelProps = {
   information: `#!/Viewer?metadata=__NAME__`,
   page: `#!/Viewer`
-}
-
-;
+};
 
 <DemoProvider>
   <Variants initialVariants={initialVariants}>{
@@ -204,6 +208,12 @@ const editPathByModelProps = {
                 checked={state.showToolbarCloseButton}
                 onChange={handleToggleToolbarClose}
               />
+              <Checkbox
+                className="u-dib"
+                label="Show path"
+                checked={state.showToolbarWithPath}
+                onChange={handleToggleToolbarWithPath}
+              />
             </Card>
           )}
           <Button label="Open viewer" variant="ghost" size="small" onClick={toggleViewer} />
@@ -215,16 +225,17 @@ const editPathByModelProps = {
                 currentURL={state.currentURL}
                 showNavigation={variant.navigation}
                 editPathByModelProps={editPathByModelProps}
-                toolbarProps={{
-                  showToolbar: variant.toolbar,
-                  showClose: state.showToolbarCloseButton
-                }}
                 onCloseRequest={toggleViewer}
                 onChangeRequest={onFileChange}
                 componentsProps={{
                   OnlyOfficeViewer: {
                     isEnabled: variant.onlyOfficeEnabled,
                     opener: () => alert('This is a demo, no Only Office opener here')
+                  },
+                  toolbarProps:{
+                    showToolbar: variant.toolbar,
+                    showClose: state.showToolbarCloseButton,
+                    showFilePath: state.showToolbarWithPath
                   }
                 }}
               >

package/react/Viewer/Viewer.jsx

@@ -66,12 +66,10 @@ class Viewer extends Component {
       currentFile,
       hasPrevious,
       hasNext,
-      toolbarProps,
       toolbarRef,
       showNavigation,
       renderFallbackExtraContent,
       validForPanel,
-      onlyOfficeProps,
       componentsProps
     } = this.props
 
@@ -88,7 +86,7 @@ class Viewer extends Component {
           onPrevious={this.onPrevious}
           onNext={this.onNext}
           expanded={expanded}
-          toolbarProps={{ ...toolbarProps, toolbarRef }}
+          toolbarProps={{ ...componentsProps.toolbarProps, toolbarRef }}
           showNavigation={showNavigation}
           showInfoPanel={validForPanel}
         >
@@ -96,7 +94,6 @@ class Viewer extends Component {
             file={currentFile}
             onClose={this.onClose}
             renderFallbackExtraContent={renderFallbackExtraContent}
-            onlyOfficeProps={onlyOfficeProps}
             componentsProps={componentsProps}
           />
         </ViewerControls>
@@ -114,19 +111,11 @@ Viewer.propTypes = {
   onCloseRequest: PropTypes.func,
   /** Called with (nextFile, nextIndex) when the user requests to navigate to another file */
   onChangeRequest: PropTypes.func,
-  toolbarProps: PropTypes.shape(toolbarPropsPropType),
   toolbarRef: PropTypes.object,
   /** Whether to show left and right arrows to navigate between files */
   showNavigation: PropTypes.bool,
   /** A render prop that is called when a file can't be displayed */
   renderFallbackExtraContent: PropTypes.func,
-  /** Used to open an Only Office file */
-  onlyOfficeProps: PropTypes.shape({
-    /** Whether Only Office is enabled on the server */
-    isEnabled: PropTypes.bool,
-    /** To open the Only Office file */
-    opener: PropTypes.func
-  }),
   validForPanel: PropTypes.bool,
   /* Props passed to components with the same name */
   componentsProps: PropTypes.shape({
@@ -136,7 +125,8 @@ Viewer.propTypes = {
       isEnabled: PropTypes.bool,
       /** To open the Only Office file */
       opener: PropTypes.func
-    })
+    }),
+    toolbarProps: PropTypes.shape(toolbarPropsPropType)
   })
 }
 

package/react/Viewer/ViewerContainer.jsx

@@ -23,6 +23,7 @@ const ViewerContainer = props => {
     disablePanel,
     editPathByModelProps,
     children,
+    componentsProps,
     ...rest
   } = props
   const { currentIndex, files, currentURL } = props
@@ -35,6 +36,15 @@ const ViewerContainer = props => {
   const validForPanel =
     isValidForPanel({ file: currentFile }) && isDesktop && !disablePanel
 
+  const componentsPropsWithDefault = {
+    ...componentsProps,
+    toolbarProps: {
+      showToolbar: true,
+      showClose: true,
+      ...componentsProps?.toolbarProps
+    }
+  }
+
   return (
     <ViewerSnackbarProvider>
       <ActionMenuProvider editPathByModelProps={editPathByModelProps}>
@@ -45,6 +55,7 @@ const ViewerContainer = props => {
           <EncryptedProvider url={currentURL}>
             <Viewer
               {...rest}
+              componentsProps={componentsPropsWithDefault}
               currentFile={currentFile}
               hasPrevious={hasPrevious}
               hasNext={hasNext}
@@ -79,19 +90,10 @@ ViewerContainer.propTypes = {
   onCloseRequest: PropTypes.func,
   /** Called with (nextFile, nextIndex) when the user requests to navigate to another file */
   onChangeRequest: PropTypes.func,
-  /** Toolbar properties */
-  toolbarProps: PropTypes.shape(toolbarPropsPropType),
   /** Whether to show left and right arrows to navigate between files */
   showNavigation: PropTypes.bool,
   /** A render prop that is called when a file can't be displayed */
   renderFallbackExtraContent: PropTypes.func,
-  /** Used to open an Only Office file */
-  onlyOfficeProps: PropTypes.shape({
-    /** Whether Only Office is enabled on the server */
-    isEnabled: PropTypes.bool,
-    /** To open the Only Office file */
-    opener: PropTypes.func
-  }),
   /** Edit path by model properties */
   editPathByModelProps: PropTypes.shape({
     /** URL used to edit the file when editing a `information` type metadata (text, date) */
@@ -111,13 +113,14 @@ ViewerContainer.propTypes = {
       isEnabled: PropTypes.bool,
       /** To open the Only Office file */
       opener: PropTypes.func
-    })
+    }),
+    /** Toolbar properties */
+    toolbarProps: PropTypes.shape(toolbarPropsPropType)
   })
 }
 
 ViewerContainer.defaultProps = {
   currentIndex: 0,
-  toolbarProps: { showToolbar: true, showClose: true },
   showNavigation: true
 }
 

package/react/Viewer/components/Toolbar.jsx

@@ -17,6 +17,7 @@ import DownloadIcon from '../../Icons/Download'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 import { downloadFile } from '../helpers'
 import { useEncrypted } from '../providers/EncryptedProvider'
+import { ToolbarFilePath } from './ToolbarFilePath'
 
 import styles from './styles.styl'
 
@@ -36,7 +37,8 @@ const Toolbar = ({
   onClose,
   t,
   toolbarRef,
-  breakpoints: { isDesktop }
+  breakpoints: { isDesktop },
+  showFilePath
 }) => {
   const client = useClient()
   const classes = useClasses()
@@ -62,14 +64,17 @@ const Toolbar = ({
           <Icon icon={PreviousIcon} />
         </IconButton>
       )}
-      <Typography
-        className="u-pl-half"
-        variant="h3"
-        color={isDesktop ? 'inherit' : 'textPrimary'}
-        noWrap
-      >
-        {file.name}
-      </Typography>
+      <div className="u-pl-half">
+        <Typography
+          variant="h3"
+          color={isDesktop ? 'inherit' : 'textPrimary'}
+          noWrap
+        >
+          {file.name}
+        </Typography>
+        {showFilePath ? <ToolbarFilePath file={file} /> : null}
+      </div>
+
       <div className="u-ml-auto u-ph-1">
         {isDesktop && (
           <Button
@@ -90,7 +95,8 @@ Toolbar.propTypes = {
   onMouseEnter: PropTypes.func.isRequired,
   onMouseLeave: PropTypes.func.isRequired,
   file: PropTypes.object.isRequired,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  showFilePath: PropTypes.bool
 }
 
 export default flow(

package/react/Viewer/components/ToolbarFilePath.jsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react'
+
+import { useClient, useQuery, models } from 'cozy-client'
+
+import Link from '../../Link'
+import AppLinker from '../../AppLinker'
+import FilePath from '../../FilePath'
+import useBreakpoints from '../../hooks/useBreakpoints'
+
+import { makeWebLink, normalizeAndSpreadAttributes } from '../helpers'
+import { buildFileByIdQuery } from '../queries'
+
+const { ensureFilePath } = models.file
+
+const ToolbarFilePath = ({ file }) => {
+  const client = useClient()
+  const { isDesktop } = useBreakpoints()
+
+  const normalizeFile = normalizeAndSpreadAttributes(file)
+
+  const parentQuery = buildFileByIdQuery(normalizeFile.dir_id)
+  const parentResult = useQuery(parentQuery.definition, {
+    ...parentQuery.options,
+    enabled: !!normalizeFile.dir_id
+  })
+
+  const fileWithPath = useMemo(
+    () =>
+      parentResult.data
+        ? ensureFilePath(normalizeFile, parentResult.data)
+        : undefined,
+    [normalizeFile, parentResult.data]
+  )
+
+  if (fileWithPath) {
+    const appSlug = 'drive'
+    const nativePath = `/folder/${fileWithPath.dir_id}`
+    const path = fileWithPath.path.replace(fileWithPath.name, '')
+    const link = makeWebLink({ client, path: nativePath, slug: appSlug })
+
+    if (isDesktop && link) {
+      return (
+        <AppLinker app={{ slug: appSlug }} nativePath={nativePath} href={link}>
+          {({ href, onClick }) => (
+            <Link href={href} onClick={onClick} color="inherit">
+              <FilePath className="u-white">{path}</FilePath>
+            </Link>
+          )}
+        </AppLinker>
+      )
+    }
+    return <FilePath className={isDesktop ? 'u-white' : null}>{path}</FilePath>
+  }
+
+  return null
+}
+
+export { ToolbarFilePath }

package/react/Viewer/components/ViewerByFile.jsx

@@ -19,10 +19,6 @@ import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer'
 
 import { useEncrypted } from '../providers/EncryptedProvider'
 
-import createDepreciationLogger from '../../helpers/createDepreciationLogger'
-
-const logDepecratedOnlyOfficeProps = createDepreciationLogger()
-
 const { isPlainText } = models.file
 
 export const getViewerComponentName = ({
@@ -63,20 +59,11 @@ const ViewerByFile = ({
   gestures,
   gesturesRef,
   onSwipe,
-  onlyOfficeProps,
   breakpoints: { isDesktop },
   componentsProps
 }) => {
-  if (onlyOfficeProps) {
-    logDepecratedOnlyOfficeProps(
-      'onlyOfficeProps in Viewer is deprecated. Please use componentsProps.OnlyOfficeViewer instead.'
-    )
-  }
-
-  const isOnlyOfficeEnabled =
-    componentsProps?.OnlyOfficeViewer?.isEnabled || onlyOfficeProps?.isEnabled
-  const onlyOfficeOpener =
-    componentsProps?.OnlyOfficeViewer?.opener || onlyOfficeProps?.opener
+  const isOnlyOfficeEnabled = componentsProps?.OnlyOfficeViewer?.isEnabled
+  const onlyOfficeOpener = componentsProps?.OnlyOfficeViewer?.opener
 
   const { url } = useEncrypted()
 
@@ -108,7 +95,6 @@ ViewerByFile.propTypes = {
   file: FileDoctype.isRequired,
   onClose: PropTypes.func.isRequired,
   renderFallbackExtraContent: PropTypes.func,
-  onlyOfficeProps: PropTypes.object,
   // gestures, gesturesRef and onSwipe are got from ViewerControls
   gestures: PropTypes.object,
   gesturesRef: PropTypes.object,

package/react/Viewer/components/ViewerControls.jsx

@@ -115,7 +115,7 @@ class ViewerControls extends Component {
       classes,
       breakpoints: { isDesktop }
     } = this.props
-    const { showToolbar, showClose, toolbarRef } = toolbarProps
+    const { showToolbar, showClose, toolbarRef, showFilePath } = toolbarProps
     const { hidden } = this.state
 
     const shouldDisplayContentTop = isValidForPanel({ file })
@@ -140,6 +140,7 @@ class ViewerControls extends Component {
             onClose={showClose && onClose}
             onMouseEnter={this.showControls}
             onMouseLeave={this.hideControls}
+            showFilePath={showFilePath}
           />
         )}
         {showNavigation && isDesktop && hasPrevious && (

package/react/Viewer/helpers.js

@@ -1,11 +1,12 @@
-import { models } from 'cozy-client'
+import { models, generateWebLink } from 'cozy-client'
 import flag from 'cozy-flags'
 
 const {
   isEncrypted,
   isFromKonnector,
   hasQualifications,
-  hasCertifications
+  hasCertifications,
+  normalize
 } = models.file
 
 export const knownDateMetadataNames = [
@@ -168,3 +169,37 @@ export const isEditableAttribute = (name, file) => {
     ((name === 'issueDate' && !isFromKonnector(file)) || name !== 'issueDate')
   )
 }
+
+export const normalizeAndSpreadAttributes = rawFile => {
+  const normalizedFile = normalize(rawFile)
+
+  return {
+    ...normalizedFile,
+    ...normalizedFile?.attributes
+  }
+}
+
+/**
+ * Return a web link to an application in the Cozy environment with the specified path
+ * @param {object} param
+ * @param {CozyClient} param.client - Instance of CozyClient
+ * @param {string} param.slug - Slug of the application
+ * @param {string} param.path - Path into the application
+ * @returns {string} web link
+ */
+export const makeWebLink = ({ client, slug, path }) => {
+  try {
+    const cozyURL = new URL(client.getStackClient().uri)
+    const { subdomain: subDomainType } = client.getInstanceOptions()
+
+    return generateWebLink({
+      pathname: '/',
+      cozyUrl: cozyURL.origin,
+      slug,
+      hash: path,
+      subDomainType
+    })
+  } catch (e) {
+    return null
+  }
+}

package/react/Viewer/proptypes.js

@@ -6,5 +6,7 @@ export const toolbarPropsPropType = {
   /** Whether to show close button in toolbar */
   showClose: PropTypes.bool,
   /** React reference of the toolbar node */
-  toolbarRef: PropTypes.object
+  toolbarRef: PropTypes.object,
+  /** Whether to show file path below his name */
+  showFilePath: PropTypes.bool
 }

package/react/Viewer/queries.js

@@ -9,3 +9,12 @@ export const buildContactByIdsQuery = (ids = []) => ({
     fetchPolicy: defaultFetchPolicy
   }
 })
+
+export const buildFileByIdQuery = fileId => ({
+  definition: () => Q('io.cozy.files').getById(fileId),
+  options: {
+    as: `io.cozy.files/${fileId}`,
+    fetchPolicy: defaultFetchPolicy,
+    singleDocData: true
+  }
+})

package/transpiled/react/Viewer/Viewer.js

@@ -103,12 +103,10 @@ var Viewer = /*#__PURE__*/function (_Component) {
           currentFile = _this$props3.currentFile,
           hasPrevious = _this$props3.hasPrevious,
           hasNext = _this$props3.hasNext,
-          toolbarProps = _this$props3.toolbarProps,
           toolbarRef = _this$props3.toolbarRef,
           showNavigation = _this$props3.showNavigation,
           renderFallbackExtraContent = _this$props3.renderFallbackExtraContent,
           validForPanel = _this$props3.validForPanel,
-          onlyOfficeProps = _this$props3.onlyOfficeProps,
           componentsProps = _this$props3.componentsProps; // this `expanded` property makes the next/previous controls cover the displayed image
 
       var expanded = currentFile && currentFile.class === 'image';
@@ -120,7 +118,7 @@ var Viewer = /*#__PURE__*/function (_Component) {
         onPrevious: this.onPrevious,
         onNext: this.onNext,
         expanded: expanded,
-        toolbarProps: _objectSpread(_objectSpread({}, toolbarProps), {}, {
+        toolbarProps: _objectSpread(_objectSpread({}, componentsProps.toolbarProps), {}, {
           toolbarRef: toolbarRef
         }),
         showNavigation: showNavigation,
@@ -129,7 +127,6 @@ var Viewer = /*#__PURE__*/function (_Component) {
         file: currentFile,
         onClose: this.onClose,
         renderFallbackExtraContent: renderFallbackExtraContent,
-        onlyOfficeProps: onlyOfficeProps,
         componentsProps: componentsProps
       })));
     }
@@ -149,7 +146,6 @@ Viewer.propTypes = {
 
   /** Called with (nextFile, nextIndex) when the user requests to navigate to another file */
   onChangeRequest: PropTypes.func,
-  toolbarProps: PropTypes.shape(toolbarPropsPropType),
   toolbarRef: PropTypes.object,
 
   /** Whether to show left and right arrows to navigate between files */
@@ -157,15 +153,6 @@ Viewer.propTypes = {
 
   /** A render prop that is called when a file can't be displayed */
   renderFallbackExtraContent: PropTypes.func,
-
-  /** Used to open an Only Office file */
-  onlyOfficeProps: PropTypes.shape({
-    /** Whether Only Office is enabled on the server */
-    isEnabled: PropTypes.bool,
-
-    /** To open the Only Office file */
-    opener: PropTypes.func
-  }),
   validForPanel: PropTypes.bool,
 
   /* Props passed to components with the same name */
@@ -177,7 +164,8 @@ Viewer.propTypes = {
 
       /** To open the Only Office file */
       opener: PropTypes.func
-    })
+    }),
+    toolbarProps: PropTypes.shape(toolbarPropsPropType)
   })
 };
 export default Viewer;

package/transpiled/react/Viewer/ViewerContainer.js

@@ -1,6 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "disableFooter", "disablePanel", "editPathByModelProps", "children"];
+var _excluded = ["className", "disableFooter", "disablePanel", "editPathByModelProps", "children", "componentsProps"];
+
+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) { _defineProperty(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; }
+
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -25,6 +31,7 @@ var ViewerContainer = function ViewerContainer(props) {
       disablePanel = props.disablePanel,
       editPathByModelProps = props.editPathByModelProps,
       children = props.children,
+      componentsProps = props.componentsProps,
       rest = _objectWithoutProperties(props, _excluded);
 
   var currentIndex = props.currentIndex,
@@ -42,6 +49,14 @@ var ViewerContainer = function ViewerContainer(props) {
   var validForPanel = isValidForPanel({
     file: currentFile
   }) && isDesktop && !disablePanel;
+
+  var componentsPropsWithDefault = _objectSpread(_objectSpread({}, componentsProps), {}, {
+    toolbarProps: _objectSpread({
+      showToolbar: true,
+      showClose: true
+    }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbarProps)
+  });
+
   return /*#__PURE__*/React.createElement(ViewerSnackbarProvider, null, /*#__PURE__*/React.createElement(ActionMenuProvider, {
     editPathByModelProps: editPathByModelProps
   }, /*#__PURE__*/React.createElement("div", {
@@ -50,6 +65,7 @@ var ViewerContainer = function ViewerContainer(props) {
   }, /*#__PURE__*/React.createElement(EncryptedProvider, {
     url: currentURL
   }, /*#__PURE__*/React.createElement(Viewer, _extends({}, rest, {
+    componentsProps: componentsPropsWithDefault,
     currentFile: currentFile,
     hasPrevious: hasPrevious,
     hasNext: hasNext,
@@ -80,24 +96,12 @@ ViewerContainer.propTypes = {
   /** Called with (nextFile, nextIndex) when the user requests to navigate to another file */
   onChangeRequest: PropTypes.func,
 
-  /** Toolbar properties */
-  toolbarProps: PropTypes.shape(toolbarPropsPropType),
-
   /** Whether to show left and right arrows to navigate between files */
   showNavigation: PropTypes.bool,
 
   /** A render prop that is called when a file can't be displayed */
   renderFallbackExtraContent: PropTypes.func,
 
-  /** Used to open an Only Office file */
-  onlyOfficeProps: PropTypes.shape({
-    /** Whether Only Office is enabled on the server */
-    isEnabled: PropTypes.bool,
-
-    /** To open the Only Office file */
-    opener: PropTypes.func
-  }),
-
   /** Edit path by model properties */
   editPathByModelProps: PropTypes.shape({
     /** URL used to edit the file when editing a `information` type metadata (text, date) */
@@ -122,15 +126,14 @@ ViewerContainer.propTypes = {
 
       /** To open the Only Office file */
       opener: PropTypes.func
-    })
+    }),
+
+    /** Toolbar properties */
+    toolbarProps: PropTypes.shape(toolbarPropsPropType)
   })
 };
 ViewerContainer.defaultProps = {
   currentIndex: 0,
-  toolbarProps: {
-    showToolbar: true,
-    showClose: true
-  },
   showNavigation: true
 };
 export default ViewerContainer;

package/transpiled/react/Viewer/components/Toolbar.js

@@ -15,6 +15,7 @@ import DownloadIcon from "cozy-ui/transpiled/react/Icons/Download";
 import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/hoc/withViewerLocales";
 import { downloadFile } from "cozy-ui/transpiled/react/Viewer/helpers";
 import { useEncrypted } from "cozy-ui/transpiled/react/Viewer/providers/EncryptedProvider";
+import { ToolbarFilePath } from "cozy-ui/transpiled/react/Viewer/components/ToolbarFilePath";
 var styles = {
   "viewer-nav": "styles__viewer-nav___1MSd7",
   "viewer-nav--visible": "styles__viewer-nav--visible___h_KJD",
@@ -44,7 +45,8 @@ var Toolbar = function Toolbar(_ref) {
       onClose = _ref.onClose,
       t = _ref.t,
       toolbarRef = _ref.toolbarRef,
-      isDesktop = _ref.breakpoints.isDesktop;
+      isDesktop = _ref.breakpoints.isDesktop,
+      showFilePath = _ref.showFilePath;
   var client = useClient();
   var classes = useClasses();
 
@@ -65,12 +67,15 @@ var Toolbar = function Toolbar(_ref) {
     })
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: PreviousIcon
-  })), /*#__PURE__*/React.createElement(Typography, {
-    className: "u-pl-half",
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "u-pl-half"
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h3",
     color: isDesktop ? 'inherit' : 'textPrimary',
     noWrap: true
-  }, file.name), /*#__PURE__*/React.createElement("div", {
+  }, file.name), showFilePath ? /*#__PURE__*/React.createElement(ToolbarFilePath, {
+    file: file
+  }) : null), /*#__PURE__*/React.createElement("div", {
     className: "u-ml-auto u-ph-1"
   }, isDesktop && /*#__PURE__*/React.createElement(Button, {
     className: "u-white",
@@ -92,6 +97,7 @@ Toolbar.propTypes = {
   onMouseEnter: PropTypes.func.isRequired,
   onMouseLeave: PropTypes.func.isRequired,
   file: PropTypes.object.isRequired,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  showFilePath: PropTypes.bool
 };
 export default flow(withBreakpoints(), withViewerLocales)(Toolbar);

package/transpiled/react/Viewer/components/ToolbarFilePath.js

@@ -0,0 +1,71 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+import React, { useMemo } from 'react';
+import { useClient, useQuery, models } from 'cozy-client';
+import Link from "cozy-ui/transpiled/react/Link";
+import AppLinker from "cozy-ui/transpiled/react/AppLinker";
+import FilePath from "cozy-ui/transpiled/react/FilePath";
+import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
+import { makeWebLink, normalizeAndSpreadAttributes } from "cozy-ui/transpiled/react/Viewer/helpers";
+import { buildFileByIdQuery } from "cozy-ui/transpiled/react/Viewer/queries";
+var ensureFilePath = models.file.ensureFilePath;
+
+var ToolbarFilePath = function ToolbarFilePath(_ref) {
+  var file = _ref.file;
+  var client = useClient();
+
+  var _useBreakpoints = useBreakpoints(),
+      isDesktop = _useBreakpoints.isDesktop;
+
+  var normalizeFile = normalizeAndSpreadAttributes(file);
+  var parentQuery = buildFileByIdQuery(normalizeFile.dir_id);
+  var parentResult = useQuery(parentQuery.definition, _objectSpread(_objectSpread({}, parentQuery.options), {}, {
+    enabled: !!normalizeFile.dir_id
+  }));
+  var fileWithPath = useMemo(function () {
+    return parentResult.data ? ensureFilePath(normalizeFile, parentResult.data) : undefined;
+  }, [normalizeFile, parentResult.data]);
+
+  if (fileWithPath) {
+    var appSlug = 'drive';
+    var nativePath = "/folder/".concat(fileWithPath.dir_id);
+    var path = fileWithPath.path.replace(fileWithPath.name, '');
+    var link = makeWebLink({
+      client: client,
+      path: nativePath,
+      slug: appSlug
+    });
+
+    if (isDesktop && link) {
+      return /*#__PURE__*/React.createElement(AppLinker, {
+        app: {
+          slug: appSlug
+        },
+        nativePath: nativePath,
+        href: link
+      }, function (_ref2) {
+        var href = _ref2.href,
+            onClick = _ref2.onClick;
+        return /*#__PURE__*/React.createElement(Link, {
+          href: href,
+          onClick: onClick,
+          color: "inherit"
+        }, /*#__PURE__*/React.createElement(FilePath, {
+          className: "u-white"
+        }, path));
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(FilePath, {
+      className: isDesktop ? 'u-white' : null
+    }, path);
+  }
+
+  return null;
+};
+
+export { ToolbarFilePath };

package/transpiled/react/Viewer/components/ViewerByFile.js

@@ -14,8 +14,6 @@ import NoViewer from "cozy-ui/transpiled/react/Viewer/NoViewer";
 import ShortcutViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/ShortcutViewer";
 import OnlyOfficeViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/OnlyOfficeViewer";
 import { useEncrypted } from "cozy-ui/transpiled/react/Viewer/providers/EncryptedProvider";
-import createDepreciationLogger from "cozy-ui/transpiled/react/helpers/createDepreciationLogger";
-var logDepecratedOnlyOfficeProps = createDepreciationLogger();
 var isPlainText = models.file.isPlainText;
 export var getViewerComponentName = function getViewerComponentName(_ref) {
   var file = _ref.file,
@@ -61,16 +59,10 @@ var ViewerByFile = function ViewerByFile(_ref2) {
       gestures = _ref2.gestures,
       gesturesRef = _ref2.gesturesRef,
       onSwipe = _ref2.onSwipe,
-      onlyOfficeProps = _ref2.onlyOfficeProps,
       isDesktop = _ref2.breakpoints.isDesktop,
       componentsProps = _ref2.componentsProps;
-
-  if (onlyOfficeProps) {
-    logDepecratedOnlyOfficeProps('onlyOfficeProps in Viewer is deprecated. Please use componentsProps.OnlyOfficeViewer instead.');
-  }
-
-  var isOnlyOfficeEnabled = (componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$Only = componentsProps.OnlyOfficeViewer) === null || _componentsProps$Only === void 0 ? void 0 : _componentsProps$Only.isEnabled) || (onlyOfficeProps === null || onlyOfficeProps === void 0 ? void 0 : onlyOfficeProps.isEnabled);
-  var onlyOfficeOpener = (componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$Only2 = componentsProps.OnlyOfficeViewer) === null || _componentsProps$Only2 === void 0 ? void 0 : _componentsProps$Only2.opener) || (onlyOfficeProps === null || onlyOfficeProps === void 0 ? void 0 : onlyOfficeProps.opener);
+  var isOnlyOfficeEnabled = componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$Only = componentsProps.OnlyOfficeViewer) === null || _componentsProps$Only === void 0 ? void 0 : _componentsProps$Only.isEnabled;
+  var onlyOfficeOpener = componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$Only2 = componentsProps.OnlyOfficeViewer) === null || _componentsProps$Only2 === void 0 ? void 0 : _componentsProps$Only2.opener;
 
   var _useEncrypted = useEncrypted(),
       url = _useEncrypted.url;
@@ -98,7 +90,6 @@ ViewerByFile.propTypes = {
   file: FileDoctype.isRequired,
   onClose: PropTypes.func.isRequired,
   renderFallbackExtraContent: PropTypes.func,
-  onlyOfficeProps: PropTypes.object,
   // gestures, gesturesRef and onSwipe are got from ViewerControls
   gestures: PropTypes.object,
   gesturesRef: PropTypes.object,

package/transpiled/react/Viewer/components/ViewerControls.js

@@ -166,7 +166,8 @@ var ViewerControls = /*#__PURE__*/function (_Component) {
           isDesktop = _this$props.breakpoints.isDesktop;
       var showToolbar = toolbarProps.showToolbar,
           showClose = toolbarProps.showClose,
-          toolbarRef = toolbarProps.toolbarRef;
+          toolbarRef = toolbarProps.toolbarRef,
+          showFilePath = toolbarProps.showFilePath;
       var hidden = this.state.hidden;
       var shouldDisplayContentTop = isValidForPanel({
         file: file
@@ -181,7 +182,8 @@ var ViewerControls = /*#__PURE__*/function (_Component) {
         file: file,
         onClose: showClose && onClose,
         onMouseEnter: this.showControls,
-        onMouseLeave: this.hideControls
+        onMouseLeave: this.hideControls,
+        showFilePath: showFilePath
       }), showNavigation && isDesktop && hasPrevious && /*#__PURE__*/React.createElement(Navigation, {
         className: styles['viewer-nav--previous'],
         hidden: hidden,

package/transpiled/react/Viewer/helpers.js

@@ -1,13 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+
+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) { _defineProperty(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; }
+
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { models } from 'cozy-client';
+import { models, generateWebLink } from 'cozy-client';
 import flag from 'cozy-flags';
 var _models$file = models.file,
     isEncrypted = _models$file.isEncrypted,
     isFromKonnector = _models$file.isFromKonnector,
     hasQualifications = _models$file.hasQualifications,
-    hasCertifications = _models$file.hasCertifications;
+    hasCertifications = _models$file.hasCertifications,
+    normalize = _models$file.normalize;
 export var knownDateMetadataNames = ['AObtentionDate', 'BObtentionDate', 'CObtentionDate', 'DObtentionDate', 'obtentionDate', 'expirationDate', 'referencedDate', 'issueDate', 'shootingDate', 'date', 'datetime'];
 export var knownInformationMetadataNames = flag('mespapiers.migrated.metadata') ? ['number', 'country', 'refTaxIncome', 'contractType', 'noticePeriod'] : ['number', 'cafFileNumber', 'cardNumber', 'vinNumber', 'ibanNumber', 'country', 'passportNumber', 'refTaxIncome', 'contractType', 'noticePeriod'];
 export var knownOtherMetadataNames = ['contact', 'page', 'qualification'];
@@ -151,4 +158,39 @@ export var buildEditAttributePath = function buildEditAttributePath(editPathByMo
 export var isEditableAttribute = function isEditableAttribute(name, file) {
   var isNotEditableAttributes = ['datetime', 'qualification'];
   return !isNotEditableAttributes.includes(name) && (name === 'issueDate' && !isFromKonnector(file) || name !== 'issueDate');
+};
+export var normalizeAndSpreadAttributes = function normalizeAndSpreadAttributes(rawFile) {
+  var normalizedFile = normalize(rawFile);
+  return _objectSpread(_objectSpread({}, normalizedFile), normalizedFile === null || normalizedFile === void 0 ? void 0 : normalizedFile.attributes);
+};
+/**
+ * Return a web link to an application in the Cozy environment with the specified path
+ * @param {object} param
+ * @param {CozyClient} param.client - Instance of CozyClient
+ * @param {string} param.slug - Slug of the application
+ * @param {string} param.path - Path into the application
+ * @returns {string} web link
+ */
+
+export var makeWebLink = function makeWebLink(_ref6) {
+  var client = _ref6.client,
+      slug = _ref6.slug,
+      path = _ref6.path;
+
+  try {
+    var cozyURL = new URL(client.getStackClient().uri);
+
+    var _client$getInstanceOp = client.getInstanceOptions(),
+        subDomainType = _client$getInstanceOp.subdomain;
+
+    return generateWebLink({
+      pathname: '/',
+      cozyUrl: cozyURL.origin,
+      slug: slug,
+      hash: path,
+      subDomainType: subDomainType
+    });
+  } catch (e) {
+    return null;
+  }
 };

package/transpiled/react/Viewer/proptypes.js

@@ -7,5 +7,8 @@ export var toolbarPropsPropType = {
   showClose: PropTypes.bool,
 
   /** React reference of the toolbar node */
-  toolbarRef: PropTypes.object
+  toolbarRef: PropTypes.object,
+
+  /** Whether to show file path below his name */
+  showFilePath: PropTypes.bool
 };

package/transpiled/react/Viewer/queries.js

@@ -11,4 +11,16 @@ export var buildContactByIdsQuery = function buildContactByIdsQuery() {
       fetchPolicy: defaultFetchPolicy
     }
   };
+};
+export var buildFileByIdQuery = function buildFileByIdQuery(fileId) {
+  return {
+    definition: function definition() {
+      return Q('io.cozy.files').getById(fileId);
+    },
+    options: {
+      as: "io.cozy.files/".concat(fileId),
+      fetchPolicy: defaultFetchPolicy,
+      singleDocData: true
+    }
+  };
 };