Improve error message for model registration

frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx

@@ -19,31 +19,45 @@ import { Link } from 'react-router-dom';
 import FormSection from '~/components/pf-overrides/FormSection';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { modelRegistryUrl, registeredModelUrl } from '~/pages/modelRegistry/screens/routeUtils';
+import { ModelRegistryContext } from '~/concepts/modelRegistry/context/ModelRegistryContext';
+import { useAppSelector } from '~/redux/hooks';
 import { useRegisterModelData } from './useRegisterModelData';
 import { isNameValid, isRegisterModelSubmitDisabled, registerModel } from './utils';
 import RegistrationCommonFormSections from './RegistrationCommonFormSections';
-import { useRegistrationCommonState } from './useRegistrationCommonState';
 import PrefilledModelRegistryField from './PrefilledModelRegistryField';
 import RegistrationFormFooter from './RegistrationFormFooter';
 import { MR_CHARACTER_LIMIT } from './const';
 
 const RegisterModel: React.FC = () => {
   const { modelRegistry: mrName } = useParams();
   const navigate = useNavigate();
-
-  const { isSubmitting, submitError, setSubmitError, handleSubmit, apiState, author } =
-    useRegistrationCommonState();
-
+  const { apiState } = React.useContext(ModelRegistryContext);
+  const author = useAppSelector((state) => state.user || '');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [submitError, setSubmitError] = React.useState<Error | undefined>(undefined);
   const [formData, setData] = useRegisterModelData();
   const isModelNameValid = isNameValid(formData.modelName);
   const isSubmitDisabled = isSubmitting || isRegisterModelSubmitDisabled(formData);
   const { modelName, modelDescription } = formData;
 
-  const onSubmit = () =>
-    handleSubmit(async () => {
-      const { registeredModel } = await registerModel(apiState, formData, author);
+  const [errorName, setErrorName] = React.useState<string | undefined>(undefined);
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    setSubmitError(undefined);
+    const {
+      data: { registeredModel, modelVersion, modelArtifact },
+      errors,
+    } = await registerModel(apiState, formData, author);
+    if (registeredModel && modelVersion && modelArtifact) {
       navigate(registeredModelUrl(registeredModel.id, mrName));
-    });
+    } else if (Object.keys(errors).length > 0) {
+      setIsSubmitting(false);
+      const resourceName = Object.keys(errors)[0];
+      setErrorName(resourceName);
+      setSubmitError(errors[resourceName]);
+    }
+  };
   const onCancel = () => navigate(modelRegistryUrl(mrName));
 
   return (
@@ -117,8 +131,10 @@ const RegisterModel: React.FC = () => {
         setSubmitError={setSubmitError}
         isSubmitDisabled={isSubmitDisabled}
         isSubmitting={isSubmitting}
-        onSubmit={onSubmit}
+        formData={formData}
+        onSubmit={handleSubmit}
         onCancel={onCancel}
+        errorName={errorName}
       />
     </ApplicationsPage>
   );

frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModelErrors.tsx

@@ -0,0 +1,118 @@
+import { Alert, AlertActionCloseButton, StackItem } from '@patternfly/react-core';
+import React from 'react';
+import { RegisterModelFormData } from './useRegisterModelData';
+
+type RegisterModelErrorProp<D extends RegisterModelFormData> = {
+  submitLabel: string;
+  submitError: Error;
+  setSubmitError: (e?: Error) => void;
+  formData: D;
+  errorName?: string;
+};
+
+const RegisterModelErrors = <D extends RegisterModelFormData>({
+  submitLabel,
+  submitError,
+  setSubmitError,
+  errorName,
+  formData,
+}: RegisterModelErrorProp<D>): React.ReactElement => {
+  if (submitLabel === 'Register model' && errorName === 'modelVersion') {
+    return (
+      <>
+        <StackItem>
+          <Alert isInline variant="success" title={`${formData.modelName} model registered`} />
+        </StackItem>
+        <StackItem>
+          <Alert
+            isInline
+            variant="danger"
+            title={`Failed to register ${formData.versionName} version`}
+            actionClose={<AlertActionCloseButton onClose={() => setSubmitError(undefined)} />}
+          >
+            {submitError.message}
+          </Alert>
+        </StackItem>
+      </>
+    );
+  }
+
+  if (submitLabel === 'Register new version' && errorName === 'modelVersion') {
+    return (
+      <StackItem>
+        <Alert
+          isInline
+          variant="danger"
+          title={`Failed to register ${formData.versionName} version`}
+          data-testid="versionFailureAlert"
+          actionClose={<AlertActionCloseButton onClose={() => setSubmitError(undefined)} />}
+        >
+          {submitError.message}
+        </Alert>
+      </StackItem>
+    );
+  }
+
+  if (submitLabel === 'Register model' && errorName === 'modelArtifact') {
+    return (
+      <>
+        <StackItem>
+          <Alert
+            isInline
+            variant="success"
+            title={`${formData.modelName} model and ${formData.versionName} version registered`}
+          />
+        </StackItem>
+        <StackItem>
+          <Alert
+            isInline
+            variant="danger"
+            title={`Failed to create artifact for ${formData.versionName} version`}
+            actionClose={<AlertActionCloseButton onClose={() => setSubmitError(undefined)} />}
+          >
+            {submitError.message}
+          </Alert>
+        </StackItem>
+      </>
+    );
+  }
+
+  if (submitLabel === 'Register new version' && errorName === 'modelArtifact') {
+    return (
+      <>
+        <StackItem>
+          <Alert
+            isInline
+            variant="success"
+            title={`${formData.versionName} version registered
+`}
+          />
+        </StackItem>
+        <StackItem>
+          <Alert
+            isInline
+            variant="danger"
+            title={`Failed to create artifact for ${formData.versionName} version`}
+            actionClose={<AlertActionCloseButton onClose={() => setSubmitError(undefined)} />}
+          >
+            {submitError.message}
+          </Alert>
+        </StackItem>
+      </>
+    );
+  }
+
+  return (
+    <StackItem>
+      <Alert
+        isInline
+        variant="danger"
+        title={`Failed to register ${formData.modelName} model`}
+        actionClose={<AlertActionCloseButton onClose={() => setSubmitError(undefined)} />}
+      >
+        {submitError.message}
+      </Alert>
+    </StackItem>
+  );
+};
+export default RegisterModelErrors;

frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx

@@ -16,25 +16,27 @@ import ApplicationsPage from '~/pages/ApplicationsPage';
 import { modelRegistryUrl, registeredModelUrl } from '~/pages/modelRegistry/screens/routeUtils';
 import useRegisteredModels from '~/concepts/modelRegistry/apiHooks/useRegisteredModels';
 import { filterLiveModels } from '~/concepts/modelRegistry/utils';
+import { ModelRegistryContext } from '~/concepts/modelRegistry/context/ModelRegistryContext';
+import { useAppSelector } from '~/redux/hooks';
 import { useRegisterVersionData } from './useRegisterModelData';
 import { isRegisterVersionSubmitDisabled, registerVersion } from './utils';
 import RegistrationCommonFormSections from './RegistrationCommonFormSections';
-import { useRegistrationCommonState } from './useRegistrationCommonState';
 import PrefilledModelRegistryField from './PrefilledModelRegistryField';
 import RegistrationFormFooter from './RegistrationFormFooter';
 import RegisteredModelSelector from './RegisteredModelSelector';
 import { usePrefillRegisterVersionFields } from './usePrefillRegisterVersionFields';
 
 const RegisterVersion: React.FC = () => {
   const { modelRegistry: mrName, registeredModelId: prefilledRegisteredModelId } = useParams();
-
   const navigate = useNavigate();
-
-  const { isSubmitting, submitError, setSubmitError, handleSubmit, apiState, author } =
-    useRegistrationCommonState();
-
+  const { apiState } = React.useContext(ModelRegistryContext);
+  const author = useAppSelector((state) => state.user || '');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [formData, setData] = useRegisterVersionData(prefilledRegisteredModelId);
   const isSubmitDisabled = isSubmitting || isRegisterVersionSubmitDisabled(formData);
+  const [submitError, setSubmitError] = React.useState<Error | undefined>(undefined);
+  const [errorName, setErrorName] = React.useState<string | undefined>(undefined);
+
   const { registeredModelId } = formData;
 
   const [allRegisteredModels, loadedRegisteredModels, loadRegisteredModelsError] =
@@ -48,15 +50,27 @@ const RegisterVersion: React.FC = () => {
       setData,
     });
 
-  const onSubmit = () => {
+  const handleSubmit = async () => {
     if (!registeredModel) {
       return; // We shouldn't be able to hit this due to form validation
     }
-    handleSubmit(async () => {
-      await registerVersion(apiState, registeredModel, formData, author);
+    setIsSubmitting(true);
+    setSubmitError(undefined);
+    const {
+      data: { modelVersion, modelArtifact },
+      errors,
+    } = await registerVersion(apiState, registeredModel, formData, author);
+
+    if (modelVersion && modelArtifact) {
       navigate(registeredModelUrl(registeredModel.id, mrName));
-    });
+    } else if (Object.keys(errors).length > 0) {
+      const resourceName = Object.keys(errors)[0];
+      setErrorName(resourceName);
+      setSubmitError(errors[resourceName]);
+      setIsSubmitting(false);
+    }
   };
+
   const onCancel = () =>
     navigate(
       prefilledRegisteredModelId && registeredModel
@@ -128,11 +142,13 @@ const RegisterVersion: React.FC = () => {
       </PageSection>
       <RegistrationFormFooter
         submitLabel="Register new version"
+        errorName={errorName}
         submitError={submitError}
         setSubmitError={setSubmitError}
         isSubmitDisabled={isSubmitDisabled}
+        formData={{ modelName: '', modelDescription: '', ...formData }}
         isSubmitting={isSubmitting}
-        onSubmit={onSubmit}
+        onSubmit={handleSubmit}
         onCancel={onCancel}
       />
     </ApplicationsPage>

frontend/src/pages/modelRegistry/screens/RegisterModel/RegistrationFormFooter.tsx

@@ -1,46 +1,41 @@
 import React from 'react';
-import {
-  PageSection,
-  Stack,
-  StackItem,
-  Alert,
-  AlertActionCloseButton,
-  ActionGroup,
-  Button,
-} from '@patternfly/react-core';
+import { PageSection, Stack, StackItem, ActionGroup, Button } from '@patternfly/react-core';
+import { RegisterModelFormData } from './useRegisterModelData';
+import RegisterModelErrors from './RegisterModelErrors';
 
-type RegistrationFormFooterProps = {
+type RegistrationFormFooterProps<D extends RegisterModelFormData> = {
   submitLabel: string;
   submitError?: Error;
   setSubmitError: (e?: Error) => void;
+  formData: D;
   isSubmitDisabled: boolean;
   isSubmitting: boolean;
   onSubmit: () => void;
   onCancel: () => void;
+  errorName?: string;
 };
 
-const RegistrationFormFooter: React.FC<RegistrationFormFooterProps> = ({
+const RegistrationFormFooter = <D extends RegisterModelFormData>({
   submitLabel,
   submitError,
   setSubmitError,
   isSubmitDisabled,
+  formData,
   isSubmitting,
   onSubmit,
   onCancel,
-}) => (
+  errorName,
+}: RegistrationFormFooterProps<D>): React.ReactNode => (
   <PageSection stickyOnBreakpoint={{ default: 'bottom' }} variant="light">
     <Stack hasGutter>
       {submitError && (
-        <StackItem>
-          <Alert
-            isInline
-            variant="danger"
-            title={submitError.name}
-            actionClose={<AlertActionCloseButton onClose={() => setSubmitError(undefined)} />}
-          >
-            {submitError.message}
-          </Alert>
-        </StackItem>
+        <RegisterModelErrors
+          submitLabel={submitLabel}
+          submitError={submitError}
+          setSubmitError={setSubmitError}
+          formData={formData}
+          errorName={errorName}
+        />
       )}
       <StackItem>
         <ActionGroup>