diff --git a/changelogs/fragments/8153.yml b/changelogs/fragments/8153.yml new file mode 100644 index 000000000000..2cdb4bbc3a1e --- /dev/null +++ b/changelogs/fragments/8153.yml @@ -0,0 +1,2 @@ +fix: +- [Workspace]Disable "Save changes" button on character limit exceeded ([#8153](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8153)) \ No newline at end of file diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx index f539288a54c0..a92b03e423d0 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx @@ -5,6 +5,10 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; +import { + MAX_WORKSPACE_DESCRIPTION_LENGTH, + MAX_WORKSPACE_NAME_LENGTH, +} from '../../../common/constants'; import { WorkspaceBottomBar } from './workspace_bottom_bar'; const mockHandleResetForm = jest.fn(); @@ -15,6 +19,7 @@ const defaultProps = { numberOfErrors: 1, handleResetForm: mockHandleResetForm, isFormSubmitting: false, + formData: { name: 'Foo', description: '' }, }; describe('WorkspaceBottomBar', () => { @@ -52,4 +57,41 @@ describe('WorkspaceBottomBar', () => { // Assuming handleSubmit is called during form submission expect(handleSubmit).toHaveBeenCalled(); }); + + it('should disable the "Save changes" button when name exceeds the maximum length', () => { + const longName = 'a'.repeat(MAX_WORKSPACE_NAME_LENGTH + 1); + render( +
+ + + ); + const saveChangesButton = screen.getByText('Save changes'); + expect(saveChangesButton.closest('button')).toBeDisabled(); + }); + + it('should disable the "Save changes" button when description exceeds the maximum length', () => { + const longDescription = 'a'.repeat(MAX_WORKSPACE_DESCRIPTION_LENGTH + 1); + render( +
+ + + ); + const saveChangesButton = screen.getByText('Save changes'); + expect(saveChangesButton.closest('button')).toBeDisabled(); + }); + + it('should enable the "Save changes" button when name and description are within the maximum length', () => { + render(); + const saveChangesButton = screen.getByText('Save changes'); + expect(saveChangesButton.closest('button')).not.toBeDisabled(); + }); + + it('should enable the "Save changes" button when name and description are empty', () => { + render(); + const saveChangesButton = screen.getByText('Save changes'); + expect(saveChangesButton.closest('button')).not.toBeDisabled(); + }); }); diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx index 4d148cc05062..11f27d9f8586 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx @@ -14,6 +14,12 @@ import { import { i18n } from '@osd/i18n'; import React from 'react'; import ReactDOM from 'react-dom'; +import { + MAX_WORKSPACE_DESCRIPTION_LENGTH, + MAX_WORKSPACE_NAME_LENGTH, +} from '../../../common/constants'; + +import { WorkspaceFormDataState } from '../workspace_form'; interface WorkspaceBottomBarProps { formId: string; @@ -21,6 +27,7 @@ interface WorkspaceBottomBarProps { numberOfErrors: number; handleResetForm: () => void; isFormSubmitting: boolean; + formData: Pick; } export const WorkspaceBottomBar = ({ @@ -29,8 +36,13 @@ export const WorkspaceBottomBar = ({ numberOfErrors, handleResetForm, isFormSubmitting, + formData, }: WorkspaceBottomBarProps) => { const applicationElement = document.querySelector('.app-wrapper'); + const saveChangesButtonDisabled = + (formData.name?.length ?? 0) > MAX_WORKSPACE_NAME_LENGTH || + (formData.description?.length ?? 0) > MAX_WORKSPACE_DESCRIPTION_LENGTH; + const bottomBar = ( @@ -85,6 +97,7 @@ export const WorkspaceBottomBar = ({ color="primary" data-test-subj="workspaceForm-bottomBar-updateButton" isLoading={isFormSubmitting} + isDisabled={saveChangesButtonDisabled} > {i18n.translate('workspace.form.bottomBar.saveChanges', { defaultMessage: 'Save changes', diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx index 1506d16504b5..fe74ac4b036a 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx @@ -300,6 +300,7 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => { {isEditing && (