chore: updates for login_app type [LIBS-405]

adapter/src/components/AppWrapper.js

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { useCurrentUserLocale } from '../utils/useLocale.js'
+import {
+    useCurrentUserLocale,
+    useSystemDefaultLocale,
+} from '../utils/useLocale.js'
 import { useVerifyLatestUser } from '../utils/useVerifyLatestUser.js'
 import { Alerts } from './Alerts.js'
 import { ConnectedHeaderBar } from './ConnectedHeaderBar.js'
@@ -34,3 +37,28 @@ AppWrapper.propTypes = {
     children: PropTypes.node,
     plugin: PropTypes.bool,
 }
+
+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

@@ -13,6 +13,7 @@ export const ServerVersionProvider = ({
     url,
     apiVersion,
     pwaEnabled,
+    loginApp,
     children,
 }) => {
     const offlineInterface = useOfflineInterface()
@@ -27,28 +28,39 @@ export const ServerVersionProvider = ({
         }
 
         setState((state) => (state.loading ? state : { loading: true }))
-        const request = get(`${url}/api/system/info`)
-        request
-            .then((systemInfo) => {
-                setState({ loading: false, systemInfo })
-            })
-            .catch((e) => {
-                // Todo: If this is a network error, the app cannot load -- handle that gracefully here
-                // if (e === 'Network error') { ... }
-                setState({ loading: false, error: e })
-            })
 
-        return () => {
-            request.abort()
+        // in reality we probably want a request to get api version
+        if (loginApp) {
+            const fakeSystemInfo = { version: '2.40-SNAPSHOT' }
+            setState({ loading: false, systemInfo: fakeSystemInfo })
+        } else {
+            const request = get(`${url}/api/system/info`)
+            request
+                .then((systemInfo) => {
+                    setState({ loading: false, systemInfo })
+                })
+                .catch((e) => {
+                    // Todo: If this is a network error, the app cannot load -- handle that gracefully here
+                    // if (e === 'Network error') { ... }
+                    setState({ loading: false, error: e })
+                })
+
+            return () => {
+                request.abort()
+            }
         }
-    }, [url])
+    }, [url, loginApp])
 
     if (loading) {
         return <LoadingMask />
     }
 
     if (error) {
-        return <LoginModal />
+        return !loginApp ? (
+            <LoginModal />
+        ) : (
+            <p>Specify DHIS2_BASE_URL environment variable</p>
+        )
     }
 
     const serverVersion = parseDHIS2ServerVersion(systemInfo.version)
@@ -65,7 +77,8 @@ export const ServerVersionProvider = ({
                 systemInfo,
                 pwaEnabled,
             }}
-            offlineInterface={offlineInterface}
+            offlineInterface={loginApp ? null : offlineInterface}
+            loginApp={loginApp}
         >
             {children}
         </Provider>
@@ -77,6 +90,7 @@ ServerVersionProvider.propTypes = {
     appVersion: PropTypes.string.isRequired,
     apiVersion: PropTypes.number,
     children: PropTypes.element,
+    loginApp: PropTypes.bool,
     pwaEnabled: PropTypes.bool,
     url: PropTypes.string,
 }

adapter/src/index.js

@@ -1,7 +1,7 @@
 import { checkForSWUpdateAndReload } from '@dhis2/pwa'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { AppWrapper } from './components/AppWrapper.js'
+import { LoginAppWrapper, AppWrapper } from './components/AppWrapper.js'
 import { ErrorBoundary } from './components/ErrorBoundary.js'
 import { OfflineInterfaceProvider } from './components/OfflineInterfaceContext.js'
 import { PWALoadingBoundary } from './components/PWALoadingBoundary.js'
