lib-user: Add max character group name validation to group form (#6204)

* Add max character group name validation to group form

* Add GroupForm test for group name over max characters

packages/lib-user/src/components/shared/GroupForm/GroupForm.js

@@ -88,6 +88,7 @@ function GroupForm({
           validate={[
             (name) => {
               if (name && name.length < 4) return 'must be > 3 characters'
+              if (name && name.length > 60) return 'must be < 60 characters'
               return undefined
             }
           ]}

packages/lib-user/src/components/shared/GroupForm/GroupForm.spec.js

@@ -89,7 +89,7 @@ describe('components > shared > GroupForm', function() {
       })
     })
 
-    describe('with an invalid display name', function() {
+    describe('with an invalid display name, below minimum characters', function() {
       it('should show display name is invalid', async function() {
         render(<CreateStory />)
 
@@ -102,6 +102,20 @@ describe('components > shared > GroupForm', function() {
         expect(error).to.be.ok()
       })
     })
+
+    describe('with an invalid display name, above maximum characters', function() {
+      it('should show display name is invalid', async function() {
+        render(<CreateStory />)
+
+        const displayName = screen.getByRole('textbox', { name: 'Group Name' })
+        await user.type(displayName, 'a'.repeat(61))
+        const submit = screen.getByRole('button', { name: 'Create new group' })
+        await user.click(submit)
+
+        const error = screen.getByText('must be < 60 characters')
+        expect(error).to.be.ok()
+      })
+    })
   })
 
   describe('with a provided group (manage mode)', function() {