fix(web/doc): save button broken state after lint error (#110)

* fix(web/doc): save button broken state after lint error * chore(release): bump versions - [email protected]
lharti · Nov 13, 2024 · 8e32a45 · 8e32a45
1 parent 2e27b3e
commit 8e32a45
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 31 deletions.
diff --git a/apps/jsonthing-web/CHANGELOG.md b/apps/jsonthing-web/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.3](https://github.com/lharti/jsonthing/compare/[email protected]@0.5.3) (2024-11-13)
+
+
+### Bug Fixes
+
+* **web/doc:** save button broken state after lint error ([6f30184](https://github.com/lharti/jsonthing/commit/6f301843b8d475f1604b8adb6c5e40dcbf24a4e2))
+
+
+
+
+
 ## [0.5.2](https://github.com/lharti/jsonthing/compare/[email protected]@0.5.2) (2024-11-12)
 
 

diff --git a/apps/jsonthing-web/package.json b/apps/jsonthing-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "jsonthing-web",
-    "version": "0.5.2",
+    "version": "0.5.3",
     "private": true,
     "scripts": {
         "dev": "next dev --turbo",

diff --git a/apps/jsonthing-web/src/components/DocEditor/DocEditor.spec.tsx b/apps/jsonthing-web/src/components/DocEditor/DocEditor.spec.tsx
@@ -99,12 +99,20 @@ describe('<DocEditor />', () => {
                 <div
                   class="mb-2 flex items-end justify-between"
                 >
-                  <div
-                    class="relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7 border-red-500/50 text-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:dark:border-red-900 dark:text-red-900 dark:[&>svg]:text-red-900 animate-fade-in"
-                    role="alert"
+                  <h1>
+                    INITIAL_TITLE
+                  </h1>
+                  <p
+                    id="action-bar"
                   >
-                    Expected property name or '}' in JSON at position 1 (line 1 column 2)
-                  </div>
+                    {
+                  </p>
+                </div>
+                <div
+                  class="relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7 border-red-500/50 text-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:dark:border-red-900 dark:text-red-900 dark:[&>svg]:text-red-900 animate-fade-in"
+                  role="alert"
+                >
+                  Expected property name or '}' in JSON at position 1 (line 1 column 2)
                 </div>
                 <p
                   id="code-mirror"
@@ -240,6 +248,7 @@ describe('<DocEditor />', () => {
             docId: 'DOC_ID',
             value: 'true',
             onChange: expect.any(Function),
+            disabled: false,
         })
     })
 

diff --git a/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx b/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx
@@ -44,26 +44,22 @@ export const DocEditor: React.FC<DocEditorProps> = ({
     return (
         <div className={cn(`flex flex-col`, className)}>
             <div className="mb-2 flex items-end justify-between">
-                {lintError ? (
-                    <Alert variant="destructive" className="animate-fade-in">
-                        {lintError}
-                    </Alert>
-                ) : (
-                    <>
-                        <DocTitleEditor
-                            initialTitle={initialTitle}
-                            docId={docId}
-                        />
+                <DocTitleEditor initialTitle={initialTitle} docId={docId} />
 
-                        <DocEditorActionBar
-                            value={editorContent}
-                            docId={docId}
-                            onChange={newValue => setEditorContent(newValue)}
-                        />
-                    </>
-                )}
+                <DocEditorActionBar
+                    value={editorContent}
+                    docId={docId}
+                    disabled={!!lintError}
+                    onChange={newValue => setEditorContent(newValue)}
+                />
             </div>
 
+            {lintError && (
+                <Alert variant="destructive" className="animate-fade-in">
+                    {lintError}
+                </Alert>
+            )}
+
             <CodeMirror
                 autoFocus
                 value={editorContent}

diff --git a/apps/jsonthing-web/src/components/DocEditorActionBar/DocEditorActionBar.spec.tsx b/apps/jsonthing-web/src/components/DocEditorActionBar/DocEditorActionBar.spec.tsx
@@ -19,8 +19,15 @@ const setupMocks = () => {
     const ActionBarBtnMock = jest
         .mocked(DocEditorActionBarBtn)
 
-        .mockImplementation(({ onClick, label }) => (
-            <Button role="button" aria-label={label} onClick={onClick} />
+        .mockImplementation(({ onClick, label, disabled }) => (
+            <Button
+                role="button"
+                aria-label={label}
+                disabled={disabled}
+                onClick={onClick}
+            >
+                {label}
+            </Button>
         ))
 
     const useSaveContentMock = jest.mocked(useSaveContent).mockReturnValue({
@@ -48,6 +55,23 @@ describe('<DocEditorActionBar />', () => {
         expect(container).toMatchSnapshot('<DocEditorActionBar />')
     })
 
+    it('should render with disabled prop', () => {
+        expect.assertions(1)
+
+        setupMocks()
+
+        const { container } = render(
+            <DocEditorActionBar
+                disabled
+                docId="DOC_ID"
+                value="{}"
+                onChange={jest.fn()}
+            />,
+        )
+
+        expect(container).toMatchSnapshot('<DocEditorActionBar disabled/>')
+    })
+
     it('should setup useSaveContent', () => {
         expect.assertions(1)
 
@@ -93,6 +117,7 @@ describe('<DocEditorActionBar />', () => {
                     label: 'Prettify',
                     Icon: IconWand,
                     onClick: expect.any(Function),
+                    disabled: false,
                 },
 
                 undefined,
@@ -156,6 +181,7 @@ describe('<DocEditorActionBar />', () => {
                     label: 'Copy',
                     Icon: IconClipboardCopy,
                     onClick: expect.any(Function),
+                    disabled: false,
                 },
 
                 undefined,

diff --git a/apps/jsonthing-web/src/components/DocEditorActionBar/DocEditorActionBar.tsx b/apps/jsonthing-web/src/components/DocEditorActionBar/DocEditorActionBar.tsx
@@ -17,6 +17,8 @@ export interface DocEditorActionBarProps {
     docId: string
 
     onChange: (newContentValue: string) => void
+
+    disabled?: boolean
 }
 
 export const DocEditorActionBar: React.FC<DocEditorActionBarProps> = ({
@@ -26,6 +28,8 @@ export const DocEditorActionBar: React.FC<DocEditorActionBarProps> = ({
     docId,
 
     onChange,
+
+    disabled: actionBarDisabled = false,
 }) => {
     const prettifyContent = () => {
         const newContentValue = prettifyJson(value)
@@ -50,28 +54,34 @@ export const DocEditorActionBar: React.FC<DocEditorActionBarProps> = ({
         },
     )
 
+    const saveButtonLabel = actionBarDisabled
+        ? SAVE_BTN_LABELS[SaveStatus.NOT_ALLOWED]
+        : SAVE_BTN_LABELS[saveStatus]
+
     return (
         <div className={cn('flex', className)}>
             <DocEditorActionBarBtn
                 iconOnly
                 label="Prettify"
                 Icon={IconWand}
+                disabled={actionBarDisabled}
                 onClick={() => prettifyContent()}
             />
 
             <DocEditorActionBarBtn
                 iconOnly
                 label="Copy"
                 Icon={IconClipboardCopy}
+                disabled={actionBarDisabled}
                 onClick={() => copyToClipboard()}
             />
 
             <DocEditorActionBarBtn
                 variant="outline"
-                label={SAVE_BTN_LABELS[saveStatus]}
                 Icon={IconDeviceFloppy}
                 isLoading={saveStatus === SaveStatus.PENDING}
-                disabled={saveStatus !== SaveStatus.IDLE}
+                disabled={saveStatus !== SaveStatus.IDLE || actionBarDisabled}
+                label={saveButtonLabel}
                 onClick={() => save()}
             />
         </div>

diff --git a/...hing-web/src/components/DocEditorActionBar/__snapshots__/DocEditorActionBar.spec.tsx.snap b/...hing-web/src/components/DocEditorActionBar/__snapshots__/DocEditorActionBar.spec.tsx.snap
@@ -1,5 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<DocEditorActionBar /> should render with disabled prop: <DocEditorActionBar disabled/> 1`] = `
+<div>
+  <div
+    class="flex"
+  >
+    <button
+      aria-label="Prettify"
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 bg-gray-900 text-gray-50 shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 hover:bg-gray-900/90 h-9 px-4 py-2"
+      disabled=""
+      role="button"
+    >
+      Prettify
+    </button>
+    <button
+      aria-label="Copy"
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 bg-gray-900 text-gray-50 shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 hover:bg-gray-900/90 h-9 px-4 py-2"
+      disabled=""
+      role="button"
+    >
+      Copy
+    </button>
+    <button
+      aria-label="Cannot save"
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 bg-gray-900 text-gray-50 shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 hover:bg-gray-900/90 h-9 px-4 py-2"
+      disabled=""
+      role="button"
+    >
+      Cannot save
+    </button>
+  </div>
+</div>
+`;
+
 exports[`<DocEditorActionBar /> should render: <DocEditorActionBar /> 1`] = `
 <div>
   <div
@@ -9,17 +42,24 @@ exports[`<DocEditorActionBar /> should render: <DocEditorActionBar /> 1`] = `
       aria-label="Prettify"
       class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 bg-gray-900 text-gray-50 shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 hover:bg-gray-900/90 h-9 px-4 py-2"
       role="button"
-    />
+    >
+      Prettify
+    </button>
     <button
       aria-label="Copy"
       class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 bg-gray-900 text-gray-50 shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 hover:bg-gray-900/90 h-9 px-4 py-2"
       role="button"
-    />
+    >
+      Copy
+    </button>
     <button
       aria-label="Saved"
       class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 bg-gray-900 text-gray-50 shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 hover:bg-gray-900/90 h-9 px-4 py-2"
+      disabled=""
       role="button"
-    />
+    >
+      Saved
+    </button>
   </div>
 </div>
 `;
diff --git a/apps/jsonthing-web/src/components/DocEditorActionBar/constants.ts b/apps/jsonthing-web/src/components/DocEditorActionBar/constants.ts
@@ -2,10 +2,14 @@ export enum SaveStatus {
     IDLE = 'idle',
     PENDING = 'pending',
     SAVED = 'saved',
+
+    NOT_ALLOWED = 'not_allowed',
 }
 
-export const SAVE_BTN_LABELS = {
+export const SAVE_BTN_LABELS: Record<SaveStatus, string> = {
     [SaveStatus.IDLE]: 'Save',
     [SaveStatus.PENDING]: 'Saving...',
     [SaveStatus.SAVED]: 'Saved',
+
+    [SaveStatus.NOT_ALLOWED]: 'Cannot save',
 }