feat: detect server version, use latest available api version (#470)

* feat: detect server version, use latest available api version

* docs: update docs for DHIS2_API_VERSION env var

* fix: use functional update instead of implicit loading dep

* chore: rearrange imports

* chore: add tests and run tests in ci

* style: fix lint issues

* ci: add yarn caching logic

* ci: move cache to post-checkout

* ci: DRY in workflow

* ci: move condition back to jobs

.github/workflows/dhis2-verify.yml

@@ -0,0 +1,87 @@
+name: 'DHIS2: Verify'
+
+on: push
+
+env:
+ CI: true
+
+jobs:
+ lint:
+ runs-on: ubuntu-latest
+ if: "!contains(github.event.head_commit.message, '[skip ci]')"
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12.x
+
+ - name: Get yarn cache directory path
+ id: yarn-cache-dir-path
+ run: echo "::set-output name=dir::$(yarn cache dir)"
+ - uses: actions/cache@v2
+ id: yarn-cache
+ with:
+ path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+ restore-keys: |
+ ${{ runner.os }}-yarn-
+
+ - name: Install
+ run: yarn install --frozen-lockfile
+
+ - name: Run linters
+ run: |
+ yarn d2-style js check
+ yarn d2-style text check
+
+ build:
+ runs-on: ubuntu-latest
+ if: "!contains(github.event.head_commit.message, '[skip ci]')"
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12.x
+
+ - name: Get yarn cache directory path
+ id: yarn-cache-dir-path
+ run: echo "::set-output name=dir::$(yarn cache dir)"
+ - uses: actions/cache@v2
+ id: yarn-cache
+ with:
+ path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+ restore-keys: |
+ ${{ runner.os }}-yarn-
+
+ - name: Install
+ run: yarn install --frozen-lockfile
+
+ - name: Build
+ run: yarn build
+
+ test:
+ runs-on: ubuntu-latest
+ if: "!contains(github.event.head_commit.message, '[skip ci]')"
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12.x
+
+ - name: Get yarn cache directory path
+ id: yarn-cache-dir-path
+ run: echo "::set-output name=dir::$(yarn cache dir)"
+ - uses: actions/cache@v2
+ id: yarn-cache
+ with:
+ path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+ restore-keys: |
+ ${{ runner.os }}-yarn-
+
+ - name: Install
+ run: yarn install --frozen-lockfile
+
+ - name: Test
+ run: yarn test

.github/workflows/node-publish.yml → .github/workflows/npm-publish.yml

@@ -40,6 +40,9 @@ jobs:
  - name: Build
  run: yarn build
 
+ - name: Test
+ run: yarn test
+
  - name: Lint
  run: yarn lint
 

adapter/config/setupEnzyme.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })

adapter/i18n/en.pot

@@ -5,38 +5,38 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-09-26T16:40:43.483Z\n"
-"PO-Revision-Date: 2019-09-26T16:40:43.483Z\n"
+"POT-Creation-Date: 2020-10-08T15:51:57.880Z\n"
+"PO-Revision-Date: 2020-10-08T15:51:57.880Z\n"
 
-msgid "Please sign in"
+msgid "An error occurred in the DHIS2 application."
 msgstr ""
 
-msgid "Server"
+msgid "Something went wrong"
 msgstr ""
 
-msgid "Username"
+msgid "Refresh to try again"
 msgstr ""
 
-msgid "Password"
+msgid "Hide technical details"
 msgstr ""
 
-msgid "Sign in"
+msgid "Show technical details"
 msgstr ""
 
-msgid "An error occurred in the DHIS2 application."
+msgid "The following information may be requested by technical support."
 msgstr ""
 
-msgid "Something went wrong"
+msgid "Please sign in"
 msgstr ""
 
-msgid "Refresh to try again"
+msgid "Server"
 msgstr ""
 
-msgid "Hide technical details"
+msgid "Username"
 msgstr ""
 
-msgid "Show technical details"
+msgid "Password"
 msgstr ""
 
-msgid "The following information may be requested by technical support."
+msgid "Sign in"
 msgstr ""

adapter/package.json

@@ -20,10 +20,13 @@
  "moment": "^2.24.0"
  },
  "devDependencies": {
- "@dhis2/cli-app-scripts": "5.2.2"
+ "@dhis2/cli-app-scripts": "5.2.2",
+ "enzyme": "^3.11.0",
+ "enzyme-adapter-react-16": "^1.15.5"
  },
  "scripts": {
- "build": "d2-app-scripts build"
+ "build": "d2-app-scripts build",
+ "test": "d2-app-scripts test"
  },
  "peerDependencies": {
  "@dhis2/app-runtime": "^2",
@@ -35,5 +38,10 @@
  "react": "^16.8",
  "react-dom": "^16.8",
  "styled-jsx": "^3"
+ },
+ "jest": {
+ "setupFilesAfterEnv": [
+ "<rootDir>/config/setupEnzyme.js"
+ ]
  }
 }

adapter/src/AuthBoundary/index.js → adapter/src/components/AuthBoundary.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { useDataQuery } from '@dhis2/app-runtime'
 
-import { Layer, layers, CenteredContent, CircularLoader } from '@dhis2/ui'
 import { LoginModal } from './LoginModal'
