cozy-ui 60.8.1 → 60.10.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [60.10.0](https://github.com/cozy/cozy-ui/compare/v60.9.1...v60.10.0) (2022-01-31)
+
+
+### Bug Fixes
+
+* Update cozy-intent and device helper ([87d612c](https://github.com/cozy/cozy-ui/commit/87d612c))
+
+
+### Features
+
+* Inject webviewService into BarContext ([b6c269f](https://github.com/cozy/cozy-ui/commit/b6c269f))
+* Update BarContext testing ([15803f4](https://github.com/cozy/cozy-ui/commit/15803f4))
+* Upgrade cozy-intent to latest ([8653ad1](https://github.com/cozy/cozy-ui/commit/8653ad1))
+
+## [60.9.1](https://github.com/cozy/cozy-ui/compare/v60.9.0...v60.9.1) (2022-01-27)
+
+
+### Bug Fixes
+
+* Error when attributes doesn't exists ([f2d4e41](https://github.com/cozy/cozy-ui/commit/f2d4e41))
+
+# [60.9.0](https://github.com/cozy/cozy-ui/compare/v60.8.2...v60.9.0) (2022-01-27)
+
+
+### Features
+
+* Add WebviewProvider in BarProvider ([bd2823e](https://github.com/cozy/cozy-ui/commit/bd2823e))
+
+## [60.8.2](https://github.com/cozy/cozy-ui/compare/v60.8.1...v60.8.2) (2022-01-26)
+
+
+### Bug Fixes
+
+* Auto ref on BottomSheet Header now use displayName too ([0f1e067](https://github.com/cozy/cozy-ui/commit/0f1e067))
+
 ## [60.8.1](https://github.com/cozy/cozy-ui/compare/v60.8.0...v60.8.1) (2022-01-26)
 
 
@@ -141,6 +176,7 @@
 
 * cozy-intent@1.1.2 or later is now required
 otherwise, AppLinker will crash
+* Wrap your App in the WebviewIntentProvider (via import { WebviewIntentProvider } from 'cozy-intent)
 
 ## [58.5.1](https://github.com/cozy/cozy-ui/compare/v58.5.0...v58.5.1) (2022-01-07)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "60.8.1",
+  "version": "60.10.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -89,10 +89,10 @@
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.1.1",
     "cozy-client": "^27.5.1",
-    "cozy-device-helper": "^1.16.0",
+    "cozy-device-helper": "^1.16.1",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "^1.3.0",
+    "cozy-intent": "^1.6.0",
     "cozy-sharing": "^3.10.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",

package/react/BarContextProvider/index.jsx

@@ -4,16 +4,32 @@ import { BreakpointsProvider } from '../hooks/useBreakpoints'
 
 import { CozyProvider } from 'cozy-client'
 import { Provider } from 'react-redux'
+import { WebviewIntentProvider } from 'cozy-intent'
+
+const BarContextProvider = ({
+  children,
+  store,
+  client,
+  f,
+  t,
+  lang,
+  webviewService
+}) => {
+  if (!children) return null
 
-const BarContextProvider = props => {
-  if (!props.children) return null
   return (
-    <Provider store={props.store}>
-      <CozyProvider client={props.client}>
-        <I18nContext.Provider
-          value={{ f: props.f, t: props.t, lang: props.lang }}
-        >
-          <BreakpointsProvider>{props.children}</BreakpointsProvider>
+    <Provider store={store}>
+      <CozyProvider client={client}>
+        <I18nContext.Provider value={{ f, t, lang }}>
+          <BreakpointsProvider>
+            {webviewService ? (
+              <WebviewIntentProvider webviewService={webviewService}>
+                {children}
+              </WebviewIntentProvider>
+            ) : (
+              children
+            )}
+          </BreakpointsProvider>
         </I18nContext.Provider>
       </CozyProvider>
     </Provider>

package/react/BarContextProvider/index.spec.jsx

@@ -1,16 +1,20 @@
 import React from 'react'
+import { Provider, useStore } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { render } from '@testing-library/react'
 
+import { useWebviewIntent } from 'cozy-intent'
 import CozyClient, {
   createMockClient,
   CozyProvider,
   useClient
 } from 'cozy-client'
-import configureStore from 'redux-mock-store'
-import { Provider, useStore } from 'react-redux'
 
 import BarContextProvider from '.'
 import I18n, { useI18n, translate } from '../I18n'
 
+const mockWebviewService = { foo: 'bar' }
+const mockVoidWebviewService = 'No context'
 const locales = { helloworld: 'Hello World !' }
 const localesBar = { a: 'b' }
 
@@ -24,6 +28,20 @@ const DumbHelloWorld = translate()(({ t, f, lang }) => (
   </div>
 ))
 
+const IntentComponent = () => {
+  let webviewIntent
+  let render
+
+  try {
+    webviewIntent = useWebviewIntent()
+    render = webviewIntent.foo
+  } catch {
+    render = mockVoidWebviewService
+  }
+
+  return <main>{render}</main>
+}
+
 const MockedBar = props => {
   const client = new CozyClient({})
   return (
@@ -35,33 +53,146 @@ const MockedBar = props => {
   )
 }
 
-const App = () => {
+const App = ({ children, webviewService }) => {
   const { t, f, lang } = useI18n()
   const client = useClient()
   const store = useStore()
+
   return (
     <MockedBar>
-      <BarContextProvider t={t} f={f} lang={lang} client={client} store={store}>
-        <DumbHelloWorld />
+      <BarContextProvider
+        t={t}
+        f={f}
+        lang={lang}
+        client={client}
+        store={store}
+        webviewService={webviewService}
+      >
+        {children}
       </BarContextProvider>
     </MockedBar>
   )
 }
 
 describe('BarContextProvider', () => {
+  afterAll(() => {
+    window.cozy = undefined
+  })
+
   it('should provide the right (aka app not the one from the bar) t/f/store/client to the DumbHelloWorld', () => {
     const client = createMockClient({})
     const mockStore = configureStore()
     const store = mockStore(x => x)
-    const root = mount(
+
+    const { queryByText } = render(
+      <Provider store={store}>
+        <CozyProvider client={client}>
+          <I18n lang="en" dictRequire={() => locales}>
+            <App>
+              <DumbHelloWorld />
+            </App>
+          </I18n>
+        </CozyProvider>
+      </Provider>
+    )
+
+    expect(queryByText('<div>Hello World !<br>6 Jan<br>en</div>')).toBeDefined()
+  })
+
+  it('should render nothing when no children is provided', () => {
+    const { container } = render(<BarContextProvider />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should work without a cozy-intent context', () => {
+    // Set App Amirale context
+    window.cozy.isFlagshipApp = true
+
+    const client = createMockClient({})
+    const mockStore = configureStore()
+    const store = mockStore(x => x)
+
+    const { queryByText } = render(
       <Provider store={store}>
         <CozyProvider client={client}>
           <I18n lang="en" dictRequire={() => locales}>
-            <App />
+            <App>
+              <IntentComponent />
+            </App>
           </I18n>
         </CozyProvider>
       </Provider>
     )
-    expect(root.html()).toBe('<div>Hello World !<br>6 Jan<br>en</div>')
+
+    expect(queryByText(mockVoidWebviewService)).toBeInTheDocument()
+  })
+
+  it('should not try to provide a cozy-intent context if one is provided', () => {
+    // Set App Amirale context
+    window.cozy.isFlagshipApp = true
+
+    const client = createMockClient({})
+    const mockStore = configureStore()
+    const store = mockStore(x => x)
+
+    const { queryByText } = render(
+      <Provider store={store}>
+        <CozyProvider client={client}>
+          <I18n lang="en" dictRequire={() => locales}>
+            <App webviewService={mockWebviewService}>
+              <IntentComponent />
+            </App>
+          </I18n>
+        </CozyProvider>
+      </Provider>
+    )
+
+    expect(queryByText(mockWebviewService.foo)).toBeInTheDocument()
+  })
+
+  it('should work without a cozy-intent context', () => {
+    // Set Web context
+    window.cozy.isFlagshipApp = false
+
+    const client = createMockClient({})
+    const mockStore = configureStore()
+    const store = mockStore(x => x)
+
+    const { queryByText } = render(
+      <Provider store={store}>
+        <CozyProvider client={client}>
+          <I18n lang="en" dictRequire={() => locales}>
+            <App>
+              <IntentComponent />
+            </App>
+          </I18n>
+        </CozyProvider>
+      </Provider>
+    )
+
+    expect(queryByText(mockVoidWebviewService)).toBeInTheDocument()
+  })
+
+  it('should not try to provide a cozy-intent context if one is provided', () => {
+    // Set Web context
+    window.cozy.isFlagshipApp = false
+
+    const client = createMockClient({})
+    const mockStore = configureStore()
+    const store = mockStore(x => x)
+
+    const { queryByText } = render(
+      <Provider store={store}>
+        <CozyProvider client={client}>
+          <I18n lang="en" dictRequire={() => locales}>
+            <App webviewService={mockWebviewService}>
+              <IntentComponent />
+            </App>
+          </I18n>
+        </CozyProvider>
+      </Provider>
+    )
+
+    expect(queryByText(mockWebviewService.foo)).not.toBeInTheDocument()
   })
 })

package/react/BottomSheet/BottomSheet.jsx

@@ -120,7 +120,10 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
   }
 
   const overriddenChildren = React.Children.map(children, child => {
-    if (child.type.name === 'BottomSheetHeader') {
+    if (
+      child.type.name === 'BottomSheetHeader' ||
+      child.type.displayName === 'BottomSheetHeader'
+    ) {
       return React.cloneElement(child, { headerContentRef })
     }
     return child
@@ -176,9 +179,9 @@ BottomSheet.propTypes = {
   /** Toolbar properties */
   toolbarProps: PropTypes.shape({
     /** React reference of the toolbar node */
-    ref: PropTypes.bool,
+    ref: PropTypes.object,
     /** Toolbar height value */
-    height: PropTypes.func
+    height: PropTypes.number
   }),
   /** Settings that can be modified */
   settings: PropTypes.shape({

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -54,10 +54,9 @@ const FilePickerBodyItem = ({
   const Input = multiple ? Checkbox : Radio
 
   const listItemSecondaryContent = isFile(file)
-    ? `${f(file.attributes.updated_at, 'DD MMM YYYY')} - ${filesize(
-        file.attributes.size,
-        { base: 10 }
-      )}`
+    ? `${f(file.updated_at, 'DD MMM YYYY')} - ${filesize(file.size, {
+        base: 10
+      })}`
     : null
 
   return (

package/react/FilePicker/FilePickerBodyItem.spec.jsx

@@ -9,13 +9,13 @@ const mockFile01 = {
   _id: '001',
   type: 'file',
   name: 'Filename',
-  attributes: { updated_at: '2021-01-01T12:00:00.000000+01:00' }
+  updated_at: '2021-01-01T12:00:00.000000+01:00'
 }
 const mockFolder01 = {
   _id: '002',
   type: 'directory',
   name: 'Foldername',
-  attributes: { updated_at: '2021-01-01T12:00:00.000000+01:00' }
+  updated_at: '2021-01-01T12:00:00.000000+01:00'
 }
 
 jest.mock('filesize', () => jest.fn())

package/transpiled/react/BarContextProvider/index.js

@@ -3,20 +3,30 @@ import { I18nContext } from "cozy-ui/transpiled/react/I18n";
 import { BreakpointsProvider } from "cozy-ui/transpiled/react/hooks/useBreakpoints";
 import { CozyProvider } from 'cozy-client';
 import { Provider } from 'react-redux';
+import { WebviewIntentProvider } from 'cozy-intent';
 
-var BarContextProvider = function BarContextProvider(props) {
-  if (!props.children) return null;
+var BarContextProvider = function BarContextProvider(_ref) {
+  var children = _ref.children,
+      store = _ref.store,
+      client = _ref.client,
+      f = _ref.f,
+      t = _ref.t,
+      lang = _ref.lang,
+      webviewService = _ref.webviewService;
+  if (!children) return null;
   return React.createElement(Provider, {
-    store: props.store
+    store: store
   }, React.createElement(CozyProvider, {
-    client: props.client
+    client: client
   }, React.createElement(I18nContext.Provider, {
     value: {
-      f: props.f,
-      t: props.t,
-      lang: props.lang
+      f: f,
+      t: t,
+      lang: lang
     }
-  }, React.createElement(BreakpointsProvider, null, props.children))));
+  }, React.createElement(BreakpointsProvider, null, webviewService ? React.createElement(WebviewIntentProvider, {
+    webviewService: webviewService
+  }, children) : children))));
 };
 
 export default BarContextProvider;

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -130,7 +130,7 @@ var BottomSheet = function BottomSheet(_ref2) {
   };
 
   var overriddenChildren = React.Children.map(children, function (child) {
-    if (child.type.name === 'BottomSheetHeader') {
+    if (child.type.name === 'BottomSheetHeader' || child.type.displayName === 'BottomSheetHeader') {
       return React.cloneElement(child, {
         headerContentRef: headerContentRef
       });
@@ -187,10 +187,10 @@ BottomSheet.propTypes = {
   /** Toolbar properties */
   toolbarProps: PropTypes.shape({
     /** React reference of the toolbar node */
-    ref: PropTypes.bool,
+    ref: PropTypes.object,
 
     /** Toolbar height value */
-    height: PropTypes.func
+    height: PropTypes.number
   }),
 
   /** Settings that can be modified */

package/transpiled/react/FilePicker/FilePickerBodyItem.js

@@ -52,7 +52,7 @@ var FilePickerBodyItem = function FilePickerBodyItem(_ref) {
 
   var hasChoice = fileTypesAccepted.file && isFile(file) || fileTypesAccepted.folder && isDirectory(file);
   var Input = multiple ? Checkbox : Radio;
-  var listItemSecondaryContent = isFile(file) ? "".concat(f(file.attributes.updated_at, 'DD MMM YYYY'), " - ").concat(filesize(file.attributes.size, {
+  var listItemSecondaryContent = isFile(file) ? "".concat(f(file.updated_at, 'DD MMM YYYY'), " - ").concat(filesize(file.size, {
     base: 10
   })) : null;
   return React.createElement(React.Fragment, null, React.createElement(ListItem, {