Improve labels for errored properties

Author: joepio

data-browser/src/components/forms/ResourceField.tsx

@@ -9,6 +9,14 @@ import { AtomicLink } from '../AtomicLink';
 import { useState } from 'react';
 import { Button } from '../Button';
 
+function generateErrorPropName(prop: Property): string {
+  if (prop.error) {
+    const endOfPath = prop.subject.split('/').pop();
+
+    return endOfPath || 'error';
+  } else return prop.shortname;
+}
+
 /** An input field for a single Property, rendered with a Label. Has a loading state. */
 function ResourceField({
   handleDelete,
@@ -32,7 +40,10 @@ function ResourceField({
     );
   }
 
-  const label = labelProp || property.shortname;
+  const label =
+    labelProp || property.error
+      ? generateErrorPropName(property)
+      : property.shortname;
 
   if (property.isDynamic && collapsedDynamic) {
     return (
@@ -88,7 +99,7 @@ function HelperText({ text, link }: HelperTextProps) {
   return (
     <HelperTextWraper>
       <Markdown text={text} />
-      <AtomicLink subject={link}>Go to Property</AtomicLink>
+      <AtomicLink subject={link}>{link}</AtomicLink>
     </HelperTextWraper>
   );
 }

data-browser/src/components/forms/ResourceForm.tsx

@@ -173,8 +173,8 @@ export function ResourceForm({
     <form about={resource.getSubject()} onSubmit={save}>
       {classSubject && klass.error && (
         <ErrMessage>
-          Error in class. {klass.error.message}. You can still edit the
-          resource, though.
+          Error in class, so this form could miss properties. You can still edit
+          the resource, though. Error message: `{klass.error.message}`
         </ErrMessage>
       )}
       {canWriteErr && <ErrMessage>Cannot save edits: {canWriteErr}</ErrMessage>}