cozy-ui-plus 1.1.0

package/src/AppSections/index.spec.jsx

@@ -0,0 +1,137 @@
+'use strict'
+
+/* eslint-env jest */
+
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { Sections } from './Sections'
+import mockApps from './_testApps'
+import en from './locales/en.json'
+import { I18nContext } from '../../test/I18n'
+import DemoProvider from '../providers/DemoProvider'
+
+const i18nContext = I18nContext({ locale: en })
+const tMock = i18nContext.t
+
+describe('AppsSection component', () => {
+  it('should be rendered correctly with apps list, subtitle and onAppClick', () => {
+    const mockOnAppClick = jest.fn()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          error={null}
+          location={{ search: '' }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('Cozy Collect')).toBeInTheDocument()
+    expect(screen.queryByText('Cozy Drive')).toBeInTheDocument()
+    expect(screen.queryByText('DevOnly')).toBeInTheDocument()
+  })
+
+  it('should render correctly render message if error provided', () => {
+    const mockOnAppClick = jest.fn()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          error={new Error('This is a test error')}
+          location={{ search: '' }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('This is a test error')).toBeInTheDocument()
+  })
+
+  it('should not render dropdown filter on mobile if nav=false flag provided', () => {
+    const mockOnAppClick = jest.fn()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isMobile: true }}
+          hasNav={false}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).not.toBeInTheDocument()
+  })
+
+  it('should not render dropdown filter on tablet if nav=false flag provided', () => {
+    const mockOnAppClick = jest.fn()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isTablet: true }}
+          hasNav={false}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).not.toBeInTheDocument()
+  })
+
+  it('should render dropdown filter on mobile if no nav=false flag provided', () => {
+    const mockOnAppClick = jest.fn()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isMobile: true }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).toBeInTheDocument()
+  })
+
+  it('should render dropdown filter on tablet if no nav=false flag provided', () => {
+    const mockOnAppClick = jest.fn()
+    render(
+      <DemoProvider>
+        <Sections
+          t={tMock}
+          lang="en"
+          subtitle="Test Apps"
+          apps={mockApps}
+          allApps={mockApps}
+          onAppClick={mockOnAppClick}
+          breakpoints={{ isTablet: true }}
+        />
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('All categories')).toBeInTheDocument()
+  })
+})

package/src/AppSections/locales/en.json

@@ -0,0 +1,37 @@
+{
+  "app_categories": {
+    "all": "All categories",
+    "banking": "Banking",
+    "clouds": "Clouds and vaults",
+    "cozy": "The essentials",
+    "education": "Education",
+    "energy": "Energy",
+    "finance": "Employment and finance",
+    "health": "Health",
+    "host_provider": "Host",
+    "insurance": "Insurance",
+    "isp": "Mobile and Internet",
+    "konnectors": "Services",
+    "list_separator": ", ",
+    "mes_infos": "MesInfos experimentation",
+    "online_services": "Online services",
+    "others": "Others",
+    "partners": "Partners",
+    "press": "Press",
+    "productivity": "Productivity",
+    "ptnb": "PTNB experimentation",
+    "public_service": "Public services",
+    "shopping": "Shopping",
+    "social": "Social",
+    "tech": "Tech",
+    "telecom": "Telecom",
+    "transport": "Transportation",
+    "pro": "Work",
+    "shortcuts": "Additional apps"
+  },
+  "sections": {
+    "applications": "Applications",
+    "konnectors": "Services",
+    "shortcuts": "Additional apps"
+  }
+}

package/src/AppSections/locales/fr.json

