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 && (