Merge branch 'report-rule-types' into 'develop'

Account for different 'rule_type' on rules

See merge request soapbox-pub/soapbox-fe!1350

app/soapbox/components/modal_root.js

@@ -208,7 +208,12 @@ class ModalRoot extends React.PureComponent {
         })}
         style={{ opacity: revealed ? 1 : 0 }}
       >
-        <div role='presentation' id='modal-overlay' className='fixed inset-0 bg-gray-600 bg-opacity-90' onClick={this.handleOnClose} />
+        <div
+          role='presentation'
+          id='modal-overlay'
+          className='fixed inset-0 bg-gray-600 bg-opacity-90'
+          onClick={this.handleOnClose}
+        />
 
         <div
           role='dialog'

app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
-import { submitReport, cancelReport, submitReportSuccess, submitReportFail } from 'soapbox/actions/reports';
+import { submitReport, submitReportSuccess, submitReportFail } from 'soapbox/actions/reports';
 import { expandAccountTimeline } from 'soapbox/actions/timelines';
 import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
 import StatusContent from 'soapbox/components/status_content';
@@ -87,6 +87,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
   const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet<string>);
   const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
 
+  const isReportingAccount = useMemo(() => selectedStatusIds.size === 0, []);
   const shouldRequireRule = rules.length > 0;
 
   const [currentStep, setCurrentStep] = useState<Steps>(Steps.ONE);
@@ -101,11 +102,6 @@ const ReportModal = ({ onClose }: IReportModal) => {
     }
   };
 
-  const handleClose = () => {
-    dispatch(cancelReport());
-    onClose();
-  };
-
   const handleNextStep = () => {
     switch (currentStep) {
       case Steps.ONE:
@@ -152,8 +148,8 @@ const ReportModal = ({ onClose }: IReportModal) => {
       return false;
     }
 
-    return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || selectedStatusIds.size === 0;
-  }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size]);
+    return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || (!isReportingAccount && selectedStatusIds.size === 0);
+  }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size, isReportingAccount]);
 
   const calculateProgress = useCallback(() => {
     switch (currentStep) {
@@ -183,7 +179,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
   return (
     <Modal
       title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account.acct}</strong> }} />}
-      onClose={handleClose}
+      onClose={onClose}
       cancelAction={currentStep === Steps.THREE ? undefined : onClose}
       confirmationAction={handleNextStep}
       confirmationText={confirmationText}
@@ -193,7 +189,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
       <Stack space={4}>
         <ProgressBar progress={calculateProgress()} />
 
-        {currentStep !== Steps.THREE && renderSelectedStatuses()}
+        {(currentStep !== Steps.THREE && !isReportingAccount) && renderSelectedStatuses()}
 
         <StepToRender account={account} />
       </Stack>

app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
@@ -36,6 +36,9 @@ const ReasonStep = (_props: IReasonStep) => {
   const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet<string>);
   const shouldRequireRule = rules.length > 0;
 
+  const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet<string>);
+  const isReportingAccount = useMemo(() => selectedStatusIds.size === 0, []);
+
   const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     dispatch(changeReportComment(event.target.value));
   };
@@ -58,6 +61,16 @@ const ReasonStep = (_props: IReasonStep) => {
     }
   };
 
+  const filterRuleType = (rule: any) => {
+    const ruleTypeToFilter = isReportingAccount ? 'account' : 'content';
+
+    if (rule.rule_type) {
+      return rule.rule_type === ruleTypeToFilter;
+    }
+
+    return true;
+  };
+
   useEffect(() => {
     dispatch(fetchRules());
   }, []);
@@ -87,7 +100,7 @@ const ReasonStep = (_props: IReasonStep) => {
               onScroll={handleRulesScrolling}
               ref={rulesListRef}
             >
-              {rules.map((rule, idx) => {
+              {rules.filter(filterRuleType).map((rule, idx) => {
                 const isSelected = ruleIds.includes(String(rule.id));
 
                 return (

app/soapbox/features/ui/containers/modal_container.js

@@ -1,5 +1,7 @@
 import { connect } from 'react-redux';
 
+import { cancelReport } from 'soapbox/actions/reports';
+
 import { cancelReplyCompose } from '../../../actions/compose';
 import { closeModal } from '../../../actions/modals';
 import ModalRoot from '../components/modal_root';
@@ -18,8 +20,15 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = (dispatch) => ({
   onClose(type) {
-    if (type === 'COMPOSE') {
+    switch (type) {
+    case 'COMPOSE':
       dispatch(cancelReplyCompose());
+      break;
+    case 'REPORT':
+      dispatch(cancelReport());
+      break;
+    default:
+      break;
     }
 
     dispatch(closeModal(type));