cozy-ui 111.21.0 → 112.0.0

package/react/Viewer/Panel/QualificationListItemDate.jsx

@@ -1,77 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-import {
-  isExpired,
-  isExpiringSoon,
-  getTranslatedNameForDateMetadata,
-  formatDateMetadataValue
-} from 'cozy-client/dist/models/paper'
-
-import QualificationListItemText from './QualificationListItemText'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-import Dots from '../../Icons/Dots'
-import ListItem from '../../ListItem'
-import ListItemSecondaryAction from '../../ListItemSecondaryAction'
-import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
-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/react/Viewer/Panel/QualificationListItemInformation.jsx

@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-import {
-  getTranslatedNameForInformationMetadata,
-  formatInformationMetadataValue
-} from 'cozy-client/dist/models/paper'
-
-import QualificationListItemText from './QualificationListItemText'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-import Dots from '../../Icons/Dots'
-import ListItem from '../../ListItem'
-import ListItemSecondaryAction from '../../ListItemSecondaryAction'
-import MidEllipsis from '../../MidEllipsis'
-import { useI18n } from '../../providers/I18n'
-
-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/react/Viewer/Panel/QualificationListItemInformation.spec.jsx

@@ -1,73 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
-
-import QualificationListItemInformation from './QualificationListItemInformation'
-
-jest.mock('../../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/react/Viewer/Panel/QualificationListItemOther.jsx

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-import {
-  getTranslatedNameForOtherMetadata,
-  formatOtherMetadataValue
-} from 'cozy-client/dist/models/paper'
-
-import QualificationListItemText from './QualificationListItemText'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-import Dots from '../../Icons/Dots'
-import ListItem from '../../ListItem'
-import ListItemSecondaryAction from '../../ListItemSecondaryAction'
-import MidEllipsis from '../../MidEllipsis'
-import { useI18n } from '../../providers/I18n'
-
-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/react/Viewer/Panel/QualificationListItemText.jsx

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import ListItemText from '../../ListItemText'
-import Typography from '../../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/react/Viewer/Panel/getPanelBlocks.jsx

@@ -1,56 +0,0 @@
-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/react/Viewer/Panel/getPanelBlocks.spec.jsx

@@ -1,79 +0,0 @@
-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/react/Viewer/Panel/styles.styl

@@ -1,13 +0,0 @@
-.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)