-import { useLocale } from './useLocale'
+import { useLocale } from '../utils/useLocale'
+import { LoadingMask } from './LoadingMask'
 
 const settingsQuery = {
  userSettings: {
@@ -16,13 +17,7 @@ export const AuthBoundary = ({ url, children }) => {
  useLocale(data && data.userSettings.keyUiLocale)
 
  if (loading) {
- return (
- <Layer translucent level={layers.alert}>
- <CenteredContent>
- <CircularLoader />
- </CenteredContent>
- </Layer>
- )
+ return <LoadingMask />
  }
 
  if (error) {
@@ -31,3 +26,8 @@ export const AuthBoundary = ({ url, children }) => {
 
  return children
 }
+
+AuthBoundary.propTypes = {
+ children: PropTypes.element,
+ url: PropTypes.string,
+}

adapter/src/components/LoadingMask.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Layer, CenteredContent, CircularLoader, layers } from '@dhis2/ui'
+
+export const LoadingMask = () => (
+ <Layer translucent level={layers.alert}>
+ <CenteredContent>
+ <CircularLoader />
+ </CenteredContent>
+ </Layer>
+)

adapter/src/AuthBoundary/LoginModal.js → adapter/src/components/LoginModal.js

@@ -8,6 +8,7 @@ import {
  Button,
  InputField,
 } from '@dhis2/ui'
+import { post } from '../utils/api'
 
 const staticUrl = process.env.REACT_APP_DHIS2_BASE_URL
 
@@ -27,20 +28,11 @@ export const LoginModal = () => {
  if (isValid(server) && isValid(username) && isValid(password)) {
  window.localStorage.DHIS2_BASE_URL = server
  try {
- await fetch(
+ await post(
  `${server}/dhis-web-commons-security/login.action`,
- {
- method: 'POST',
- credentials: 'include',
- body: `j_username=${encodeURIComponent(
- username
- )}&j_password=${encodeURIComponent(password)}`,
- headers: {
- 'X-Requested-With': 'XMLHttpRequest',
- Accept: 'application/json',
- 'Content-Type': 'application/x-www-form-urlencoded',
- },
- }
+ `j_username=${encodeURIComponent(
+ username
+ )}&j_password=${encodeURIComponent(password)}`
  )
  } catch (e) {
  console.log(

adapter/src/components/ServerVersionProvider.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { Provider } from '@dhis2/app-runtime'
+import { parseServerVersion } from '../utils/parseServerVersion'
+import { LoadingMask } from './LoadingMask'
+import { get } from '../utils/api'
+
+export const ServerVersionProvider = ({ url, apiVersion, children }) => {
+ const [{ loading, error, systemInfo }, setState] = useState({
+ loading: true,
+ })
+
+ useEffect(() => {
+ setState(state => (state.loading ? state : { loading: true }))
+ const request = get(`${url}/api/system/info`)
+ request
+ .then(systemInfo => {
+ setState({ loading: false, systemInfo })
+ })
+ .catch(e => {
+ setState({ loading: false, error: e })
+ })
+
+ return () => {
+ request.abort()
+ }
+ }, [url])
+
+ if (loading) {
+ return <LoadingMask />
+ }
+
+ if (error) {
+ return children
+ }
+
+ const serverVersion = parseServerVersion(systemInfo.version)
+ const realApiVersion = serverVersion.minor
+
+ return (
+ <Provider
+ config={{
+ baseUrl: url,
+ apiVersion: apiVersion || realApiVersion,
+ serverVersion,
+ systemInfo,
+ }}
+ >
+ {children}
+ </Provider>
+ )
+}
+
+ServerVersionProvider.propTypes = {
+ url: PropTypes.string.isRequired,
+ apiVersion: PropTypes.number,
+ children: PropTypes.element,
+}

adapter/src/FatalErrorBoundary/__tests__/FatalErrorBoundary.test.js → adapter/src/components/__tests__/FatalErrorBoundary.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { FatalErrorBoundary } from '../'
+import { FatalErrorBoundary } from '../FatalErrorBoundary'
 import { shallow } from 'enzyme'
 
 const Something = () => {

adapter/src/index.js

@@ -1,24 +1,31 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { HeaderBar } from '@dhis2/ui'
-import { Provider } from '@dhis2/app-runtime'
-import { FatalErrorBoundary } from './FatalErrorBoundary'
-import { AuthBoundary } from './AuthBoundary'
+import { FatalErrorBoundary } from './components/FatalErrorBoundary'
+import { ServerVersionProvider } from './components/ServerVersionProvider'
+import { AuthBoundary } from './components/AuthBoundary'
 
 import { styles } from './styles.js'
 
-// eslint-disable-next-line react/prop-types
 const App = ({ url, apiVersion, appName, children }) => (
  <FatalErrorBoundary>
- <Provider config={{ baseUrl: url, apiVersion: apiVersion }}>
+ <ServerVersionProvider url={url} apiVersion={apiVersion}>
  <div className="app-shell-adapter">
  <style jsx>{styles}</style>
  <HeaderBar appName={appName} />
  <AuthBoundary url={url}>
  <div className="app-shell-app">{children}</div>
  </AuthBoundary>
  </div>
- </Provider>
+ </ServerVersionProvider>
  </FatalErrorBoundary>
 )
 
+App.propTypes = {
+ appName: PropTypes.string.isRequired,
+ url: PropTypes.string.isRequired,
+ apiVersion: PropTypes.number,
+ children: PropTypes.element,
+}
+
 export default App