From 35969b11a5d8a551dd9a07a5f354eb81a5aea2f4 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Thu, 10 Oct 2024 21:00:22 +1100
Subject: [PATCH] [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/components/editors/NotesEditor.tsx    | 68 ++++++++++---------
 src/frontend/tests/pages/pui_index.spec.ts    |  5 +-
 src/frontend/tests/pages/pui_part.spec.ts     |  3 +-
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/frontend/src/components/editors/NotesEditor.tsx b/src/frontend/src/components/editors/NotesEditor.tsx
index 8196863760..e576512f15 100644
--- a/src/frontend/src/components/editors/NotesEditor.tsx
+++ b/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}
-      onChange={setMarkdown}
-      options={editorOptions}
+      autoFocus
       getMdeInstance={(instance: SimpleMde) => setMdeInstance(instance)}
+      onChange={(value: string) => {
+        setMarkdown(value);
+      }}
+      options={editorOptions}
+      value={markdown}
     />
   );
 }
diff --git a/src/frontend/tests/pages/pui_index.spec.ts b/src/frontend/tests/pages/pui_index.spec.ts
index 03cda47b6b..92906fe824 100644
--- a/src/frontend/tests/pages/pui_index.spec.ts
+++ b/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')
diff --git a/src/frontend/tests/pages/pui_part.spec.ts b/src/frontend/tests/pages/pui_part.spec.ts
index 1ebe8ad64c..3dcd7a0b84 100644
--- a/src/frontend/tests/pages/pui_part.spec.ts
+++ b/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 }) => {