From 64aaa5615ba220ec95d02597e04d10574f4536e2 Mon Sep 17 00:00:00 2001
From: Oliver Dudgeon <22367286+OliverDudgeon@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:44:17 +0100
Subject: [PATCH] feat: add button to access organisation inventory page

---
 .../usage/OrganisationUserUsage.tsx           | 10 ++++--
 src/components/userContext/Adornment.tsx      | 24 +++++++++++++
 .../userContext/SelectOrganisation.tsx        | 16 ++++++++-
 src/components/userContext/SelectUnit.tsx     | 34 ++-----------------
 4 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 src/components/userContext/Adornment.tsx

diff --git a/src/components/usage/OrganisationUserUsage.tsx b/src/components/usage/OrganisationUserUsage.tsx
index 70eb39657..a828a5759 100644
--- a/src/components/usage/OrganisationUserUsage.tsx
+++ b/src/components/usage/OrganisationUserUsage.tsx
@@ -37,7 +37,8 @@ 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) },
   });
@@ -45,6 +46,7 @@ export const OrganisationUserUsage = ({ organisationId }: OrganisationUserUsageP
     { 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>;
   }
diff --git a/src/components/userContext/Adornment.tsx b/src/components/userContext/Adornment.tsx
new file mode 100644
index 000000000..0c797f843
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/userContext/SelectOrganisation.tsx b/src/components/userContext/SelectOrganisation.tsx
index 44146fdf6..a9c3658c0 100644
--- a/src/components/userContext/SelectOrganisation.tsx
+++ b/src/components/userContext/SelectOrganisation.tsx
@@ -1,6 +1,7 @@
 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";
@@ -8,6 +9,7 @@ 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"
           />
diff --git a/src/components/userContext/SelectUnit.tsx b/src/components/userContext/SelectUnit.tsx
index a923f9602..943b203d3 100644
--- a/src/components/userContext/SelectUnit.tsx
+++ b/src/components/userContext/SelectUnit.tsx
@@ -1,17 +1,7 @@
-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";
@@ -19,30 +9,10 @@ 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;