cozy-bar 12.3.0 → 13.1.0

package/README.md

@@ -158,7 +158,6 @@ You can reach the Cozy Community by:
 
 cozy-bar is developed by Cozy Cloud and distributed under the [MIT].
 
-
 [cozy]: https://cozy.io "Cozy Cloud"
 [setup]: https://dev.cozy.io/#set-up-the-development-environment "Cozy dev docs: Set up the Development Environment"
 [doctypes]: https://dev.cozy.io/#main-document-types

package/dist/components/Bar.js

@@ -19,6 +19,8 @@ var _reactRedux = require("react-redux");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _cozyDeviceHelper = require("cozy-device-helper");
@@ -75,11 +77,16 @@ var Bar = function Bar(_ref) {
   var _useI18n = (0, _useI18n2.default)(),
       t = _useI18n.t;
 
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       drawerVisible = _useState2[0],
       setDrawerVisible = _useState2[1];
 
+  var showDrawerAndBurger = !isPublic && isMobile;
+  var showSettings = !isPublic && !isMobile;
   var fetchInitialData = (0, _react.useCallback)(function () {
     if (!isPublic) {
       fetchContext();
@@ -131,7 +138,7 @@ var Bar = function Bar(_ref) {
     } // data-tutorial attribute allows to be targeted in an application tutorial
 
 
-    return !isPublic ? /*#__PURE__*/_react.default.createElement("button", {
+    return showDrawerAndBurger ? /*#__PURE__*/_react.default.createElement("button", {
       type: "button",
       className: "coz-bar-btn coz-bar-burger",
       onClick: toggleDrawer,
@@ -147,7 +154,7 @@ var Bar = function Bar(_ref) {
   };
 
   var renderRight = function renderRight() {
-    return !isPublic ? /*#__PURE__*/_react.default.createElement(_Settings.default, {
+    return showSettings ? /*#__PURE__*/_react.default.createElement(_Settings.default, {
       onLogOut: onLogOut
     }) : null;
   };
@@ -161,7 +168,7 @@ var Bar = function Bar(_ref) {
     className: "coz-bar-container"
   }, barLeft || renderLeft(), barCenter || renderCenter(), /*#__PURE__*/_react.default.createElement("div", {
     className: "u-flex-grow"
-  }, barSearch), barRight || renderRight(), !isPublic ? /*#__PURE__*/_react.default.createElement(_Drawer.default, {
+  }, barSearch), barRight || renderRight(), showDrawerAndBurger ? /*#__PURE__*/_react.default.createElement(_Drawer.default, {
     visible: drawerVisible,
     onClose: toggleDrawer,
     drawerListener: function drawerListener() {

package/dist/components/Bar.spec.jsx

@@ -1,21 +1,45 @@
 import React from 'react'
-import { isFlagshipApp, isMobileApp } from 'cozy-device-helper'
+import { isFlagshipApp } from 'cozy-device-helper'
 import { BarLike } from 'test/lib/BarLike'
 
 import { Bar } from './Bar'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { createMockClient } from 'cozy-client'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import { useInstanceInfo } from 'cozy-client'
+import { shouldDisplayOffers } from 'cozy-client/dist/models/instance'
 
 jest.mock('cozy-device-helper', () => ({
   ...require.requireActual('cozy-device-helper'),
-  isMobileApp: jest.fn(),
   isFlagshipApp: jest.fn()
 }))
 
+jest.mock('cozy-client', () => ({
+  ...require.requireActual('cozy-client'),
+  useInstanceInfo: jest.fn()
+}))
+
+jest.mock('cozy-client/dist/models/instance', () => ({
+  ...require.requireActual('cozy-client/dist/models/instance'),
+  shouldDisplayOffers: jest.fn()
+}))
+
+jest.mock('cozy-ui/transpiled/react/providers/Breakpoints', () => ({
+  ...require.requireActual('cozy-ui/transpiled/react/providers/Breakpoints'),
+  __esModule: true,
+  useBreakpoints: jest.fn()
+}))
+
 describe('Bar', () => {
   beforeEach(() => {
     jest.resetAllMocks()
-    isMobileApp.mockReturnValue(false)
+    useBreakpoints.mockReturnValue({ isMobile: true })
+    shouldDisplayOffers.mockReturnValue(false)
+    useInstanceInfo.mockReturnValue({
+      isLoaded: true,
+      diskUsage: { data: { attributes: { used: 0 } } }
+    })
   })
 
   afterEach(() => {

package/dist/components/BarComponent.js

@@ -162,7 +162,8 @@ var BarComponent = function BarComponent(_ref2) {
     wrapperElement: wrapperElement,
     setWrapperElement: setWrapperElement
   }, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: themeVariant
+    variant: themeVariant,
+    ignoreCozySettings: options.isPublic
   }, disableInternalStore ? /*#__PURE__*/_react.default.createElement(_Bar.default, (0, _extends2.default)({}, options, {
     barSearch: barSearch,
     barLeft: barLeft,

package/dist/components/Drawer.js

@@ -35,6 +35,12 @@ var _hammerjs = _interopRequireDefault(require("hammerjs"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Divider = _interopRequireDefault(require("cozy-ui/transpiled/react/Divider"));
+
+var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
+
+var _Paper = _interopRequireDefault(require("cozy-ui/transpiled/react/Paper"));
+
 var _AppsContent = _interopRequireDefault(require("./Apps/AppsContent"));
 
 var _SettingsContent = _interopRequireDefault(require("./Settings/SettingsContent"));
@@ -122,7 +128,6 @@ var Drawer = /*#__PURE__*/function (_Component) {
       isScrolling: false,
       isClosing: false
     };
-    _this.handleLogout = _this.handleLogout.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -252,59 +257,15 @@ var Drawer = /*#__PURE__*/function (_Component) {
       progress = Math.min(1.1, Math.max(0, progress));
       this.asideRef.style.transform = 'translateX(-' + progress * 100 + '%)';
     }
-  }, {
-    key: "handleLogout",
-    value: function () {
-      var _handleLogout = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-        var _this$props, onLogOut, logOut, res;
-
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                _this$props = this.props, onLogOut = _this$props.onLogOut, logOut = _this$props.logOut;
-
-                if (!(onLogOut && typeof onLogOut === 'function')) {
-                  _context3.next = 6;
-                  break;
-                }
-
-                res = onLogOut();
-
-                if (!(res instanceof Promise)) {
-                  _context3.next = 6;
-                  break;
-                }
-
-                _context3.next = 6;
-                return res;
-
-              case 6:
-                logOut();
-
-              case 7:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3, this);
-      }));
-
-      function handleLogout() {
-        return _handleLogout.apply(this, arguments);
-      }
-
-      return handleLogout;
-    }()
   }, {
     key: "render",
     value: function render() {
       var _this3 = this;
 
-      var _this$props2 = this.props,
-          visible = _this$props2.visible,
-          storageData = _this$props2.storageData,
-          isInvertedTheme = _this$props2.isInvertedTheme;
+      var _this$props = this.props,
+          visible = _this$props.visible,
+          isInvertedTheme = _this$props.isInvertedTheme,
+          onLogOut = _this$props.onLogOut;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "coz-drawer-wrapper",
         onClick: this.onDrawerClick,
@@ -321,15 +282,15 @@ var Drawer = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_AppsContent.default, {
         onAppSwitch: this.close,
         isInvertedTheme: isInvertedTheme
-      })), /*#__PURE__*/_react.default.createElement("hr", {
-        className: "coz-sep-flex"
-      }), /*#__PURE__*/_react.default.createElement("nav", {
+      })), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement("nav", {
         className: "coz-drawer--settings"
-      }, /*#__PURE__*/_react.default.createElement(_SettingsContent.default, {
-        onLogOut: this.handleLogout,
-        storageData: storageData,
-        isDrawer: true
-      }))));
+      }, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+        elevation: 0,
+        square: true
+      }, /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(_SettingsContent.default, {
+        isDrawer: true,
+        onLogOut: onLogOut
+      }))))));
     }
   }]);
   return Drawer;
@@ -341,28 +302,17 @@ Drawer.propTypes = {
   onClose: _propTypes.default.func,
   onLogOut: _propTypes.default.func,
   isInvertedTheme: _propTypes.default.bool,
-  storageData: _propTypes.default.object,
-  fetchSettingsData: _propTypes.default.func,
-  logOut: _propTypes.default.func
-};
-
-var mapStateToProps = function mapStateToProps(state) {
-  return {
-    storageData: (0, _reducers.getStorageData)(state)
-  };
+  fetchSettingsData: _propTypes.default.func
 };
 
 var mapDispatchToProps = function mapDispatchToProps(dispatch) {
   return {
     fetchSettingsData: function fetchSettingsData() {
       return dispatch((0, _reducers.fetchSettingsData)());
-    },
-    logOut: function logOut() {
-      return dispatch((0, _reducers.logOut)());
     }
   };
 };
 
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Drawer);
+var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(Drawer);
 
 exports.default = _default;

package/dist/components/Drawer.spec.jsx

@@ -2,20 +2,35 @@ import React from 'react'
 
 import { render, screen, fireEvent, act } from '@testing-library/react'
 
+import { useInstanceInfo } from 'cozy-client'
+
 import { Drawer } from './Drawer'
 import { BarLike } from 'test/lib/BarLike'
 
+jest.mock('cozy-client', () => ({
+  ...require.requireActual('cozy-client'),
+  useInstanceInfo: jest.fn()
+}))
+
 const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
 
 describe('bar', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    useInstanceInfo.mockReturnValue({
+      isLoaded: true,
+      diskUsage: { data: { attributes: { used: 0 } } }
+    })
+  })
+
   describe('logout', () => {
     const findLogoutButton = () => {
       return screen.getByText('Log out')
     }
-    const setup = ({ onLogOut, logOut }) => {
+    const setup = ({ onLogOut }) => {
       render(
         <BarLike>
-          <Drawer logOut={logOut} onLogOut={onLogOut} />
+          <Drawer onLogOut={onLogOut} />
         </BarLike>
       )
     }
@@ -34,9 +49,6 @@ describe('bar', () => {
     it('should await the onLogOut', async () => {
       let prom
       const callOrder = []
-      const logOut = jest.fn().mockImplementation(() => {
-        callOrder.push('logOut')
-      })
 
       const onLogOut = jest.fn().mockImplementation(async () => {
         prom = sleep(100)
@@ -44,40 +56,26 @@ describe('bar', () => {
         await prom
       })
 
-      setup({ logOut, onLogOut })
+      setup({ onLogOut })
 
       act(() => {
         clickLogout()
       })
 
-      expect(logOut).not.toHaveBeenCalled()
       await prom
       await sleep(0)
 
-      expect(logOut).toHaveBeenCalled()
       expect(onLogOut).toHaveBeenCalled()
-      expect(callOrder).toEqual(['onLogOut', 'logOut'])
-    })
-
-    it('should work if onLogOut has not been passed', () => {
-      const logOut = jest.fn()
-      setup({ logOut })
-      act(() => {
-        clickLogout()
-      })
-
-      expect(logOut).toHaveBeenCalled()
+      expect(callOrder).toEqual(['onLogOut'])
     })
 
     it('should work if onLogOut does not return a promise', () => {
-      const logOut = jest.fn()
       const onLogOut = jest.fn()
-      setup({ logOut, onLogOut })
+      setup({ onLogOut })
       act(() => {
         clickLogout()
       })
 
-      expect(logOut).toHaveBeenCalled()
       expect(onLogOut).toHaveBeenCalled()
     })
   })

package/dist/components/Settings/SettingsContent.js

@@ -7,196 +7,81 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+var _react = _interopRequireDefault(require("react"));
 
-var _cozyDeviceHelper = require("cozy-device-helper");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _cozyClient = require("cozy-client");
 
-var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
-
-var _Openwith = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Openwith"));
-
-var _People = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/People"));
-
-var _Palette = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Palette"));
+var _Actions = require("cozy-ui/transpiled/react/ActionsMenu/Actions");
 
-var _GraphCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/GraphCircle"));
+var _ActionsMenu = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu"));
 
-var _CozyCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CozyCircle"));
+var _ActionsItems = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu/ActionsItems"));
 
-var _Hand = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Hand"));
+var _actions = require("./actions");
 
-var _Devices = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Devices"));
-
-var _Globe = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Globe"));
-
-var _Logout = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Logout"));
-
-var _Help = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Help"));
-
-var _Email = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Email"));
-
-var _helper = require("./helper");
+var _useI18n2 = _interopRequireDefault(require("../useI18n"));
 
-var _StorageData = _interopRequireDefault(require("./StorageData"));
+var SettingsContent = function SettingsContent(_ref) {
+  var anchorRef = _ref.anchorRef,
+      instanceInfo = _ref.instanceInfo,
+      onLogOut = _ref.onLogOut,
+      isDrawer = _ref.isDrawer,
+      onClose = _ref.onClose;
 
-var _useI18n2 = _interopRequireDefault(require("../useI18n"));
+  var _useI18n = (0, _useI18n2.default)(),
+      t = _useI18n.t;
 
-var MenuIcon = function MenuIcon(_ref) {
-  var icon = _ref.icon;
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: "u-mr-1",
-    color: "var(--iconTextColor)",
-    icon: icon
+  var actions = (0, _Actions.makeActions)([_actions.profile, _actions.appearance, _actions.plans, _actions.storage, _actions.permissions, _Actions.divider, _actions.connectedDevices, _actions.connections, _Actions.divider, _actions.help, _actions.contact, _actions.logout], {
+    t: t,
+    instanceInfo: instanceInfo,
+    onLogOut: onLogOut
   });
-};
-
-var ExternalLinkIcon = function ExternalLinkIcon() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: "coz-nav-settings-item-btn-external-icon",
-    color: "var(--iconTextColor)",
-    icon: _Openwith.default
+  if (isDrawer) return /*#__PURE__*/_react.default.createElement(_ActionsItems.default, {
+    actions: actions
+  });
+  return /*#__PURE__*/_react.default.createElement(_ActionsMenu.default, {
+    ref: anchorRef,
+    open: true,
+    docs: [],
+    actions: actions,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    autoClose: true,
+    onClose: onClose
   });
 };
 
-var NavGroup = function NavGroup(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement("ul", {
-    className: "coz-nav-group"
-  }, children);
-};
-
-var NavItem = function NavItem(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement("li", {
-    className: "coz-nav-settings-item"
-  }, children);
+SettingsContent.propTypes = {
+  instanceInfo: _propTypes.default.object,
+  onLogOut: _propTypes.default.func,
+  isDrawer: _propTypes.default.bool
 };
 
-var SettingsContent = function SettingsContent(_ref4) {
-  var onLogOut = _ref4.onLogOut,
-      storageData = _ref4.storageData,
-      _ref4$isDrawer = _ref4.isDrawer,
-      isDrawer = _ref4$isDrawer === void 0 ? false : _ref4$isDrawer,
-      shoulDisplayViewOfferButton = _ref4.shoulDisplayViewOfferButton,
-      managerUrlPremiumLink = _ref4.managerUrlPremiumLink;
-
-  var _useI18n = (0, _useI18n2.default)(),
-      t = _useI18n.t;
+var SettingsContentWithQuery = function SettingsContentWithQuery(props) {
+  var _useInstanceInfo = (0, _cozyClient.useInstanceInfo)(),
+      isLoaded = _useInstanceInfo.isLoaded,
+      instanceInfo = (0, _objectWithoutProperties2.default)(_useInstanceInfo, ["isLoaded"]);
 
-  var client = (0, _cozyClient.useClient)();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "coz-nav-pop-content"
-  }, isDrawer && /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement(NavGroup, null, /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    href: (0, _helper.getSettingsLink)({
-      client: client,
-      hash: 'profile'
-    }),
-    target: "_self",
-    title: t('profile')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _People.default
-  }), t('profile'))), (0, _cozyFlags.default)('ui.darkmode.enabled') && /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    href: (0, _helper.getSettingsLink)({
-      client: client,
-      hash: 'appearance'
-    }),
-    target: "_self",
-    title: t('appearance')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _Palette.default
-  }), t('appearance'))), (!isDrawer || !(0, _cozyDeviceHelper.isMobileApp)()) && shoulDisplayViewOfferButton && /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    href: managerUrlPremiumLink,
-    target: "_self",
-    title: t('plans')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _CozyCircle.default
-  }), t('plans'), !(0, _cozyFlags.default)('settings.subscription') && /*#__PURE__*/_react.default.createElement(ExternalLinkIcon, null))), /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    target: "_self",
-    title: t('storage'),
-    href: (0, _helper.getSettingsLink)({
-      client: client,
-      hash: 'storage'
-    })
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _GraphCircle.default
-  }), /*#__PURE__*/_react.default.createElement("span", null, t('storage'), storageData ? /*#__PURE__*/_react.default.createElement(_StorageData.default, {
-    data: storageData
-  }) : null)))), /*#__PURE__*/_react.default.createElement(NavGroup, null, (0, _cozyFlags.default)('settings.permissions-dashboard') && /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    href: (0, _helper.getSettingsLink)({
-      client: client,
-      hash: 'permissions/slug'
-    }),
-    target: "_self",
-    title: t('permissions')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _Hand.default
-  }), t('permissions'))), /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    href: (0, _helper.getSettingsLink)({
-      client: client,
-      hash: 'connectedDevices'
-    }),
-    target: "_self",
-    title: t('connectedDevices')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _Devices.default
-  }), t('connectedDevices'))), /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    href: (0, _helper.getSettingsLink)({
-      client: client,
-      hash: 'sessions'
-    }),
-    target: "_self",
-    title: t('connections')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _Globe.default
-  }), t('connections')))), /*#__PURE__*/_react.default.createElement(NavGroup, null, !(0, _cozyDeviceHelper.isMobileApp)() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: "https://support.cozy.io/",
-    title: t('help')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _Help.default
-  }), t('help'), /*#__PURE__*/_react.default.createElement(ExternalLinkIcon, null))), /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("a", {
-    role: "menuitem",
-    href: (0, _helper.getSettingsLink)({
-      client: client,
-      hash: 'support'
-    }),
-    target: "_self",
-    title: t('contact')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _Email.default
-  }), t('contact')))), /*#__PURE__*/_react.default.createElement(NavItem, null, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    role: "menuitem",
-    onClick: onLogOut,
-    title: t('logout')
-  }, /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    icon: _Logout.default
-  }), " ", t('logout')))));
+  if (!isLoaded) return null;
+  return /*#__PURE__*/_react.default.createElement(SettingsContent, (0, _extends2.default)({
+    instanceInfo: instanceInfo
+  }, props));
 };
 
