feat(project-page): Add option to select unit, org and project from project page

OliverDudgeon · OliverDudgeon · commit fa24d666267e · 2022-03-07T19:23:38.000Z
diff --git a/components/UserSettings/UserSettingsContent/ContextSection/ContextSection.tsx b/components/UserSettings/UserSettingsContent/ContextSection/ContextSection.tsx
@@ -1,8 +1,8 @@
 import { Grid } from '@material-ui/core';
 
+import { OrganisationAutocomplete } from '../../../userContext/OrganisationAutocomplete';
+import { UnitAutocomplete } from '../../../userContext/UnitAutocomplete';
 import { ContextActions } from './ContextActions';
-import { OrganisationAutocomplete } from './OrganisationAutocomplete';
-import { UnitAutocomplete } from './UnitAutocomplete';
 
 /**
  * Displays `Context` section in User Settings.
diff --git a/components/UserSettings/UserSettingsContent/ProjectStatsSection/ProjectStatsSection.tsx b/components/UserSettings/UserSettingsContent/ProjectStatsSection/ProjectStatsSection.tsx
@@ -164,7 +164,6 @@ export const ProjectStatsSection = () => {
         isLoading={isProjectSubscriptionsLoading}
         tableContainer={false}
       />
-      <br />
       <DataTable
         columns={storageColumns}
         customTableProps={{
diff --git a/components/userContext/OrganisationAutocomplete.tsx b/components/userContext/OrganisationAutocomplete.tsx
@@ -3,13 +3,14 @@ import { useQuery } from 'react-query';
 import type { AsError, OrganisationDetail, UnitDetail } from '@squonk/account-server-client';
 
 import { TextField, Typography } from '@material-ui/core';
+import type { AutocompleteProps } from '@material-ui/lab';
 import { Autocomplete } from '@material-ui/lab';
 import axios from 'axios';
 
-import { AS_API_URL } from '../../../../constants';
-import { useOrganisationUnit } from '../../../../context/organisationUnitContext';
-import { useCurrentProjectId } from '../../../../hooks/projectHooks';
-import { getErrorMessage } from '../../../../utils/orvalError';
+import { AS_API_URL } from '../../constants';
+import { useOrganisationUnit } from '../../context/organisationUnitContext';
+import { useCurrentProjectId } from '../../hooks/projectHooks';
+import { getErrorMessage } from '../../utils/orvalError';
 
 // TODO remove these after AS client is updated
 interface OrganisationUnitsGetResponse {
@@ -21,10 +22,15 @@ interface UnitsGetResponse {
   units: OrganisationUnitsGetResponse[];
 }
 
+type OrganisationAutocompleteProps = Omit<
+  AutocompleteProps<OrganisationDetail, false, false, false>,
+  'renderInput' | 'options'
+>;
+
 /**
  * Autocomplete which lists organisations available to a user to select as context.
  */
