#299 fix subject autofill

data-browser/src/components/NewInstanceButton/useDefaultNewInstanceHandler.tsx

@@ -33,7 +33,7 @@ export function useDefaultNewInstanceHandler(klass: string, parent?: string) {
       switch (klass) {
         case classes.chatRoom: {
           createResourceAndNavigate('chatRoom', {
-            [properties.name]: 'Untitled   ChatRoom',
+            [properties.name]: 'Untitled ChatRoom',
             [properties.isA]: [classes.chatRoom],
           });
           break;

data-browser/src/components/forms/NewForm/index.tsx

@@ -33,7 +33,7 @@ export const NewFormFullPage = ({
 
   const { subjectErr, subjectValue, setSubjectValue, resource } = useNewForm(
     klass,
-    subject!,
+    subject,
     setSubject,
     parentSubject,
   );

data-browser/src/components/forms/NewForm/useNewForm.ts

@@ -13,25 +13,25 @@ const resourseOpts = { newResource: true };
 /** Shared logic for NewForm components. */
 export const useNewForm = (
   klass: Resource,
-  subject: string,
+  subject: string | undefined,
   setSubject: (v: string) => void,
   parent?: string,
 ) => {
+  const store = useStore();
   // TODO: Don't push to history, but replace, because currenlty back is broken
   const [klassShortname] = useString(klass, properties.shortname);
+  const [subjectValue, setSubjectValue] = useState<string>(() => {
+    if (subject === undefined) {
+      return store.createSubject(klassShortname);
+    }
+
+    return subject;
+  });
 
   const [subjectErr, setSubjectErr] = useState<Error | undefined>(undefined);
-  const store = useStore();
-  const [subjectValue, setSubjectValue] = useState<string>(subject.toString());
-  const resource = useResource(subject.toString(), resourseOpts);
+  const resource = useResource(subjectValue, resourseOpts);
   const [_, setParent] = useString(resource, properties.parent);
 
-  useEffect(() => {
-    if (subject === undefined) {
-      setSubject(store.createSubject(klassShortname));
-    }
-  }, [subject]);
-
   useEffect(() => {
     setParent(parent);
   }, [parent]);
@@ -47,6 +47,10 @@ export const useNewForm = (
   /** Changes the URL of a subject. Updates the store */
   // Should be debounced as it is quite expensive, but getting that to work turned out to be really hard
   useEffect(() => {
+    if (!defferedSubjectValue) {
+      return;
+    }
+
     const oldSubject = resource.getSubject();
 
     if (oldSubject === defferedSubjectValue) {

data-browser/src/helpers/navigation.tsx

@@ -31,15 +31,15 @@ export function constructOpenURL(
 export function searchURL(query: string, scope?: string): string {
   return constructURL(paths.search, {
     query,
-    ...(parent ? { queryscope: scope } : {}),
+    ...(scope ? { queryscope: scope } : {}),
   });
 }
 
 type setFunc = (latestValue: string | undefined) => void;
 
 /** Returns a getter and a setter for query parameters */
 export function useQueryString(key: string): [string | undefined, setFunc] {
-  const [params, set] = useSearchParams(key);
+  const [params, set] = useSearchParams();
 
   const customSet = (subject: string | undefined) => {
     if (subject === undefined) {

data-browser/src/routes/NewRoute.tsx

@@ -25,10 +25,12 @@ function New(): JSX.Element {
   const [classSubject] = useQueryString('classSubject');
   const [parentSubject] = useQueryString('parentSubject');
   // For selecting a class
-  const [classInput, setClassInput] = useState<string | undefined>(undefined);
+  const [classInputValue, setClassInputValue] = useState<string | undefined>(
+    undefined,
+  );
   const [error, setError] = useState<Error | undefined>(undefined);
   const navigate = useNavigate();
-  const classFull = useResource(classInput);
+  const classFull = useResource(classInputValue);
   const [className] = useString(classFull, urls.properties.shortname);
   const { drive } = useSettings();
 
@@ -46,14 +48,14 @@ function New(): JSX.Element {
   ];
 
   function handleClassSet(e) {
-    if (!classInput) {
+    if (!classInputValue) {
       setError(new Error('Please select a class'));
 
       return;
     }
 
     e.preventDefault();
-    navigate(newURL(classInput, calculatedParent));
+    navigate(newURL(classInputValue, calculatedParent));
   }
 
   const onUploadComplete = useCallback(
@@ -84,18 +86,18 @@ function New(): JSX.Element {
           </h1>
           <div>
             <ResourceSelector
-              setSubject={setClassInput}
-              value={classInput}
+              setSubject={setClassInputValue}
+              value={classInputValue}
               error={error}
               setError={setError}
               classType={urls.classes.class}
             />
           </div>
           <Row wrapItems>
-            {classInput && (
+            {classInputValue && (
               <Button onClick={handleClassSet}>new {className}</Button>
             )}
-            {!classInput && (
+            {!classInputValue && (
               <>
                 {buttons.map(classType => (
                   <WrappedButton

data-browser/tests/e2e.spec.ts

@@ -422,12 +422,11 @@ test.describe('data-browser', async () => {
     await signIn(page);
     await page.locator(`${currentDriveTitle} > text=localhost`);
 
-    const dropdownId = await page
-      .locator(sideBarDriveSwitcher)
-      .getAttribute('aria-controls');
-
     await page.click(sideBarDriveSwitcher);
     // temp disable for trailing slash
+    // const dropdownId = await page
+    //   .locator(sideBarDriveSwitcher)
+    //   .getAttribute('aria-controls');
     // await page.click(`[id="${dropdownId}"] >> text=Atomic Data`);
     // await expect(page.locator(currentDriveTitle)).toHaveText('Atomic Data');
 
@@ -469,10 +468,15 @@ test.describe('data-browser', async () => {
     await signIn(page);
     await newDrive(page);
     await newResource('class', page);
+    const shortnameInput = '[data-test="input-shortname"]';
     // Try entering a wrong slug
-    await page.click('[data-test="input-shortname"]');
+    await page.click(shortnameInput);
     await page.keyboard.type('not valid');
     await expect(page.locator('text=Not a valid slug')).toBeVisible();
+    await page.locator(shortnameInput).fill('');
+    await page.keyboard.type('is-valid');
+    await expect(page.locator('text=Not a valid slug')).not.toBeVisible();
+
     // Add a new property
     await page.click(
       '[placeholder="Select a property or enter a property URL..."]',
@@ -490,7 +494,26 @@ test.describe('data-browser', async () => {
     // Dropdown select
     await page.click('[data-test="input-recommends-add-resource"]');
     await page.locator('text=append').click();
-    await expect(page.locator('text=https://atomicdata.dev')).not.toBeVisible();
+    await expect(
+      page.locator(
+        '[data-test="input-recommends"] >> text=https://atomicdata.dev',
+      ),
+    ).not.toBeVisible();
+
+    // Try to save without a description
+    page.locator('button:has-text("Save")').click();
+    await expect(
+      page.locator(
+        'text=Property https://atomicdata.dev/properties/description missing',
+      ),
+    ).toBeVisible();
+
+    // Add a description
+    await page.click('textarea[name="yamdeContent"]');
+    await page.keyboard.type('This is a test class');
+    await page.click('button:has-text("Save")');
+
+    await expect(page.locator('text=Resource Saved')).toBeVisible();
   });
 
   test('sidebar subresource', async ({ page }) => {