From 8e32a45637b564f2b03cd4114bc1124e147b03d4 Mon Sep 17 00:00:00 2001 From: lharti <7027812+lharti@users.noreply.github.com> Date: Wed, 13 Nov 2024 11:55:05 +0100 Subject: [PATCH] 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 - jsonthing-web@0.5.3 --- apps/jsonthing-web/CHANGELOG.md | 11 +++++ apps/jsonthing-web/package.json | 2 +- .../components/DocEditor/DocEditor.spec.tsx | 19 ++++++-- .../src/components/DocEditor/DocEditor.tsx | 30 ++++++------ .../DocEditorActionBar.spec.tsx | 30 +++++++++++- .../DocEditorActionBar/DocEditorActionBar.tsx | 14 +++++- .../DocEditorActionBar.spec.tsx.snap | 46 +++++++++++++++++-- .../DocEditorActionBar/constants.ts | 6 ++- 8 files changed, 127 insertions(+), 31 deletions(-) diff --git a/apps/jsonthing-web/CHANGELOG.md b/apps/jsonthing-web/CHANGELOG.md index 34fb7d8..47712b5 100644 --- 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/jsonthing-web@0.5.2...jsonthing-web@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/jsonthing-web@0.5.1...jsonthing-web@0.5.2) (2024-11-12) diff --git a/apps/jsonthing-web/package.json b/apps/jsonthing-web/package.json index 52342ee..b5b1841 100644 --- 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 index a802829..8b10123 100644 --- 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('', () => {
- + { +

+
+

', () => { 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 index 2c4e1ab..0cc0e11 100644 --- 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 = ({ return (

- {lintError ? ( - - {lintError} - - ) : ( - <> - + - setEditorContent(newValue)} - /> - - )} + setEditorContent(newValue)} + />
+ {lintError && ( + + {lintError} + + )} + { const ActionBarBtnMock = jest .mocked(DocEditorActionBarBtn) - .mockImplementation(({ onClick, label }) => ( - )) const useSaveContentMock = jest.mocked(useSaveContent).mockReturnValue({ @@ -48,6 +55,23 @@ describe('', () => { expect(container).toMatchSnapshot('') }) + it('should render with disabled prop', () => { + expect.assertions(1) + + setupMocks() + + const { container } = render( + , + ) + + expect(container).toMatchSnapshot('') + }) + it('should setup useSaveContent', () => { expect.assertions(1) @@ -93,6 +117,7 @@ describe('', () => { label: 'Prettify', Icon: IconWand, onClick: expect.any(Function), + disabled: false, }, undefined, @@ -156,6 +181,7 @@ describe('', () => { 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 index 629aa04..6fffe2f 100644 --- 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 = ({ @@ -26,6 +28,8 @@ export const DocEditorActionBar: React.FC = ({ docId, onChange, + + disabled: actionBarDisabled = false, }) => { const prettifyContent = () => { const newContentValue = prettifyJson(value) @@ -50,12 +54,17 @@ export const DocEditorActionBar: React.FC = ({ }, ) + const saveButtonLabel = actionBarDisabled + ? SAVE_BTN_LABELS[SaveStatus.NOT_ALLOWED] + : SAVE_BTN_LABELS[saveStatus] + return (
prettifyContent()} /> @@ -63,15 +72,16 @@ export const DocEditorActionBar: React.FC = ({ iconOnly label="Copy" Icon={IconClipboardCopy} + disabled={actionBarDisabled} onClick={() => copyToClipboard()} /> save()} />
diff --git a/apps/jsonthing-web/src/components/DocEditorActionBar/__snapshots__/DocEditorActionBar.spec.tsx.snap b/apps/jsonthing-web/src/components/DocEditorActionBar/__snapshots__/DocEditorActionBar.spec.tsx.snap index 4427525..3164593 100644 --- a/apps/jsonthing-web/src/components/DocEditorActionBar/__snapshots__/DocEditorActionBar.spec.tsx.snap +++ b/apps/jsonthing-web/src/components/DocEditorActionBar/__snapshots__/DocEditorActionBar.spec.tsx.snap @@ -1,5 +1,38 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` should render with disabled prop: 1`] = ` +
+
+ + + +
+
+`; + exports[` should render: 1`] = `
should render: 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 +
`; diff --git a/apps/jsonthing-web/src/components/DocEditorActionBar/constants.ts b/apps/jsonthing-web/src/components/DocEditorActionBar/constants.ts index ea63f2d..1db10df 100644 --- 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.IDLE]: 'Save', [SaveStatus.PENDING]: 'Saving...', [SaveStatus.SAVED]: 'Saved', + + [SaveStatus.NOT_ALLOWED]: 'Cannot save', }