feat: updates for login_app type [LIBS-405] (#831)

adapter/src/components/LoginAppWrapper.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useSystemDefaultLocale } from '../utils/useLocale.js'
+import { Alerts } from './Alerts.js'
+import { ErrorBoundary } from './ErrorBoundary.js'
+import { LoadingMask } from './LoadingMask.js'
+import { styles } from './styles/AppWrapper.style.js'
+
+export const LoginAppWrapper = ({ children }) => {
+ const { loading: localeLoading } = useSystemDefaultLocale()
+ // cannot check current user for a loginApp (no api/me)
+
+ if (localeLoading) {
+ return <LoadingMask />
+ }
+
+ return (
+ <div className="app-shell-adapter">
+ <style jsx>{styles}</style>
+ <div className="app-shell-app">
+ <ErrorBoundary onRetry={() => window.location.reload()}>
+ {children}
+ </ErrorBoundary>
+ </div>
+ <Alerts />
+ </div>
+ )
+}
+
+LoginAppWrapper.propTypes = {
+ children: PropTypes.node,
+}

adapter/src/components/ServerVersionProvider.js

@@ -17,6 +17,7 @@ export const ServerVersionProvider = ({
  plugin,
  parentAlertsAdd,
  showAlertsInPlugin,
+ loginApp,
  children,
 }) => {
  const offlineInterface = useOfflineInterface()
@@ -103,6 +104,27 @@ export const ServerVersionProvider = ({
  ? state
  : { loading: true, error: undefined, systemInfo: undefined }
  )
+
+ // version is not currently available, minimum for login app
+ if (loginApp) {
+ const requestLogin = get(`${baseUrl}/api/loginConfig`)
+ requestLogin
+ .then((loginConfig) => {
+ setSystemInfoState({
+ loading: false,
+ error: undefined,
+ systemInfo: { version: loginConfig.apiVersion },
+ })
+ })
+ .catch((e) => {
+ setSystemInfoState({
+ loading: false,
+ error: e,
+ systemInfo: undefined,
+ })
+ })
+ return
+ }
  const request = get(`${baseUrl}/api/system/info`)
  request
  .then((systemInfo) => {
@@ -125,7 +147,7 @@ export const ServerVersionProvider = ({
  return () => {
  request.abort()
  }
- }, [appName, baseUrl])
+ }, [appName, baseUrl, loginApp])
 
  useEffect(() => {
  if (pwaEnabled) {
@@ -137,7 +159,11 @@ export const ServerVersionProvider = ({
 
  // This needs to come before 'loading' case to show modal at correct times
  if (systemInfoState.error || baseUrlState.error) {
- return <LoginModal appName={appName} baseUrl={baseUrl} />
+ return !loginApp ? (
+ <LoginModal appName={appName} baseUrl={baseUrl} />
+ ) : (
+ <p>Specify DHIS2_BASE_URL environment variable</p>
+ )
  }
 
  if (
@@ -162,10 +188,11 @@ export const ServerVersionProvider = ({
  systemInfo,
  pwaEnabled,
  }}
- offlineInterface={offlineInterface}
+ offlineInterface={loginApp ? null : offlineInterface}
  plugin={plugin}
  parentAlertsAdd={parentAlertsAdd}
  showAlertsInPlugin={showAlertsInPlugin}
+ skipApiVersion={loginApp ? true : false}
  >
  {children}
  </Provider>
@@ -177,6 +204,7 @@ ServerVersionProvider.propTypes = {
  appVersion: PropTypes.string.isRequired,
  apiVersion: PropTypes.number,
  children: PropTypes.element,
+ loginApp: PropTypes.bool,
  parentAlertsAdd: PropTypes.func,
  plugin: PropTypes.bool,
  pwaEnabled: PropTypes.bool,

adapter/src/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { AppWrapper } from './components/AppWrapper.js'
 import { ErrorBoundary } from './components/ErrorBoundary.js'
+import { LoginAppWrapper } from './components/LoginAppWrapper.js'
 import { OfflineInterfaceProvider } from './components/OfflineInterfaceContext.js'
 import { PWALoadingBoundary } from './components/PWALoadingBoundary.js'
 import { ServerVersionProvider } from './components/ServerVersionProvider.js'
@@ -19,38 +20,64 @@ const AppAdapter = ({
  showAlertsInPlugin,
  onPluginError,
  clearPluginError,
+ loginApp,
  children,
-}) => (
- <ErrorBoundary
- plugin={plugin}
- fullscreen
- onRetry={checkForSWUpdateAndReload}
- >
- <OfflineInterfaceProvider>
- <PWALoadingBoundary>
+}) => {
+ if (loginApp) {
+ return (
+ <ErrorBoundary
+ fullscreen
+ onRetry={() => {
+ window.location.reload()
+ }}
+ plugin={false}
+ >
  <ServerVersionProvider
  appName={appName}
  appVersion={appVersion}
  url={url}
  apiVersion={apiVersion}
  pwaEnabled={pwaEnabled}
- plugin={plugin}
- parentAlertsAdd={parentAlertsAdd}
- showAlertsInPlugin={showAlertsInPlugin}
+ loginApp={loginApp}
+ plugin={false}
  >
- <AppWrapper
+ <LoginAppWrapper>{children}</LoginAppWrapper>
+ </ServerVersionProvider>
+ </ErrorBoundary>
+ )
+ }
+ return (
+ <ErrorBoundary
+ plugin={plugin}
+ fullscreen
+ onRetry={checkForSWUpdateAndReload}
+ >
+ <OfflineInterfaceProvider>
+ <PWALoadingBoundary>
+ <ServerVersionProvider
+ appName={appName}
+ appVersion={appVersion}
+ url={url}
+ apiVersion={apiVersion}
+ pwaEnabled={pwaEnabled}
  plugin={plugin}
- onPluginError={onPluginError}
- clearPluginError={clearPluginError}
- direction={direction}
+ parentAlertsAdd={parentAlertsAdd}
+ showAlertsInPlugin={showAlertsInPlugin}
  >
- {children}
- </AppWrapper>
- </ServerVersionProvider>
- </PWALoadingBoundary>
- </OfflineInterfaceProvider>
- </ErrorBoundary>
-)
+ <AppWrapper
+ plugin={plugin}
+ onPluginError={onPluginError}
+ clearPluginError={clearPluginError}
+ direction={direction}
+ >
+ {children}
+ </AppWrapper>
+ </ServerVersionProvider>
+ </PWALoadingBoundary>
+ </OfflineInterfaceProvider>
+ </ErrorBoundary>
+ )
+}
 
 AppAdapter.propTypes = {
  appName: PropTypes.string.isRequired,
@@ -59,6 +86,7 @@ AppAdapter.propTypes = {
  children: PropTypes.element,
  clearPluginError: PropTypes.func,
  direction: PropTypes.oneOf(['ltr', 'rtl', 'auto']),
+ loginApp: PropTypes.bool,
  parentAlertsAdd: PropTypes.func,
  plugin: PropTypes.bool,
  pwaEnabled: PropTypes.bool,

adapter/src/utils/useLocale.js

@@ -1,6 +1,6 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import {
  setI18nLocale,
  parseLocale,
@@ -56,3 +56,31 @@ export const useCurrentUserLocale = (configDirection) => {
 
  return { loading: loading || !locale, locale, direction }
 }
+
+const loginConfigQuery = {
+ loginConfig: {
+ resource: 'loginConfig',
+ },
+}
+
+export const useSystemDefaultLocale = () => {
+ // system language from loginConfiqQuery
+ const { loading, data, error } = useDataQuery(loginConfigQuery)
+ // set userSettings to use system locale by default
+ const localeInformation = useMemo(
+ () => ({
+ userSettings: {
+ keyUiLocale:
+ data &&
+ (data?.loginConfig?.uiLocale || window.navigator.language),
+ },
+ configDirection: 'auto',
+ }),
+ [data]
+ )
+ const locale = useLocale(localeInformation)
+ if (error) {
+ console.error(error)
+ }
+ return { loading: loading || !locale, locale }
+}

cli/src/commands/build.js

@@ -7,6 +7,7 @@ const generateManifests = require('../lib/generateManifests')
 const i18n = require('../lib/i18n')
 const loadEnvFiles = require('../lib/loadEnvFiles')
 const parseConfig = require('../lib/parseConfig')
+const { isApp } = require('../lib/parseConfig')
 const makePaths = require('../lib/paths')
 const makePlugin = require('../lib/plugin')
 const { injectPrecacheManifest } = require('../lib/pwa')
@@ -71,7 +72,7 @@ const handler = async ({
  const shell = makeShell({ config, paths })
  const plugin = makePlugin({ config, paths })
 
- if (config.type === 'app') {
+ if (isApp(config.type)) {
  setAppParameters(standalone, config)
  }
 
@@ -106,7 +107,7 @@ const handler = async ({
  paths,
  })
 
- if (config.type === 'app') {
+ if (isApp(config.type)) {
  reporter.info('Bootstrapping local appShell...')
  await shell.bootstrap({ shell: shellSource, force })
  }
@@ -115,7 +116,7 @@ const handler = async ({
  `Building ${config.type} ${chalk.bold(config.name)}...`
  )
 
- if (config.type === 'app') {
+ if (isApp(config.type)) {
  await compile({
  config,
  paths,
@@ -168,7 +169,7 @@ const handler = async ({
  }
  )
 
- if (config.type === 'app') {
+ if (isApp(config.type)) {
  if (!fs.pathExistsSync(paths.shellBuildOutput)) {
  reporter.error('No build output found')
  process.exit(1)

cli/src/commands/start.js

@@ -6,6 +6,7 @@ const generateManifests = require('../lib/generateManifests')
 const i18n = require('../lib/i18n')
 const loadEnvFiles = require('../lib/loadEnvFiles')
 const parseConfig = require('../lib/parseConfig')
+const { isApp } = require('../lib/parseConfig')
 const makePaths = require('../lib/paths')
 const makePlugin = require('../lib/plugin')
 const createProxyServer = require('../lib/proxy')
@@ -33,7 +34,7 @@ const handler = async ({
  const shell = makeShell({ config, paths })
  const plugin = makePlugin({ config, paths })
 
- if (config.type !== 'app') {
+ if (!isApp(config.type)) {
  reporter.error(
  `The command ${chalk.bold(
  'd2-app-scripts start'

cli/src/lib/compiler/compile.js

@@ -4,6 +4,7 @@ const { reporter, prettyPrint } = require('@dhis2/cli-helpers-engine')
 const chokidar = require('chokidar')
 const fs = require('fs-extra')
 const makeBabelConfig = require('../../../config/makeBabelConfig.js')
+const { isApp } = require('../parseConfig')
 const {
  verifyEntrypoints,
  createAppEntrypointWrapper,
@@ -67,10 +68,10 @@ const compile = async ({
  mode = 'development',
  watch = false,
 }) => {
- const isApp = config.type === 'app'
+ const isAppType = isApp(config.type)
 
  verifyEntrypoints({ config, paths })
- if (isApp) {
+ if (isAppType) {
  await createAppEntrypointWrapper({
  entrypoint: config.entryPoints.app,
  paths,
@@ -83,13 +84,13 @@ const compile = async ({
  }
  }
 
- const outDir = isApp
+ const outDir = isAppType
  ? paths.shellApp
  : path.join(paths.buildOutput, moduleType)
  fs.removeSync(outDir)
  fs.ensureDirSync(outDir)
 
- if (isApp) {
+ if (isAppType) {
  fs.removeSync(paths.shellPublic)
  fs.copySync(paths.shellSourcePublic, paths.shellPublic)
  }
@@ -127,7 +128,7 @@ const compile = async ({
  processFileCallback: compileFile,
  watch,
  }),
- isApp &&
+ isAppType &&
  watchFiles({
  inputDir: paths.public,
  outputDir: paths.shellPublic,

cli/src/lib/compiler/entrypoints.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const { reporter, chalk } = require('@dhis2/cli-helpers-engine')
 const fs = require('fs-extra')
+const { isApp } = require('../parseConfig')
 const { normalizeExtension } = require('./extensionHelpers.js')
 
 const verifyEntrypoint = ({ entrypoint, basePath, resolveModule }) => {
@@ -26,7 +27,7 @@ exports.verifyEntrypoints = ({
  paths,
  resolveModule = require.resolve,
 }) => {
- if (config.type === 'app') {
+ if (isApp(config.type)) {
  if (
  !config.entryPoints ||
  (!config.entryPoints.app && !config.entryPoints.plugin)