feat: dhis2 connection status [LIBS-315]

examples/cra/yarn.lock

@@ -1054,26 +1054,26 @@
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
 "@dhis2/app-runtime@file:../../runtime":
-  version "3.5.0"
+  version "3.6.1"
   dependencies:
-    "@dhis2/app-service-alerts" "3.5.0"
-    "@dhis2/app-service-config" "3.5.0"
-    "@dhis2/app-service-data" "3.5.0"
-    "@dhis2/app-service-offline" "3.5.0"
+    "@dhis2/app-service-alerts" "3.6.1"
+    "@dhis2/app-service-config" "3.6.1"
+    "@dhis2/app-service-data" "3.6.1"
+    "@dhis2/app-service-offline" "3.6.1"
 
-"@dhis2/app-service-alerts@3.5.0", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "3.5.0"
+"@dhis2/app-service-alerts@3.6.1", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "3.6.1"
 
-"@dhis2/app-service-config@3.5.0", "@dhis2/app-service-config@file:../../services/config":
-  version "3.5.0"
+"@dhis2/app-service-config@3.6.1", "@dhis2/app-service-config@file:../../services/config":
+  version "3.6.1"
 
-"@dhis2/app-service-data@3.5.0", "@dhis2/app-service-data@file:../../services/data":
-  version "3.5.0"
+"@dhis2/app-service-data@3.6.1", "@dhis2/app-service-data@file:../../services/data":
+  version "3.6.1"
   dependencies:
     react-query "^3.13.11"
 
-"@dhis2/app-service-offline@3.5.0", "@dhis2/app-service-offline@file:../../services/offline":
-  version "3.5.0"
+"@dhis2/app-service-offline@3.6.1", "@dhis2/app-service-offline@file:../../services/offline":
+  version "3.6.1"
   dependencies:
     lodash "^4.17.21"
 

examples/query-playground/src/components/QueryResults.js

