Add validation support to Group names

app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx

@@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { submitGroupEditor } from 'soapbox/actions/groups';
 import { Modal, Stack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useDebounce } from 'soapbox/hooks';
+import { useGroupValidation } from 'soapbox/hooks/api';
 
 import ConfirmationStep from './steps/confirmation-step';
 import DetailsStep from './steps/details-step';
@@ -34,6 +35,7 @@ interface IManageGroupModal {
 
 const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
   const intl = useIntl();
+  const debounce = useDebounce;
   const dispatch = useAppDispatch();
 
   const id = useAppSelector((state) => state.group_editor.groupId);
@@ -43,6 +45,11 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
 
   const [currentStep, setCurrentStep] = useState<Steps>(id ? Steps.TWO : Steps.ONE);
 
+  const name = useAppSelector((state) => state.group_editor.displayName);
+  const debouncedName = debounce(name, 300);
+
+  const { data: { isValid } } = useGroupValidation(debouncedName);
+
   const handleClose = () => {
     onClose('MANAGE_GROUP');
   };
@@ -92,7 +99,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
         : <FormattedMessage id='navigation_bar.create_group' defaultMessage='Create Group' />}
       confirmationAction={handleNextStep}
       confirmationText={confirmationText}
-      confirmationDisabled={isSubmitting}
+      confirmationDisabled={isSubmitting || (currentStep === Steps.TWO && !isValid)}
       confirmationFullWidth
       onClose={handleClose}
     >

app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx

@@ -7,9 +7,9 @@ import {
   changeGroupEditorDescription,
   changeGroupEditorMedia,
 } from 'soapbox/actions/groups';
-import Icon from 'soapbox/components/icon';
-import { Avatar, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
+import { Avatar, Form, FormGroup, HStack, Icon, Input, Text, Textarea } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
+import { useGroupValidation } from 'soapbox/hooks/api';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
 import resizeImage from 'soapbox/utils/resize-image';
 
@@ -30,7 +30,7 @@ const messages = defineMessages({
 const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
     <label
-      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-xl bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-44'
     >
       {src && <img className='h-full w-full object-cover' src={src} alt='' />}
       <HStack
@@ -65,7 +65,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
-    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-4 ring-white dark:ring-primary-900'>
       {src && <Avatar src={src} size={80} />}
       <HStack
         alignItems='center'
@@ -95,6 +95,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const DetailsStep = () => {
   const intl = useIntl();
+  const debounce = useDebounce;
   const dispatch = useAppDispatch();
   const instance = useInstance();
 
@@ -103,6 +104,10 @@ const DetailsStep = () => {
   const name = useAppSelector((state) => state.group_editor.displayName);
   const description = useAppSelector((state) => state.group_editor.note);
 
+  const debouncedName = debounce(name, 300);
+
+  const { data: { isValid, message: errorMessage } } = useGroupValidation(debouncedName);
+
   const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
   const [headerSrc, setHeaderSrc] = useState<string | null>(null);
 
@@ -153,8 +158,11 @@ const DetailsStep = () => {
         <HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
         <AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
       </div>
+
       <FormGroup
         labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
+        hintText={<FormattedMessage id='manage_group.fields.name_help' defaultMessage='This cannot be changed after the group is created.' />}
+        errors={isValid ? [] : [errorMessage as string]}
       >
         <Input
           type='text'
@@ -164,6 +172,7 @@ const DetailsStep = () => {
           maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
         />
       </FormGroup>
+
       <FormGroup
         labelText={<FormattedMessage id='manage_group.fields.description_label' defaultMessage='Description' />}
       >

app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx

@@ -17,11 +17,11 @@ const PrivacyStep = () => {
 
   return (
     <>
-      <Stack className='mx-auto max-w-sm' space={2}>
+      <Stack className='mx-auto max-w-xs py-10' space={2}>
         <Text size='3xl' weight='bold' align='center'>
           <FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
         </Text>
-        <Text size='lg' theme='muted' align='center'>
+        <Text theme='muted' align='center'>
           <FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />
         </Text>
       </Stack>

app/soapbox/hooks/api/groups/useGroupValidation.ts

@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useApi } from 'soapbox/hooks/useApi';
+
+type Validation = {
+  error: string
+  message: string
+}
+
+const ValidationKeys = {
+  validation: (name: string) => ['group', 'validation', name] as const,
+};
+
+function useGroupValidation(name: string = '') {
+  const api = useApi();
+
+  const getValidation = async() => {
+    const { data } = await api.get<Validation>('/api/v1/groups/validate', {
+      params: { name },
+    })
+      .catch((error) => {
+        if (error.response.status === 422) {
+          return { data: error.response.data };
+        }
+
+        throw error;
+      });
+
+    return data;
+  };
+
+  const queryInfo = useQuery<Validation>(ValidationKeys.validation(name), getValidation, {
+    enabled: !!name,
+  });
+
+  return {
+    ...queryInfo,
+    data: {
+      ...queryInfo.data,
+      isValid: !queryInfo.data?.error,
+    },
+  };
+}
+
+export { useGroupValidation };

app/soapbox/hooks/api/index.ts

@@ -7,6 +7,7 @@ export { useDeleteGroup } from './groups/useDeleteGroup';
 export { useDemoteGroupMember } from './groups/useDemoteGroupMember';
 export { useGroup, useGroups } from './groups/useGroups';
 export { useGroupSearch } from './groups/useGroupSearch';
+export { useGroupValidation } from './groups/useGroupValidation';
 export { useJoinGroup } from './groups/useJoinGroup';
 export { useLeaveGroup } from './groups/useLeaveGroup';
 export { usePromoteGroupMember } from './groups/usePromoteGroupMember';