Kbdev 1488 no nav on error

.gitignore

@@ -28,9 +28,6 @@ testem.log
 .DS_Store
 Thumbs.db
 
-*.css
-!src/_theme.css
-/src/index.css
 /jsdoc
 /build
 

.storybook/preview.css

@@ -0,0 +1,3 @@
+html, body, #storybook-root {
+  height: 100%;
+}

.storybook/preview.tsx

@@ -1,3 +1,5 @@
+import './preview.css';
+
 import React, { Suspense } from 'react';
 import ThemeProvider from '../src/theme';
 import { initialize, mswLoader, getWorker } from 'msw-storybook-addon'
@@ -15,6 +17,7 @@ import { SnackbarProvider } from 'notistack';
 import { AuthContext, AuthContextState } from '../src/components/Auth';
 import { expect, waitFor } from 'storybook/test';
 import { CircularProgress } from '@mui/material';
+import ErrorView from '../src/views/ErrorView';
 
 function wrapAsResponse<T extends Record<string, any> | any[]>(maybeResponse: T | HttpResponse<T>): HttpResponse<T> {
   if (maybeResponse instanceof Response) {
@@ -39,7 +42,12 @@ export const http = {
         return wrapAsResponse(resolver(body, info));
       })
     },
-    query: (resolver: (body: QueryBody) => (HttpResponse<Partial<GeneralRecordType>[]> | Partial<GeneralRecordType>[])) => http.gkb.post('/api/query', resolver)
+    delete: (url: `/api/${string}`, resolver: (info: ResponseResolverInfo<any>) => AllowedResponse) => {
+      return httpBase.delete(`${window._env_.API_BASE_URL}${url}`, async (info) => {
+        return wrapAsResponse(resolver(info));
+      })
+    },
+    query: (resolver: (body: QueryBody) => (HttpResponse<Partial<GeneralRecordType>> | HttpResponse<{ message?: string }> | Partial<GeneralRecordType>[])) => http.gkb.post('/api/query', resolver)
   }
 }
 
