Merge pull request #1401 from cozy/feat/ViewerShortcut

feat: Add a specific viewer for shortcut file

package.json

@@ -69,6 +69,7 @@
     "@semantic-release/changelog": "3.0.6",
     "@semantic-release/git": "7.0.18",
     "@semantic-release/npm": "5.3.4",
+    "@testing-library/react": "^9.5.0",
     "@testing-library/react-hooks": "^3.2.1",
     "argos-cli": "0.1.3",
     "autoprefixer-stylus": "1.0.0",
@@ -80,7 +81,7 @@
     "commitlint": "7.6.1",
     "commitlint-config-cozy": "0.3.27",
     "copyfiles": "2.1.1",
-    "cozy-client": "^12.3.0",
+    "cozy-client": "^12.4.0",
     "cozy-device-helper": "1.7.5",
     "cozy-doctypes": "^1.69.0",
     "css-loader": "0.28.11",

react/Viewer/ShortcutViewer.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { ButtonLink } from 'cozy-ui/transpiled/react/Button'
+import { useI18n } from '../I18n'
+import { useClient, useFetchShortcut } from 'cozy-client'
+import get from 'lodash/get'
+import NoViewer from './NoViewer'
+import { FileDoctype } from '../proptypes'
+
+const ShortcutViewer = ({ file }) => {
+  const client = useClient()
+  const { t } = useI18n()
+  const { shortcutInfos } = useFetchShortcut(client, file.id)
+  let url = ''
+  if (shortcutInfos) {
+    url = new URL(get(shortcutInfos, 'data.attributes.url'))
+  }
+  return (
+    <NoViewer
+      file={file}
+      renderFallbackExtraContent={() => (
+        <ButtonLink
+          label={`${t('Viewer.goto', { url: get(url, 'origin', '') })}`}
+          icon="openwith"
+          href={`${get(url, 'origin', '')}`}
+          target="_blank"
+        />
+      )}
+    />
+  )
+}
+
+ShortcutViewer.propTypes = {
+  file: FileDoctype.isRequired
+}
+
+export default ShortcutViewer

react/Viewer/ShortcutViewer.spec.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import CozyClient, { CozyProvider } from 'cozy-client'
+import I18n from '../I18n'
+import { render, wait } from '@testing-library/react'
+
+import ShortcutViewer from './ShortcutViewer'
+import { locales } from './index'
+const setup = () => {
+  const client = new CozyClient({})
+  return (
+    <CozyProvider client={client}>
+      <I18n lang="en" dictRequire={() => locales['en']}>
+        <ShortcutViewer file={{ id: '1' }} />
+      </I18n>
+    </CozyProvider>
+  )
+}
+
+describe('Shortcutviewer', () => {
+  it('renders the component', async () => {
+    const { container } = render(setup())
+    expect(container).toMatchSnapshot()
+    await wait()
+  })
+})

