chore: updates for login_app type [LIBS-405]

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

@@ -13,6 +13,7 @@ export const ServerVersionProvider = ({
     url,
     apiVersion,
     pwaEnabled,
+    loginApp,
     children,
 }) => {
     const offlineInterface = useOfflineInterface()
@@ -27,6 +28,13 @@ export const ServerVersionProvider = ({
         }
 
         setState((state) => (state.loading ? state : { loading: true }))
+
+        // in reality we probably want a request to get api version
+        if (loginApp) {
+            const fakeSystemInfo = { version: '2.40-SNAPSHOT' }
+            setState({ loading: false, systemInfo: fakeSystemInfo })
+            return
+        }
         const request = get(`${url}/api/system/info`)
         request
             .then((systemInfo) => {
@@ -41,14 +49,18 @@ export const ServerVersionProvider = ({
         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

@@ -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'
@@ -14,30 +15,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 { isApp } = 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 (isApp(config.type)) {
         setAppParameters(standalone, config)
     }
 
@@ -105,7 +106,7 @@ const handler = async ({
                 paths,
             })
 
-            if (config.type === 'app') {
+            if (isApp(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 (isApp(config.type)) {
                 await compile({
                     config,
                     paths,
@@ -167,7 +168,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')
@@ -32,7 +33,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)

cli/src/lib/parseConfig.js

@@ -5,9 +5,14 @@ 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 isApp = (type) => appTypes.includes(type)
+
 const parseAuthor = (author) => {
     if (isPlainObject(author)) {
         return {
@@ -58,7 +63,7 @@ const parseConfigObjects = (
     config = defaultsDeep(config, defaults)
 
     // Add PWA defaults to apps
-    if (type === 'app') {
+    if (isApp(type)) {
         config = defaultsDeep(config, defaultsPWA)
     }
 
@@ -109,3 +114,6 @@ const parseConfig = (paths) => {
 module.exports = parseConfig
 
 module.exports.parseConfigObjects = parseConfigObjects
+
+module.exports.parseConfigObjects = parseConfigObjects
+module.exports.isApp = isApp

cli/src/lib/pwa/getPWAEnvVars.js

@@ -1,3 +1,5 @@
+const { isApp } = 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 (!isApp(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"