some permission changes

the team permission in the global state was coming back empty, so am now retrieving the team permissions for file uploads in grain transacitons, also adjusted the bin visualizer to disable the slider and inventory button when they do not have write permissions so they cant even open the transaction window, this should help prevent a case in the possible future where we allow bin transactions to have uploadable files from having a bin shared to them and uploading a file but not being able to create the transaction that it would be linked to thus causing the file to be uploaded to digital ocean, but not connected in our backend to anything

src/bin/BinVisualizerV2.tsx

@@ -1434,6 +1434,7 @@ export default function BinVisualizer(props: Props) {
 
   const controls = () => {
     if (bin.settings.inventory?.empty === true) return null;
+    const canEdit = permissions ? permissions.includes(pond.Permission.PERMISSION_WRITE) : false;
     return (
       <Box
         height={1}
@@ -1447,12 +1448,13 @@ export default function BinVisualizer(props: Props) {
           <React.Fragment>
             <Box display="flex" height={isMobile ? 35 : 40} marginBottom={1}>
               <IconButton
+                disabled={!canEdit}
                 onClick={() => {
                   setGrainUpdate(true);
                 }}
                 style={{
                   margin: "auto",
-                  backgroundColor: "gold",
+                  backgroundColor: canEdit ? "gold" : "grey",
                   color: "black",
                   height: "100%",
                   width: isMobile ? 35 : 40
@@ -1468,6 +1470,7 @@ export default function BinVisualizer(props: Props) {
               alignContent="flex-end">
               {fillPercentage !== null && (
                 <Slider
+                  disabled={!canEdit}
                   orientation="vertical"
                   value={fillPercentage}
                   classes={{
@@ -1477,7 +1480,7 @@ export default function BinVisualizer(props: Props) {
                   //   thumb: isMobile ? classes.mobileSliderThumb : classes.sliderThumb,
                     valueLabel: classes.sliderValLabel,
                   }}
-                  style={{ height: "100%", color: sliderColour }}
+                  style={{ height: "100%", color: canEdit ? sliderColour : "gray" }}
                   min={0}
                   max={100}
                   valueLabelDisplay="auto"

src/common/FileUploads/FileSelector.tsx

@@ -9,7 +9,7 @@ import {
   Typography
 } from "@mui/material";
 import { useFileControllerAPI, useGlobalState } from "providers";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ErrorIcon from "@mui/icons-material/Error";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import { getThemeType } from "theme";
@@ -25,6 +25,7 @@ interface Props {
   uniqueID?: string;
   keys?: string[];
   types?: string[];
+  hasFilePermission: boolean;
 }
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -53,8 +54,8 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 export default function FileSelector(props: Props) {
-  const { uploadEnd, uploadStart, uniqueID, toAttach, keys, types } = props;
-  const [{ userTeamPermissions }] = useGlobalState();
+  const { uploadEnd, uploadStart, uniqueID, toAttach, keys, types, hasFilePermission } = props;
+  // const [{ userTeamPermissions }] = useGlobalState();
   const [fileList, setFileList] = useState<FileList | undefined>();
   const classes = useStyles();
   const fileAPI = useFileControllerAPI();
@@ -142,7 +143,7 @@ export default function FileSelector(props: Props) {
             disabled={
               uploading ||
               (!uploadFailed && fileID !== "") ||
-              !userTeamPermissions.includes(pond.Permission.PERMISSION_FILE_MANAGEMENT)
+              !hasFilePermission
             }
             multiple={false}
             name={uniqueID || "fileInput"}
@@ -163,7 +164,7 @@ export default function FileSelector(props: Props) {
           <label
             htmlFor={uniqueID || "fileInput"}
             className={
-              userTeamPermissions.includes(pond.Permission.PERMISSION_FILE_MANAGEMENT)
+              hasFilePermission
                 ? classes.fileSelect
                 : classes.fileDisabled
             }>

src/common/FileUploads/FileUploader.tsx

@@ -10,19 +10,22 @@ interface Props {
   uploadEnd: (fileID?: string, fileName?: string) => void;
   keys?: string[];
   types?: string[];
+  hasFilePermission: boolean
 }
 
 export default function FileUploader(props: Props) {
-  const { uploadStart, uploadEnd, startingSelectorCount, toAttach, keys, types } = props;
+  const { uploadStart, uploadEnd, startingSelectorCount, toAttach, keys, types, hasFilePermission } = props;
   const [numSelectors, setNumSelectors] = useState(startingSelectorCount || 1);
   const [selectors, setSelectors] = useState<JSX.Element[]>([]);
 
+
   useEffect(() => {
     let currentSelectors: JSX.Element[] = [];
     for (let i = 0; i < numSelectors; i++) {
       currentSelectors.push(
         <Box key={i} margin={2}>
           <FileSelector
+            hasFilePermission={hasFilePermission}
             toAttach={toAttach}
             keys={keys}
             types={types}

src/grain/GrainTransaction.tsx

@@ -14,8 +14,8 @@ import {
 import FileUploader from "common/FileUploads/FileUploader";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import SearchSelect, { Option } from "common/SearchSelect";
-import { useMobile } from "hooks";
-import { Bin, Field, Contract, GrainBag } from "models";
+import { useMobile, useUserAPI } from "hooks";
+import { Bin, Field, Contract, GrainBag, teamScope } from "models";
 // import { Contract } from "models/Contract";
 // import { GrainBag } from "models/GrainBag";
 import moment from "moment";
@@ -66,7 +66,7 @@ export default function GrainTransaction(props: Props) {
   const binAPI = useBinAPI();
   const grainBagAPI = useGrainBagAPI();
   const fieldAPI = useFieldAPI();
-  const [{ as }] = useGlobalState();
+  const [{ as, user }] = useGlobalState();
   const { openSnack } = useSnackbar();
   const [grainChangeDialog, setGrainChangeDialog] = useState(false);
   const [grainEntry, setGrainEntry] = useState("0");
@@ -79,6 +79,8 @@ export default function GrainTransaction(props: Props) {
   const [fieldsLoading, setFieldsLoading] = useState(false);
   const [uploadingFile, setUploadingFile] = useState(false);
   const [imageIDs, setImageIDs] = useState<string[]>([]);
+  const userAPI = useUserAPI();
+  const [filePermission, setFilePermission] = useState(false);
 
   const closeDialogs = (confirmed: boolean, newTransaction?: pond.Transaction) => {
     close();
@@ -91,6 +93,20 @@ export default function GrainTransaction(props: Props) {
     }
   };
 
+  useEffect(()=>{
+    //if they are viewing as a team make sure they have file permission to the team for the transactions
+    if(as){
+      let scope = teamScope(as)
+      userAPI.getUser(user.id(), scope).then(resp => {
+        setFilePermission(resp.permissions.includes(pond.Permission.PERMISSION_FILE_MANAGEMENT))
+      });
+    }else{
+      //if they are not viewing as a team and they were able to open this window, they have edit permission to at least the one object they started the change with
+      //a transaction is a new object that permissions will not exist for yet so just allow them to do it
+      setFilePermission(true)
+    }
+  },[as])
+
   //get the possible destinations/options (grainbags and bins)
   useEffect(() => {
     if (open) {
@@ -527,6 +543,7 @@ export default function GrainTransaction(props: Props) {
         <Box marginTop={1}>
           {allowAttachmentUploads && (
             <FileUploader
+              hasFilePermission={filePermission}
               uploadEnd={fileID => {
                 if (fileID) {
                   let ids = imageIDs;