@@ -7,7 +7,6 @@ import styles from './QueryResults.module.css'
 export const QueryResults = ({ result }) => {
     return (
         <div className={styles.results}>
-            <style jsx>{styles}</style>
             <Editor
                 value={result}
                 theme="github"

examples/query-playground/yarn.lock

@@ -1789,27 +1789,37 @@
   dependencies:
     moment "^2.24.0"
 
-"@dhis2/app-runtime@*", "@dhis2/app-runtime@^2.2.2", "@dhis2/app-runtime@file:../../runtime":
-  version "3.5.0"
+"@dhis2/app-runtime@*":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-3.7.0.tgz#be738255ae95aaf597f9f59d1a56566b1a035dae"
+  integrity sha512-lKHgjaVVnCC5xxThckTVS0EH5mQlrSOdM8bC/7BSz5r9ztgLXJGUgxbnOvVbh95S/zFS9eyDvIls1HGum/MHTQ==
   dependencies:
-    "@dhis2/app-service-alerts" "3.5.0"
-    "@dhis2/app-service-config" "3.5.0"
-    "@dhis2/app-service-data" "3.5.0"
-    "@dhis2/app-service-offline" "3.5.0"
+    "@dhis2/app-service-alerts" "3.7.0"
+    "@dhis2/app-service-config" "3.7.0"
+    "@dhis2/app-service-data" "3.7.0"
+    "@dhis2/app-service-offline" "3.7.0"
 
-"@dhis2/app-service-alerts@3.5.0", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "3.5.0"
+"@dhis2/app-runtime@^2.2.2", "@dhis2/app-runtime@file:../../runtime":
+  version "3.6.1"
+  dependencies:
+    "@dhis2/app-service-alerts" "3.6.1"
+    "@dhis2/app-service-config" "3.6.1"
+    "@dhis2/app-service-data" "3.6.1"
+    "@dhis2/app-service-offline" "3.6.1"
 
-"@dhis2/app-service-config@3.5.0", "@dhis2/app-service-config@file:../../services/config":
-  version "3.5.0"
+"@dhis2/app-service-alerts@3.6.1", "@dhis2/app-service-alerts@3.7.0", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "3.6.1"
 
-"@dhis2/app-service-data@3.5.0", "@dhis2/app-service-data@file:../../services/data":
-  version "3.5.0"
+"@dhis2/app-service-config@3.6.1", "@dhis2/app-service-config@3.7.0", "@dhis2/app-service-config@file:../../services/config":
+  version "3.6.1"
+
+"@dhis2/app-service-data@3.6.1", "@dhis2/app-service-data@3.7.0", "@dhis2/app-service-data@file:../../services/data":
+  version "3.6.1"
   dependencies:
     react-query "^3.13.11"
 
-"@dhis2/app-service-offline@3.5.0", "@dhis2/app-service-offline@file:../../services/offline":
-  version "3.5.0"
+"@dhis2/app-service-offline@3.6.1", "@dhis2/app-service-offline@3.7.0", "@dhis2/app-service-offline@file:../../services/offline":
+  version "3.6.1"
   dependencies:
     lodash "^4.17.21"
 

package.json

@@ -11,7 +11,7 @@
     ],
     "devDependencies": {
         "@dhis2/cli-app-scripts": "^6.2.0",
-        "@dhis2/cli-style": "^10.4.1",
+        "@dhis2/cli-style": "^10.4.3",
         "@dhis2/cli-utils-docsite": "^2.0.3",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",

runtime/src/index.ts

@@ -15,6 +15,7 @@ export { useAlerts, useAlert } from '@dhis2/app-service-alerts'
 
 export {
     useOnlineStatus,
+    useDhis2ConnectionStatus,
     useOnlineStatusMessage,
     useCacheableSection,
     CacheableSection,

services/offline/package.json

@@ -33,7 +33,7 @@
         "coverage": "yarn test --coverage"
     },
     "peerDependencies": {
-        "@dhis2/app-service-alerts": "3.7.0",
+        "@dhis2/app-service-data": "3.7.0",
         "prop-types": "^15.7.2",
         "react": "^16.8.6",
         "react-dom": "^16.8.6"

services/offline/src/__tests__/integration.test.tsx

@@ -1,4 +1,5 @@
 import { AlertsProvider } from '@dhis2/app-service-alerts'
+import { CustomDataProvider } from '@dhis2/app-service-data'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 import {
@@ -70,10 +71,15 @@ const TestSingleSection = (props?: any) => {
     // Props are spread so they can be overwritten
     return (
         <AlertsProvider>
-            <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
-                <TestControls id={'1'} {...props} />
-                <TestSection id={'1'} {...props} />
-            </OfflineProvider>
+            <CustomDataProvider data={{}}>
+                <OfflineProvider
+                    offlineInterface={mockOfflineInterface}
+                    {...props}
+                >
+                    <TestControls id={'1'} {...props} />
+                    <TestSection id={'1'} {...props} />
+                </OfflineProvider>
+            </CustomDataProvider>
         </AlertsProvider>
     )
 }
@@ -232,12 +238,14 @@ describe('Coordination between useCacheableSection and CacheableSection', () =>
 const TwoTestSections = (props?: any) => (
     // Props are spread so they can be overwritten (but only on one section)
     <AlertsProvider>
-        <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
-            <TestControls id={'1'} {...props} />
-            <TestSection id={'1'} {...props} />
-            <TestControls id={'2'} />
-            <TestSection id={'2'} />
-        </OfflineProvider>
+        <CustomDataProvider data={{}}>
+            <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
+                <TestControls id={'1'} {...props} />
+                <TestSection id={'1'} {...props} />
+                <TestControls id={'2'} />
+                <TestSection id={'2'} />
+            </OfflineProvider>
+        </CustomDataProvider>
     </AlertsProvider>
 )
 
@@ -288,14 +296,16 @@ describe('useCacheableSection can be used inside a child of CacheableSection', (
         // Props are spread so they can be overwritten
         return (
             <AlertsProvider>
-                <OfflineProvider
-                    offlineInterface={mockOfflineInterface}
-                    {...props}
-                >
-                    <TestSection id={'1'} {...props}>
-                        <TestControls id={'1'} {...props} />
-                    </TestSection>
-                </OfflineProvider>
+                <CustomDataProvider data={{}}>
+                    <OfflineProvider
+                        offlineInterface={mockOfflineInterface}
+                        {...props}
+                    >
+                        <TestSection id={'1'} {...props}>
+                            <TestControls id={'1'} {...props} />
+                        </TestSection>
+                    </OfflineProvider>
+                </CustomDataProvider>
             </AlertsProvider>
         )
     }

services/offline/src/index.ts

@@ -1,6 +1,8 @@
 export { OfflineProvider } from './lib/offline-provider'
 export { CacheableSection, useCacheableSection } from './lib/cacheable-section'
 export { useCachedSections } from './lib/cacheable-section-state'
-export { useOnlineStatus } from './lib/online-status'
+// Use "useOnlineStatus" name for backwards compatibility
+export { useNetworkStatus as useOnlineStatus } from './lib/network-status'
 export { useOnlineStatusMessage } from './lib/online-status-message'
 export { clearSensitiveCaches } from './lib/clear-sensitive-caches'
+export { useDhis2ConnectionStatus } from './lib/dhis2-connection-status'

services/offline/src/lib/__tests__/online-status.test.tsx → services/offline/src/lib/__tests__/network-status.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import { act, renderHook } from '@testing-library/react-hooks'
 import React from 'react'
-import { useOnlineStatus } from '../online-status'
+import { useNetworkStatus as useOnlineStatus } from '../network-status'
 
 interface CapturedEventListeners {
     [index: string]: EventListener

services/offline/src/lib/__tests__/offline-provider.test.tsx

@@ -1,3 +1,4 @@
+import { CustomDataProvider } from '@dhis2/app-service-data'
 import { render, screen, waitFor } from '@testing-library/react'
 import React from 'react'
 import { mockOfflineInterface } from '../../utils/test-mocks'
@@ -27,9 +28,11 @@ afterEach(() => {
 describe('Testing offline provider', () => {
     it('Should render without failing', () => {
         render(
-            <OfflineProvider offlineInterface={mockOfflineInterface}>
-                <div data-testid="test-div" />
-            </OfflineProvider>
+            <CustomDataProvider data={{}}>
+                <OfflineProvider offlineInterface={mockOfflineInterface}>
+                    <div data-testid="test-div" />
+                </OfflineProvider>
+            </CustomDataProvider>
         )
 
         expect(screen.getByTestId('test-div')).toBeInTheDocument()
@@ -54,9 +57,11 @@ describe('Testing offline provider', () => {
         }
 
         render(
-            <OfflineProvider offlineInterface={testOfflineInterface}>
-                <CachedSections />
-            </OfflineProvider>
+            <CustomDataProvider data={{}}>
+                <OfflineProvider offlineInterface={testOfflineInterface}>
+                    <CachedSections />
+                </OfflineProvider>
+            </CustomDataProvider>
         )
 
         const { getByTestId } = screen
@@ -83,19 +88,23 @@ describe('Testing offline provider', () => {
         }
 
         render(
-            <OfflineProvider offlineInterface={mockOfflineInterface}>
-                <TestConsumer />
-            </OfflineProvider>
+            <CustomDataProvider data={{}}>
+                <OfflineProvider offlineInterface={mockOfflineInterface}>
+                    <TestConsumer />
+                </OfflineProvider>
+            </CustomDataProvider>
         )
 
         expect(screen.getByTestId('test-div')).toBeInTheDocument()
     })
 
     it('Should render without failing when no offlineInterface is provided', () => {
         render(
-            <OfflineProvider>
-                <div data-testid="test-div" />
-            </OfflineProvider>
+            <CustomDataProvider data={{}}>
+                <OfflineProvider>
+                    <div data-testid="test-div" />
+                </OfflineProvider>
+            </CustomDataProvider>
         )
         expect(screen.getByTestId('test-div')).toBeInTheDocument()
     })
@@ -106,9 +115,11 @@ describe('Testing offline provider', () => {
             pwaEnabled: false,
         }
         render(
-            <OfflineProvider offlineInterface={testOfflineInterface}>
-                <div data-testid="test-div" />
-            </OfflineProvider>
+            <CustomDataProvider data={{}}>
+                <OfflineProvider offlineInterface={testOfflineInterface}>
+                    <div data-testid="test-div" />
+                </OfflineProvider>
+            </CustomDataProvider>
         )
 
         expect(screen.getByTestId('test-div')).toBeInTheDocument()