Merge pull request #4256 from beyondessential/release-2022-45

Release 2022-45
beyondessential · Nov 7, 2022 · 834d956 · 834d956
2 parents 69d22a4 + 4942312
commit 834d956
Show file tree

Hide file tree

Showing 75 changed files with 1,612 additions and 345 deletions.
diff --git a/packages/admin-panel/src/App.js b/packages/admin-panel/src/App.js
@@ -13,6 +13,7 @@ import { PROFILE_ROUTES } from './profileRoutes';
 import { getUser, getIsBESAdmin, PrivateRoute } from './authentication';
 import { LoginPage } from './pages/LoginPage';
 import { LogoutPage } from './pages/LogoutPage';
+import { labelToId } from './utilities';
 
 export const App = ({ user, isBESAdmin }) => {
   const headerEl = React.useRef(null);
@@ -30,12 +31,21 @@ export const App = ({ user, isBESAdmin }) => {
         <LogoutPage />
       </Route>
       <PrivateRoute path="/">
-        <Navbar links={ROUTES} user={user} />
+        <Navbar
+          links={ROUTES.map(route => ({ ...route, id: `app-tab-${labelToId(route.label)}` }))}
+          user={user}
+        />
         <div ref={headerEl} />
         <Switch>
           {[...ROUTES, ...PROFILE_ROUTES].map(route => (
             <Route key={route.to} path={route.to}>
-              <TabsToolbar links={route.tabs} maxWidth="xl" />
+              <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>

diff --git a/packages/admin-panel/src/editor/BulkCreateButton.js b/packages/admin-panel/src/editor/BulkCreateButton.js
@@ -12,6 +12,7 @@ import { openBulkEditModal } from './actions';
 
 export const BulkCreateButtonComponent = ({ dispatch, label, actionConfig }) => (
   <LightOutlinedButton
+    id="page-button-bulk-create"
     startIcon={<AddCircleIcon />}
     onClick={() => dispatch(openBulkEditModal(actionConfig))}
   >

diff --git a/packages/admin-panel/src/editor/BulkEditButton.js b/packages/admin-panel/src/editor/BulkEditButton.js
@@ -12,7 +12,10 @@ import { openBulkEditModal } from './actions';
 
 export const BulkEditButtonComponent = ({ dispatch, value: recordId, actionConfig, row }) => {
   return (
-    <IconButton onClick={() => dispatch(openBulkEditModal(actionConfig, recordId, row))}>
+    <IconButton
+      id="page-button-bulk-edit"
+      onClick={() => dispatch(openBulkEditModal(actionConfig, recordId, row))}
+    >
       <EditIcon />
     </IconButton>
   );

diff --git a/packages/admin-panel/src/editor/CreateButton.js b/packages/admin-panel/src/editor/CreateButton.js
@@ -12,6 +12,7 @@ import { openEditModal } from './actions';
 
 export const CreateButtonComponent = ({ dispatch, label, actionConfig }) => (
   <LightOutlinedButton
+    id="page-new-button"
     startIcon={<AddCircleIcon />}
     onClick={() => dispatch(openEditModal(actionConfig))}
   >

diff --git a/packages/admin-panel/src/editor/EditButton.js b/packages/admin-panel/src/editor/EditButton.js
@@ -12,7 +12,7 @@ import { openEditModal } from './actions';
 import { fetchUsedBy } from '../usedBy';
 
 export const EditButtonComponent = ({ onEdit }) => (
-  <IconButton onClick={onEdit}>
+  <IconButton className="edit-button" onClick={onEdit}>
     <EditIcon />
   </IconButton>
 );

diff --git a/packages/admin-panel/src/editor/EditModal.js b/packages/admin-panel/src/editor/EditModal.js
@@ -67,10 +67,14 @@ export const EditModalComponent = ({
         </>
       </ModalContentProvider>
       <DialogFooter>
-        <Button variant="outlined" onClick={onDismiss} disabled={isLoading}>
+        <Button id="form-button-cancel" variant="outlined" onClick={onDismiss} disabled={isLoading}>
           {errorMessage ? 'Dismiss' : 'Cancel'}
         </Button>
-        <Button onClick={onSave} disabled={!!errorMessage || isLoading || isUnchanged}>
+        <Button
+          id="form-button-save"
+          onClick={onSave}
+          disabled={!!errorMessage || isLoading || isUnchanged}
+        >
           Save
         </Button>
       </DialogFooter>

diff --git a/packages/admin-panel/src/editor/Editor.js b/packages/admin-panel/src/editor/Editor.js
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputField } from '../widgets';
-import { checkVisibilityCriteriaAreMet } from '../utilities';
+import { checkVisibilityCriteriaAreMet, labelToId } from '../utilities';
 
 export const Editor = ({ fields, recordData, onEditField }) => {
   const onInputChange = (inputKey, inputValue, editConfig = {}) => {
@@ -57,6 +57,7 @@ export const Editor = ({ fields, recordData, onEditField }) => {
             value={selectValue(editConfig, accessor, source)}
             disabled={!editable}
             recordData={recordData}
+            id={`inputField-${labelToId(source)}`}
             {...editConfig}
           />
         ))}

diff --git a/packages/admin-panel/src/importExport/ExportButton.js b/packages/admin-panel/src/importExport/ExportButton.js
@@ -24,6 +24,7 @@ export const ExportButton = ({ actionConfig, row }) => {
 
   return (
     <IconButton
+      className="export-button"
       onClick={async () => {
         const {
           exportEndpoint,

diff --git a/packages/admin-panel/src/importExport/ExportModal.js b/packages/admin-panel/src/importExport/ExportModal.js
@@ -69,19 +69,34 @@ export const ExportModal = React.memo(({ title, exportEndpoint, fileName, values
   const renderButtons = useCallback(() => {
     switch (status) {
       case STATUS.TIMEOUT:
-        return <Button onClick={handleClose}>Done</Button>;
+        return (
+          <Button id="form-button-done" onClick={handleClose}>
+            Done
+          </Button>
+        );
       case STATUS.ERROR:
         return (
           <>
-            <OutlinedButton onClick={handleDismiss}>Dismiss</OutlinedButton>
-            <Button disabled>Export</Button>
+            <OutlinedButton id="form-button-dismiss" onClick={handleDismiss}>
+              Dismiss
+            </OutlinedButton>
+            <Button id="form-button-export" disabled>
+              Export
+            </Button>
           </>
         );
       default:
         return (
           <>
-            <OutlinedButton onClick={handleClose}>Cancel</OutlinedButton>
-            <Button type="submit" isLoading={status === STATUS.LOADING} onClick={handleSubmit}>
+            <OutlinedButton id="form-button-cancel" onClick={handleClose}>
+              Cancel
+            </OutlinedButton>
+            <Button
+              id="form-button-export"
+              type="submit"
+              isLoading={status === STATUS.LOADING}
+              onClick={handleSubmit}
+            >
               Export
             </Button>
           </>
@@ -112,6 +127,7 @@ export const ExportModal = React.memo(({ title, exportEndpoint, fileName, values
         </form>
       </Dialog>
       <LightOutlinedButton
+        id="page-export-button"
         startIcon={<ExportIcon />}
         onClick={handleOpen}
         isLoading={STATUS === STATUS.LOADING}

diff --git a/packages/admin-panel/src/importExport/ImportModal.js b/packages/admin-panel/src/importExport/ImportModal.js
@@ -19,7 +19,7 @@ import {
 import { ModalContentProvider, InputField } from '../widgets';
 import { useApi } from '../utilities/ApiProvider';
 import { DATA_CHANGE_REQUEST, DATA_CHANGE_SUCCESS, DATA_CHANGE_ERROR } from '../table/constants';
-import { checkVisibilityCriteriaAreMet } from '../utilities';
+import { checkVisibilityCriteriaAreMet, labelToId } from '../utilities';
 
 const STATUS = {
   IDLE: 'idle',
@@ -135,8 +135,11 @@ export const ImportModalComponent = React.memo(
         default:
           return (
             <>
-              <OutlinedButton onClick={handleClose}>Cancel</OutlinedButton>
+              <OutlinedButton id="form-button-cancel" onClick={handleClose}>
+                Cancel
+              </OutlinedButton>
               <Button
+                id="form-button-import"
                 type="submit"
                 disabled={files.length === 0}
                 isLoading={status === STATUS.LOADING}
@@ -182,6 +185,7 @@ export const ImportModalComponent = React.memo(
                           onChange={handleValueChange}
                           label={label}
                           secondaryLabel={secondaryLabel}
+                          id={`field-${labelToId(parameterKey)}`}
                         />
                       );
                     })}
@@ -200,7 +204,11 @@ export const ImportModalComponent = React.memo(
             <DialogFooter>{renderButtons()}</DialogFooter>
           </form>
         </Dialog>
-        <LightOutlinedButton startIcon={<ImportIcon />} onClick={handleOpen}>
+        <LightOutlinedButton
+          id="page-import-button"
+          startIcon={<ImportIcon />}
+          onClick={handleOpen}
+        >
           Import
         </LightOutlinedButton>
       </>

diff --git a/packages/admin-panel/src/logsTable/LogsButton.js b/packages/admin-panel/src/logsTable/LogsButton.js
@@ -13,7 +13,7 @@ import { openLogsModal } from './actions';
 export const LogsButtonComponent = props => {
   const { openModal } = props;
   return (
-    <IconButton onClick={openModal}>
+    <IconButton className="logs-button" onClick={openModal}>
       <DescriptionIcon />
     </IconButton>
   );

diff --git a/packages/admin-panel/src/pages/resources/ExternalDatabaseConnectionsPage.js b/packages/admin-panel/src/pages/resources/ExternalDatabaseConnectionsPage.js
@@ -0,0 +1,86 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ResourcePage } from './ResourcePage';
+import { ArrayFilter } from '../../table/columnTypes/columnFilters';
+import { prettyArray } from '../../utilities';
+import { TestDatabaseConnectionCell } from '../../table/customCells';
+
+const EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT = 'externalDatabaseConnections';
+
+const FIELDS = [
+  {
+    Header: 'Code',
+    source: 'code',
+    type: 'tooltip',
+  },
+  {
+    Header: 'Name',
+    source: 'name',
+  },
+  {
+    Header: 'Description',
+    source: 'description',
+  },
+  {
+    Header: 'Permission groups',
+    source: 'permission_groups',
+    Filter: ArrayFilter,
+    Cell: ({ value }) => prettyArray(value),
+    editConfig: {
+      optionsEndpoint: 'permissionGroups',
+      optionLabelKey: 'name',
+      optionValueKey: 'name',
+      sourceKey: 'permission_groups',
+      allowMultipleValues: true,
+    },
+  },
+];
+
+const COLUMNS = [
+  ...FIELDS,
+  {
+    Header: 'Edit',
+    source: 'id',
+    type: 'edit',
+    actionConfig: {
+      editEndpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
+      title: 'Edit External Database Connection',
+      fields: [...FIELDS],
+    },
+  },
+  {
+    Header: 'Test',
+    source: 'id',
+    filterable: false,
+    sortable: false,
+    Cell: TestDatabaseConnectionCell,
+    width: 70,
+  },
+];
+
+const CREATE_CONFIG = {
+  title: 'Create a new External Database Connection',
+  actionConfig: {
+    editEndpoint: EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT,
+    fields: [...FIELDS],
+  },
+};
+
+export const ExternalDatabaseConnectionsPage = ({ getHeaderEl }) => (
+  <ResourcePage
+    title="External Database Connections"
+    endpoint={EXTERNAL_DATABASE_CONNECTIONS_ENDPOINT}
+    columns={COLUMNS}
+    createConfig={CREATE_CONFIG}
+    getHeaderEl={getHeaderEl}
+  />
+);
+
+ExternalDatabaseConnectionsPage.propTypes = {
+  getHeaderEl: PropTypes.func.isRequired,
+};
diff --git a/packages/admin-panel/src/pages/resources/UsersPage.js b/packages/admin-panel/src/pages/resources/UsersPage.js
@@ -77,6 +77,9 @@ const EDIT_FIELDS = [
     Header: 'Password',
     source: 'password',
     hideValue: true,
+    editConfig: {
+      type: 'password',
+    },
   },
 ];
 

diff --git a/packages/admin-panel/src/pages/resources/index.js b/packages/admin-panel/src/pages/resources/index.js
@@ -32,3 +32,4 @@ export { DashboardRelationsPage } from './DashboardRelationsPage';
 export { LegacyReportsPage } from './LegacyReportsPage';
 export { ProjectsPage } from './ProjectsPage';
 export { SyncGroupsPage } from './SyncGroupsPage';
+export { ExternalDatabaseConnectionsPage } from './ExternalDatabaseConnectionsPage';
diff --git a/packages/admin-panel/src/routes.js b/packages/admin-panel/src/routes.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Assignment, InsertChart, PeopleAlt, Flag, Storage } from '@material-ui/icons';
+import { Assignment, InsertChart, PeopleAlt, Flag, Storage, Language } from '@material-ui/icons';
 import { StrivePage } from './pages/StrivePage';
 import {
   CountriesPage,
@@ -32,6 +32,7 @@ import {
   ProjectsPage,
   SyncGroupsPage,
   DataTablesPage,
+  ExternalDatabaseConnectionsPage,
 } from './pages/resources';
 import { DataElementDataServicesPage } from './pages/resources/DataElementDataServicesPage';
 
@@ -206,4 +207,16 @@ export const ROUTES = [
       },
     ],
   },
+  {
+    label: 'External Data',
+    to: '/external-database-connections',
+    icon: <Language />,
+    tabs: [
+      {
+        label: 'External Database Connections',
+        to: '',
+        component: ExternalDatabaseConnectionsPage,
+      },
+    ],
+  },
 ];
diff --git a/packages/admin-panel/src/sync/SyncStatus.js b/packages/admin-panel/src/sync/SyncStatus.js
@@ -151,7 +151,7 @@ export const SyncStatus = props => {
   if (errorMessage) {
     return (
       <SyncStatusContainer>
-        <IconButton onClick={performManualSync}>
+        <IconButton className="sync-button" onClick={performManualSync}>
           <SyncIcon />
         </IconButton>
         <Tooltip title={errorMessage}>

diff --git a/packages/admin-panel/src/table/ColumnFilter.js b/packages/admin-panel/src/table/ColumnFilter.js
@@ -6,24 +6,30 @@
 import React from 'react';
 import { TextField } from '@tupaia/ui-components';
 import PropTypes from 'prop-types';
+import { labelToId } from '../utilities';
 
-export const ColumnFilter = ({ filter, onChange }) => (
+export const ColumnFilter = ({ column, filter, onChange }) => (
   <TextField
     type="text"
     placeholder="Type to filter"
     value={filter ? filter.value : ''}
     onChange={event => onChange(event.target.value)}
+    id={`dataTableColumnFilter-${labelToId(column?.id)}`}
   />
 );
 
 ColumnFilter.propTypes = {
-  filter: PropTypes.PropTypes.shape({
+  column: PropTypes.shape({
+    id: PropTypes.string,
+  }),
+  filter: PropTypes.shape({
     value: PropTypes.string,
   }),
   onChange: PropTypes.func,
 };
 
 ColumnFilter.defaultProps = {
+  column: null,
   filter: null,
   onChange: null,
 };