cozy-bar 0.0.0-development

package/src/components/Bar.jsx

@@ -0,0 +1,295 @@
+/* global __PIWIK_TRACKER_URL__  __PIWIK_SITEID__ __PIWIK_DIMENSION_ID_APP__ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { translate } from 'cozy-ui/react/I18n'
+import Icon from 'cozy-ui/react/Icon'
+import {
+  shouldEnableTracking,
+  getTracker,
+  configureTracker
+} from 'cozy-ui/react/helpers/tracker'
+import { isMobileApp } from 'cozy-device-helper'
+
+import { ButtonCozyHome } from 'components/Apps/ButtonCozyHome'
+import Banner from 'components/Banner'
+import Drawer from 'components/Drawer'
+import Settings from 'components/Settings'
+import Apps from 'components/Apps'
+import SearchBar from 'components/SearchBar'
+import Claudy from 'components/Claudy'
+import SupportModal from 'components/SupportModal'
+import {
+  getTheme,
+  hasFetched,
+  getContent,
+  isCurrentApp,
+  fetchApps,
+  fetchContext,
+  fetchSettingsData,
+  shouldEnableClaudy,
+  getWebviewContext
+} from 'lib/reducers'
+
+/* Generated with node_modules/.bin/svgr src/assets/sprites/icon-apps.svg */
+function SvgIconApps(props) {
+  return (
+    <svg width={16} height={16} {...props}>
+      <path
+        d="M0 0h4v4H0V0zm0 6h4v4H0V6zm0 6h4v4H0v-4zM6 0h4v4H6V0zm0 6h4v4H6V6zm0 6h4v4H6v-4zm6-12h4v4h-4V0zm0 6h4v4h-4V6zm0 6h4v4h-4v-4z"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export class Bar extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      claudyFired: false, // true to fire claudy (used by the drawer)
+      claudyOpened: false,
+      drawerVisible: false,
+      usageTracker: null,
+      supportDisplayed: false,
+      searchBarEnabled: props.isDrive && !props.isPublic && !isMobileApp()
+    }
+    this.fetchApps = this.fetchApps.bind(this)
+    this.fetchInitialData = this.fetchInitialData.bind(this)
+    this.handleTokenRefreshed = this.handleTokenRefreshed.bind(this)
+  }
+
+  componentDidMount() {
+    if (shouldEnableTracking()) {
+      this.initPiwikTracker()
+    }
+    this.fetchInitialData()
+
+    const cozyClient = this.props.cozyClient
+    cozyClient.on('tokenRefreshed', this.handleTokenRefreshed)
+  }
+
+  componentWillUnmount() {
+    const cozyClient = this.props.cozyClient
+    cozyClient.removeListener('tokenRefreshed', this.handleTokenRefreshed)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      !this.props.hasFetchedApps &&
+      this.state.drawerVisible &&
+      prevState.drawerVisible !== this.state.drawerVisible
+    ) {
+      this.fetchApps()
+    }
+  }
+
+  handleTokenRefreshed() {
+    this.fetchInitialData()
+  }
+
+  initPiwikTracker() {
+    const trackerInstance = getTracker(
+      __PIWIK_TRACKER_URL__,
+      __PIWIK_SITEID__,
+      false,
+      false
+    )
+    configureTracker({
+      appDimensionId: __PIWIK_DIMENSION_ID_APP__,
+      app: 'Cozy Bar',
+      heartbeat: 0
+    })
+    this.setState({ usageTracker: trackerInstance })
+  }
+
+  fetchApps() {
+    this.props.fetchApps()
+  }
+
+  fetchInitialData() {
+    if (this.props.isPublic) {
+      return
+    }
+    this.props.fetchContext()
+    this.props.fetchSettingsData(false)
+    this.fetchApps()
+  }
+
+  toggleDrawer = () => {
+    // don't allow to toggle the drawer if claudy opened or is opening
+    if (this.state.claudyOpened || this.state.claudyFired) return
+    const drawerVisible = !this.state.drawerVisible
+    // don't wait for transitionend if displaying
+    if (drawerVisible) this.props.onDrawer(drawerVisible)
+    this.setState({ drawerVisible })
+  }
+
+  toggleClaudy = (isFromDrawer = false) => {
+    if (!this.props.claudyEnabled) return
+    const { usageTracker, claudyOpened } = this.state
+    if (isFromDrawer && !claudyOpened) {
+      // if opened from drawer
+      // reset to toggle via the Claudy component
+      return this.setState({ claudyFired: true })
+    }
+    if (this.state.claudyFired) this.setState({ claudyFired: false })
+    if (usageTracker) {
+      usageTracker.push([
+        'trackEvent',
+        'Claudy',
+        claudyOpened ? 'close' : 'open',
+        'claudy'
+      ])
+    }
+    this.setState({ claudyOpened: !claudyOpened })
+  }
+
+  toggleSupport = () => {
+    const { supportDisplayed } = this.state
+    this.setState({ supportDisplayed: !supportDisplayed })
+  }
+
+  renderCenter() {
+    const { appName, appNamePrefix, appSlug, iconPath, isPublic } = this.props
+    return (
+      <Apps
+        appName={appName}
+        appNamePrefix={appNamePrefix}
+        appSlug={appSlug}
+        iconPath={iconPath}
+        isPublic={isPublic}
+      />
+    )
+  }
+
+  renderLeft = () => {
+    const { t, isPublic, webviewContext } = this.props
+
+    if (webviewContext) {
+      return <ButtonCozyHome webviewContext={webviewContext} />
+    }
+
+    // data-tutorial attribute allows to be targeted in an application tutorial
+    return !isPublic ? (
+      <button
+        type="button"
+        className="coz-bar-btn coz-bar-burger"
+        onClick={this.toggleDrawer}
+        data-tutorial="apps-mobile"
+      >
+        <Icon icon={SvgIconApps} width={16} height={16} color="currentColor" />
+        <span className="coz-bar-hidden">{t('drawer')}</span>
+      </button>
+    ) : null
+  }
+
+  renderRight = () => {
+    const { isPublic } = this.props
+    return !isPublic ? (
+      <Settings
+        toggleSupport={this.toggleSupport}
+        onLogOut={this.props.onLogOut}
+      />
+    ) : null
+  }
+
+  render() {
+    const {
+      claudyFired,
+      claudyOpened,
+      drawerVisible,
+      searchBarEnabled,
+      supportDisplayed,
+      usageTracker
+    } = this.state
+
+    const {
+      theme,
+      themeOverrides,
+      barLeft,
+      barRight,
+      barCenter,
+      barSearch,
+      claudyEnabled,
+      onDrawer,
+      isPublic,
+      onLogOut,
+      userActionRequired
+    } = this.props
+
+    const {
+      primaryColor: pColor,
+      primaryContrastTextColor: pctColor
+    } = themeOverrides
+    const pStyle = pColor ? { '--cozBarThemePrimaryColor': pColor } : {}
+    const pctStyle = pctColor
+      ? { '--cozBarThemePrimaryContrastTextColor': pctColor }
+      : {}
+    const themeStyle = { ...pStyle, ...pctStyle }
+
+    return (
+      <div className={`coz-bar-wrapper coz-theme-${theme}`} style={themeStyle}>
+        <div id="cozy-bar-modal-dom-place" />
+        <div className="coz-bar-container">
+          {barLeft || this.renderLeft()}
+          {barCenter || this.renderCenter()}
+          <div className="u-flex-grow">
+            {barSearch || (searchBarEnabled ? <SearchBar /> : null)}
+          </div>
+          {barRight || this.renderRight()}
+          {!isPublic ? (
+            <Drawer
+              visible={drawerVisible}
+              onClose={this.toggleDrawer}
+              onClaudy={
+                (claudyEnabled && (() => this.toggleClaudy(true))) || false
+              }
+              isClaudyLoading={claudyFired}
+              drawerListener={() => onDrawer(drawerVisible)}
+              toggleSupport={this.toggleSupport}
+              onLogOut={onLogOut}
+            />
+          ) : null}
+          {claudyEnabled && (
+            <Claudy
+              usageTracker={usageTracker}
+              claudyFired={claudyFired}
+              onToggle={() => this.toggleClaudy(false)}
+              opened={claudyOpened}
+            />
+          )}
+          {supportDisplayed && <SupportModal onClose={this.toggleSupport} />}
+        </div>
+        {userActionRequired && <Banner {...userActionRequired} />}
+      </div>
+    )
+  }
+}
+
+export const mapStateToProps = state => ({
+  theme: getTheme(state).name,
+  themeOverrides: getTheme(state).overrides,
+  barLeft: getContent(state, 'left'),
+  barRight: getContent(state, 'right'),
+  barCenter: getContent(state, 'center'),
+  barSearch: getContent(state, 'search'),
+  isDrive: isCurrentApp(state, { slug: 'drive' }),
+  claudyEnabled: shouldEnableClaudy(state),
+  hasFetchedApps: hasFetched(state),
+  webviewContext: getWebviewContext(state)
+})
+
+export const mapDispatchToProps = dispatch => ({
+  fetchApps: () => dispatch(fetchApps()),
+  fetchContext: () => dispatch(fetchContext()),
+  fetchSettingsData: displayBusy => dispatch(fetchSettingsData(displayBusy))
+})
+
+export default translate()(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Bar)
+)