@@ -0,0 +1,37 @@
+{
+  "app_categories": {
+    "all": "Toutes les catégories",
+    "banking": "Banques",
+    "clouds": "Clouds et coffres",
+    "cozy": "Les essentielles",
+    "education": "Éducation",
+    "energy": "Energie",
+    "finance": "Emploi et finance",
+    "health": "Santé",
+    "host_provider": "Hébergeur",
+    "insurance": "Assurance",
+    "isp": "Mobile et Internet",
+    "konnectors": "Services",
+    "list_separator": ", ",
+    "mes_infos": "Expérimentation MesInfos",
+    "online_services": "Services en ligne",
+    "others": "Autres",
+    "partners": "Partenaires",
+    "press": "Presse",
+    "productivity": "Productivité",
+    "ptnb": "Expérimentation Carnet du Logement",
+    "public_service": "Services publics",
+    "shopping": "Shopping",
+    "social": "Social",
+    "tech": "Tech",
+    "telecom": "Mobile",
+    "transport": "Voyage et transport",
+    "pro": "Travail",
+    "shortcuts": "App supplémentaires"
+  },
+  "sections": {
+    "applications": "Applications",
+    "konnectors": "Services",
+    "shortcuts": "App supplémentaires"
+  }
+}

package/src/AppSections/locales/ru.json

@@ -0,0 +1,37 @@
+{
+  "app_categories": {
+    "all": "Все категории",
+    "banking": "Банковское дело",
+    "clouds": "Облака и хранилища",
+    "cozy": "Основное",
+    "education": "Образование",
+    "energy": "Энергетика",
+    "finance": "Занятость и финансы",
+    "health": "Здоровье",
+    "host_provider": "Хостинг",
+    "insurance": "Страхование",
+    "isp": "Мобильная связь и Интернет",
+    "konnectors": "Сервисы",
+    "list_separator": ", ",
+    "mes_infos": "Эксперимент MesInfos",
+    "online_services": "Онлайн-сервисы",
+    "others": "Прочее",
+    "partners": "Партнеры",
+    "press": "Пресса",
+    "productivity": "Продуктивность",
+    "ptnb": "Эксперимент PTNB",
+    "public_service": "Государственные услуги",
+    "shopping": "Покупки",
+    "social": "Социальные сети",
+    "tech": "Технологии",
+    "telecom": "Телекоммуникации",
+    "transport": "Транспорт",
+    "pro": "Работа",
+    "shortcuts": "Дополнительные приложения"
+  },
+  "sections": {
+    "applications": "Приложения",
+    "konnectors": "Сервисы",
+    "shortcuts": "Дополнительные приложения"
+  }
+}

package/src/AppSections/locales/vi.json

@@ -0,0 +1,37 @@
+{
+  "app_categories": {
+    "all": "Tất cả danh mục",
+    "banking": "Ngân hàng",
+    "clouds": "Đám mây và kho lưu trữ",
+    "cozy": "Thiết yếu",
+    "education": "Giáo dục",
+    "energy": "Năng lượng",
+    "finance": "Việc làm và tài chính",
+    "health": "Sức khỏe",
+    "host_provider": "Máy chủ",
+    "insurance": "Bảo hiểm",
+    "isp": "Di động và Internet",
+    "konnectors": "Dịch vụ",
+    "list_separator": ", ",
+    "mes_infos": "Thí nghiệm MesInfos",
+    "online_services": "Dịch vụ trực tuyến",
+    "others": "Khác",
+    "partners": "Đối tác",
+    "press": "Báo chí",
+    "productivity": "Năng suất",
+    "ptnb": "Thí nghiệm PTNB",
+    "public_service": "Dịch vụ công",
+    "shopping": "Mua sắm",
+    "social": "Mạng xã hội",
+    "tech": "Công nghệ",
+    "telecom": "Viễn thông",
+    "transport": "Giao thông",
+    "pro": "Công việc",
+    "shortcuts": "Ứng dụng bổ sung"
+  },
+  "sections": {
+    "applications": "Ứng dụng",
+    "konnectors": "Dịch vụ",
+    "shortcuts": "Ứng dụng bổ sung"
+  }
+}

package/src/AppSections/search.js