react/Viewer/__snapshots__/ShortcutViewer.spec.jsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcutviewer renders the component 1`] = `
+<div>
+  <div
+    class="styles__viewer-noviewer___3heA6"
+  >
+    <svg
+      class="styles__icon___23x3R"
+      height="140"
+      width="160"
+    >
+      <use
+        xlink:href="#file-type-files"
+      />
+    </svg>
+    <p
+      class="styles__viewer-filename___36bWW"
+    />
+    <a
+      class="styles__c-btn___-2Vnj"
+      href=""
+      target="_blank"
+    >
+      <span>
+        <svg
+          aria-hidden="true"
+          class="styles__icon___23x3R"
+          focusable="false"
+          height="16"
+          width="16"
+        >
+          <use
+            xlink:href="#openwith"
+          />
+        </svg>
+        <span>
+          Go to 
+        </span>
+      </span>
+    </a>
+  </div>
+</div>
+`;

react/Viewer/__snapshots__/index.spec.jsx.snap

@@ -74,6 +74,20 @@ exports[`Viewer should render the various viewers: pdfviewer 1`] = `
 />
 `;
 
+exports[`Viewer should render the various viewers: shortcutviewer 1`] = `
+<ShortcutViewer
+  file={
+    Object {
+      "_id": "shortcutfileid",
+      "class": "shortcut",
+      "mime": "application/internet-shortcut",
+      "name": "cozy.url",
+    }
+  }
+  onClose={[Function]}
+/>
+`;
+
 exports[`Viewer should render the various viewers: textviewer 1`] = `
 <withClient(TextViewer)
   file={

react/Viewer/index.jsx

@@ -11,13 +11,14 @@ import VideoViewer from './VideoViewer'
 import PdfJsViewer from './PdfJsViewer'
 import TextViewer from './TextViewer'
 import NoViewer from './NoViewer'
+import ShortcutViewer from './ShortcutViewer'
 
 import styles from './styles.styl'
 import en from './locales/en.json'
 import fr from './locales/fr.json'
 import { FileDoctype } from '../proptypes'
 
-const locales = {
+export const locales = {
   en,
   fr
 }
@@ -49,6 +50,25 @@ export const isPlainText = (mimeType = '', fileName = '') => {
   return mimeType ? /^text\//.test(mimeType) : /\.(txt|md)$/.test(fileName)
 }
 
+export const getViewerComponentName = file => {
+  switch (file.class) {
+    case 'shortcut':
+      return ShortcutViewer
+    case 'image':
+      return ImageViewer
+    case 'audio':
+      return AudioViewer
+    case 'video':
+      return isMobile() ? NoViewer : VideoViewer
+    case 'pdf':
+      return PdfJsViewer
+    case 'text':
+      return isPlainText(file.mime, file.name) ? TextViewer : NoViewer
+    default:
+      return NoViewer
+  }
+}
+
 export class Viewer extends Component {
   componentDidMount() {
     document.addEventListener('keyup', this.onKeyUp, false)
@@ -135,7 +155,7 @@ export class Viewer extends Component {
   renderViewer(file) {
     if (!file) return null
     const { renderFallbackExtraContent } = this.props
-    const ComponentName = this.getViewerComponentName(file)
+    const ComponentName = getViewerComponentName(file)
     return (
       <ComponentName
         file={file}
@@ -144,23 +164,6 @@ export class Viewer extends Component {
       />
     )
   }
-
-  getViewerComponentName(file) {
-    switch (file.class) {
-      case 'image':
-        return ImageViewer
-      case 'audio':
-        return AudioViewer
-      case 'video':
-        return isMobile() ? NoViewer : VideoViewer
-      case 'pdf':
-        return PdfJsViewer
-      case 'text':
-        return isPlainText(file.mime, file.name) ? TextViewer : NoViewer
-      default:
-        return NoViewer
-    }
-  }
 }
 
 Viewer.propTypes = {

react/Viewer/index.spec.jsx

@@ -75,6 +75,12 @@ describe('Viewer', () => {
         class: '???',
         mime: 'something/unsupported',
         name: 'sample.unsupported'
+      },
+      {
+        _id: 'shortcutfileid',
+        class: 'shortcut',
+        mime: 'application/internet-shortcut',
+        name: 'cozy.url'
       }
     ]
 
@@ -121,6 +127,12 @@ describe('Viewer', () => {
     })
     const noViewer = await getViewerComponent(component)
     expect(noViewer).toMatchSnapshot('noviewer')
+
+    component.setProps({
+      currentIndex: 7
+    })
+    const shortcutViewer = await getViewerComponent(component)
+    expect(shortcutViewer).toMatchSnapshot('shortcutviewer')
   })
 })
 

react/Viewer/locales/en.json

@@ -3,6 +3,7 @@
     "download": "Download",
     "retry": "Retry",
     "error": "This file could not be loaded. Do you have a working internet connection right now?",
-    "close": "close"
+    "close": "close",
+    "goto": "Go to %{url}"
   }
 }

react/Viewer/locales/fr.json

@@ -3,6 +3,7 @@
     "download": "Télécharger",
     "retry": "Réessayer",
     "error": "Ce fichier n'a pas pu être chargé. Avez-vous une connexion internet qui fonctionne actuellement ?",
-    "close": "Fermer"
+    "close": "Fermer",
+    "goto": "Ouvrir %{url}"
   }
 }