package/src/components/Bar.spec.jsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { isFlagshipApp, isMobileApp } from 'cozy-device-helper'
+import toJson from 'enzyme-to-json'
+import reducers from 'lib/reducers'
+import CozyClient from 'cozy-client'
+
+import { Bar, mapStateToProps, mapDispatchToProps } from './Bar'
+
+jest.mock('cozy-device-helper', () => ({
+  ...require.requireActual('cozy-device-helper'),
+  isMobileApp: jest.fn(),
+  isFlagshipApp: jest.fn()
+}))
+
+describe('Bar', () => {
+  let props, client
+  beforeEach(() => {
+    jest.resetAllMocks()
+    jest.spyOn(Bar.prototype, 'fetchApps')
+    isMobileApp.mockReturnValue(false)
+    client = new CozyClient({})
+    props = {
+      fetchContext: jest.fn().mockResolvedValue({}),
+      fetchApps: jest.fn().mockResolvedValue([]),
+      fetchSettingsData: jest.fn().mockResolvedValue({}),
+      theme: 'default',
+      themeOverrides: {},
+      t: x => x,
+      cozyClient: client
+    }
+  })
+
+  afterEach(() => {
+    Bar.prototype.fetchApps.mockRestore()
+    isFlagshipApp.mockClear()
+  })
+
+  it('should fetch data when mounted', () => {
+    shallow(<Bar {...props} />)
+    expect(props.fetchContext).toHaveBeenCalled()
+    expect(props.fetchApps).toHaveBeenCalled()
+    expect(props.fetchSettingsData).toHaveBeenCalled()
+    expect(Bar.prototype.fetchApps).toHaveBeenCalled()
+  })
+
+  it('should not fetch data if public', () => {
+    shallow(<Bar {...props} isPublic={true} />)
+    expect(props.fetchContext).not.toHaveBeenCalled()
+    expect(props.fetchApps).not.toHaveBeenCalled()
+    expect(props.fetchSettingsData).not.toHaveBeenCalled()
+    expect(Bar.prototype.fetchApps).not.toHaveBeenCalled()
+  })
+
+  it('should not fetch apps if hasFetchedApps is true', () => {
+    const barWrapper = shallow(<Bar {...props} hasFetchedApps={true} />)
+    jest.resetAllMocks()
+    barWrapper.setState({ drawerVisible: true }) // to call componentdidUpdate
+    expect(props.fetchApps).not.toHaveBeenCalled()
+    expect(Bar.prototype.fetchApps).not.toHaveBeenCalled()
+  })
+
+  it('should re-fetch apps if apps are not fetched and drawer opens', () => {
+    const barWrapper = shallow(<Bar {...props} />)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(1)
+    expect(props.fetchApps).toHaveBeenCalledTimes(1)
+    barWrapper.setState({ drawerVisible: true })
+    expect(props.fetchApps).toHaveBeenCalledTimes(2)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(2)
+    barWrapper.setState({ drawerVisible: true, usageTracker: {} })
+    expect(props.fetchApps).toHaveBeenCalledTimes(2)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(2)
+  })
+
+  it('should change theme', () => {
+    const barWrapper = shallow(<Bar {...props} theme="primary" />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should change allow theme overrides', () => {
+    const barWrapper = shallow(
+      <Bar
+        {...props}
+        theme="primary"
+        themeOverrides={{ primaryColor: 'red' }}
+      />
+    )
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should display the Searchbar', () => {
+    const barWrapper = shallow(<Bar {...props} isDrive isPublic={false} />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should not display searchbar if we are on mobile', () => {
+    isMobileApp.mockReturnValue(true)
+    const barWrapper = shallow(<Bar {...props} isDrive isPublic={false} />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should not display searchbar if we are not on Cozy Drive', () => {
+    isMobileApp.mockReturnValue(true)
+    const barWrapper = shallow(
+      <Bar {...props} isDrive={false} isPublic={false} />
+    )
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should not display searchbar if we are not on  a public page', () => {
+    isMobileApp.mockReturnValue(true)
+    const barWrapper = shallow(<Bar {...props} isDrive isPublic={true} />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should have correct state props provided by the store with the initial state', () => {
+    const initialState = reducers(undefined, {})
+    expect(mapStateToProps(initialState)).toMatchSnapshot()
+  })
+
+  it('should have correct dispatch props provided by the store', () => {
+    expect(mapDispatchToProps(jest.fn())).toMatchSnapshot()
+  })
+
+  it('should call re-fetch data when token is refreshed', () => {
+    shallow(<Bar {...props} isDrive={false} isPublic={false} />)
+    client.emit('tokenRefreshed')
+    expect(props.fetchContext).toHaveBeenCalledTimes(2)
+    expect(props.fetchApps).toHaveBeenCalledTimes(2)
+    expect(props.fetchSettingsData).toHaveBeenCalledTimes(2)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(2)
+  })
+})

package/src/components/Claudy.jsx

@@ -0,0 +1,81 @@
+import React, { Component } from 'react'
+import { getIntents } from 'lib/stack'
+
+class Claudy extends Component {
+  constructor(props, context) {
+    super(props)
+    this.store = context.barStore
+    this.state = {
+      isLoading: false,
+      isActive: false
+    }
+    this.intents = getIntents()
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.claudyFired) this.toggle()
+  }
+
+  componentWillReceiveProps(nextProps) {
+    return this.UNSAFE_componentWillReceiveProps(nextProps)
+  }
+
+  toggle = () => {
+    if (!this.props.opened && !this.intentWrapperRef.childNodes.length) {
+      this.setState({ isLoading: true })
+      // init Claudy intent
+      this.intents
+        .create('CLAUDY', 'io.cozy.settings', {
+          exposeIntentFrameRemoval: true
+        })
+        .start(this.intentWrapperRef, () => {
+          this.setState({ isLoading: false, isActive: true })
+          this.props.onToggle() // toggle claudy when the intent is loaded
+        })
+        .then(({ removeIntentIframe }) => {
+          // exposeFrameRemoval intent event
+          // remove the intent frame at the end of the menu closing transition
+          const closedListener = e => {
+            if (e.propertyName === 'transform') {
+              removeIntentIframe()
+              this.setState({ isActive: false })
+              e.target.removeEventListener('transitionend', closedListener)
+            }
+          }
+          this.intentWrapperRef.addEventListener(
+            'transitionend',
+            closedListener,
+            false
+          )
+          this.props.onToggle()
+        })
+    } else {
+      this.setState({ isActive: !this.state.isActive })
+      this.props.onToggle()
+    }
+  }
+
+  render() {
+    const { opened } = this.props
+    const { isLoading, isActive } = this.state
+    return (
+      <div className={`coz-claudy ${opened ? 'coz-claudy--opened' : ''}`}>
+        <button
+          type="button"
+          className="coz-claudy-icon coz-bar-hide-sm"
+          data-claudy-opened={isActive}
+          data-claudy-loading={isLoading}
+          onClick={this.toggle}
+        />
+        <div
+          className="coz-claudy-intent-wrapper"
+          ref={wrapper => {
+            this.intentWrapperRef = wrapper
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default Claudy

package/src/components/ClaudyIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+function SvgIconClaudy(props) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <path
+        d="M22 12h-7c-.6 0-1 .4-1 1s.4 1 1 1h7c.6 0 1-.4 1-1s-.4-1-1-1zm3-5H15c-.5 0-1 .4-1 1s.4 1 1 1h10c.5 0 1-.4 1-1s-.4-1-1-1z"
+        fill="none"
+      />
+      <path
+        fill="#FFF"
+        d="M31 1H9c-.6 0-1 .5-1 1v15c2.2 0 4.1 1.2 5.2 3H18v1.9c0 .6.4.7.8.4l3.3-2.3H31c.6 0 1-.5 1-1V2c0-.6-.4-1-1-1zm-9 13h-7c-.6 0-1-.4-1-1s.4-1 1-1h7c.6 0 1 .4 1 1s-.4 1-1 1zm3-5H15c-.6 0-1-.4-1-1s.5-1 1-1h10c.6 0 1 .4 1 1s-.5 1-1 1zM10.4 26.7c0 .1-.7 1.3-2.4 1.3-1.8 0-2.4-1.2-2.4-1.3-.1-.2 0-.5.2-.7.2-.1.5 0 .7.2 0 0 .4.7 1.6.7 1.1 0 1.5-.7 1.6-.7.1-.2.4-.3.7-.2.1.2.2.5 0 .7M12 23c0-2.2-1.8-4-4-4s-4 1.8-4 4c-2.2 0-4 1.8-4 4s1.8 4 4 4h8c2.2 0 4-1.8 4-4s-1.8-4-4-4"
+      />
+    </svg>
+  )
+}
+
+export default SvgIconClaudy