@@ -0,0 +1,104 @@
+import mapValues from 'lodash/mapValues'
+import matches from 'lodash/matches'
+import overEvery from 'lodash/overEvery'
+
+import { APP_TYPE } from './constants'
+
+const getDoctypesList = permsObj => {
+  const doctypes = []
+  for (let p in permsObj) {
+    if (permsObj[p].type) doctypes.push(permsObj[p].type)
+  }
+  return doctypes
+}
+
+const typeMatcher = type => app => app.type === type
+const categoryMatcher = category => app => {
+  if (!Array.isArray(app.categories)) return false
+  return app.categories.includes(category)
+}
+const tagMatcher = tag => app => {
+  if (!Array.isArray(app.tags)) return false
+  return app.tags.includes(tag)
+}
+const doctypeMatcher = doctype => app => {
+  if (!app.permissions) return false
+  return getDoctypesList(app.permissions).includes(doctype)
+}
+const pendingUpdateMatcher = () => app => !!app.availableVersion
+
+const showMaintenanceMatcher = isShowMaintenance => app => {
+  if (isShowMaintenance) return true
+  return app.maintenance === undefined
+}
+
+const qualificationLabelsMatcher = label => app => {
+  if (!Array.isArray(app.qualification_labels)) return false
+  return app.qualification_labels.includes(label)
+}
+
+const searchAttrToMatcher = {
+  type: typeMatcher,
+  category: categoryMatcher,
+  tag: tagMatcher,
+  doctype: doctypeMatcher,
+  pendingUpdate: pendingUpdateMatcher,
+  showMaintenance: showMaintenanceMatcher,
+  qualificationLabels: qualificationLabelsMatcher
+}
+
+/**
+ * Returns a predicate function to match an app based on
+ * a search specification.
+ *
+ * @param  {Search} search - What to search, ex: { type: 'webapp', category: 'banking'}
+ * @return {Function<App>}
+ */
+export const makeMatcherFromSearch = (search = {}) => {
+  // Create all predicates from the search object
+  const predicates = Object.values(
+    mapValues(search, (value, name) => {
+      return searchAttrToMatcher[name]?.(value)
+    })
+  )
+  // Return a function returning true if all predicates pass
+  return overEvery(predicates)
+}
+
+/**
+ * Returns a predicate to find the corresponding category option for
+ * a search
+ *
+ * @param  {Search}
+ * @return {Function<CategoryOption>}
+ */
+export const makeOptionMatcherFromSearch = (search = {}) => {
+  const typeParam = search.type
+  const categoryParam = search.category
+  if (typeParam === APP_TYPE.KONNECTOR && !categoryParam) {
+    return matches({ value: 'konnectors' })
+  } else if (!typeParam && !categoryParam) {
+    return matches({ value: 'all' })
+  }
+  return matches({ value: categoryParam, type: typeParam })
+}
+
+/**
+ * Returns a Search from a category option
+ *
+ * @param  {CategoryOption}
+ * @return {Search}
+ */
+export const makeSearchFromOption = option => {
+  if (option.value === 'all') {
+    return {}
+  }
+  const search = {}
+  if (option.value === 'konnectors') {
+    search.type = APP_TYPE.KONNECTOR
+  } else {
+    search.type = option.type
+    search.category = option.value
+  }
+  return search
+}

package/src/AppSections/search.spec.js

