MM-63968 - remove channel name input plus one (#30979)

* MM-63968 - remove channel name input plus one

* adjust test to most common use in webapp

* adjust error for min lenght and add back minlenght indicator under a param bool value

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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

webapp/channels/src/components/widgets/inputs/input/input.test.tsx

@@ -65,29 +65,29 @@ describe('components/widgets/inputs/Input', () => {
             renderWithContext(
                 <Input
                     value={''}
-                    minLength={5}
+                    minLength={2}
                 />,
             );
 
-            // 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(
                 <Input
-                    value={'abc'}
+                    value={'a'}
-                    minLength={5}
+                    minLength={2}
                 />,
             );
 
             // 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(
                 <Input
-                    value={'abcde'}
+                    value={'ab'}
-                    minLength={5}
+                    minLength={2}
                     onChange={onChange}
                 />,
             );
 
-            // 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', () => {
                 <Input
                     value={''}
                     required={true}
-                    minLength={5}
+                    minLength={2}
                 />,
             );
 
@@ -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}
                 />,
             );
 

webapp/channels/src/components/widgets/inputs/input/input.tsx

@@ -36,6 +36,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     inputClassName?: string;
     limit?: number;
     minLength?: number;
+    showMinLengthIndicator?: boolean;
     useLegend?: boolean;
     customMessage?: CustomMessageInputType;
     inputSize?: SIZE;
@@ -63,6 +64,7 @@ const Input = React.forwardRef((
         inputClassName,
         limit,
         minLength,
+        showMinLengthIndicator = false,
         customMessage,
         maxLength,
         inputSize = SIZE.MEDIUM,
@@ -263,7 +265,7 @@ const Input = React.forwardRef((
                             {'-'}{limitExceeded}
                         </span>
                     )}
-                    {isMinLengthError && (
+                    {Boolean(isMinLengthError && showMinLengthIndicator) && (
                         <span className='Input_limit-exceeded'>
                             {'+'}{minLengthNotMet}
                         </span>

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.",