Devops 272 public instances

package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@commitlint/cli": "^19.5.0",
         "@dhis2/app-runtime": "^3",
-        "@dhis2/app-service-alerts": "^3.10.5",
+        "@dhis2/app-service-alerts": "^3.11.0",
         "@dhis2/d2-i18n": "^1.1.3",
         "@dhis2/ui": "^9.11.4",
         "@fontsource/roboto": "^5.1.0",

src/app/app.tsx

@@ -5,9 +5,8 @@ import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/400-italic.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
-import React from 'react'
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom'
-import { Alerts, AuthProvider, ErrorView, Layout } from '../components/index.ts'
+import { Alerts, AuthProvider, ErrorView, Layout, PublicLayout } from '../components/index.ts'
 import {
     ValidateSuccess,
     DatabasesList,
@@ -24,10 +23,14 @@ import {
     UserDetails,
     Validate,
 } from '../views/index.ts'
+import { InstancesTable } from '../views/public-instances/index.ts'
 
 const router = createBrowserRouter(
     createRoutesFromElements(
         <Route>
+            <Route path="/public" element={<PublicLayout />}>
+                <Route path="instances" element={<InstancesTable />} />
+            </Route>
             <Route path="/sign-up" element={<SignUp />} />
             <Route path="/request-password-reset" element={<RequestPasswordReset />} />
             <Route path="/reset-password/:token" element={<ResetPassword />} />

src/components/index.ts

@@ -4,5 +4,6 @@ export { ConfirmationModal } from './confirmation-modal.tsx'
 export { ErrorView } from './error-view.tsx'
 export { Heading } from './heading.tsx'
 export { Layout } from './layout.tsx'
+export { PublicLayout } from './public-layout.tsx'
 export { LogoutButton } from './logout-button.tsx'
 export { MomentExpiresFromNow } from './moment-expires-from-now.tsx'

src/components/public-layout.module.css

@@ -0,0 +1,57 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    height: 100%;
+}
+.mainArea {
+    width: 100vw;
+    height: 100%;
+}
+.nav {
+    background-color: var(--colors-grey300);
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin: 0;
+    font-size: 20px;
+    line-height: 16px;
+    font-weight: 700;
+    padding: 15px;
+}
+.logo {
+    width: 35px;
+    height: 35px;
+}
+.navlist {
+    display: flex;
+}
+
+.navlist :global(a) {
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 18px;
+    padding: 9px 8px 9px 12px;
+    color: var(--colors-grey800);
+    text-decoration: none;
+    transition: background-color 150ms ease-in-out;
+    display: inline-flex;
+    justify-content: space-between;
+}
+
+.navlist :global(a):hover {
+    color: var(--colors-blue600);
+    text-decoration: underline;
+}
+
+.navlist :global(a.active) {
+    text-decoration: underline;
+    color: var(--colors-blue600);
+}

src/components/public-layout.tsx

@@ -0,0 +1,26 @@
+import { LogoIcon } from '@dhis2/ui'
+import type { FC } from 'react'
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import styles from './public-layout.module.css'
+
+export const PublicLayout: FC = () => {
+    const location = useLocation()
+
+    if (location.pathname === '/') {
+        return <Navigate to="/sign-in" />
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.nav}>
+                <h1 className={styles.header}>
+                    <LogoIcon className={styles.logo} />
+                    DHIS2 Playground
+                </h1>
+            </div>
+            <div className={styles.mainArea}>
+                <Outlet />
+            </div>
+        </div>
+    )
+}

src/index.css

@@ -3,7 +3,7 @@ body {
 }
 
 #root {
-    height: 100vh;
+    height: 100%;
     width: 100vw;
     overflow: auto;
 }

src/views/instances/list/instances-list.module.css

@@ -13,12 +13,11 @@
     cursor: pointer;
 }
 .groupName {
-    all: unset;
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 23px;
-    color: var(--colors-grey800) !important;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: var(--colors-blue600) !important;
 }
+
 td {
     font-weight: 400;
     color: var(--colors-grey600) !important;

src/views/public-instances/index.ts

@@ -0,0 +1 @@
+export { InstancesTable } from './list/instances-table.tsx'

src/views/public-instances/list/instance-play.module.css

@@ -0,0 +1,41 @@
+.wrapper {
+    padding: 20px;
+}
+.heading {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    color: var(--colors-grey900);
+}
+
+.description {
+    font-size: 1rem;
+    margin-bottom: 24px;
+}
+
+.loginInfo {
+    margin-bottom: 24px;
+}
+
+.loginInfo h2 {
+    font-size: 1rem;
+    margin-bottom: 4px;
+}
+
+.loginInfo ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.loginInfo li {
+    font-size: 1rem;
+    margin-bottom: 4px;
+}
+
+.additionalInfo a {
+    color: var(--colors-blue800);
+    text-decoration: none;
+}
+
+.additionalInfo a:hover {
+    text-decoration: underline;
+}

src/views/public-instances/list/instance-play.tsx

@@ -0,0 +1,27 @@
+import styles from './instance-play.module.css'
+
+export const InstancePlay = () => (
+    <div className={styles.wrapper}>
+        <h1 className={styles.heading}>DHIS2 Demo Instances</h1>
+        <p className={styles.description}>
+            Explore demo instances for the latest DHIS2 versions! Each link below provides access to DHIS2 with our demo database. For additional demo databases for specific DHIS2
+            apps and use cases, visit
+            <a href="https://www.dhis2.org/demo" target="_blank" rel="noopener noreferrer">
+                {' '}
+                DHIS2 Demo
+            </a>
+            .
+        </p>
+        <div className={styles.loginInfo}>
+            <h2>Log in with:</h2>
+            <ul>
+                <li>
+                    <strong>User:</strong> admin
+                </li>
+                <li>
+                    <strong>Password:</strong> district
+                </li>
+            </ul>
+        </div>
+    </div>
+)

src/views/public-instances/list/instances-table.module.css

@@ -0,0 +1,92 @@
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    color: var(--colors-gray900);
+}
+
+.wrapper {
+    margin: 30px 0px;
+    background: white;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 30px;
+    width: 70%;
+    height: 100%;
+    line-height: 25px;
+}
+
+.loadingWrapper {
+    height: 100%;
+    margin: 30px auto;
+    background-color: white;
+    padding: 20px;
+    height: 70vh;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 30px;
+    width: 70%;
+}
+
+.tableTitle {
+    font-size: 1.2rem;
+    padding: 5px 0px 0px 5px;
+    font-weight: 600;
+    color: var(--colors-grey800);
+}
+
+.groupName {
+    font-size: 1.2rem;
+    padding: 5px 0px 0px 5px;
+    font-weight: 500;
+    color: var(--colors-grey800);
+}
+
+.dataTable {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.dataTableRow {
+    cursor: pointer;
+}
+
+.dataTableCell {
+    padding: 12px;
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+}
+
+.dataTableCell:last-child {
+    border-bottom: none;
+}
+
+.instance {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--colors-blue600);
+}
+
+.instance svg {
+    height: 20px;
+    width: 20px;
+    margin-right: 3px;
+}
+.button {
+    background-color: var(--colors-blue700);
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    text-align: center;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.button:hover {
+    background-color: var(--colors-blue700);
+}