[Workspace]Disable "Save changes" button on character limit exceeded (#…

…8153) (#8374)

* Disable "Save changes" button on character limit exceeded



* Changeset file for PR #8153 created/updated

* Add more test case for empty name and description



---------



(cherry picked from commit 09bd013)

Signed-off-by: Lin Wang <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

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))

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(
+      <form id="testForm">
+        <WorkspaceBottomBar {...defaultProps} formData={{ name: longName }} />
+      </form>
+    );
+    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(
+      <form id="testForm">
+        <WorkspaceBottomBar
+          {...defaultProps}
+          formData={{ ...defaultProps.formData, description: longDescription }}
+        />
+      </form>
+    );
+    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(<WorkspaceBottomBar {...defaultProps} />);
+    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(<WorkspaceBottomBar {...defaultProps} formData={{}} />);
+    const saveChangesButton = screen.getByText('Save changes');
+    expect(saveChangesButton.closest('button')).not.toBeDisabled();
+  });
 });

src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx

@@ -14,13 +14,20 @@ 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;
   numberOfChanges: number;
   numberOfErrors: number;
   handleResetForm: () => void;
   isFormSubmitting: boolean;
+  formData: Pick<WorkspaceFormDataState, 'name' | 'description'>;
 }
 
 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 = (
     <EuiBottomBar position="sticky">
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
@@ -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',

src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx

@@ -300,6 +300,7 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
       {isEditing && (
         <WorkspaceBottomBar
           formId={formId}
+          formData={formData}
           numberOfChanges={numberOfChanges}
           numberOfErrors={numberOfErrors}
           handleResetForm={handleResetForm}