diff --git a/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx b/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx index f4e19898e8..88aeff8c89 100644 --- a/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx +++ b/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx @@ -40,7 +40,7 @@ function validateDisplayName(intl: IntlShape, displayNameParam: string) { const displayName = displayNameParam.trim(); if (displayName.length < Constants.MIN_CHANNELNAME_LENGTH) { - errors.push(intl.formatMessage({id: 'channel_modal.name.longer', defaultMessage: 'Channel names must have at least 2 characters.'})); + errors.push(intl.formatMessage({id: 'channel_modal.name.longer', defaultMessage: 'Channel names must have at least 1 character.'})); } if (displayName.length > Constants.MAX_CHANNELNAME_LENGTH) { diff --git a/webapp/channels/src/components/widgets/inputs/input/input.test.tsx b/webapp/channels/src/components/widgets/inputs/input/input.test.tsx index 83a4241b7b..3af643db8b 100644 --- a/webapp/channels/src/components/widgets/inputs/input/input.test.tsx +++ b/webapp/channels/src/components/widgets/inputs/input/input.test.tsx @@ -65,29 +65,29 @@ describe('components/widgets/inputs/Input', () => { renderWithContext( , ); - // Check for the +X indicator - const indicator = screen.getByText('+5'); - expect(indicator).toBeInTheDocument(); - // Check for error styling const fieldset = screen.getByRole('group'); expect(fieldset).toHaveClass('Input_fieldset___error'); + + // Check for error message + const errorMessage = screen.getByText(/Must be at least 2 characters/i); + expect(errorMessage).toBeInTheDocument(); }); test('should show error styling and message when input length < minLength', async () => { renderWithContext( , ); // Find the input - const inputElement = screen.getByDisplayValue('abc'); + const inputElement = screen.getByDisplayValue('a'); // Simulate change to trigger validation await act(async () => { @@ -95,19 +95,15 @@ describe('components/widgets/inputs/Input', () => { userEvent.clear(inputElement); // Then type the new value - userEvent.type(inputElement, 'abc'); + userEvent.type(inputElement, 'a'); }); - // Check for the +X indicator - const indicator = screen.getByText('+2'); - expect(indicator).toBeInTheDocument(); - // Check for error styling const fieldset = screen.getByRole('group'); expect(fieldset).toHaveClass('Input_fieldset___error'); // Check for error message - const errorMessage = await screen.findByText(/Must be at least 5 characters/i); + const errorMessage = await screen.findByText(/Must be at least 2 characters/i); expect(errorMessage).toBeInTheDocument(); }); @@ -116,19 +112,19 @@ describe('components/widgets/inputs/Input', () => { renderWithContext( , ); - // With exactly 5 characters and minLength of 5, there should be no error + // With exactly 2 characters and minLength of 2, there should be no error // Check that the +X indicator is not present expect(screen.queryByText(/\+\d+/)).not.toBeInTheDocument(); // Check that error message is not present - expect(screen.queryByText(/Must be at least 5 characters/i)).not.toBeInTheDocument(); + expect(screen.queryByText(/Must be at least 2 characters/i)).not.toBeInTheDocument(); }); }); @@ -169,7 +165,6 @@ describe('components/widgets/inputs/Input', () => { ); // With exactly 5 characters and limit of 5, there should be no error - // Check that the -X indicator is not present expect(screen.queryByText(/-\d+/)).not.toBeInTheDocument(); @@ -236,7 +231,7 @@ describe('components/widgets/inputs/Input', () => { , ); @@ -254,7 +249,7 @@ describe('components/widgets/inputs/Input', () => { expect(errorMessage).toBeInTheDocument(); // Check that minLength error message is not present - expect(screen.queryByText(/Must be at least 5 characters/i)).not.toBeInTheDocument(); + expect(screen.queryByText(/Must be at least 2 characters/i)).not.toBeInTheDocument(); }); test('should show both minLength indicator and limit indicator when applicable', () => { @@ -263,6 +258,7 @@ describe('components/widgets/inputs/Input', () => { value={'abc'} minLength={5} limit={10} + showMinLengthIndicator={true} />, ); diff --git a/webapp/channels/src/components/widgets/inputs/input/input.tsx b/webapp/channels/src/components/widgets/inputs/input/input.tsx index cff850dd45..70ca9e1011 100644 --- a/webapp/channels/src/components/widgets/inputs/input/input.tsx +++ b/webapp/channels/src/components/widgets/inputs/input/input.tsx @@ -36,6 +36,7 @@ export interface InputProps extends Omit )} - {isMinLengthError && ( + {Boolean(isMinLengthError && showMinLengthIndicator) && ( {'+'}{minLengthNotMet} diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index f2ad5dffbb..0ab4f58a66 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -3419,7 +3419,7 @@ "channel_modal.handleTooShort": "Channel URL must be 1 or more lowercase alphanumeric characters", "channel_modal.modalTitle": "Create a new channel", "channel_modal.name.label": "Channel name", - "channel_modal.name.longer": "Channel names must have at least 2 character.", + "channel_modal.name.longer": "Channel names must have at least 1 character.", "channel_modal.name.placeholder": "Enter a name for your new channel", "channel_modal.name.shorter": "Channel names must have maximum 64 characters.", "channel_modal.purpose.info": "This will be displayed when browsing for channels.",