-SettingsContent.defaultProps = {
-  shoulDisplayViewOfferButton: false
+SettingsContentWithQuery.defaultProps = {
+  isDrawer: false
 };
-SettingsContent.propTypes = {
-  shoulDisplayViewOfferButton: _propTypes.default.bool,
-  onLogOut: _propTypes.default.func.isRequired,
-  storageData: _propTypes.default.object,
+SettingsContentWithQuery.propTypes = {
+  onLogOut: _propTypes.default.func,
   isDrawer: _propTypes.default.bool
 };
-var _default = SettingsContent;
+var _default = SettingsContentWithQuery;
 exports.default = _default;

package/dist/components/Settings/StorageData.js

@@ -9,28 +9,35 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useI18n2 = _interopRequireDefault(require("../useI18n"));
+var _cozyClient = require("cozy-client");
+
+var _instance = require("cozy-client/dist/models/instance");
 
-var StorageData = function StorageData(_ref) {
-  var data = _ref.data;
+var _Progress = require("cozy-ui/transpiled/react/Progress");
+
+var _useI18n2 = _interopRequireDefault(require("../useI18n"));
 
+var StorageData = function StorageData() {
   var _useI18n = (0, _useI18n2.default)(),
       t = _useI18n.t;
 
-  var diskQuota = Number.isInteger(data.quota) ? (data.quota / (1000 * 1000 * 1000)).toFixed(2) : data.quota;
-  var diskUsage = Number.isInteger(data.usage) ? (data.usage / (1000 * 1000 * 1000)).toFixed(2) : data.usage;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "coz-nav-storage"
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "coz-nav-storage-text"
-  }, t('storage_phrase', {
-    diskUsage: diskUsage,
-    diskQuota: diskQuota
-  })), /*#__PURE__*/_react.default.createElement("progress", {
-    className: "cozy-nav-storage-bar",
-    value: diskUsage,
-    max: diskQuota,
-    min: "0"
+  var _useInstanceInfo = (0, _cozyClient.useInstanceInfo)(),
+      isLoaded = _useInstanceInfo.isLoaded,
+      diskUsage = _useInstanceInfo.diskUsage;
+
+  if (!isLoaded) return null; // we used this default quota set in getStorageData, we just reuse it here
+
+  var storageData = (0, _instance.makeDiskInfos)(diskUsage.data.attributes.used, diskUsage.data.attributes.quota || Math.max(Math.pow(10, 12), 10 * parseInt(diskUsage.data.attributes.used, 10)));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t('storage_phrase', {
+    diskUsage: storageData.humanDiskUsage,
+    diskQuota: storageData.humanDiskQuota
+  }), /*#__PURE__*/_react.default.createElement(_Progress.LinearProgress, {
+    style: {
+      width: '85%'
+    },
+    className: "u-mt-half",
+    variant: "determinate",
+    value: parseInt(storageData.percentUsage)
   }));
 };