cozy-viewer 1.1.0

package/src/Panel/QualificationListItemDate.jsx

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+import {
+  isExpired,
+  isExpiringSoon,
+  getTranslatedNameForDateMetadata,
+  formatDateMetadataValue
+} from 'cozy-client/dist/models/paper'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import QualificationListItemText from './QualificationListItemText'
+import ExpirationAnnotation from '../components/ExpirationAnnotation'
+
+const QualificationListItemDate = forwardRef(
+  ({ file, formattedMetadataQualification, toggleActionsMenu }, ref) => {
+    const { f, lang } = useI18n()
+    const { name, value } = formattedMetadataQualification
+    const formattedTitle = getTranslatedNameForDateMetadata(name, { lang })
+    const formattedDate = formatDateMetadataValue(value, {
+      f,
+      lang
+    })
+    const isExpirationDate = name === 'expirationDate'
+
+    return (
+      <ListItem className="u-pl-2 u-pr-3">
+        <QualificationListItemText
+          primary={formattedTitle}
+          secondary={
+            <>
+              <Typography component="span" variant="inherit">
+                {formattedDate}
+              </Typography>
+              {isExpirationDate &&
+                (isExpired(file) || isExpiringSoon(file)) && (
+                  <>
+                    <Typography component="span" variant="inherit">
+                      {' · '}
+                    </Typography>
+                    <ExpirationAnnotation file={file} />
+                  </>
+                )}
+            </>
+          }
+          disabled={!value}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={ref}
+            onClick={() => toggleActionsMenu(formattedDate)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+    )
+  }
+)
+
+QualificationListItemDate.displayName = 'QualificationListItemDate'
+
+QualificationListItemDate.propTypes = {
+  file: PropTypes.object.isRequired,
+  formattedMetadataQualification: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  }).isRequired,
+  toggleActionsMenu: PropTypes.func.isRequired
+}
+
+export default QualificationListItemDate

package/src/Panel/QualificationListItemInformation.jsx

@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+import {
+  getTranslatedNameForInformationMetadata,
+  formatInformationMetadataValue
+} from 'cozy-client/dist/models/paper'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import QualificationListItemText from './QualificationListItemText'
+
+const QualificationListItemInformation = forwardRef(
+  ({ formattedMetadataQualification, file, toggleActionsMenu }, ref) => {
+    const { lang } = useI18n()
+    const { name, value } = formattedMetadataQualification
+    const qualificationLabel = file.metadata.qualification.label
+
+    const formattedTitle = getTranslatedNameForInformationMetadata(name, {
+      lang,
+      qualificationLabel
+    })
+    const formattedValue = formatInformationMetadataValue(value, {
+      lang,
+      name,
+      qualificationLabel
+    })
+
+    const titleComponent =
+      formattedTitle === name ? <MidEllipsis text={name} /> : formattedTitle
+
+    return (
+      <ListItem className="u-pl-2 u-pr-3">
+        <QualificationListItemText
+          primary={titleComponent}
+          secondary={formattedValue}
+          disabled={!value}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={ref}
+            onClick={() => toggleActionsMenu(value)}
+            data-testid="toggleActionsMenuBtn"
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+    )
+  }
+)
+
+QualificationListItemInformation.displayName = 'QualificationListItemNumber'
+
+QualificationListItemInformation.propTypes = {
+  formattedMetadataQualification: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }).isRequired,
+  toggleActionsMenu: PropTypes.func.isRequired
+}
+
+export default QualificationListItemInformation

package/src/Panel/QualificationListItemInformation.spec.jsx