@@ -0,0 +1,158 @@
+'use strict'
+
+/* eslint-env jest */
+
+import mockApps from './_testApps'
+import { makeMatcherFromSearch } from './search'
+
+const mockMaintenanceApps = [
+  { slug: 'collect' },
+  { slug: 'drive' },
+  {
+    slug: 'konnectorInMaintenance',
+    maintenance: {
+      flag_infra_maintenance: true,
+      flag_short_maintenance: true,
+      flag_disallow_manual_exec: true,
+      messages: []
+    }
+  }
+]
+
+describe('makeMatcherFromSearch', () => {
+  it('should filter correctly on type', () => {
+    const matcher = makeMatcherFromSearch({ type: 'webapp' })
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should filter correctly on doctype', () => {
+    const matcher = makeMatcherFromSearch({ doctype: 'io.mock.doctype2' })
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should filter correctly on tags', () => {
+    const matcher = makeMatcherFromSearch({ tag: 'bills' })
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should filter correctly on category', () => {
+    const matcher = makeMatcherFromSearch({ category: 'cozy' })
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should filter correctly on pending update apps', () => {
+    const matcher = makeMatcherFromSearch({ pendingUpdate: true })
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should filter correctly when show maintenance is false', () => {
+    const matcher = makeMatcherFromSearch({ showMaintenance: false })
+    expect(mockMaintenanceApps.filter(matcher)).toStrictEqual([
+      { slug: 'collect' },
+      { slug: 'drive' }
+    ])
+  })
+
+  it('should filter correctly when show maintenance is true', () => {
+    const matcher = makeMatcherFromSearch({ showMaintenance: true })
+    expect(mockMaintenanceApps.filter(matcher)).toStrictEqual([
+      { slug: 'collect' },
+      { slug: 'drive' },
+      {
+        maintenance: {
+          flag_disallow_manual_exec: true,
+          flag_infra_maintenance: true,
+          flag_short_maintenance: true,
+          messages: []
+        },
+        slug: 'konnectorInMaintenance'
+      }
+    ])
+  })
+
+  it('should handle correctly multi filters', () => {
+    const matcher = makeMatcherFromSearch({
+      type: 'konnector',
+      doctype: 'io.mock.doctype'
+    })
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should not throw error if search is not provided', () => {
+    const matcher = makeMatcherFromSearch()
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should not throw error if app with malformed permission and search on doctype', () => {
+    const malFormedPermApp = {
+      slug: 'collect',
+      name: 'Collect',
+      editor: 'Cozy',
+      name_prefix: 'Cozy',
+      categories: ['cozy'],
+      developer: { name: 'Cozy' },
+      type: 'webapp',
+      icon: '<svg></svg>',
+      permissions: {
+        mock: {
+          // NO TYPE = malformed
+          description: 'io.mock.doctype'
+        },
+        mock2: {
+          type: 'io.mock.doctype2'
+        }
+      },
+      tags: ['konnector', 'collect', 'bills', 'providers', 'files'],
+      version: '3.0.0',
+      versions: {
+        stable: ['3.0.0'],
+        beta: ['3.0.0'],
+        dev: ['3.0.0']
+      },
+      uninstallable: false,
+      installed: true,
+      isInRegistry: true,
+      related: 'http://collect.cozy.mock/'
+    }
+    const matcher = makeMatcherFromSearch({ doctype: 'io.mock.doctype' })
+    expect([malFormedPermApp].filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should not throw error if app with no categories and search on category', () => {
+    const appWithoutCategories = {
+      slug: 'collect',
+      name: 'Collect',
+      editor: 'Cozy',
+      name_prefix: 'Cozy',
+      developer: { name: 'Cozy' },
+      type: 'webapp',
+      icon: '<svg></svg>',
+      permissions: {
+        mock: {
+          type: 'io.mock.doctype'
+        },
+        mock2: {
+          type: 'io.mock.doctype2'
+        }
+      },
+      tags: ['konnector', 'collect', 'bills', 'providers', 'files'],
+      version: '3.0.0',
+      versions: {
+        stable: ['3.0.0'],
+        beta: ['3.0.0'],
+        dev: ['3.0.0']
+      },
+      uninstallable: false,
+      installed: true,
+      isInRegistry: true,
+      related: 'http://collect.cozy.mock/'
+    }
+    const matcher = makeMatcherFromSearch({ category: 'cozy' })
+    expect([appWithoutCategories].filter(matcher)).toMatchSnapshot()
+  })
+
+  it('should work even for an unsupported filter', () => {
+    const matcher = makeMatcherFromSearch({ unsupportedKey: 'omg' })
+    expect(mockApps.filter(matcher)).toMatchSnapshot()
+  })
+})

package/src/AppTile/AppTile.spec.jsx

@@ -0,0 +1,117 @@
+'use strict'
+
+/* eslint-env jest */
+
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import I18n from 'cozy-ui/transpiled/react/providers/I18n'
+
+import AppTile from '.'
+import en from '../AppSections/locales/en.json'
+import DemoProvider from '../providers/DemoProvider'
+
+const appMock = {
+  slug: 'test',
+  editor: 'cozy',
+  namePrefix: 'Cozy',
+  developer: {
+    name: 'Cozy'
+  },
+  icon: '<svg></svg>',
+  name: 'Test',
+  version: '3.0.3',
+  onClick: jest.fn()
+}
+
+const appMock2 = {
+  slug: 'test2',
+  editor: '',
+  developer: {
+    name: 'Naming me'
+  },
+  icon: '<svg></svg>',
+  name: 'Test2',
+  version: '3.0.3-beta7483',
+  installedAppLink: 'test2.cozy.mock',
+  installed: true,
+  onClick: jest.fn()
+}
+
+const Wrapper = props => {
+  return (
+    <DemoProvider>
+      <I18n dictRequire={() => en} lang="en">
+        <AppTile {...props} />
+      </I18n>
+    </DemoProvider>
+  )
+}
+
+describe('AppTile component', () => {
+  it('should render correctly an app', () => {
+    const root = render(<Wrapper {...appMock} app={appMock} />)
+    expect(root.getByText('Cozy Test')).toBeTruthy()
+    expect(root.getByText('By Cozy')).toBeTruthy()
+  })
+
+  it('should render correctly an app without developer property', () => {
+    const appMockWithoutDevelopper = Object.assign({}, appMock)
+    delete appMockWithoutDevelopper.developer
+    const root = render(
+      <Wrapper {...appMockWithoutDevelopper} app={appMockWithoutDevelopper} />
+    )
+    expect(root.getByText('Cozy Test')).toBeTruthy()
+    expect(root.queryByText('By Cozy')).toBeFalsy()
+  })
+
+  it('should render correctly an app in maintenance', () => {
+    const appInMaintenance = Object.assign({}, appMock2, {
+      maintenance: { maintenance_options: {} }
+    })
+    const setup = ({ displaySpecificMaintenanceStyle }) =>
+      render(
+        <Wrapper
+          {...appInMaintenance}
+          app={appInMaintenance}
+          displaySpecificMaintenanceStyle={displaySpecificMaintenanceStyle}
+        />
+      )
+    const root = setup({ displaySpecificMaintenanceStyle: false })
+    expect(root.getByText('Test2')).toBeTruthy()
+    expect(root.getByText('By Naming me')).toBeTruthy()
+    expect(root.getByText('In maintenance')).toBeTruthy()
+    expect(root.queryByTestId('icon-maintenance')).toBeNull()
+
+    const rootWithIcon = setup({ displaySpecificMaintenanceStyle: true })
+    expect(rootWithIcon.getByTestId('icon-maintenance')).toBeTruthy()
+  })
+
+  it('should render correctly an installed app', () => {
+    const root = render(<Wrapper {...appMock2} app={appMock2} />)
+    expect(root.getByText('Installed')).toBeTruthy()
+  })
+
+  it('should render correctly an installed app without icon provided', () => {
+    const appMockWithoutIcon = Object.assign({}, appMock, {
+      icon: 'https://hello.svg'
+    })
+    const root = render(
+      <Wrapper
+        {...appMockWithoutIcon}
+        app={appMockWithoutIcon}
+        alt="Alternative text"
+      />
+    )
+    expect(root.getByText('Cozy Test')).toBeTruthy()
+    expect(root.getByText('By Cozy')).toBeTruthy()
+  })
+
+  it('should render correctly an installed app without icon provided', () => {
+    const appMockWithoutIcon = Object.assign({}, appMock, { icon: '' })
+    const root = render(
+      <Wrapper {...appMockWithoutIcon} app={appMockWithoutIcon} />
+    )
+    expect(root.queryByRole('progressbar')).toBeFalsy()
+  })
+})

package/src/AppTile/Readme.md

@@ -0,0 +1,24 @@
+Component used to show an app status, can be used in
+a list of apps for example in the Store.
+
+```jsx
+import AppTile from 'cozy-ui/transpiled/react/AppTile'
+import mockApps from '../AppSections/_mockApps'
+import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import Grid from 'cozy-ui/transpiled/react/Grid'
+
+const locale = {}
+const app = mockApps[0]
+
+;
+
+<I18n dictRequire={lang => locale} lang="en">
+  <Grid container>
+    <AppTile app={app} />
+    <AppTile app={{...app, maintenance: true}} />
+    <AppTile app={{...app, maintenance: true}} displaySpecificMaintenanceStyle={true} />
+    <AppTile app={{...app, availableVersion: true}} />
+    <AppTile app={{...app, availableVersion: true}} showStatus={['maintenance']} />
+  </Grid>
+</I18n>
+```