Add category selection to collection report modal (#39456)

app/javascript/mastodon/features/report/category.jsx

@@ -68,7 +68,7 @@ class Category extends PureComponent {
   render () {
     const { category, startedFrom, rules, intl } = this.props;
 
-    const options = rules.length > 0 ? [
+    let options = rules.length > 0 ? [
       'dislike',
       'spam',
       'legal',
@@ -81,10 +81,21 @@ class Category extends PureComponent {
       'other',
     ];
 
+    if (startedFrom === 'collection') {
+      options = options.filter(item => item !== 'dislike');
+    }
+
     return (
       <>
         <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
-          <FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} />
+          {startedFrom === 'collection' ? (
+            <FormattedMessage
+              id='report.collection_comment'
+              defaultMessage='Why do you want to report this collection?'
+            />
+          ) : (
+            <FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} />
+          )}
         </NavigationFocusTarget>
         <p className='report-dialog-modal__lead'><FormattedMessage id='report.category.subtitle' defaultMessage='Choose the best match' /></p>
 

app/javascript/mastodon/features/ui/components/report_collection_modal.tsx

@@ -13,7 +13,9 @@ import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_targ
 import { useAccount } from 'mastodon/hooks/useAccount';
 import { useAppDispatch } from 'mastodon/store';
 
+import Category from '../../report/category';
 import Comment from '../../report/comment';
+import Rules from '../../report/rules';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -60,8 +62,14 @@ export const ReportCollectionModal: React.FC<{
     'idle' | 'submitting' | 'submitted' | 'error'
   >('idle');
 
-  const [step, setStep] = useState<'comment' | 'thanks'>('comment');
+  const [step, setStep] = useState<'category' | 'rules' | 'comment' | 'thanks'>(
+    'category',
+  );
 
+  const [category, setCategory] = useState<
+    'spam' | 'legal' | 'violation' | 'other' | null
+  >(null);
+  const [selectedRuleIds, setSelectedRuleIds] = useState<string[]>([]);
   const [comment, setComment] = useState('');
   const [selectedDomains, setSelectedDomains] = useState<string[]>([]);
 
@@ -73,6 +81,22 @@ export const ReportCollectionModal: React.FC<{
     }
   }, []);
 
+  const handleRuleToggle = useCallback((ruleId: string) => {
+    setSelectedRuleIds((ruleIds) =>
+      ruleIds.includes(ruleId)
+        ? ruleIds.filter((id) => ruleId !== id)
+        : [...ruleIds, ruleId],
+    );
+  }, []);
+
+  const handleNextStep = useCallback(() => {
+    if (step === 'category' && category === 'violation') {
+      setStep('rules');
+    } else {
+      setStep('comment');
+    }
+  }, [category, step]);
+
   const handleSubmit = useCallback(() => {
     setSubmitState('submitting');
 
@@ -85,7 +109,8 @@ export const ReportCollectionModal: React.FC<{
           forward_to_domains: selectedDomains,
           comment,
           forward: selectedDomains.length > 0,
-          category: 'spam',
+          category: category ?? 'other',
+          rule_ids: selectedRuleIds,
         },
         () => {
           setSubmitState('submitted');
@@ -96,7 +121,15 @@ export const ReportCollectionModal: React.FC<{
         },
       ),
     );
-  }, [account_id, comment, dispatch, collectionId, selectedDomains]);
+  }, [
+    account_id,
+    category,
+    selectedRuleIds,
+    comment,
+    dispatch,
+    collectionId,
+    selectedDomains,
+  ]);
 
   if (!account) {
     return null;
@@ -108,15 +141,28 @@ export const ReportCollectionModal: React.FC<{
   let stepComponent;
 
   switch (step) {
+    case 'category':
+      stepComponent = (
+        <Category
+          onNextStep={handleNextStep}
+          startedFrom='collection'
+          category={category}
+          onChangeCategory={setCategory}
+        />
+      );
+      break;
+    case 'rules':
+      stepComponent = (
+        <Rules
+          onNextStep={handleNextStep}
+          selectedRuleIds={selectedRuleIds}
+          onToggle={handleRuleToggle}
+        />
+      );
+      break;
     case 'comment':
       stepComponent = (
         <Comment
-          modalTitle={
-            <FormattedMessage
-              id='report.collection_comment'
-              defaultMessage='Why do you want to report this collection?'
-            />
-          }
           submitError={
             submitState === 'error' && (
               <Callout