@@ -0,0 +1,73 @@
+import { fireEvent, render } from '@testing-library/react'
+import React from 'react'
+
+import QualificationListItemInformation from './QualificationListItemInformation'
+
+jest.mock('cozy-ui/transpiled/react/providers/I18n', () => ({
+  useI18n: jest.fn(() => ({ t: x => x }))
+}))
+
+const setup = ({
+  formattedMetadataQualification = {},
+  toggleActionsMenu = jest.fn()
+} = {}) => {
+  return render(
+    <QualificationListItemInformation
+      formattedMetadataQualification={formattedMetadataQualification}
+      toggleActionsMenu={toggleActionsMenu}
+      file={{
+        metadata: { qualification: { label: 'label_of_qualification' } }
+      }}
+    />
+  )
+}
+
+describe('QualificationListItemInformation', () => {
+  describe('formattedMetadataQualification', () => {
+    it('should display default text if value is falsy', () => {
+      const formattedMetadataQualification = { name: 'country', value: '' }
+      const { getByText } = setup({ formattedMetadataQualification })
+
+      expect(getByText('No information'))
+    })
+    // eslint-disable-next-line jest/no-focused-tests
+    it.only('should display current value if it is truthy', () => {
+      const formattedMetadataQualification = {
+        name: 'country',
+        value: 'Italie'
+      }
+      const { queryByText } = setup({
+        formattedMetadataQualification
+      })
+
+      expect(queryByText('No information')).toBeNull()
+      expect(queryByText('Italie')).toBeInTheDocument()
+    })
+    it('should display current value if it number type', () => {
+      const formattedMetadataQualification = { name: 'country', value: 0 }
+      const { queryByText } = setup({
+        formattedMetadataQualification
+      })
+
+      expect(queryByText('No information')).toBeNull()
+      expect(queryByText('0')).toBeInTheDocument()
+    })
+  })
+  describe('toggleActionsMenu', () => {
+    it('should call toggleActionsMenu with current value on click it', () => {
+      const formattedMetadataQualification = {
+        name: 'country',
+        value: 'Italie'
+      }
+      const toggleActionsMenu = jest.fn()
+      const { getByTestId } = setup({
+        toggleActionsMenu,
+        formattedMetadataQualification
+      })
+      const toggleActionsMenuBtn = getByTestId('toggleActionsMenuBtn')
+      fireEvent.click(toggleActionsMenuBtn)
+
+      expect(toggleActionsMenu).toBeCalledWith('Italie')
+    })
+  })
+})

package/src/Panel/QualificationListItemOther.jsx

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+import {
+  getTranslatedNameForOtherMetadata,
+  formatOtherMetadataValue
+} from 'cozy-client/dist/models/paper'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import QualificationListItemText from './QualificationListItemText'
+
+const QualificationListItemOther = forwardRef(
+  ({ formattedMetadataQualification, toggleActionsMenu }, ref) => {
+    const { lang } = useI18n()
+    const { name, value } = formattedMetadataQualification
+
+    if (!value) return null
+
+    const formattedTitle = getTranslatedNameForOtherMetadata(name, {
+      lang
+    })
+    const formattedValue = formatOtherMetadataValue(value, {
+      lang,
+      name
+    })
+
+    return (
+      <ListItem className="u-pl-2 u-pr-3">
+        <QualificationListItemText
+          primary={formattedTitle}
+          secondary={<MidEllipsis text={formattedValue} />}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={ref}
+            onClick={() => toggleActionsMenu(formattedValue)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+    )
+  }
+)
+QualificationListItemOther.displayName = 'QualificationListItemOther'
+
+QualificationListItemOther.propTypes = {
+  formattedMetadataQualification: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  }).isRequired,
+  toggleActionsMenu: PropTypes.func.isRequired
+}
+
+export default QualificationListItemOther

package/src/Panel/QualificationListItemText.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const QualificationListItemText = ({ primary, secondary, disabled }) => {
+  return (
+    <ListItemText
+      disableTypography
+      primary={<Typography variant="caption">{primary}</Typography>}
+      secondary={
+        <Typography
+          component="div"
+          variant="body1"
+          style={disabled ? { color: 'var(--disabledTextColor)' } : undefined}
+        >
+          {secondary}
+        </Typography>
+      }
+    />
+  )
+}
+
+QualificationListItemText.propTypes = {
+  primary: PropTypes.string.isRequired,
+  secondary: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+}
+
+export default QualificationListItemText

package/src/Panel/getPanelBlocks.jsx