-export const OrganisationAutocomplete = () => {
+export const OrganisationAutocomplete = (props: OrganisationAutocompleteProps) => {
   // TODO remove these after AS client is updated
   const { data, isLoading, isError, error } = useQuery<UnitsGetResponse, AsError>(
     `${AS_API_URL}/unit`, // TODO change this once AS client is updated
@@ -44,13 +50,14 @@ export const OrganisationAutocomplete = () => {
 
   return (
     <Autocomplete
+      {...props}
       fullWidth
       getOptionLabel={(option) => option.name}
       getOptionSelected={(option, value) => option.id === value.id}
       id="organisation-selection"
       loading={isLoading}
       options={organisations}
-      renderInput={(params) => <TextField {...params} label="Organisation" size="medium" />}
+      renderInput={(params) => <TextField {...params} label="Organisation" />}
       value={organisationUnit.organisation ?? null}
       onChange={(_, organisation) => {
         // Not the best solution but I couldnt figure out anything better
diff --git a/components/userContext/ProjectAutocomplete.tsx b/components/userContext/ProjectAutocomplete.tsx
@@ -0,0 +1,33 @@
+import type { ProductDmProjectTier } from '@squonk/account-server-client';
+
+import { TextField } from '@material-ui/core';
+import type { AutocompleteProps } from '@material-ui/lab';
+import { Autocomplete } from '@material-ui/lab';
+
+import { useCurrentProjectId } from '../../hooks/projectHooks';
+import { useProjectSubscriptions } from '../UserSettings/UserSettingsContent/ProjectStatsSection/useProjectSubscriptions';
+
+export type ProjectAutocompleteProps = Omit<
+  AutocompleteProps<ProductDmProjectTier, false, false, false>,
+  'renderInput' | 'options'
+>;
+
+export const ProjectAutocomplete = (props: ProjectAutocompleteProps) => {
+  const { projectSubscriptions, isLoading: isProjectSubscriptionsLoading } =
+    useProjectSubscriptions();
+
+  const { projectId, setCurrentProjectId } = useCurrentProjectId();
+
+  return (
+    <Autocomplete
+      {...props}
+      fullWidth
+      getOptionLabel={(option) => option.product.name ?? 'Missing name'}
+      loading={isProjectSubscriptionsLoading}
+      options={projectSubscriptions}
+      renderInput={(params) => <TextField {...params} label="Project" />}
+      value={projectSubscriptions.find((sub) => sub.claim?.id == projectId) ?? null}
+      onChange={(_, value) => setCurrentProjectId(value?.claim?.id ?? undefined)}
+    />
+  );
+};
diff --git a/components/userContext/UnitAutocomplete.tsx b/components/userContext/UnitAutocomplete.tsx
@@ -1,19 +1,26 @@
+import type { UnitDetail } from '@squonk/account-server-client';
 import { useGetOrganisationUnits } from '@squonk/account-server-client/unit';
 
 import { IconButton, InputAdornment, TextField, Typography } from '@material-ui/core';
 import { DeleteForever } from '@material-ui/icons';
+import type { AutocompleteProps } from '@material-ui/lab';
 import { Autocomplete } from '@material-ui/lab';
 
-import { useOrganisationUnit } from '../../../../context/organisationUnitContext';
-import { useCurrentProjectId } from '../../../../hooks/projectHooks';
-import { useKeycloakUser } from '../../../../hooks/useKeycloakUser';
-import { getErrorMessage } from '../../../../utils/orvalError';
-import { WarningDeleteButton } from '../../../WarningDeleteButton';
+import { useOrganisationUnit } from '../../context/organisationUnitContext';
+import { useCurrentProjectId } from '../../hooks/projectHooks';
+import { useKeycloakUser } from '../../hooks/useKeycloakUser';
+import { getErrorMessage } from '../../utils/orvalError';
+import { WarningDeleteButton } from '../WarningDeleteButton';
+
+type UnitAutocompleteProps = Omit<
+  AutocompleteProps<UnitDetail, false, false, false>,
+  'renderInput' | 'options'
+>;
 
 /**
  * Autocomplete which lists context's organisation's units available to a user to select as context.
  */
-export const UnitAutocomplete = () => {
+export const UnitAutocomplete = (props: UnitAutocompleteProps) => {
   const { organisationUnit, dispatchOrganisationUnit } = useOrganisationUnit();
   const { organisation, unit } = organisationUnit;
 
@@ -37,6 +44,7 @@ export const UnitAutocomplete = () => {
 
   return (
     <Autocomplete
+      {...props}
       fullWidth
       getOptionLabel={(option) => option.name}
       getOptionSelected={(option, value) => option.id === value.id}
@@ -66,7 +74,6 @@ export const UnitAutocomplete = () => {
             ),
           }}
           label="Unit"
-          size="medium"
         />
       )}
       value={unit ?? null}
diff --git a/pages/project.tsx b/pages/project.tsx
@@ -1,11 +1,17 @@
+import { useGetProjects } from '@squonk/data-manager-client/project';
+
 import { withPageAuthRequired } from '@auth0/nextjs-auth0';
 import { css } from '@emotion/react';
-import { Container, Typography } from '@material-ui/core';
+import { Box, Container, Grid, Typography } from '@material-ui/core';
 import Head from 'next/head';
 import Image from 'next/image';
 
+import { CenterLoader } from '../components/CenterLoader';
 import Layout from '../components/Layout';
 import { ProjectTable } from '../components/ProjectTable';
+import { OrganisationAutocomplete } from '../components/userContext/OrganisationAutocomplete';
+import { ProjectAutocomplete } from '../components/userContext/ProjectAutocomplete';
+import { UnitAutocomplete } from '../components/userContext/UnitAutocomplete';
 import { useCurrentProject } from '../hooks/projectHooks';
 import { RoleRequired } from '../utils/RoleRequired';
 
@@ -14,6 +20,7 @@ import { RoleRequired } from '../utils/RoleRequired';
  */
 const Project = () => {
   const currentProject = useCurrentProject();
+  const { isLoading } = useGetProjects();
 
   return (
     <>
@@ -23,13 +30,33 @@ const Project = () => {
       <RoleRequired roles={process.env.NEXT_PUBLIC_KEYCLOAK_USER_ROLE?.split(' ')}>
         <Layout>
           <Container>
-            {currentProject ? (
-              <>
-                <Typography gutterBottom variant="h1">
-                  Project: {currentProject.name}
-                </Typography>
+            {isLoading ? (
+              <CenterLoader />
+            ) : currentProject ? (
+              <Grid
+                container
+                css={css`
+                  display: flex;
+                  align-items: center;
+                `}
+              >
+                <Grid item md={6} xs={12}>
+                  <Typography
+                    gutterBottom
+                    component="h1"
+                    css={css`
+                      word-break: break-all;
+                    `}
+                    variant={currentProject.name.length > 16 ? 'h2' : 'h1'}
+                  >
+                    Project: {currentProject.name}
+                  </Typography>
+                </Grid>
+                <Grid item md={6} xs={12}>
+                  <ProjectAutocomplete size="medium" />
+                </Grid>
                 <ProjectTable currentProject={currentProject} />
-              </>
+              </Grid>
             ) : (
               <div
                 css={css`
@@ -44,6 +71,19 @@ const Project = () => {
                   src="https://squonk.informaticsmatters.org/assets/sadderSquonk.svg"
                   width={150}
                 />
+                <Box marginY={1}>
+                  <Grid container spacing={1}>
+                    <Grid container item alignItems="center" sm={6}>
+                      <OrganisationAutocomplete />
+                    </Grid>
+                    <Grid container item alignItems="center" sm={6}>
+                      <UnitAutocomplete />
+                    </Grid>
+                    <Grid container item alignItems="center" sm={12}>
+                      <ProjectAutocomplete size="medium" />
+                    </Grid>
+                  </Grid>
+                </Box>
               </div>
             )}
           </Container>
