Merge branch 'develop'

src/api/client/createClient.ts

@@ -28,6 +28,8 @@ export const createClient = ({
   const client = new ApolloClient({
     name: 'cord-field',
     version: process.env.RAZZLE_GIT_HASH,
+    // This should be the default, but it doesn't appear that the library can detect the environment correctly.
+    connectToDevTools: process.env.NODE_ENV !== 'production',
     ssrMode: !!ssr,
     cache: createCache(),
     link: ApolloLink.from([

src/components/Icons/SvgSkeleton.tsx

@@ -0,0 +1,32 @@
+import { Skeleton, SvgIconProps } from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
+import { forwardRef } from 'react';
+
+/**
+ * Add skeleton effect to SVG icons.
+ * @example
+ * <SvgIcon component={SvgSkeleton} />
+ */
+export const SvgSkeleton = forwardRef<SVGSVGElement, SvgIconProps>(
+  function SvgSkeleton(props, ref) {
+    const theme = useTheme();
+    return (
+      <Skeleton
+        component="svg"
+        variant="circular"
+        {...props}
+        ref={ref}
+        sx={{
+          borderRadius: 'initial',
+          // Move background color to foreground color
+          backgroundColor: 'transparent',
+          color: alpha(
+            theme.palette.text.primary,
+            theme.palette.mode === 'light' ? 0.11 : 0.13
+          ),
+          '&>*': { visibility: 'initial' },
+        }}
+      />
+    );
+  }
+);

src/components/Sensitivity/SensitivityIcon.tsx

@@ -1,23 +1,8 @@
-import { VerifiedUser } from '@mui/icons-material';
-import { SvgIconProps, Tooltip } from '@mui/material';
-import { grey } from '@mui/material/colors';
-import { makeStyles } from 'tss-react/mui';
+import { GppGood, GppMaybe, Shield } from '@mui/icons-material';
+import { SvgIcon, SvgIconProps, Tooltip } from '@mui/material';
+import { forwardRef } from 'react';
 import { Sensitivity as SensitivityType } from '~/api/schema.graphql';
-
-const useStyles = makeStyles()(({ palette }) => ({
-  // eslint-disable-next-line tss-unused-classes/unused-classes
-  Low: {
-    color: grey[400],
-  },
-  // eslint-disable-next-line tss-unused-classes/unused-classes
-  Medium: {
-    color: palette.warning.main,
-  },
-  // eslint-disable-next-line tss-unused-classes/unused-classes
-  High: {
-    color: palette.error.main,
-  },
-}));
+import { SvgSkeleton } from '../Icons/SvgSkeleton';
 
 export interface SensitivityIconProps extends SvgIconProps {
   value?: SensitivityType;
@@ -32,14 +17,42 @@ export const SensitivityIcon = ({
   disableTooltip,
   ...rest
 }: SensitivityIconProps) => {
-  const { classes, cx } = useStyles();
-
+  const Icon = value && !loading ? icons[value] : Loading;
   return (
     <Tooltip title={!loading && !disableTooltip ? `${value} Sensitivity` : ''}>
-      <VerifiedUser
-        className={cx(!loading && value ? classes[value] : null, className)}
-        {...rest}
-      />
+      <Icon {...rest} />
     </Tooltip>
   );
 };
+
+const Loading = forwardRef<SVGSVGElement, SvgIconProps>(
+  function LoadingSensitivity(props, ref) {
+    return <Shield component={SvgSkeleton} {...props} ref={ref} />;
+  }
+);
+
+const High = forwardRef<SVGSVGElement, SvgIconProps>(function HighSensitivity(
+  props,
+  ref
+) {
+  return <GppMaybe color="error" {...props} ref={ref} />;
+});
+
+const Medium = forwardRef<SVGSVGElement, SvgIconProps>(
+  function MediumSensitivity(props, ref) {
+    return (
+      <SvgIcon color="warning" {...props} ref={ref}>
+        <path d="M12 2 4 5v6a11.5 11.5 0 0 0 1.5 5.8 12 12 0 0 0 3.7 4A9.7 9.7 0 0 0 12 22a8.7 8.7 0 0 0 3.5-1.7 10.5 10.5 0 0 0 3-3.5A12.1 12.1 0 0 0 20 11V5Zm0 5 5 5-5 5-5-5zm0 2.8L9.8 12l2.2 2.2 2.2-2.2z" />
+      </SvgIcon>
+    );
+  }
+);
+
+const Low = forwardRef<SVGSVGElement, SvgIconProps>(function LowSensitivity(
+  props,
+  ref
+) {
+  return <GppGood color="secondary" {...props} ref={ref} />;
+});
+
+const icons = { High, Medium, Low };

src/scenes/Projects/Members/Create/CreateProjectMember.tsx

@@ -7,7 +7,6 @@ import { addItemToList } from '~/api';
 import {
   CreateProjectMember as CreateProjectMemberInput,
   RoleLabels,
-  RoleList,
 } from '~/api/schema.graphql';
 import { labelFrom } from '~/common';
 import {
@@ -98,7 +97,8 @@ export const CreateProjectMember = ({
             <AutocompleteField
               disabled={!canRead || !userRoles}
               multiple
-              options={RoleList}
+              options={userRoles || []}
+              noOptionsText="No roles assignable to this person"
               getOptionLabel={labelFrom(RoleLabels)}
               name="roles"
               label="Roles"
@@ -109,9 +109,6 @@ export const CreateProjectMember = ({
                     : `You cannot read this person's roles`
                   : 'Select a person first'
               }
-              getOptionDisabled={(option) =>
-                !!userRoles && !userRoles.includes(option)
-              }
               variant="outlined"
             />
           </>