feat(datatrak): RN-1408: Move ProjectSelectForm to ui-components

packages/datatrak-web/src/components/index.ts

@@ -5,7 +5,6 @@
 
 export { PageContainer } from './PageContainer';
 export * from './Icons';
-export * from './SelectList';
 export { Autocomplete, QuestionAutocomplete } from './Autocomplete';
 export { Button } from './Button';
 export { ButtonLink } from './ButtonLink';

packages/datatrak-web/src/features/EntitySelector/ResultsList.tsx

@@ -3,12 +3,12 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { Typography } from '@material-ui/core';
+import { FormLabelProps, Typography } from '@material-ui/core';
 import RoomIcon from '@material-ui/icons/Room';
 import { DatatrakWebEntityDescendantsRequest } from '@tupaia/types';
-import { ListItemType, SelectList } from '../../components';
+import { SelectList } from '@tupaia/ui-components';
 
 const DARK_BLUE = '#004975';
 
@@ -43,6 +43,20 @@ export const ResultItem = ({ name, parentName }) => {
   );
 };
 
+type ListItemType = Record<string, unknown> & {
+  children?: ListItemType[];
+  content: string | ReactNode;
+  value: string;
+  selected?: boolean;
+  icon?: ReactNode;
+  tooltip?: string;
+  button?: boolean;
+  disabled?: boolean;
+  labelProps?: FormLabelProps & {
+    component?: React.ElementType;
+  };
+};
+
 type SearchResults = DatatrakWebEntityDescendantsRequest.ResBody;
 interface ResultsListProps {
   value: string;

packages/datatrak-web/src/features/GroupedSurveyList.tsx

@@ -2,11 +2,12 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import React, { useEffect } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import styled from 'styled-components';
 import { FormHelperText, FormLabelProps } from '@material-ui/core';
 import { Country } from '@tupaia/types';
-import { ListItemType, SelectList, SurveyFolderIcon, SurveyIcon } from '../components';
+import { SelectList } from '@tupaia/ui-components';
+import { SurveyFolderIcon, SurveyIcon } from '../components';
 import { Survey } from '../types';
 import { useCurrentUserContext, useProjectSurveys } from '../api';
 
@@ -21,6 +22,20 @@ const ListWrapper = styled.div`
   }
 `;
 
+type ListItemType = Record<string, unknown> & {
+  children?: ListItemType[];
+  content: string | ReactNode;
+  value: string;
+  selected?: boolean;
+  icon?: ReactNode;
+  tooltip?: string;
+  button?: boolean;
+  disabled?: boolean;
+  labelProps?: FormLabelProps & {
+    component?: React.ElementType;
+  };
+};
+
 const sortAlphanumerically = (a: ListItemType, b: ListItemType) => {
   return (a.content as string).trim()?.localeCompare((b.content as string).trim(), 'en', {
     numeric: true,

packages/datatrak-web/src/features/index.ts

@@ -3,7 +3,6 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-export { ProjectSelectForm } from './ProjectSelectForm';
 export {
   SurveyScreen,
   SurveySuccessScreen,

packages/datatrak-web/src/layout/UserMenu/ProjectSelectModal.tsx

@@ -5,8 +5,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Paper } from '@material-ui/core';
-import { ProjectSelectForm, RequestProjectAccess } from '../../features';
-import { useCurrentUserContext } from '../../api';
+import { ProjectSelectForm } from '@tupaia/ui-components';
+import { RequestProjectAccess } from '../../features';
+import { useCurrentUserContext, useEditUser, useProjects } from '../../api';
 import { Modal } from '../../components';
 
 const Wrapper = styled(Paper)`
@@ -26,6 +27,8 @@ interface ModalProps {
 export const ProjectSelectModal = ({ onClose }: ModalProps) => {
   const { projectId } = useCurrentUserContext();
   const [requestAccessProjectCode, setRequestAccessProjectCode] = useState<string | null>(null);
+  const { data: projects, isLoading } = useProjects();
+  const { mutate: onConfirm, isLoading: isConfirming } = useEditUser(onClose);
 
   return (
     // Enable the portal so it displays over any other content and we don't get z-index issues
@@ -41,6 +44,10 @@ export const ProjectSelectModal = ({ onClose }: ModalProps) => {
           projectId={projectId}
           onClose={onClose}
           onRequestAccess={setRequestAccessProjectCode}
+          projects={projects}
+          isLoading={isLoading}
+          onConfirm={onConfirm}
+          isConfirming={isConfirming}
         />
       )}
     </Modal>

packages/datatrak-web/src/views/ProjectSelectPage.tsx

@@ -6,9 +6,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { Paper } from '@material-ui/core';
 import { useNavigate } from 'react-router-dom';
+import { ProjectSelectForm } from '@tupaia/ui-components';
 import { useFromLocation } from '../utils';
-import { ProjectSelectForm } from '../features';
 import { ROUTES } from '../constants';
+import { useEditUser, useProjects } from '../api';
 
 const Container = styled(Paper).attrs({
   variant: 'outlined',
@@ -19,9 +20,19 @@ const Container = styled(Paper).attrs({
 `;
 
 export const ProjectSelectPage = () => {
+  const { data: projects, isLoading } = useProjects();
+  const { mutate: onConfirm, isLoading: isConfirming } = useEditUser();
+
   const navigate = useNavigate();
   const from = useFromLocation();
 
+  const onRequestAccess = (projectCode: string) => {
+    navigate({
+      pathname: ROUTES.REQUEST_ACCESS,
+      search: `?project=${projectCode}`,
+    });
+  };
+
   const onSuccess = () => {
     navigate(from || ROUTES.HOME, {
       state: null,
@@ -30,7 +41,14 @@ export const ProjectSelectPage = () => {
 
   return (
     <Container>
-      <ProjectSelectForm onClose={onSuccess} />
+      <ProjectSelectForm
+        onRequestAccess={onRequestAccess}
+        onClose={onSuccess}
+        projects={projects}
+        isLoading={isLoading}
+        onConfirm={onConfirm}
+        isConfirming={isConfirming}
+      />
     </Container>
   );
 };

packages/datatrak-web/src/components/SelectList/List.tsx → packages/ui-components/src/components/SelectList/List.tsx

@@ -1,11 +1,12 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
 import { List as MuiList } from '@material-ui/core';
-import { ListItem as Item, ListItemType } from './ListItem';
+import { ListItem as Item } from './ListItem';
+import { ListItemType } from './types';
 
 interface SelectListProps {
   items?: ListItemType[];

packages/datatrak-web/src/components/SelectList/ListItem.tsx → packages/ui-components/src/components/SelectList/ListItem.tsx

@@ -1,6 +1,6 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React, { ReactElement, ReactNode, useState } from 'react';
@@ -11,9 +11,10 @@ import {
   ListItemProps as MuiListItemProps,
 } from '@material-ui/core';
 import { Check, KeyboardArrowRight } from '@material-ui/icons';
-import { Tooltip } from '@tupaia/ui-components';
+import { Tooltip } from '../Tooltip';
+import { ListItemType } from './types';
 
-// explicity set the types so that the overrides are applied, for the `button` prop
+// explicitly set the types so that the overrides are applied, for the `button` prop
 export const BaseListItem = styled(MuiListItem)<MuiListItemProps>`
   display: flex;
   align-items: center;
@@ -30,8 +31,8 @@ export const BaseListItem = styled(MuiListItem)<MuiListItemProps>`
   &.MuiButtonBase-root {
     &:hover,
     &.Mui-selected:hover,
-    &:focus-visible,
-    &.Mui-selected:focus-visible {
+    &:focus,
+    &.Mui-selected:focus {
       background-color: ${({ theme }) => theme.palette.primary.main}33;
     }
   }
@@ -74,17 +75,6 @@ const IconWrapper = styled.div`
   }
 `;
 
-export type ListItemType = Record<string, unknown> & {
-  children?: ListItemType[];
-  content: string | ReactNode;
-  value: string;
-  selected?: boolean;
-  icon?: ReactNode;
-  tooltip?: string;
-  button?: boolean;
-  disabled?: boolean;
-};
-
 interface ListItemProps {
   item: ListItemType;
   children?: ReactNode;
@@ -126,6 +116,7 @@ export const ListItem = ({ item, children, onSelect }: ListItemProps) => {
 
   return (
     <li>
+      {/*@ts-ignore*/}
       <BaseListItem
         button={button}
         onClick={button ? onClick : null}

packages/datatrak-web/src/components/SelectList/SelectList.tsx → packages/ui-components/src/components/SelectList/SelectList.tsx

@@ -1,12 +1,12 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { FormLabel, FormLabelProps, Typography } from '@material-ui/core';
-import { ListItemType } from './ListItem';
+import { FormLabel, Typography, FormLabelProps } from '@material-ui/core';
+import { ListItemType } from './types';
 import { List } from './List';
 
 const Wrapper = styled.div`
@@ -51,9 +51,10 @@ const Label = styled(FormLabel)<{
 }>`
   margin-bottom: 1rem;
   font-size: 0.875rem;
-  font-weight: 400;
   color: ${({ theme, color }) => theme.palette.text[color!]};
+  font-weight: 400;
 `;
+
 interface SelectListProps {
   items?: ListItemType[];
   onSelect: (item: ListItemType) => void;

packages/ui-components/src/components/SelectList/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { List } from './List';
+export { ListItem } from './ListItem';
+export { SelectList } from './SelectList';

packages/ui-components/src/components/SelectList/types.ts

@@ -0,0 +1,18 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React, { ReactNode } from 'react';
+import { FormLabelProps } from '@material-ui/core';
+
+export type ListItemType = Record<string, unknown> & {
+  children?: ListItemType[];
+  content: string | ReactNode;
+  value: string;
+  selected?: boolean;
+  icon?: ReactNode;
+  tooltip?: string;
+  button?: boolean;
+  disabled?: boolean;
+};

packages/ui-components/src/components/index.ts

@@ -44,3 +44,4 @@ export * from './Tooltip';
 export * from './UserMessage';
 export * from './TooltipIconButton';
 export * from './Pagination';
+export * from './SelectList';