@@ -14,30 +14,58 @@ const AppAdapter = ({
     apiVersion,
     pwaEnabled,
     plugin,
+    loginApp,
     children,
-}) => (
-    <ErrorBoundary fullscreen onRetry={checkForSWUpdateAndReload}>
-        <OfflineInterfaceProvider>
-            <PWALoadingBoundary>
+}) => {
+    if (loginApp) {
+        return (
+            <ErrorBoundary
+                fullscreen
+                onRetry={() => {
+                    window.location.reload()
+                }}
+            >
                 <ServerVersionProvider
                     appName={appName}
                     appVersion={appVersion}
                     url={url}
                     apiVersion={apiVersion}
                     pwaEnabled={pwaEnabled}
+                    loginApp={true}
                 >
-                    <AppWrapper plugin={plugin}>{children}</AppWrapper>
+                    <LoginAppWrapper>{children}</LoginAppWrapper>
                 </ServerVersionProvider>
-            </PWALoadingBoundary>
-        </OfflineInterfaceProvider>
-    </ErrorBoundary>
-)
+            </ErrorBoundary>
+        )
+    }
+    return (
+        <ErrorBoundary fullscreen onRetry={checkForSWUpdateAndReload}>
+            <OfflineInterfaceProvider>
+                <PWALoadingBoundary>
+                    <ServerVersionProvider
+                        appName={appName}
+                        appVersion={appVersion}
+                        url={url}
+                        apiVersion={apiVersion}
+                        pwaEnabled={pwaEnabled}
+                        loginApp={false}
+                    >
+                        <AppWrapper plugin={plugin} loginApp={loginApp}>
+                            {children}
+                        </AppWrapper>
+                    </ServerVersionProvider>
+                </PWALoadingBoundary>
+            </OfflineInterfaceProvider>
+        </ErrorBoundary>
+    )
+}
 
 AppAdapter.propTypes = {
     appName: PropTypes.string.isRequired,
     appVersion: PropTypes.string.isRequired,
     apiVersion: PropTypes.number,
     children: PropTypes.element,
+    loginApp: PropTypes.bool,
     plugin: PropTypes.bool,
     pwaEnabled: PropTypes.bool,
     url: PropTypes.string,

adapter/src/utils/useLocale.js

@@ -60,3 +60,10 @@ export const useCurrentUserLocale = () => {
 
     return { loading: loading || !locale, locale }
 }
+
+export const useSystemDefaultLocale = () => {
+    // TO-DO: system language query (not currently available)
+    const defaultLocale = window.navigator.language
+    const locale = useLocale(defaultLocale)
+    return { 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 { appTypes } = require('../lib/parseConfig')
 const makePaths = require('../lib/paths')
 const makePlugin = require('../lib/plugin')
 const { injectPrecacheManifest } = require('../lib/pwa')
@@ -70,7 +71,7 @@ const handler = async ({
     const shell = makeShell({ config, paths })
     const plugin = makePlugin({ config, paths })
 
-    if (config.type === 'app') {
+    if (appTypes.includes(config.type)) {
         setAppParameters(standalone, config)
     }
 
@@ -105,7 +106,7 @@ const handler = async ({
                 paths,
             })
 
-            if (config.type === 'app') {
+            if (appTypes.includes(config.type)) {
                 reporter.info('Bootstrapping local appShell...')
                 await shell.bootstrap({ shell: shellSource, force })
             }
@@ -114,7 +115,7 @@ const handler = async ({
                 `Building ${config.type} ${chalk.bold(config.name)}...`
             )
 
-            if (config.type === 'app') {
+            if (appTypes.includes(config.type)) {
                 await compile({
                     config,
                     paths,
@@ -167,7 +168,7 @@ const handler = async ({
         }
     )
 
-    if (config.type === 'app') {
+    if (appTypes.includes(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 { appTypes } = require('../lib/parseConfig')
 const makePaths = require('../lib/paths')
 const makePlugin = require('../lib/plugin')
 const createProxyServer = require('../lib/proxy')
@@ -32,7 +33,7 @@ const handler = async ({
     const shell = makeShell({ config, paths })
     const plugin = makePlugin({ config, paths })
 
-    if (config.type !== 'app') {
+    if (!appTypes.includes(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 { appTypes } = require('../parseConfig')
 const {
     verifyEntrypoints,
     createAppEntrypointWrapper,
@@ -67,7 +68,7 @@ const compile = async ({
     mode = 'development',
     watch = false,
 }) => {
-    const isApp = config.type === 'app'
+    const isApp = appTypes.includes(config.type)
 
     verifyEntrypoints({ config, paths })
     if (isApp) {

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 { appTypes } = 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 (appTypes.includes(config.type)) {
         if (
             !config.entryPoints ||
             (!config.entryPoints.app && !config.entryPoints.plugin)

cli/src/lib/parseConfig.js

@@ -5,9 +5,12 @@ const parseAuthorString = require('parse-author')
 
 const requiredConfigFields = {
     app: ['name', 'version', 'title', 'entryPoints.app'],
+    login_app: ['name', 'version', 'title', 'entryPoints.app'],
     lib: ['name', 'version', 'entryPoints.lib'],
 }
 
+const appTypes = ['app', 'login_app']
+
 const parseAuthor = (author) => {
     if (isPlainObject(author)) {
         return {
@@ -58,7 +61,7 @@ const parseConfigObjects = (
     config = defaultsDeep(config, defaults)
 
     // Add PWA defaults to apps
-    if (type === 'app') {
+    if (appTypes.includes(type)) {
         config = defaultsDeep(config, defaultsPWA)
     }
 
@@ -109,3 +112,6 @@ const parseConfig = (paths) => {
 module.exports = parseConfig
 
 module.exports.parseConfigObjects = parseConfigObjects
+
+module.exports.parseConfigObjects = parseConfigObjects
+module.exports.appTypes = appTypes

cli/src/lib/pwa/getPWAEnvVars.js

@@ -1,3 +1,5 @@
+const { appTypes } = require('../parseConfig')
+
 /** Preps string literals for regex conversion by escaping special chars */
 function escapeForRegex(string) {
     return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
@@ -31,7 +33,7 @@ function stringifyPatterns(patternsList) {
  * @param {Object} config
  */
 function getPWAEnvVars(config) {
-    if (config.type !== 'app' || !config.pwa.enabled) {
+    if (!appTypes.includes(config.type) || !config.pwa.enabled) {
         return null
     }
     return {

cli/src/lib/shell/index.js

@@ -7,6 +7,7 @@ module.exports = ({ config, paths }) => {
     const baseEnvVars = {
         name: config.title,
         version: config.version,
+        loginApp: config.type === 'login_app',
     }
 
     return {

shell/src/App.js

@@ -15,6 +15,7 @@ const appConfig = {
     apiVersion: parseInt(process.env.REACT_APP_DHIS2_API_VERSION),
     pwaEnabled: process.env.REACT_APP_DHIS2_APP_PWA_ENABLED === 'true',
     plugin: process.env.REACT_APP_DHIS2_APP_PLUGIN === 'true',
+    loginApp: process.env.REACT_APP_DHIS2_APP_LOGINAPP === 'true',
 }
 
 const App = () => (

yarn.lock

@@ -2225,10 +2225,10 @@
     react-docgen "^6.0.0-alpha.0"
     url-join "^4.0.1"
 
-"@dhis2/d2-i18n@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-i18n/-/d2-i18n-1.1.0.tgz#ec777c5091f747e4c5aa4f9801c62ba4d1ef3d16"
-  integrity sha512-x3u58goDQsMfBzy50koxNrJjofJTtjRZOfz6f6Py/wMMJfp/T6vZjWMQgcfWH0JrV6d04K1RTt6bI05wqsVQvg==
+"@dhis2/d2-i18n@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-i18n/-/d2-i18n-1.1.1.tgz#acaca32cd00b60fd6b6f1dee571f2817a50e243c"
+  integrity sha512-X0jOCIKPaYv/2z0/sdkEvcbRiYu5o1FrOwvitiS6aKFxSL/GJ872I+UdHwpWJtL+yM7Z8E1epljazW0LnHUz0Q==
   dependencies:
     i18next "^10.3"
     moment "^2.24.0"