@@ -0,0 +1,56 @@
+import { models } from 'cozy-client'
+import KonnectorBlock from 'cozy-harvest-lib/dist/components/KonnectorBlock'
+
+import Certifications from './Certifications'
+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
+ * @property {React.Component} component - Component to display
+ */
+
+/**
+ * @typedef {Object.<string, PanelBlockSpec>} PanelBlocksSpecs
+ */
+
+/**
+ * Returns the specs of the blocks to display in the panel
+ * @param {boolean} isPublic - Whether the panel is displayed in public view
+ * @returns {PanelBlocksSpecs}
+ */
+export const getPanelBlocksSpecs = (isPublic = false) => ({
+  qualifications: {
+    condition: hasQualifications,
+    component: Qualification
+  },
+  konnector: {
+    condition: file => isFromKonnector(file) && !isPublic,
+    component: KonnectorBlock
+  },
+  certifications: {
+    condition: hasCertifications,
+    component: Certifications
+  }
+})
+
+/**
+ * Returns the blocks to display in the panel
+ * @param {Object} options
+ * @param {PanelBlocksSpecs} options.panelBlocksSpecs - Specs of the blocks to display in the panel
+ * @param {import('cozy-client/types/types').FileDocument} options.file - File object
+ * @returns {Array.<React.Component>}
+ */
+const getPanelBlocks = ({ panelBlocksSpecs, file }) => {
+  const panelBlocks = []
+
+  Object.values(panelBlocksSpecs).forEach(panelBlock => {
+    panelBlock.condition(file) && panelBlocks.push(panelBlock.component)
+  })
+
+  return panelBlocks
+}
+
+export default getPanelBlocks

package/src/Panel/getPanelBlocks.spec.jsx

@@ -0,0 +1,79 @@
+import getPanelBlocks, { getPanelBlocksSpecs } from './getPanelBlocks'
+
+jest.mock('cozy-harvest-lib/dist/components/KonnectorBlock', () => jest.fn())
+const block1Component = jest.fn()
+const block2Component = jest.fn()
+
+describe('getPanelBlocks', () => {
+  it('should return only blocks with truthy condition', () => {
+    // with two truthy component
+    expect(
+      getPanelBlocks({
+        panelBlocksSpecs: {
+          block1: {
+            condition: () => true,
+            component: block1Component
+          },
+          block2: {
+            condition: () => true,
+            component: block2Component
+          }
+        }
+      })
+    ).toMatchObject([block1Component, block2Component])
+
+    // with one truthy component
+    expect(
+      getPanelBlocks({
+        panelBlocksSpecs: {
+          block1: {
+            condition: () => false,
+            component: block1Component
+          },
+          block2: {
+            condition: () => true,
+            component: block2Component
+          }
+        }
+      })
+    ).toMatchObject([block2Component])
+
+    // with no truthy component
+    expect(
+      getPanelBlocks({
+        panelBlocksSpecs: {
+          block1: {
+            condition: () => false,
+            component: block1Component
+          },
+          block2: {
+            condition: () => false,
+            component: block2Component
+          }
+        }
+      })
+    ).toMatchObject([])
+
+    // with no specs
+    expect(getPanelBlocks({ panelBlocksSpecs: {} })).toMatchObject([])
+  })
+})
+
+describe('getPanelBlocksSpecs', () => {
+  it('should return the specs of the blocks to display in the panel', () => {
+    expect(getPanelBlocksSpecs()).toEqual({
+      qualifications: {
+        condition: expect.any(Function),
+        component: expect.anything()
+      },
+      konnector: {
+        condition: expect.any(Function),
+        component: expect.anything()
+      },
+      certifications: {
+        condition: expect.any(Function),
+        component: expect.anything()
+      }
+    })
+  })
+})

package/src/Panel/styles.styl

@@ -0,0 +1,13 @@
+.ActionMenuDesktop-ActionMenu
+    a
+        padding 0 !important // Waiting for the migration of the ActionMenu on the Viewer
+    .ActionMenuDesktop-ActionMenu-link-disabled
+        > div
+            cursor default
+            &:hover
+                background-color initial
+            > div
+                svg
+                    fill var(--disabledTextColor)
+                p
+                    color var(--disabledTextColor)