Multiple roles per user (management + switching, incl. GraphQL & TS)

catalog/app/app.tsx

@@ -39,6 +39,7 @@ import * as APIConnector from 'utils/APIConnector'
 import * as GraphQL from 'utils/GraphQL'
 import { BucketCacheProvider } from 'utils/BucketCache'
 import GlobalAPI from 'utils/GlobalAPI'
+import WithGlobalDialogs from 'utils/GlobalDialogs'
 import log from 'utils/Logging'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import { PFSCookieManager } from 'utils/PFSCookieManager'
@@ -123,6 +124,7 @@ const render = () => {
       AWS.Athena.Provider,
       AWS.S3.Provider,
       Notifications.WithNotifications,
+      WithGlobalDialogs,
       Errors.ErrorBoundary,
       BucketCacheProvider,
       PFSCookieManager,

catalog/app/containers/Admin/Form.tsx

@@ -1,23 +1,27 @@
 import * as React from 'react'
-import type * as RF from 'react-final-form'
+import * as RF from 'react-final-form'
 import * as M from '@material-ui/core'
 
-export interface FieldProps {
-  errors: Record<string, React.ReactNode>
-  input: RF.FieldInputProps<string>
-  meta: RF.FieldMetaState<string>
+type ErrorMessageMap = Record<string, React.ReactNode>
+
+interface FieldOwnProps {
+  errors: ErrorMessageMap
 }
 
+export type FieldProps = FieldOwnProps & RF.FieldRenderProps<string> & M.TextFieldProps
+
 // TODO: re-use components/Form/TextField
+// XXX: extract all custom logic into a function and use MUI's TextField (and other components) explicitly
 export function Field({
   input,
   meta,
   errors,
   helperText,
   InputLabelProps,
   ...rest
-}: FieldProps & M.TextFieldProps) {
-  const error = meta.submitFailed && (meta.error || meta.submitError)
+}: FieldProps) {
+  const error =
+    meta.submitFailed && (meta.error || (!meta.dirtySinceLastSubmit && meta.submitError))
   const props = {
     error: !!error,
     helperText: error ? errors[error] || error : helperText,
@@ -37,7 +41,7 @@
 })
 
 export interface CheckboxProps {
-  errors?: Record<string, React.ReactNode>
+  errors?: ErrorMessageMap
   input?: RF.FieldInputProps<boolean>
   meta: RF.FieldMetaState<string | Symbol>
   label?: React.ReactNode
@@ -80,16 +84,12 @@
   },
 }))
 
-interface FormErrorProps {
-  errors: Record<string, React.ReactNode>
+interface FormErrorProps extends M.TypographyProps {
   error?: string
+  errors: ErrorMessageMap
 }
 
-export function FormError({
-  error,
-  errors,
-  ...rest
-}: FormErrorProps & M.TypographyProps) {
+export function FormError({ error, errors, ...rest }: FormErrorProps) {
   const classes = useFormErrorStyles()
   if (!error) return null
   return (
@@ -98,3 +98,19 @@
     </M.Typography>
   )
 }
+
+interface FormErrorAutoProps extends M.TypographyProps {
+  children: ErrorMessageMap
+}
+
+export function FormErrorAuto({ children: errors, ...props }: FormErrorAutoProps) {
+  const state = RF.useFormState({
+    subscription: {
+      error: true,
+      submitError: true,
+      submitFailed: true,
+    },
+  })
+  const error = state.submitFailed && (state.submitError || state.error)
+  return <FormError error={error} errors={errors} {...props} />
+}

catalog/app/containers/Admin/Table/untyped.js

@@ -43,7 +43,7 @@
             )}
           </M.TableCell>
         ))}
-        {withInlineActions && <M.TableCell align="right">Actions</M.TableCell>}
+        {withInlineActions && <M.TableCell align="right">&nbsp;</M.TableCell>}
       </M.TableRow>
     </M.TableHead>
   )