feat: add button to access organisation inventory page

Author: OliverDudgeon

src/components/usage/OrganisationUserUsage.tsx

@@ -37,14 +37,16 @@ export interface OrganisationUserUsageProps {
 }
 
 export const OrganisationUserUsage = ({ organisationId }: OrganisationUserUsageProps) => {
-  const { data: organisation } = useGetOrganisation(organisationId);
+  const { data: organisation, isLoading: isOrganisationLoading } =
+    useGetOrganisation(organisationId);
   const { data: units } = useGetUnits({
     query: { select: (data) => data.units.flatMap((org) => org.units) },
   });
   const { data, error: inventoryError } = useGetUserInventory<InventoryWithUnit[]>(
     { org_id: organisationId },
     {
       query: {
+        retry: false,
         select: (data) => {
           return data.users.map(({ projects, activity, first_seen, last_seen_date, username }) => ({
             username,
@@ -72,7 +74,7 @@ export const OrganisationUserUsage = ({ organisationId }: OrganisationUserUsageP
   );
   const { data: organisationMembers } = useGetOrganisationUsers(organisationId, {
     query: {
-      enabled: organisation?.caller_is_member === undefined || organisation.caller_is_member,
+      enabled: isOrganisationLoading || !organisation || organisation.caller_is_member,
     },
   });
 
@@ -103,6 +105,10 @@ export const OrganisationUserUsage = ({ organisationId }: OrganisationUserUsageP
     ...sharedColumns,
   ];
 
+  if (inventoryError?.message === "Request failed with status code 403") {
+    return <Alert severity="error">You do not have permission to view this inventory</Alert>;
+  }
+
   if (inventoryError) {
     return <Alert severity="error">{inventoryError.message}</Alert>;
   }

src/components/userContext/Adornment.tsx

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+
+import { IconButton, Tooltip } from "@mui/material";
+
+export interface AdornmentProps {
+  title: string;
+  href: string;
+  children: ReactNode;
+}
+
+export const Adornment = ({ title, href, children }: AdornmentProps) => (
+  <Tooltip title={title}>
+    <span>
+      <IconButton
+        href={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}${href}`}
+        size="small"
+        sx={{ p: "1px" }}
+        target="_blank"
+      >
+        {children}
+      </IconButton>
+    </span>
+  </Tooltip>
+);

src/components/userContext/SelectOrganisation.tsx

@@ -1,13 +1,15 @@
 import { type OrganisationDetail } from "@squonk/account-server-client";
 import { useGetOrganisations } from "@squonk/account-server-client/organisation";
 
+import { DataUsage as DataUsageIcon } from "@mui/icons-material";
 import { Autocomplete, type AutocompleteProps, Box, TextField, Typography } from "@mui/material";
 
 import { projectPayload, useCurrentProjectId } from "../../hooks/projectHooks";
 import { useSelectedOrganisation } from "../../state/organisationSelection";
 import { useSelectedUnit } from "../../state/unitSelection";
 import { PROJECT_LOCAL_STORAGE_KEY, writeToLocalStorage } from "../../utils/next/localStorage";
 import { getErrorMessage } from "../../utils/next/orvalError";
+import { Adornment } from "./Adornment";
 import { ItemIcons } from "./ItemIcons";
 
 export interface SelectOrganisationProps
@@ -50,7 +52,19 @@ export const SelectOrganisation = (autoCompleteProps: SelectOrganisationProps) =
             {...params}
             InputProps={{
               ...params.InputProps,
-              startAdornment: <ItemIcons item={organisation} />,
+              startAdornment: (
+                <>
+                  <ItemIcons item={organisation} />
+                  {!!organisation && (
+                    <Adornment
+                      href={`/organisation/${organisation.id}/inventory`}
+                      title="User Usage"
+                    >
+                      <DataUsageIcon />
+                    </Adornment>
+                  )}
+                </>
+              ),
             }}
             label="Organisation"
           />

src/components/userContext/SelectUnit.tsx

@@ -1,48 +1,18 @@
-import { type ReactNode } from "react";
-
 import { type UnitGetResponse } from "@squonk/account-server-client";
 
 import { DataUsage as DataUsageIcon, Receipt as ReceiptIcon } from "@mui/icons-material";
-import {
-  Autocomplete,
-  type AutocompleteProps,
-  Box,
-  IconButton,
-  TextField,
-  Tooltip,
-  Typography,
-} from "@mui/material";
+import { Autocomplete, type AutocompleteProps, Box, TextField, Typography } from "@mui/material";
 
 import { projectPayload, useCurrentProjectId } from "../../hooks/projectHooks";
 import { useGetVisibleUnits } from "../../hooks/useGetVisibleUnits";
 import { useSelectedOrganisation } from "../../state/organisationSelection";
 import { useSelectedUnit } from "../../state/unitSelection";
 import { PROJECT_LOCAL_STORAGE_KEY, writeToLocalStorage } from "../../utils/next/localStorage";
 import { getErrorMessage } from "../../utils/next/orvalError";
+import { Adornment } from "./Adornment";
 import { type PermissionLevelFilter } from "./filter";
 import { ItemIcons } from "./ItemIcons";
 
-interface AdornmentProps {
-  title: string;
-  href: string;
-  children: ReactNode;
-}
-
-const Adornment = ({ title, href, children }: AdornmentProps) => (
-  <Tooltip title={title}>
-    <span>
-      <IconButton
-        href={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}${href}`}
-        size="small"
-        sx={{ p: "1px" }}
-        target="_blank"
-      >
-        {children}
-      </IconButton>
-    </span>
-  </Tooltip>
-);
-
 export interface SelectUnitProps
   extends Omit<AutocompleteProps<UnitGetResponse, false, false, false>, "options" | "renderInput"> {
   userFilter: PermissionLevelFilter;