cozy / cozy-bar Goto Github PK

When using components imported from cozy-ui (such as Button), their styles are not loaded — at least in dev mode. I suspect it's because cozy-ui uses stylus files and there's no webpack loader configured for that in the cozy-bar.

Edit: rectification: there is a config for stylus files for react, but it doesn't appear to be working as intended.

I see a right padding in the bar and it makes the BarRight component 1em to the right. Is it an expected behavior ?

See my screenshot below :

On the banks cordova app, we have the following problem with the bar:

• Login on an instance A
• Open the drawer, then click on "Settings"
• I am redirected to A-settings.mycozy.cloud in my browser
• Logout
• Login on an instance B
• Open the drawer, then click on "Settings"
• I am redirected to A-settings.mycozy.cloud instead of B-settings.mycozy.cloud in my browser

In a few applications, at least for Drive, we have to do stuff like this :

import BarContextProvider from 'cozy-ui/transpiled/react/BarContextProvider'
{isMobile ? (
        <BarRight>
          <BarContextProvider client={client} t={t} store={client.store}>
            {MoreMenu}
          </BarContextProvider>
        </BarRight>
)

As mentioned by @ptbrowne here (https://github.com/cozy/cozy-drive/pull/2003/files#r414522850) it could be great if those components handle the context by itself.

Is there any use of the cozy-bar without using the context of the requesting App? Or do we have to pass every time the calling app context?

After renaming Cozy Files to Cozy Drive, I see on the 'manifest.webapp', the name have not Cozy word:

"name": "Drive",

I change it to Cozy Drive but after this, when I start Cozy Drive app I see 'cozy cozy drive' on title.

I propose 2 changes:

• Remove the cozy word here
• Remove the lowercase here

What do you think ?

Hi, I found a problem and I think the fix should be in cozy-bar, but let's discuss this.

The problem

On browsers that don't support Object.assign (which includes IE11, which we support), some apps crash with the error Object doesn't support property or method 'assign'.
More specifically, this error is emitted by the cozy-bar, when it imports the Modal component from cozy-ui which uses Object.assign right away.

the solution

We really want to polyfill Object.assign, and in fact, we mostly do. Our apps don't have this problem. But cozy-bar doesn't polyfill it, and I really think it should.
To be clearer, cozy-bar uses the cozy-app babel preset, which replaces it's own Object.assign calls, but does not polyfill Object.assign. So when cozy-ui tries to use it it crashes. We're supposed to import 'babel-polyfill' at the very begining of the app for that.

The alternative

Noticed that I said only some apps crash? A couple aren't affected, because they load the app's code (including the polyfill) before they load cozy-bar.js. They tend to use this form of templating.
So we could also switch all apps to this format.

If we import babel-polyfill in cozy-bar, we'll essentially load it twice on each page — once in the app and once in the bar. Which makes sense because both are standalone files, but it's also annoying.

Personally I think it's better to take the weight hit, and be less fragile. Third party devs won't know they have to provide their own polyfills and might run into the same problem.

Pour les applications mobiles nous avons besoins que la cozy-bar puisse s'initialiser correctement sans avoir besoin du réseau.

Voici les différentes tâches que je vais faire pour résoudre ce soucis:

• Persister le store Redux grâce à localForage
• Charger le store persisté et l'injecter

Voici les refactos que je pense faire:

• Création d'un dossier src/lib/store avec 2 fichiers index.js et persistedState.js
• Création d'un dossier src/lib/reducers avec l'ensemble des reducers.
• Supprimer l'appel à getDefaultLocale dans src/index.jsx puisque c'est le reducer Locale qui le fait directement.

Si vous avez des suggestions, des questions, n'hésitez pas.

NB: Je pensais rendre le store asynchrone comme sur les apps mais finalement ça pose des soucis donc je vais créer le store puis charger le store persisté dans un second temps.

see #461 (comment)

This is probably a bug bug I fear that some code may rely on it

The drawer menu needs a safe space so the user can click on the last item of the menu, the disconnect button in our case, especially on iPhone X but any mobile when minimal UI is triggered too.

On minimal UI, the Disconnect button is in the safe area therefore it's not clickable:

And when minimal UI is not triggered, the button is hidden underneath the Safari UI therefore it's not clickable either.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Datasource	Name	Replacement PR?
npm	@babel/polyfill
npm	npm-run-all

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• fix(deps): update dependency @testing-library/react to ^10.4.7
• fix(deps): update dependency react-redux to v5.1.2
• fix(deps): update dependency cozy-device-helper to v2.7.0
• fix(deps): update dependency cozy-flags to v2.12.0
• fix(deps): update dependency cozy-intent to v1.17.3
• fix(deps): update dependency cozy-interapp to v0.9.0
• fix(deps): update dependency cozy-logger to v1.10.4
• fix(deps): update dependency cozy-realtime to v4.6.0
• fix(deps): update dependency cozy-ui to v103.12.0
• fix(deps): update dependency eslint-config-cozy-app to v2.1.1
• fix(deps): update dependency prop-types to v15.8.1
• fix(deps): update dependency redux to v4.2.1
• fix(deps): update dependency redux-thunk to v2.4.2
• fix(deps): update dependency stylus to v0.63.0
• fix(deps): update dependency @testing-library/react to v16
• fix(deps): update dependency babel-loader to v9
• fix(deps): update dependency babel-plugin-module-resolver to v5
• fix(deps): update dependency babel-preset-cozy-app to v2
• fix(deps): update dependency cozy-client to v48
• fix(deps): update dependency cozy-device-helper to v3
• fix(deps): update dependency cozy-flags to v4
• fix(deps): update dependency cozy-intent to v2
• fix(deps): update dependency cozy-realtime to v5
• fix(deps): update dependency cozy-ui to v111
• fix(deps): update dependency eslint-config-cozy-app to v6
• fix(deps): update dependency node to v20
• fix(deps): update dependency react-redux to v9
• fix(deps): update dependency redux to v5
• fix(deps): update dependency redux-persist to v6
• fix(deps): update dependency redux-thunk to v3
• fix(deps): update react monorepo to v18 (major) (react, react-dom)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• fix(deps): pin dependencies (@babel/polyfill, @cozy/minilog, @testing-library/jest-dom, @testing-library/react, babel-loader, babel-plugin-css-modules-transform, babel-plugin-inline-json-import, babel-plugin-module-resolver, babel-plugin-transform-define, babel-preset-cozy-app, enzyme-adapter-react-16, lodash.set, node, react, react-dom)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency semantic-release to v17 [security]
• fix(deps): replace dependency npm-run-all with npm-run-all2 5.0.0
• fix(deps): update babel monorepo (@babel/cli, @babel/core, @babel/polyfill)
• fix(deps): update dependency cozy-client to v45.15.0
• fix(deps): update dependency enzyme to v3.11.0
• fix(deps): update dependency enzyme-adapter-react-16 to 1.15
• fix(deps): update dependency enzyme-to-json to v3.6.2
• fix(deps): update react monorepo to v16.14.0 (react, react-dom)
• fix(deps): update jest monorepo to v29 (major) (babel-jest, jest)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

See #461 (comment)

It needs a fix in both the stack-client.js and stack-internal.js

Avec cette recherche on s’aperçoit qu'il y a plusieurs occurrences dans la cozy-bar de window.location.

Ce n'est pas possible sur les applications mobile puisque nous avons ce type d'url file:///var/containers/Bundle/Application/F1E62264-09DD-4A2B-B3AD-4DFA1C4EEB8C/Cozy%20Banks.app/www/index.html#/balances.
Lorsque l'on passe cozyUrl à la bar nous passons donc le protocole ainsi que le domain : https://mon.fake.cozy

Je vois depuis longtemps à chaque démarrage de l'application mobile des 404:

Voici les 3 warnings:

Cozy-bar cannot fetch Claudy: The ressource was not found
Cozy-bar cannot fetch comming soon apps: The ressource was not found
Cannot get Cozy help link

Pourrait on limiter ses requêtes (on stock le résultat) ? et/ou pouvoir les désactiver si les services derrières ne sont pas disponible dans une app mobile ?

We now have a new method to init and inject the cozy-stack variables in the app's dom. We use cozy-data={{}} instead of cozy-data-X={}. By doing so, we can break the bar if the app doesn't pass all the value during the initialization phase of the bar.

I think we should remove the fact that the Bar can init itself from the DOM. The APP should be responsible to do that.

We should remove https://github.com/cozy/cozy-bar/blob/master/src/dom.js#L4 for instance.

(see cozy/cozy-drive#2395)

The bar is fairly big on is included in all our applications. It needs to be shipped in several ways :

• On mobile it is included in the application
• On web it is shipped by the stack

The bar depends on several libraries :

• cozy-client
• cozy-ui
• React

Historically, the bar has bundled all its libraries since it is easiest way for it to be served by the stack. It also enables the bar to work everywhere, even in non React contexts.

Unfortunately, we can see (below in the screenshots) that those libraries make up for most of the size of the cozy-bar.

Possible actions

• a light build could be provided for applications that want to provide big libraries. cozy-ui and other big libs (React, ReactDOM) could be provided by the host application (using webpack externals).
  {{ STACK_ASSETS_LIGHT }} could be used in the template to indicate to the stack that we want smaller libs.

• The bar could be shipped on npm only transpiled to be bundled in the application later (it would also be good for the mobile usage)

• hammerjs could be replaced by something lighter since we use it only at one place, it seems likely that we are not using all its functionalities (= remove big libraries when they are used only once)

• The bar could be a React component, inheriting from the cozyClient in the context

Output of webpack-analyzer

I notice that at least in Drive and in Mes papiers, we overload this style

It would be possible to replace this rule by padding: 0 ?

Due to extra height to [role=application], it forces Safari to scroll the app content when we want full width & height with no scroll.

Screenshot:

I think the culprit here is the inherit on the height https://github.com/cozy/cozy-bar/blob/master/src/styles/base.css#L12

body's height is 100vh, and we actually don't want that, we want the [role=application] to have a height of 100% of the remaining height which is 100vh minus the height of the cozy-bar.

After the change made here, we have this kind of errors.

Unhandled Promise Rejection: Error: updateAccessToken should not be used with a cozy-client instance initialization

What can I do about that ?

On registry https://registry.npmjs.org/, the "latest" version (v5.0.11) of dependency travis-deploy-once has the following deprecation notice:

We recommend to use Travis Build Stages instead

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about travis-deploy-once's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

We've had a bug on the home where the body,html{display:block;height:auto} from
http://pbrowne.mycozy.cloud/assets/css/cozy-bar.aa10decc4f.min.css
is overriding the html{height: 100%} used by the home.

This causes the background to be bigger than expected since in most cases, the
page will be taller than the viewport.

Since we start to use hooks we need to upgrade enzyme / adapter
#664 (comment)

The cozy-bar exposes these components though the code located here : https://github.com/cozy/cozy-bar/blob/master/src/lib/api.js#L29

One problem we keep running into is that because the component is rendered in the cozy-bar, it also gets the context of the cozy-bar. Any HOC that relies on the context (like connect or translate) will use the wrong context and usually things break.

I don't know what the solution is, but if anyone has ideas, shoot!

Here's a small example of the problem:

const MyBreakingComponent = translate()(({ t }) => <div>{t('my_app_string')}</div>)

<Main>
  works: <MyBreakingComponent />
  doesn't work: <BarLeft><MyBreakingComponent /></BarLeft>
</Main>

In the second case, t comes from the cozy-var context, so it can provide the translations shipped with the bar, but not with the app.

To me, cozy-bar, as a library, should only be transpiled to ES5 and shipped to npm as is. Distributing it in a bundled/minified way prevents module deduplication and optimizations.

http://jamesknelson.com/writing-npm-packages-with-es6-using-the-babel-6-cli/

In this image, you can see in red all the bundles that could be mutualized with a cozy application. Generated with source-map-explorer.

On Banks' mobile app, when the user logouts, we have to destroy the cozy-bar. Today, we are doing it by removing the DOM node (https://github.com/cozy/cozy-banks/blob/b794e588cbac644a3275ab28ef92f6ef13eb541b/src/ducks/mobile/utils.js#L12). But since the bar is adding some styles on the body when it's opened, we had to also remove these styles (https://github.com/cozy/cozy-banks/blob/b794e588cbac644a3275ab28ef92f6ef13eb541b/src/ducks/mobile/utils.js#L13).

It seems we should expose an API to just ask to unmount the cozy-bar (like destroy, unmount, whatever) so all these things could be managed properly by the bar. What do you think?

A partir de maintenant on souhaite que la cozy-bar fasse 56px (3.5rem) de haut en desktop et tablette, que le contenu soit sur une ligne ou deux.

Nous avons eu un problème sur la dernière publication de l'application mobile cozy/cozy-banks#930

Le design d'un bouton a changé seulement sur l'application mobile. En regardant de plus prêt nous avons un bouton avec 2 classes CSS. Une des classes provient de cozy-ui et la second de notre application. Notre classe est surchargé par la class de cozy-ui puisque la cozy-bar vient avec ce style et doit être chargé après le style de notre application.

Le problème a déjà été rencontré la semaine dernière par l'équipe Gangsters. @y-lohse avait l'air de dire qu'il avait eu le souci aussi.

Nous avons imaginé 3 façons de résoudre le problème:

• Faire en sorte que l'ordre des CSS / JS soit le même que sur le web
• Faire le tour de passe myReact / react (que cozy-ui soit importé seulement par l'application, mais ça peut poser un problème si l'app a une version moins récente que cozy-bar)
• Builder la bar depuis l'app

PS: J'ai crée l'issue pour information et pour répertorier de nouveau le problème si ça arrive. On prendra plus de temps pour essayer de résoudre le souci à ce moment.

Je pense que c'est problématique d'avoir les SVG avec de la couleur on devrait pouvoir avoir la même SVG pour les 2 themes. Mais c'est à voir dans de l'optimisation dans un futur plus ou moins proche...

From kosssi : #451 (comment)

coz-bar-container devrait aligner le contenu verticalement, afin d'éviter par exemple ce genre de css dans les app : cozy/cozy-contacts@3bf17e5#diff-230c00691566b09bf9b08d6bc3c783ad139da69c1e893e78ca665264b086bfa1R9

I have this error on drive when linking the current master. I don't know why (yet)

Uncaught (in promise) TypeError: ReactIs.isMemo is not a function
    at getStatics (cozy-bar.js:29921)
    at hoistNonReactStatics (cozy-bar.js:29951)
    at hoistNonReactStatics (cozy-bar.js:29941)
    at wrapWithConnect (cozy-bar.js:70233)
    at Object../src/components/Apps/AppsContent.jsx (cozy-bar.js:77785)
    at __webpack_require__ (cozy-bar.js:30)
    at Object../src/components/Drawer.jsx (cozy-bar.js:78592)
    at __webpack_require__ (cozy-bar.js:30)
    at Object../src/components/Bar.jsx (cozy-bar.js:78108)
    at __webpack_require__ (cozy-bar.js:30)
    at injectBarInDOM (cozy-bar.js:79946)
    at Object._callee$ (cozy-bar.js:80157)
    at tryCatch (cozy-bar.js:72898)
    at Generator.invoke [as _invoke] (cozy-bar.js:73132)
    at Generator.prototype.(:8080/anonymous function) [as next] (http://drive.cozy.tools:8080/public/cozy-bar.js:72950:21)
    at asyncGeneratorStep (cozy-bar.js:79911)
    at _next (cozy-bar.js:79913)
    at cozy-bar.js:79913
    at new Promise (<anonymous>)
    at Object.<anonymous> (cozy-bar.js:79913)
    at Object.init (cozy-bar.js:80179)
    at initCozyBar (index.jsx:27)
    at _callee$ (index.jsx:83)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.(:8080/anonymous function) [as next] (http://drive.cozy.tools:8080/public/drive.js:139467:21)
    at asyncGeneratorStep (es6.reflect.get-prototype-of.js:10)
    at _next (es6.reflect.get-prototype-of.js:10)

If an app set a background color, it appears that the cozy-bar is actually transparent.

Since we inject a CozyClient from the app to the bar, if we inject a non identified client (from a public view for instance) , we got an uncaught error :

Uncaught Error: The application can't subscribe to io.cozy.apps
    at WebSocket.onSocketMessage (cozy-bar.js:17464)

This error is only blocking in our end to end test since every non catched error generate a real error.

We currently fixed the error by removing the injection of cozyclient (tmp fix cozy/cozy-drive#1530)

Master is V8, but V7 has no stable development branch.
If we had a V7 stable branch, we could then add an auto-deploy script in Travis for that specific branch

source: https://forum.cozy.io/t/ascenseur-dans-les-menus-application-et-parametres/5543

Probably just a replacement of overflow-y: scroll with overflow: auto but since I didn't originally code it and don't know why only y axis is concerned, I'd like to get some inputs first.

Since we render <BarLeft />, <BarRight /> inside the context of the bar, their context is changed and as such, some components using the redux store, will get the store of the bar instead of the one of their app. We can use a trick and essentially bind the context to the component but I think it should be easier to do than that. I suggest to use a different storeKey for the bar store : https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

J'ai remarqué qu'en local lorsque je lance l'application Cozy Banks avec la cozy-bar 6.4.4 j'ai pleins de Warning sur des traductions manquantes:

Nous venons d'en parler avec @gregorylegarec , vu que ce n'est pas bloquant nous reviendrons dessus plus tard.

We're trying to figure out some CSS issues on our side and I just saw that harvest is delivered as a dep in the bar. But we don't use it... ?

What is the reason for that?

Sur mobile lorsque l'on passe un token à la bar, si le token n'est pas le bon alors la cozy-bar ne notifie pas l'application qu'elle doit lui fournir un nouveau token. Ce qui pose des soucis pour l'affichage des icones.

Nous pourrions imaginer que lorsque l'on initialise la cozy-bar nous lui passions une fonction shouldUpdateToken qui serait appelée dès que la cozy-bar intercepte une 409 de la stack.

Le souci est actuellement sur cozy-banks parce qu'on ne fournissait pas correctement le refreshToken mais il peut apparaitre sur tous les cozy lorsque le token expire et que l'on ouvre le menu avant que l'app ne fasse d'appel (on est d'accord que les cas doivent être rare mais faisable).

Vous en pensez quoi ?

Inside mobile apps, we want the cozy-bar to display the apps list even if we are offline (after a frist successful fetch).

My idea was to automatically save the apps slice inside localStorage and retrieve it afterwards.

The AppsList is also conditionally rendered if apps list is fetching.

I think this should be changed to whether the apps have been loaded once.

Disconnection should remove data from the localStorage

It seems that replaceTitleOnMobile is not used anymore (at least in a useful way) since

Also, I expect that, even if I have a responsive view, my App name should be displayed at the top left of the bar (just next to the hamburger menu).

as per #461 (comment)

It was not done in #461 in order to not introduce a potential incompatibility. It probably need investigation a few weeks later

If we remove the IconSprite from cozy-ui, some icons are
not there in the settings menu of the cozy-bar.

Cozy-bar requires the token attribute to be named data-cozy-token. Sometime, new Cozy developers misspell this name, so it would be nice to display a warning in the console if we are unable to get valid token or domain.
See cozy/cozy-client-js#150

If I concentrate and click quick enough on Apps and then on Settings menus, I can display both of them at the same time.

Since the editor field in the manifest file (see in collect) will match the editor used to publish an application in the registry, the way we use it from now in the cozy-bar is wrong (it begins to be complicated to not be confusing in the cozy-store). For the bar we just need a prefix to display near the application name (which can be the same as the editor). So I suggest to add a field in the manifest file dedicated to this usage which can be something like app_prefix. It's clear and more meaningful IMHO.
What do you think?

For more context, here is how the bar get this prefix from now (https://github.com/cozy/cozy-bar/blob/master/src/index.jsx#L106):

appNode.dataset.cozyAppEditor || appNode.dataset.cozyEditor || undefined

Meaning these HTML attributes fulfilled by the stack in our HTML main file:

<div
  role="application"
  ...
  data-cozy-editor="{{.AppEditor}}"
  ## OR ##
  data-cozy-app-editor="{{.AppEditor}}"
  ...
/>

Les couleurs devrait être issues de la palette, soit avec une variable directe soit une variable sémantique

When using this api, we got a <undefined></undefined> as rendered component although we have correctly a React element in the barCenter variable here

We have had this problem in Bank and had to resort to a hack to replace global.MutationObserver into window.MutationObserver.

TODO : Figure out why we are in strict mode when getting a reference to the global object via function () { return this}.

Related : https://gitlab.cozycloud.cc/labs/cozy-bank/merge_requests/213