Merge branch 'group-name-validation' into 'develop'

Group name validation

See merge request soapbox-pub/soapbox!2388

app/soapbox/components/icon.tsx

@@ -14,6 +14,9 @@ export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
   className?: string
 }
 
+/**
+ * @deprecated Use the UI Icon component directly.
+ */
 const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
   return (
     <div

app/soapbox/components/list.tsx

@@ -4,8 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { SelectDropdown } from '../features/forms';
 
-import Icon from './icon';
-import { HStack, Select } from './ui';
+import { Icon, HStack, Select } from './ui';
 
 interface IList {
   children: React.ReactNode
@@ -58,13 +57,13 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
   return (
     <Comp
       className={clsx({
-        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10': true,
-        'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
+        'flex items-center justify-between px-4 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 dark:from-gradient-start/10 dark:to-gradient-end/10': true,
+        'cursor-pointer hover:from-gradient-start/30 hover:to-gradient-end/30 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
       })}
       {...linkProps}
     >
       <div className='flex flex-col py-1.5 pr-4 rtl:pl-4 rtl:pr-0'>
-        <LabelComp className='text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
+        <LabelComp className='font-medium text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
 
         {hint ? (
           <span className='text-sm text-gray-700 dark:text-gray-600'>{hint}</span>
@@ -83,12 +82,26 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
         <div className='flex flex-row items-center text-gray-700 dark:text-gray-600'>
           {children}
 
-          {isSelected ? (
+          <div
+            className={
+              clsx({
+                'flex h-6 w-6 items-center justify-center rounded-full border-2 border-solid border-primary-500 dark:border-primary-400 transition': true,
+                'bg-primary-500 dark:bg-primary-400': isSelected,
+                'bg-transparent': !isSelected,
+              })
+            }
+          >
             <Icon
-              src={require('@tabler/icons/circle-check.svg')}
-              className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
+              src={require('@tabler/icons/check.svg')}
+              className={
+                clsx({
+                  'h-4 w-4 text-white dark:text-white transition-all duration-500': true,
+                  'opacity-0 scale-50': !isSelected,
+                  'opacity-100 scale-100': isSelected,
+                })
+              }
             />
-          ) : null}
+          </div>
         </div>
       ) : null}
 

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,47 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useApi } from 'soapbox/hooks/useApi';
+import { useFeatures } from 'soapbox/hooks/useFeatures';
+
+type Validation = {
+  error: string
+  message: string
+}
+
+const ValidationKeys = {
+  validation: (name: string) => ['group', 'validation', name] as const,
+};
+
+function useGroupValidation(name: string = '') {
+  const api = useApi();
+  const features = useFeatures();
+
+  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: features.groupsValidation && !!name,
+  });
+
+  return {
+    ...queryInfo,
+    data: {
+      ...queryInfo.data,
+      isValid: !queryInfo.data?.error ?? true,
+    },
+  };
+}
+
+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';

app/soapbox/locales/en.json

@@ -945,6 +945,7 @@
   "manage_group.edit_success": "The group was edited",
   "manage_group.fields.description_label": "Description",
   "manage_group.fields.description_placeholder": "Description",
+  "manage_group.fields.name_help": "This cannot be changed after the group is created.",
   "manage_group.fields.name_label": "Group name (required)",
   "manage_group.fields.name_placeholder": "Group Name",
   "manage_group.get_started": "Let’s get started!",

app/soapbox/utils/features.ts

@@ -554,6 +554,11 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     groupsSearch: v.software === TRUTHSOCIAL,
 
+    /**
+     * Can validate group names.
+     */
+    groupsValidation: v.software === TRUTHSOCIAL,
+
     /**
      * Can hide follows/followers lists and counts.
      * @see PATCH /api/v1/accounts/update_credentials