Tech - Rendre la side window indépendante

[ivangabriele]

Cette PR ajoute une synchronisation du store Redux entre plusieurs onglets navigateur ayant ouvert MonitorFish.

Cela permet d'ouvrir la fenêtre secondaire comme une URL indépendante, qu'elle doit ouvert via windows.open() ou via un nouvel onglet, tout en conservation ses interactions avec la fenêtre principale.

Caution

Il faut garder en tête que le state des slides est synchronisé mais les states Redux RTK, donc les données provenants de l'API, ne le sont pas.

Dans les quelques cas potentiels où c'est une nécessité, il est important de le prendre en compte :

• soit en s'assurant que les deux onglets/fenêtre aient récupéré les données (avec un léger risque d'asymétrie des données reçues),
• soit de partager les données d'API dans le state du slice.

Je n'ai pas enquêté sur le sujet de savoir comment synchroniser RTK car j'ai peur d'y perdre du temps. Mais il n'est pas impossible qu'il y ait une solution aisée pour régler ce soucis.

Linked issues

• Recherche menu déroulants – Problème de chargement des valeurs au scroll #3211

---

• Tests E2E (Cypress)

[louptheron]

Soucis actuels :

• La sérialisation par défaut ne gère pas tous les objets, il faut utiliser un hack : const serializedAction = JSON.parse(JSON.stringify(action))
• Un dispatch d'action redux qui donne lieu a un appel API déclenchera deux appels si MainWindow et SideWindow écoutent cette action (ex. avec le hook useGetFilteredMissionsQuery())
• Le cache RTK n'est pas partagé entre les deux fenêtres, il faut la partager manuellement, ex (ReduxStateSync):

handleBroadcastChannelMessage:

case MessageType.DispatchAction:
        if (message.stampedAction) {
          if (message.type.includes('monitorfishApi/executeQuery/fulfilled')) {
            this.#updateCacheManually(this.#dispatch!, message.stampedAction.meta, message.stampedAction.payload)

            return
          }

          this.#dispatch!(message.stampedAction)
        }

        // eslint-disable-next-line no-useless-return
        return

#updateCacheManually(dispatch, args, payload) {
    dispatch(monitorfishApi.util.upsertQueryData(args.endpointName, args.meta.arg.endpointName, (draft) => {
      Object.assign(draft, payload)
    }))
  }

Si une action redux est à l'origine ce fetch RTK, il faut la bloquer dans l'autre navigateur pour éviter de re-fetch la donnée.

[louptheron]

Après discussion, il est peut-être plus simple de ne pas gérer la synchro des caches RTKQ.
Conséquence: Il peut y avoir deux appels APIs en simultané dans les deux fenêtres ouvertes.

Répartition des tâches :

• Loup:
  • Corriger les tests Cypress
    • Fix les states redux non-sérialisables (Measurement, InterestPoint, etc) (erreur object could not be cloned)
  • Vérifier le scope des appels RTKQ
  • Ajouter un cache de 1/2 secondes sur le use-case des missions pour gérer le double appel API
  • Cacher le chat dans la side window
• Ivan:
  • Supprimer le concept de tabId
  • Faire en sorte de n'avoir qu'une seule side window ouverte et aucune autre main window

[sonarcloud]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[louptheron]

Fixed by MTES-MCT/monitor-ui#1382