UID-138 purge service worker cruft; clean up RTR display (#405)

ui-developer was not sync'ed with stripes-core after the initial service-woker based RTR implementation was removed (in Poppy) and replaced (in Quesnelia). Refs UID-138
folio-org · Jan 31, 2024 · 35152a0 · 35152a0
1 parent 8627b1e
commit 35152a0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 84 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,12 @@
 # Change history for ui-developer
 
-# 8.1.0 IN PROGRESS
+# 9.0.0 IN PROGRESS
 
 * Handle access-control via cookies instead of `X-Okapi-Token` header. Refs UID-121.
 * Configuration: expose `preserveConsole` to toggle `console.clear()` on logout. Refs UID-139.
 * Optionally suppress react-intl warnings. Refs UID-140.
 * Use type=password for auto login password field. Refs UID-147.
+* *BREAKING* Purge service-worker cruft; leverage new STCOR functions for RTR display.
 
 ## [8.0.0](https://github.com/folio-org/ui-developer/tree/v8.0.0) (2023-10-19)
 [Full Changelog](https://github.com/folio-org/ui-developer/compare/v7.0.0...v8.0.0)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@folio/developer",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Developer settings",
   "repository": "folio-org/ui-developer",
   "publishConfig": {
@@ -223,7 +223,7 @@
     "@babel/core": "^7.17.10",
     "@babel/eslint-parser": "^7.17.0",
     "@folio/eslint-config-stripes": "^7.0.0",
-    "@folio/stripes": "^9.0.0",
+    "@folio/stripes": "^9.1.0",
     "@folio/stripes-cli": "^3.0.0",
     "@formatjs/cli": "^6.1.3",
     "eslint": "^7.32.0",
@@ -247,7 +247,7 @@
     "react-query": "^3.38.1"
   },
   "peerDependencies": {
-    "@folio/stripes": "^9.0.0",
+    "@folio/stripes": "^9.1.0",
     "react": "^18.2.0",
     "react-intl": "^6.4.4",
     "react-router-dom": "^5.2.0"

diff --git a/src/settings/Configuration.js b/src/settings/Configuration.js
@@ -31,26 +31,9 @@ class Configuration extends React.Component {
     merge(stripes, data);
 
     // dispatch locale to force the stripes-intl context to re-render,
-    // allowing the suppressIntlErrors setting to take effect
+    // allowing the suppressIntl* settings to take effect
     stripes.setLocale(stripes.locale);
 
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.getRegistration()
-        .then(reg => {
-          const sw = reg.installing || reg.waiting || reg.active;
-          if (sw) {
-            stripes.logger.log('rtr', 'sending LOGGER_CONFIG');
-            sw.postMessage({ source: '@folio/stripes-core', type: 'LOGGER_CONFIG', value: { categories: data.logger.categories } });
-          } else {
-            // eslint-disable-next-line no-console
-            console.error('error sending LOGGER; sw not registered');
-          }
-        });
-    } else {
-      // eslint-disable-next-line no-console
-      console.error('error sending LOGGER; serviceWorker not found in navigator');
-    }
-
     this.forceUpdate();
   }
 

diff --git a/src/settings/RefreshTokenRotation.js b/src/settings/RefreshTokenRotation.js
@@ -1,12 +1,10 @@
-import React, { useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import localforage from 'localforage';
 
 import {
-  registerServiceWorker,
-  unregisterServiceWorker,
-  useStripes,
+  getTokenExpiry,
+  setTokenExpiry,
 } from '@folio/stripes/core';
 
 import {
@@ -17,76 +15,46 @@ import {
 } from '@folio/stripes/components';
 
 /**
- * manipulate AT/RT expiration dates in storage in order to test the RTR service worker.
+ * manipulate AT/RT expiration dates in storage in order to test RTR.
  * @returns
  */
 const RefreshTokenRotation = () => {
-  let tokenExpiration = {};
-
   const [isLoading, setIsLoading] = useState(true);
-  const stripes = useStripes();
-
-  localforage.getItem('okapiSess')
-    .then((data) => {
-      tokenExpiration = {
-        atExpires: data.tokenExpiration?.accessTokenExpiration ? new Date(data.tokenExpiration.accessTokenExpiration).getTime() : -1,
-        rtExpires: data.tokenExpiration?.refreshTokenExpiration ? new Date(data.tokenExpiration.refreshTokenExpiration).getTime() : Date.now() + (10 * 60 * 1000),
-      };
-      setIsLoading(false);
-    });
+  const [tokenExpiration, setTokenExpiration] = useState({});
 
-  const dispatchTokenExpiration = () => {
-    stripes.logger.log('rtr', `atExpires ${tokenExpiration.atExpires}`);
-    stripes.logger.log('rtr', `rtExpires ${tokenExpiration.rtExpires}`);
-
-    navigator.serviceWorker.ready
-      .then((reg) => {
-        const sw = reg.active;
-        if (sw) {
-          const message = { source: '@folio/stripes-core', type: 'TOKEN_EXPIRATION', tokenExpiration };
-          stripes.logger.log('rtr', '@folio/developer sending', message);
-          sw.postMessage(message);
-        } else {
-          console.warn('could not dispatch message; no active registration'); // eslint-disable-line no-console
-        }
+  useEffect(() => {
+    getTokenExpiry()
+      .then(te => {
+        setTokenExpiration(te ?? { atExpires: -1, rtExpires: -1 });
+        setIsLoading(false);
       });
-  };
+  }, []);
 
   /**
    * invalidateAT
-   * expire the AT and notify the SW
+   * return a promise to expire the AT in local storage
    */
   const invalidateAT = () => {
-    tokenExpiration.atExpires = -1;
-    dispatchTokenExpiration();
+    return getTokenExpiry()
+      .then(te => {
+        const expiration = { ...te };
+        expiration.atExpires = -1;
+
+        return setTokenExpiry(expiration);
+      });
   };
 
   /**
    * invalidateRT
-   * expire the AT and the RT and notify the SW
+   * return a promise to expire the AT and RT in local storage
    */
   const invalidateRT = () => {
-    tokenExpiration.atExpires = -1;
-    tokenExpiration.rtExpires = -1;
-
-    dispatchTokenExpiration();
-  };
+    const expiration = {
+      atExpires: -1,
+      rtExpires: -1,
+    };
 
-  /**
-   * registerSW
-   * Call the service-worker registration function.
-   */
-  const registerSW = () => {
-    registerServiceWorker(stripes.okapi, stripes.logger.categories, stripes.logger);
-  };
-
-  /**
-   * unregisterSW
-   * Call the service-worker remove-registration function. This has the same effect
-   * as using the browser's developer-tools to disable an active service worker.
-   */
-  const unregisterSW = () => {
-    unregisterServiceWorker();
+    return setTokenExpiry(expiration);
   };
 
   if (!isLoading) {
@@ -96,17 +64,20 @@ const RefreshTokenRotation = () => {
         renderHeader={renderProps => <PaneHeader {...renderProps} paneTitle={<FormattedMessage id="ui-developer.rtr" />} />}
       >
         <ul>
-          <li>service-worker logs RTR events in the category <code>rtr-sw</code></li>
           <li>stripes logs RTR events in the category <code>rtr</code></li>
         </ul>
+        {!isLoading && (
+          <dl>
+            <dt>AT Expiry</dt>
+            <dd>{new Date(tokenExpiration.atExpires).toISOString()}</dd>
+            <dt>RT Expiry</dt>
+            <dd>{new Date(tokenExpiration.rtExpires).toISOString()}</dd>
+          </dl>
+        )}
         <div>
           <Button onClick={invalidateAT}><FormattedMessage id="ui-developer.rtr.invalidateAT" /></Button>
           <Button onClick={invalidateRT}><FormattedMessage id="ui-developer.rtr.invalidateRT" /></Button>
         </div>
-        <div>
-          <Button onClick={registerSW}><FormattedMessage id="ui-developer.rtr.registerServiceWorker" /></Button>
-          <Button onClick={unregisterSW}><FormattedMessage id="ui-developer.rtr.unregisterServiceWorker" /></Button>
-        </div>
       </Pane>
     );
   } else {