Epic frontend rewrite

.eslintrc-js-frontend.json

@@ -1,11 +1,12 @@
 {
-  "extends": "./.eslintrc-js.json",
+  "extends": ["./.eslintrc-js.json"],
   "env": {
     "browser": true
   },
   "rules": {
     "jsx-a11y/href-no-hash": "off",
     "react/destructuring-assignment": "off",
-    "react/no-unescaped-entities": "off"
+    "react/no-unescaped-entities": "off",
+    "import/extensions": "off"
   }
-}
+}

Dockerfile

@@ -38,6 +38,8 @@ COPY packages/utils/. ./packages/utils
 COPY packages/tsutils/. ./packages/tsutils
 COPY packages/types/. ./packages/types
 COPY packages/ui-components/. ./packages/ui-components
+COPY packages/ui-chart-components/. ./packages/ui-chart-components
+COPY packages/ui-map-components/. ./packages/ui-map-components
 COPY packages/weather-api/. ./packages/weather-api
 COPY packages/server-boilerplate/. ./packages/server-boilerplate
 COPY packages/kobo-api/. ./packages/kobo-api

README.md

@@ -44,6 +44,7 @@ While each package type has their own structure, there are a few common standard
 ### Platform interfaces
 
 - [Tupaia](https://github.com/beyondessential/tupaia/blob/dev/packages/web-frontend/README.md) (for legacy reasons referred to as web-frontend)
+- [Tupaia Web](https://github.com/beyondessential/tupaia/blob/dev/packages/tupaia-web/README.md) (New version of web-frontend)
 - [Admin Panel](https://github.com/beyondessential/tupaia/blob/dev/packages/admin-panel/README.md)
 - [LESMIS](https://github.com/beyondessential/tupaia/blob/dev/packages/lesmis/README.md)
 - [PSSS](https://github.com/beyondessential/tupaia/blob/dev/packages/psss/README.md)
@@ -91,7 +92,9 @@ All servers are NodeJS express applications, and the packages follow the same ba
 - [e2e](https://github.com/beyondessential/tupaia/blob/dev/packages/e2e/README.md)
 - [expression-parser](https://github.com/beyondessential/tupaia/blob/dev/packages/expression-parser/README.md)
 - [indicators](https://github.com/beyondessential/tupaia/blob/dev/packages/indicators/README.md)
-- [kobo-api](https://github.com/beyondessential/tupaia/blob/dev/packages/kobo-api/README.md)
+- [ui-components](https://github.com/beyondessential/tupaia/blob/dev/packages/ui-components/README.md)
+- [ui-chart-components](https://github.com/beyondessential/tupaia/blob/dev/packages/ui-chart-components/README.md)
+- [ui-map-components](https://github.com/beyondessential/tupaia/blob/dev/packages/ui-map-components/README.md)
 - [server-boilerplate](https://github.com/beyondessential/tupaia/blob/dev/packages/server-boilerplate/README.md)
 - [superset-api](https://github.com/beyondessential/tupaia/blob/dev/packages/superset-api/README.md)
 - [ui-components](https://github.com/beyondessential/tupaia/blob/dev/packages/ui-components/README.md)

codeship-steps.yml

@@ -27,8 +27,6 @@
           steps:
             - name: Test admin-panel-server
               command: './packages/devops/scripts/ci/testBackend.sh admin-panel-server'
-            - name: Test central-server
-              command: './packages/devops/scripts/ci/testBackend.sh central-server'
             - name: Test data-table-server
               command: './packages/devops/scripts/ci/testBackend.sh data-table-server'
             - name: Test lesmis-server
@@ -37,8 +35,6 @@
               command: './packages/devops/scripts/ci/testBackend.sh psss-server'
             - name: Test report-server
               command: './packages/devops/scripts/ci/testBackend.sh report-server'
-            - name: Test web-config-server
-              command: './packages/devops/scripts/ci/testBackend.sh web-config-server'
         - type: parallel
           name: Test batch 2
           steps:
@@ -54,15 +50,21 @@
               command: './packages/devops/scripts/ci/testBackend.sh indicators'
             - name: Test internal-dependencies
               command: './packages/devops/scripts/ci/testInternalDependencies.sh'
-            - name: Test web-frontend
-              command: './packages/devops/scripts/ci/testFrontend.sh web-frontend'
         - type: parallel
           name: Test batch 3
           steps:
             - name: Test entity-server
               command: './packages/devops/scripts/ci/testBackend.sh entity-server'
             - name: Test meditrak-app-server
               command: './packages/devops/scripts/ci/testBackend.sh meditrak-app-server'
+            - name: Test tupaia-web-server
+              command: './packages/devops/scripts/ci/testBackend.sh tupaia-web-server'
+            - name: Test tupaia-web
+              command: './packages/devops/scripts/ci/testFrontend.sh tupaia-web'
+            - name: Test web-config-server
+              command: './packages/devops/scripts/ci/testBackend.sh web-config-server'
+            - name: Test central-server
+              command: './packages/devops/scripts/ci/testBackend.sh central-server'
 
 - name: Deploy changes
   service: deployment

packages/admin-panel/package.json

@@ -27,7 +27,8 @@
     "start-admin-panel-server": "yarn workspace @tupaia/admin-panel-server start-dev",
     "start-data-table-server": "yarn workspace @tupaia/data-table-server start-dev",
     "test": "echo No tests",
-    "start-ui-components": "yarn workspace @tupaia/ui-components build-dev:watch",
+    "start-ui-components": "yarn workspace @tupaia/ui-components build -w",
+    "start-ui-chart-components": "yarn workspace @tupaia/ui-chart-components build -w",
     "start-frontend": "npm-run-all -c -l -p start-ui-components start-dev",
     "start-servers": "npm-run-all -c -l -p start-central-server start-entity-server start-report-server start-admin-panel-server start-data-table-server"
   },
@@ -41,6 +42,7 @@
     "@material-ui/styles": "^4.9.10",
     "@tupaia/access-policy": "3.0.0",
     "@tupaia/types": "1.0.0",
+    "@tupaia/ui-chart-components": "1.0",
     "@tupaia/ui-components": "1.0",
     "@tupaia/utils": "1.0.0",
     "axios": "^0.21.1",
@@ -53,7 +55,7 @@
     "lodash.keyby": "^4.6.0",
     "lodash.throttle": "^4.1.1",
     "moment": "^2.22.2",
-    "parse-link-header": "^1.0.1",
+    "parse-link-header": "^2.0.0",
     "prop-types": "^15.6.0",
     "query-string": "^5.1.1",
     "react": "^16.13.1",

packages/admin-panel/src/App.js

@@ -38,23 +38,32 @@ export const App = ({ user }) => {
         <div ref={headerEl} />
         <Switch>
           {[...ROUTES, ...PROFILE_ROUTES].map(route => (
-            <Route key={route.to} path={route.to}>
-              <TabsToolbar
-                links={route.tabs.map(tab => ({
-                  ...tab,
-                  id: `app-subTab-${labelToId(tab.label)}`,
-                }))}
-                maxWidth="xl"
-              />
-              <Switch>
-                {route.tabs.map(tab => (
-                  <Route key={`${route.to}-${tab.to}`} path={`${route.to}${tab.to}`} exact>
-                    <tab.component getHeaderEl={getHeaderEl} />
-                  </Route>
-                ))}
-                <Redirect to={route.to} />
-              </Switch>
-            </Route>
+            <Route
+              key={route.to}
+              path={route.to}
+              render={({ match }) => {
+                return (
+                  <>
+                    <TabsToolbar
+                      links={route.tabs.map(tab => ({
+                        ...tab,
+                        id: `app-subTab-${labelToId(tab.label)}`,
+                      }))}
+                      maxWidth="xl"
+                      baseRoute={match.url}
+                    />
+                    <Switch>
+                      {route.tabs.map(tab => (
+                        <Route key={`${route.to}-${tab.to}`} path={`${route.to}${tab.to}`} exact>
+                          <tab.component getHeaderEl={getHeaderEl} />
+                        </Route>
+                      ))}
+                      <Redirect to={route.to} />
+                    </Switch>
+                  </>
+                );
+              }}
+            />
           ))}
           <Redirect to="surveys" />
         </Switch>

packages/admin-panel/src/VizBuilderApp/components/PreviewSection.js

@@ -7,8 +7,8 @@ import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 import MuiTab from '@material-ui/core/Tab';
 import MuiTabs from '@material-ui/core/Tabs';
-import { Chart, FlexSpaceBetween, FetchLoader, DataTable, JsonEditor } from '@tupaia/ui-components';
-
+import { FlexSpaceBetween, FetchLoader, DataTable, JsonEditor } from '@tupaia/ui-components';
+import { Chart } from '@tupaia/ui-chart-components';
 import { TabPanel } from './TabPanel';
 import { useReportPreview } from '../api';
 import { usePreviewData, useVisualisation, useVizConfig, useVizConfigError } from '../context';

packages/api-client/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@tupaia/tsutils": "1.0.0",
     "@tupaia/types": "1.0.0",
+    "@tupaia/utils": "1.0.0",
     "lodash.pick": "^4.4.0",
     "node-fetch": "^1.7.3",
     "qs": "^6.10.1"

packages/api-client/src/MockTupaiaApiClient.ts

@@ -9,6 +9,7 @@ import {
   DataTableApiInterface,
   EntityApiInterface,
   ReportApiInterface,
+  WebConfigApiInterface,
 } from './connections';
 
 import {
@@ -17,6 +18,7 @@ import {
   MockDataTableApi,
   MockEntityApi,
   MockReportApi,
+  MockWebConfigApi,
 } from './connections/mocks';
 
 export class MockTupaiaApiClient {
@@ -25,18 +27,21 @@ export class MockTupaiaApiClient {
   public readonly dataTable: DataTableApiInterface;
   public readonly entity: EntityApiInterface;
   public readonly report: ReportApiInterface;
+  public readonly webConfig: WebConfigApiInterface;
 
   public constructor({
     auth = new MockAuthApi(),
     central = new MockCentralApi(),
     dataTable = new MockDataTableApi(),
     entity = new MockEntityApi(),
     report = new MockReportApi(),
+    webConfig = new MockWebConfigApi(),
   } = {}) {
     this.auth = auth;
     this.central = central;
     this.dataTable = dataTable;
     this.entity = entity;
     this.report = report;
+    this.webConfig = webConfig
   }
 }

packages/api-client/src/TupaiaApiClient.ts

@@ -12,11 +12,13 @@ import {
   DataTableApi,
   EntityApi,
   ReportApi,
+  WebConfigApi,
   AuthApiInterface,
   CentralApiInterface,
   DataTableApiInterface,
   EntityApiInterface,
   ReportApiInterface,
+  WebConfigApiInterface,
 } from './connections';
 import { PRODUCTION_BASE_URLS, ServiceBaseUrlSet } from './constants';
 
@@ -26,12 +28,14 @@ export class TupaiaApiClient {
   public readonly dataTable: DataTableApiInterface;
   public readonly auth: AuthApiInterface;
   public readonly report: ReportApiInterface;
+  public readonly webConfig: WebConfigApiInterface;
 
   public constructor(authHandler: AuthHandler, baseUrls: ServiceBaseUrlSet = PRODUCTION_BASE_URLS) {
     this.auth = new AuthApi(new ApiConnection(authHandler, baseUrls.auth));
     this.entity = new EntityApi(new ApiConnection(authHandler, baseUrls.entity));
     this.central = new CentralApi(new ApiConnection(authHandler, baseUrls.central));
     this.report = new ReportApi(new ApiConnection(authHandler, baseUrls.report));
     this.dataTable = new DataTableApi(new ApiConnection(authHandler, baseUrls.dataTable));
+    this.webConfig = new WebConfigApi(new ApiConnection(authHandler, baseUrls.webConfig));
   }
 }

packages/api-client/src/auth/BasicAuthHandler.ts

@@ -4,6 +4,7 @@
  */
 
 import { AuthHandler } from '../types';
+import { createBasicHeader } from '@tupaia/utils';
 
 export class BasicAuthHandler implements AuthHandler {
   private readonly authHeader: string;
@@ -17,7 +18,6 @@ export class BasicAuthHandler implements AuthHandler {
   }
 
   private buildAuthHeader(username: string, password: string): string {
-    // TODO: Replace with @tupaia/utils createBasicHeader() when we unpublish
-    return `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+    return createBasicHeader(username, password);
   }
 }

packages/api-client/src/connections/EntityApi.ts

@@ -187,6 +187,44 @@ export class EntityApi extends BaseApi {
     );
   }
 
+  public async getAncestorsOfEntity(
+    hierarchyName: string,
+    entityCode: string,
+    queryOptions?: {
+      field?: string;
+      fields?: string[];
+      filter?: any;
+    },
+    includeRootEntity = false,
+  ) {
+    return this.connection.get(`hierarchy/${hierarchyName}/${entityCode}/ancestors`, {
+      ...this.stringifyQueryParameters(queryOptions),
+      includeRootEntity: `${includeRootEntity}`,
+    });
+  }
+
+  public async getAncestorsOfEntities(
+    hierarchyName: string,
+    entityCodes: string[],
+    queryOptions?: {
+      field?: string;
+      fields?: string[];
+      filter?: any;
+    },
+    includeRootEntity = false,
+  ) {
+    return this.connection.post(
+      `hierarchy/${hierarchyName}/ancestors`,
+      {
+        ...this.stringifyQueryParameters(queryOptions),
+        includeRootEntity: `${includeRootEntity}`,
+      },
+      {
+        entities: entityCodes,
+      },
+    );
+  }
+
   public async getRelativesOfEntity(
     hierarchyName: string,
     entityCode: string,
@@ -258,6 +296,15 @@ export class EntityApi extends BaseApi {
       },
     );
   }
+
+  public async entitySearch(hierarchyName: string, searchString: string, queryOptions?: any) {
+    const { page, pageSize, ...otherQueryOptions } = queryOptions;
+    return this.connection.get(`hierarchy/${hierarchyName}/entitySearch/${searchString}`, {
+      ...this.stringifyQueryParameters(otherQueryOptions),
+      page,
+      pageSize,
+    });
+  }
 }
 
 export interface EntityApiInterface extends PublicInterface<EntityApi> {}

packages/api-client/src/connections/ReportApi.ts

@@ -16,6 +16,10 @@ export class ReportApi extends BaseApi {
   public async fetchTransformSchemas() {
     return this.connection.get('fetchTransformSchemas');
   }
+
+  public async fetchReport(reportCode: string, query?: QueryParameters | null) {
+    return this.connection.get(`fetchReport/${reportCode}`, query);
+  }
 }
 
 export interface ReportApiInterface extends PublicInterface<ReportApi> {}

packages/api-client/src/connections/WebConfigApi.ts

@@ -0,0 +1,22 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+
+import { QueryParameters } from '../types';
+import { BaseApi } from './BaseApi';
+import { PublicInterface } from './types';
+
+export class WebConfigApi extends BaseApi {
+  public async fetchReport(reportCode: string, query?: QueryParameters | null) {
+    return this.connection.get(`report/${reportCode}`, query);
+  }
+  public async fetchMeasureData(mapOverlayCode: string, query?: QueryParameters | null) {
+    return this.connection.get('measureData', { ...query, mapOverlayCode });
+  }
+  public async fetchProjects() {
+    return this.connection.get('projects');
+  }
+}
+
+export interface WebConfigApiInterface extends PublicInterface<WebConfigApi> {}

packages/api-client/src/connections/index.ts

@@ -10,3 +10,4 @@ export { DataTableApi, DataTableApiInterface } from './DataTableApi';
 export { EntityApi, EntityApiInterface } from './EntityApi';
 export { CentralApi, CentralApiInterface } from './CentralApi';
 export { ReportApi, ReportApiInterface } from './ReportApi';
+export { WebConfigApi, WebConfigApiInterface } from './WebConfigApi';