[PUI] Notes Editor UX (#8265)

* Rearrange icons

* Remove isDirty flag

- Mucks around with editor focus
- Need to revisit this

* Fix playwright test

* Fix playwright test

src/frontend/src/components/editors/NotesEditor.tsx

@@ -99,6 +99,7 @@ export default function NotesEditor({
     enabled: true
   });
 
+  // Update internal markdown data when the query data changes
   useEffect(() => {
     setMarkdown(dataQuery.data ?? '');
   }, [dataQuery.data]);
@@ -118,7 +119,8 @@ export default function NotesEditor({
             title: t`Success`,
             message: t`Notes saved successfully`,
             color: 'green',
-            id: 'notes'
+            id: 'notes',
+            autoClose: 2000
           });
         })
         .catch((error) => {
@@ -142,36 +144,7 @@ export default function NotesEditor({
   const editorOptions: SimpleMde.Options = useMemo(() => {
     let icons: any[] = [];
 
-    if (editable) {
     if (editing) {
-        icons.push({
-          name: 'edit-disabled',
-          action: () => setEditing(false),
-          className: 'fa fa-eye',
-          title: t`Disable Editing`
-        });
-
-        icons.push('|', 'side-by-side', '|');
-      } else {
-        icons.push({
-          name: 'edit-enabled',
-          action: () => setEditing(true),
-          className: 'fa fa-edit',
-          title: t`Enable Editing`
-        });
-      }
-    }
-
-    if (editing) {
-      icons.push('heading-1', 'heading-2', 'heading-3', '|'); // Headings
-      icons.push('bold', 'italic', 'strikethrough', '|'); // Text styles
-      icons.push('unordered-list', 'ordered-list', 'code', 'quote', '|'); // Text formatting
-      icons.push('table', 'link', 'image', '|');
-      icons.push('horizontal-rule', '|', 'guide'); // Misc
-
-      icons.push('|', 'undo', 'redo'); // Undo/Redo
-      icons.push('|');
-
       icons.push({
         name: 'save-notes',
         action: (editor: SimpleMde) => {
@@ -180,6 +153,32 @@ export default function NotesEditor({
         className: 'fa fa-save',
         title: t`Save Notes`
       });
+
+      icons.push('|');
+
+      icons.push('heading-1', 'heading-2', 'heading-3', '|'); // Headings
+      icons.push('bold', 'italic', 'strikethrough', '|'); // Text styles
+      icons.push('unordered-list', 'ordered-list', 'code', 'quote', '|'); // Text formatting
+      icons.push('table', 'link', 'image', '|');
+      icons.push('horizontal-rule', '|', 'guide'); // Misc
+
+      icons.push('|', 'undo', 'redo'); // Undo/Redo
+
+      icons.push('|');
+
+      icons.push({
+        name: 'edit-disabled',
+        action: () => setEditing(false),
+        className: 'fa fa-times',
+        title: t`Close Editor`
+      });
+    } else if (editable) {
+      icons.push({
+        name: 'edit-enabled',
+        action: () => setEditing(true),
+        className: 'fa fa-edit',
+        title: t`Enable Editing`
+      });
     }
 
     return {
@@ -219,10 +218,13 @@ export default function NotesEditor({
 
   return (
     <SimpleMDE
-      value={markdown}
+      autoFocus
-      onChange={setMarkdown}
-      options={editorOptions}
       getMdeInstance={(instance: SimpleMde) => setMdeInstance(instance)}
+      onChange={(value: string) => {
+        setMarkdown(value);
+      }}
+      options={editorOptions}
+      value={markdown}
     />
   );
 }

src/frontend/tests/pages/pui_index.spec.ts

@@ -13,7 +13,8 @@ test('Pages - Index - Playground', async ({ page }) => {
 
   // New Part
   await page.getByRole('button', { name: 'Create New Part' }).click();
-  await page.locator('#react-select-3-input').fill('category 0');
+  await page.getByLabel('related-field-category').fill('category 0');
+
   await page
     .getByRole('option', { name: 'Category 0' })
     .locator('div')
@@ -22,7 +23,7 @@ test('Pages - Index - Playground', async ({ page }) => {
 
   // Set the "name"
   await page.getByLabel('text-field-name').fill(newPartName);
-  await page.getByLabel('number-field-initial_stock.').fill('1');
+  await page.getByLabel('number-field-initial_stock').fill('1');
 
   await page
     .getByLabel('Create Part')

src/frontend/tests/pages/pui_part.spec.ts

@@ -237,8 +237,9 @@ test('Pages - Part - Notes', async ({ page }) => {
 
   // Enable notes editing
   await page.getByLabel('Enable Editing').click();
-  await page.getByLabel('Disable Editing').waitFor();
+
   await page.getByLabel('Save Notes').waitFor();
+  await page.getByLabel('Close Editor').waitFor();
 });
 
 test('Pages - Part - 404', async ({ page }) => {