@@ -141,9 +149,11 @@ export interface ViewPreviewType {
 function View() {
   return (
       <div style={{height: '100%', minWidth: '300px'}}>
+        <ErrorView>
           <Suspense fallback={(<CircularProgress color="secondary" />)}>
             <AppRoutes />
           </Suspense>
+        </ErrorView>
       </div>
   )
 }

src/components/DetailDrawer/index.tsx

@@ -54,6 +54,7 @@ interface DetailDrawerProps {
   /** Ontology to be displayed in drawer. */
   node?: GeneralRecordType;
   onClose?: () => void;
+  error?: ReactNode;
 }
 
 /**
@@ -65,6 +66,7 @@ function DetailDrawer(props: DetailDrawerProps) {
     node,
     onClose,
     isEdge = false,
+    error,
   } = props;
   const auth = useAuth();
 
@@ -249,6 +251,7 @@ function DetailDrawer(props: DetailDrawerProps) {
             <CloseIcon />
           </IconButton>
         </div>
+        {error}
         <Divider />
         {otherProps}
         <ListItem

src/components/RecordForm/__tests__/index.test.tsx

@@ -66,7 +66,6 @@ describe('RecordForm', () => {
   });
 
   const onSubmitSpy = vi.fn();
-  const onErrorSpy = vi.fn();
   const onToggleStateSpy = vi.fn();
   const snackbarSpy = vi.fn();
 
@@ -78,7 +77,6 @@ describe('RecordForm', () => {
             <SnackbarProvider onEnter={snackbarSpy}>
               <RecordForm
                 modelName="User"
-                onError={onErrorSpy}
                 onSubmit={onSubmitSpy}
                 onToggleState={onToggleStateSpy}
                 title="blargh monkeys"
@@ -127,7 +125,6 @@ describe('RecordForm', () => {
             <SnackbarProvider onEnter={snackbarSpy}>
               <RecordForm
                 modelName="User"
-                onError={onErrorSpy}
                 onSubmit={onSubmitSpy}
                 onToggleState={onToggleStateSpy}
                 title="blargh monkeys"
@@ -175,7 +172,6 @@ describe('RecordForm', () => {
             <AuthContext.Provider value={auth}>
               <RecordForm
                 modelName="User"
-                onError={onErrorSpy}
                 onSubmit={onSubmitSpy}
                 onToggleState={onToggleStateSpy}
                 title="blargh monkeys"

src/components/RecordForm/index.tsx

@@ -17,6 +17,7 @@ import RecordFormStateToggle from '@/components/RecordFormStateToggle';
 import { GeneralRecordType } from '@/components/types';
 import { cleanPayload, FORM_VARIANT } from '@/components/util';
 import api from '@/services/api';
+import { ErrorMessage } from '@/services/errors';
 import schema from '@/services/schema';
 
 import { useAuth } from '../Auth';
@@ -31,7 +32,6 @@ interface RecordFormProps {
   title: string;
   /** name of class model to be displayed */
   modelName?: string;
-  onError?: (arg: { error: { name?: string; message?: string }; content: unknown }) => void;
   onSubmit?: (record?: GeneralRecordType) => void;
   onToggleState?: (newState: FORM_VARIANT | 'graph') => void;
   /** values of individual properties of passed class model */
@@ -49,7 +49,6 @@ const RecordForm = ({
   title,
   onToggleState,
   onSubmit,
-  onError,
   variant = FORM_VARIANT.VIEW,
 }: RecordFormProps) => {
   const snackbar = useSnackbar();
@@ -63,7 +62,7 @@ const RecordForm = ({
     formIsDirty, setFormIsDirty, formContent, formErrors, formHasErrors,
   } = form;
 
-  const { mutate: addNewAction, isPending: isAdding } = useMutation({
+  const { mutate: addNewAction, isPending: isAdding, error: errorAdding } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -73,11 +72,6 @@ const RecordForm = ({
       snackbar.enqueueSnackbar(`Sucessfully created the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      console.error(err);
-      snackbar.enqueueSnackbar(`Error (${err.name}) in creating the record`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -101,7 +95,7 @@ const RecordForm = ({
     }
   }, [addNewAction, formContent, formErrors, formHasErrors, modelName, setFormIsDirty, snackbar]);
 
-  const { mutate: deleteAction, isPending: isDeleting } = useMutation({
+  const { mutate: deleteAction, isPending: isDeleting, error: errorDeleting } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const { routeName } = schemaDefn.get(content);
       return api.delete(`${routeName}/${content['@rid']!.replace(/^#/, '')}`);
@@ -110,10 +104,6 @@ const RecordForm = ({
       snackbar.enqueueSnackbar(`Successfully deleted the record ${content['@rid']}`, { variant: 'success' });
       onSubmit?.();
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in deleting the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -128,7 +118,7 @@ const RecordForm = ({
     deleteAction(content);
   }, [deleteAction, formContent, modelName]);
 
-  const { mutate: updateAction, isPending: isUpdating } = useMutation({
+  const { mutate: updateAction, isPending: isUpdating, error: errorUpdating } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -138,10 +128,6 @@ const RecordForm = ({
       snackbar.enqueueSnackbar(`Successfully edited the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in editing the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -215,6 +201,9 @@ const RecordForm = ({
           )}
         </>
       )}
+      <ErrorMessage error={errorAdding}>An error occurred while creating record.</ErrorMessage>
+      <ErrorMessage error={errorDeleting}>An error occurred while deleting record.</ErrorMessage>
+      <ErrorMessage error={errorUpdating}>An error occurred while updating record.</ErrorMessage>
       <div className="record-form__action-buttons">
         {variant === FORM_VARIANT.EDIT && !formContent.deletedAt
           ? (

src/components/RecordFormDialog/index.tsx

@@ -29,7 +29,6 @@ const RecordFormDialog = (props: RecordFormDialogProps) => {
     isOpen = false,
     modelName,
     onClose,
-    onError,
     onSubmit,
     title = '',
     variant,
@@ -65,7 +64,6 @@ const RecordFormDialog = (props: RecordFormDialogProps) => {
       <DialogContent>
         <RecordForm
           modelName={modelName}
-          onError={onError}
           onSubmit={onSubmit}
           onToggleState={onToggleState}
           title={title}

src/components/StatementForm/index.stories.tsx

@@ -14,7 +14,6 @@ const meta = preview.meta({
   decorators: [withSnackbar, withAuth, withRouter],
   args: {
     title: 'blargh monkeys',
-    onError: fn(),
     onSubmit: fn(),
     value: {},
   },

src/components/StatementForm/index.tsx

@@ -24,6 +24,7 @@ import RecordFormStateToggle from '@/components/RecordFormStateToggle';
 import { GeneralRecordType } from '@/components/types';
 import { cleanPayload, FORM_VARIANT, tuple } from '@/components/util';
 import api from '@/services/api';
+import { ErrorMessage } from '@/services/errors';
 
 import CivicEvidenceLink from './CivicEvidenceLink';
 import ReviewDialog from './ReviewDialog';
@@ -33,7 +34,6 @@ const FIELD_EXCLUSIONS = ['groupRestrictions'];
 interface StatementFormProps {
   /** the title for this form */
   title: string;
-  onError?: (arg: { error: { name?: string; message?: string }; content: unknown }) => void;
   onSubmit?: (record?: GeneralRecordType) => void;
   onToggleState?: (newState: FORM_VARIANT | 'graph') => void;
   /** values of individual properties of passed class model */
@@ -50,7 +50,6 @@ const StatementForm = ({
   title,
   onToggleState,
   onSubmit,
-  onError,
   variant = FORM_VARIANT.VIEW,
 }: StatementFormProps) => {
   const params = useParams();
@@ -109,6 +108,7 @@ const StatementForm = ({
     queryKey: [`/statements/${params.rid}?neighbors=1`],
     queryFn: async ({ queryKey: [route] }) => api.get(route),
     enabled: (isempty(initialValue) && Boolean(params.rid)),
+    throwOnError: true,
   });
 
   const snackbar = useSnackbar();
@@ -208,7 +208,7 @@ const StatementForm = ({
     return updatedContent;
   }, [auth]);
 
-  const { mutate: addNewAction, isPending: isAdding } = useMutation({
+  const { mutate: addNewAction, isPending: isAdding, error: errorAdding } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -218,11 +218,6 @@ const StatementForm = ({
       snackbar.enqueueSnackbar(`Sucessfully created the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      console.error(err);
-      snackbar.enqueueSnackbar(`Error (${err.name}) in creating the record`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -242,7 +237,7 @@ const StatementForm = ({
     }
   }, [addNewAction, formContent, formErrors, formHasErrors, model.name, setFormIsDirty, snackbar, statementReviewCheck]);
 
-  const { mutate: deleteAction, isPending: isDeleting } = useMutation({
+  const { mutate: deleteAction, isPending: isDeleting, error: errorDeleting } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const { routeName } = schemaDefn.get(content);
       return api.delete(`${routeName}/${content['@rid']!.replace(/^#/, '')}`);
@@ -251,10 +246,6 @@ const StatementForm = ({
       snackbar.enqueueSnackbar(`Sucessfully deleted the record ${content['@rid']}`, { variant: 'success' });
       onSubmit?.();
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in deleting the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -265,7 +256,7 @@ const StatementForm = ({
     deleteAction(content);
   }, [deleteAction, formContent, model.name]);
 
-  const { mutate: updateAction, isPending: isUpdating } = useMutation({
+  const { mutate: updateAction, isPending: isUpdating, error: errorUpdating } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -275,10 +266,6 @@ const StatementForm = ({
       snackbar.enqueueSnackbar(`Sucessfully edited the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in editing the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -381,6 +368,9 @@ const StatementForm = ({
           modelName={model.name}
         />
       </FormContext.Provider>
+      <ErrorMessage error={errorAdding}>An error occurred while creating record.</ErrorMessage>
+      <ErrorMessage error={errorDeleting}>An error occurred while deleting record.</ErrorMessage>
+      <ErrorMessage error={errorUpdating}>An error occurred while updating record.</ErrorMessage>
       <div className="statement-form__action-buttons">
         {variant === FORM_VARIANT.EDIT && !formContent.deletedAt
           ? (

src/components/VariantForm/SteppedForm/index.tsx

@@ -30,10 +30,11 @@ interface SteppedFormProps {
   formVariant?: FORM_VARIANT;
   isLoading?: boolean;
   value?: Record<string, unknown>;
+  errors?: ReactNode;
 }
 
 const SteppedForm = ({
-  children, modelName, properties, onSubmit, className = '', value = {}, formVariant = FORM_VARIANT.NEW, onDelete, isLoading = false,
+  children, modelName, properties, onSubmit, className = '', value = {}, formVariant = FORM_VARIANT.NEW, onDelete, isLoading = false, errors,
 }: SteppedFormProps) => {
   const snackbar = useSnackbar();
   const [activeStep, setActiveStep] = useState(0);
@@ -102,6 +103,7 @@ const SteppedForm = ({
             </Step>
           );
         })}
+        {errors}
         <div className="stepped-form__actions">
           {formVariant === FORM_VARIANT.EDIT && (
           <ActionButton

src/components/VariantForm/__tests__/index.test.tsx

@@ -27,7 +27,7 @@ describe('NewVariant', () => {
       getByText, getByTestId, queryByText,
     } = render(
       <QueryClientProvider client={api.queryClient}>
-        <NewVariant onError={vi.fn()} onSubmit={vi.fn()} />
+        <NewVariant onSubmit={vi.fn()} />
       </QueryClientProvider>,
     ));
   });