Release 2024-23

packages/admin-panel-server/src/app/createApp.ts

@@ -2,8 +2,14 @@
  * Tupaia
  * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
+import { Request } from 'express';
 import { TupaiaDatabase } from '@tupaia/database';
-import { OrchestratorApiBuilder, forwardRequest, handleWith } from '@tupaia/server-boilerplate';
+import {
+  OrchestratorApiBuilder,
+  RequiresSessionAuthHandler,
+  forwardRequest,
+  handleWith,
+} from '@tupaia/server-boilerplate';
 import { getEnvVarOrDefault } from '@tupaia/utils';
 import { AdminPanelSessionModel } from '../models';
 import { hasTupaiaAdminPanelAccess } from '../utils';
@@ -45,8 +51,8 @@ import {
   ExportEntityHierarchiesRequest,
   ExportEntityHierarchiesRoute,
 } from '../routes';
-import { authHandlerProvider } from '../auth';
 
+const authHandlerProvider = (req: Request) => new RequiresSessionAuthHandler(req);
 /**
  * Set up express server with middleware,
  */

packages/admin-panel/src/App.jsx

@@ -17,7 +17,7 @@ import { TabPageLayout } from './layout/TabPageLayout';
 
 export const getFlattenedChildViews = (route, basePath = '') => {
   return route.childViews.reduce((acc, childView) => {
-    const { nestedView } = childView;
+    const { nestedViews } = childView;
 
     const childViewWithRoute = {
       ...childView,
@@ -26,23 +26,21 @@ export const getFlattenedChildViews = (route, basePath = '') => {
       to: `${basePath}${route.path}${childView.path}`, // this is an absolute route so that the breadcrumbs work
     };
 
-    if (!nestedView) return [...acc, childViewWithRoute];
+    if (!nestedViews) return [...acc, childViewWithRoute];
+    const updatedNestedViews = nestedViews.map(nestedView => ({
+      ...nestedView,
+      path: `${route.path}${childView.path}${nestedView.path}`,
 
-    const updatedNestedView = nestedView
-      ? {
-          ...nestedView,
-          path: `${route.path}${childView.path}${nestedView.path}`,
-          parent: childViewWithRoute,
-        }
-      : null;
+      parent: childViewWithRoute,
+    }));
 
     return [
       ...acc,
       {
         ...childViewWithRoute,
-        nestedView: updatedNestedView,
+        nestedViews: updatedNestedViews,
       },
-      updatedNestedView,
+      ...updatedNestedViews,
     ];
   }, []);
 };
@@ -74,7 +72,15 @@ export const App = ({ user, hasBESAdminAccess }) => {
       <Route path="/login" element={<LoginPage />} />
       <Route path="/logout" element={<LogoutPage />} />
       <Route path="/" element={<PrivateRoute />}>
-        <Route element={<AppPageLayout user={user} routes={accessibleRoutes} />}>
+        <Route
+          element={
+            <AppPageLayout
+              user={user}
+              routes={accessibleRoutes}
+              profileLink={{ label: 'Profile', to: '/profile' }}
+            />
+          }
+        >
           <Route index element={<Navigate to="/surveys" replace />} />
           <Route path="*" element={<Navigate to="/surveys" replace />} />
           {[...accessibleRoutes, ...PROFILE_ROUTES].map(route => (
@@ -95,7 +101,7 @@ export const App = ({ user, hasBESAdminAccess }) => {
                   path={childRoute.path}
                   element={
                     childRoute.Component ? (
-                      <childRoute.Component />
+                      <childRoute.Component {...childRoute} />
                     ) : (
                       <ResourcePage {...childRoute} hasBESAdminAccess={hasBESAdminAccess} />
                     )

packages/admin-panel/src/VizBuilderApp/api/queries/useEntities.js

@@ -43,9 +43,9 @@ export const useEntityByCode = (entityCode, onSuccess) =>
     () =>
       get('entities', {
         params: {
-          filter: {
+          filter: JSON.stringify({
             code: entityCode,
-          },
+          }),
         },
       }),
     {

packages/admin-panel/src/VizBuilderApp/components/DataLibrary/TransformDataLibrary.jsx

@@ -26,12 +26,15 @@ const transformToValue = transform =>
   }));
 
 const valueToTransform = value =>
-  value.map(({ id, code, isDisabled = false, ...restOfConfig }, index) => ({
-    id: id || `${code}-${index}`, // option from selectable options does not have id.
-    transform: code,
-    isDisabled,
-    ...restOfConfig,
-  }));
+  value.map(({ id, code, isDisabled = false, ...restOfConfig }) => {
+    const uniqueId = Math.random() * 1000000; // unique id to add to the code
+    return {
+      id: id || `${code}-${uniqueId}`, // option from selectable options does not have id.
+      transform: code,
+      isDisabled,
+      ...restOfConfig,
+    };
+  });
 
 export const TransformDataLibrary = ({ transform, onTransformChange, onInvalidChange }) => {
   const [dataType, setDataType] = useState(DATA_TYPES.TRANSFORM);

packages/admin-panel/src/VizBuilderApp/components/NavPanel.jsx

@@ -9,7 +9,7 @@ import { HomeLink, UserLink } from '../../layout';
 
 const Wrapper = styled.div`
   background-color: ${props => props.theme.palette.secondary.main};
-  padding-block: 0.3rem;
+  padding-block: 1rem;
   padding-inline: 1.25rem;
   display: flex;
   justify-content: space-between;

packages/admin-panel/src/autocomplete/Autocomplete.jsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import Close from '@material-ui/icons/Close';
 import { createFilterOptions } from '@material-ui/lab/Autocomplete';
 import styled from 'styled-components';
 import MuiChip from '@material-ui/core/Chip';
@@ -15,6 +16,11 @@ const Chip = styled(MuiChip)`
   &:first-child {
     margin-left: 6px;
   }
+  color: ${props => props.theme.palette.text.primary};
+  .MuiChip-deleteIcon {
+    color: ${props => props.theme.palette.text.secondary};
+    height: 1rem;
+  }
 `;
 
 export const Autocomplete = props => {
@@ -33,6 +39,8 @@ export const Autocomplete = props => {
     allowMultipleValues,
     optionLabelKey,
     muiProps,
+    tooltip,
+    required,
   } = props;
   const [searchTerm, setSearchTerm] = React.useState('');
   const debouncedSearchUpdate = React.useCallback(
@@ -75,6 +83,8 @@ export const Autocomplete = props => {
           values.map((option, index) => (
             <Chip
               color="primary"
+              deleteIcon={<Close />}
+              variant="outlined"
               label={optionLabelKey ? option[optionLabelKey] : option}
               {...getTagProps({ index })}
             />
@@ -109,6 +119,8 @@ export const Autocomplete = props => {
       placeholder={placeholder}
       helperText={helperText}
       muiProps={extraMuiProps}
+      tooltip={tooltip}
+      required={required}
     />
   );
 };
@@ -130,6 +142,8 @@ Autocomplete.propTypes = {
   allowMultipleValues: PropTypes.bool,
   optionLabelKey: PropTypes.string,
   muiProps: PropTypes.object,
+  tooltip: PropTypes.string,
+  required: PropTypes.bool,
 };
 
 Autocomplete.defaultProps = {
@@ -144,4 +158,6 @@ Autocomplete.defaultProps = {
   muiProps: {},
   optionLabelKey: null,
   onChangeSearchTerm: () => {},
+  tooltip: null,
+  required: false,
 };