Merge branch 'mastodon-rule-hints' into 'main'

Support Mastodon rule hints

See merge request soapbox-pub/soapbox!2987

src/actions/rules.test.ts

@@ -1,23 +0,0 @@
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-
-import { fetchRules, RULES_FETCH_REQUEST, RULES_FETCH_SUCCESS } from './rules';
-
-describe('fetchRules()', () => {
-  it('sets the rules', async () => {
-    const rules = await import('soapbox/__fixtures__/rules.json');
-
-    __stub((mock) => {
-      mock.onGet('/api/v1/instance/rules').reply(200, rules);
-    });
-
-    const store = mockStore(rootState);
-    await store.dispatch(fetchRules());
-
-    const actions = store.getActions();
-
-    expect(actions[0].type).toEqual(RULES_FETCH_REQUEST);
-    expect(actions[1].type).toEqual(RULES_FETCH_SUCCESS);
-    expect(actions[1].payload[0].id).toEqual('1');
-  });
-});

src/actions/rules.ts

@@ -1,32 +0,0 @@
-import api from '../api';
-
-import type { Rule } from 'soapbox/reducers/rules';
-import type { RootState } from 'soapbox/store';
-
-const RULES_FETCH_REQUEST = 'RULES_FETCH_REQUEST';
-const RULES_FETCH_SUCCESS = 'RULES_FETCH_SUCCESS';
-
-type RulesFetchRequestAction = {
-  type: typeof RULES_FETCH_REQUEST;
-}
-
-type RulesFetchRequestSuccessAction = {
-  type: typeof RULES_FETCH_SUCCESS;
-  payload: Rule[];
-}
-
-export type RulesActions = RulesFetchRequestAction | RulesFetchRequestSuccessAction
-
-const fetchRules = () => (dispatch: React.Dispatch<RulesActions>, getState: () => RootState) => {
-  dispatch({ type: RULES_FETCH_REQUEST });
-
-  return api(getState)
-    .get('/api/v1/instance/rules')
-    .then((response) => dispatch({ type: RULES_FETCH_SUCCESS, payload: response.data }));
-};
-
-export {
-  fetchRules,
-  RULES_FETCH_REQUEST,
-  RULES_FETCH_SUCCESS,
-};

src/features/ui/components/modals/report-modal/report-modal.tsx

@@ -11,7 +11,7 @@ import List, { ListItem } from 'soapbox/components/list';
 import StatusContent from 'soapbox/components/status-content';
 import { Avatar, HStack, Icon, Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
 
 import ConfirmationStep from './steps/confirmation-step';
 import OtherActionsStep from './steps/other-actions-step';
@@ -104,7 +104,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
   const entityType = useAppSelector((state) => state.reports.new.entityType);
   const isBlocked = useAppSelector((state) => state.reports.new.block);
   const isSubmitting = useAppSelector((state) => state.reports.new.isSubmitting);
-  const rules = useAppSelector((state) => state.rules.items);
+  const { rules } = useInstance();
   const ruleIds = useAppSelector((state) => state.reports.new.rule_ids);
   const selectedStatusIds = useAppSelector((state) => state.reports.new.status_ids);
   const selectedChatMessage = useAppSelector((state) => state.reports.new.chat_message);

src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx

@@ -1,9 +1,8 @@
 import { OrderedSet } from 'immutable';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports';
-import { fetchRules } from 'soapbox/actions/rules';
 import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
 import StatusCheckBox from 'soapbox/features/report/components/status-check-box';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
@@ -44,10 +43,6 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
     dispatch(changeReportForward(event.target.checked));
   };
 
-  useEffect(() => {
-    dispatch(fetchRules());
-  }, []);
-
   return (
     <Stack space={4}>
       {features.reportMultipleStatuses && (

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

@@ -3,11 +3,11 @@ import React, { useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeReportComment, changeReportRule, ReportableEntities } from 'soapbox/actions/reports';
-import { fetchRules } from 'soapbox/actions/rules';
 import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
 
 import type { Account } from 'soapbox/schemas';
+import type { Rule } from 'soapbox/schemas/rule';
 
 const messages = defineMessages({
   placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
@@ -31,7 +31,7 @@ const ReasonStep: React.FC<IReasonStep> = () => {
 
   const entityType = useAppSelector((state) => state.reports.new.entityType);
   const comment = useAppSelector((state) => state.reports.new.comment);
-  const rules = useAppSelector((state) => state.rules.items);
+  const { rules } = useInstance();
   const ruleIds = useAppSelector((state) => state.reports.new.rule_ids);
   const shouldRequireRule = rules.length > 0;
 
@@ -57,7 +57,7 @@ const ReasonStep: React.FC<IReasonStep> = () => {
     }
   };
 
-  const filterRuleType = (rule: any) => {
+  const filterRuleType = (rule: Rule) => {
     let ruleTypeToFilter = 'content';
 
     switch (entityType) {
@@ -83,10 +83,6 @@ const ReasonStep: React.FC<IReasonStep> = () => {
     return true;
   };
 
-  useEffect(() => {
-    dispatch(fetchRules());
-  }, []);
-
   useEffect(() => {
     if (rules.length > 0 && rulesListRef.current) {
       const { clientHeight } = rulesListRef.current;
@@ -136,7 +132,7 @@ const ReasonStep: React.FC<IReasonStep> = () => {
                       >
                         {rule.text}
                       </Text>
-                      <Text tag='span' theme='muted' size='sm'>{rule.subtext}</Text>
+                      <Text tag='span' theme='muted' size='sm'>{rule.hint}</Text>
                     </Stack>
 
                     <input

src/reducers/index.ts

@@ -48,7 +48,6 @@ import profile_hover_card from './profile-hover-card';
 import push_notifications from './push-notifications';
 import relationships from './relationships';
 import reports from './reports';
-import rules from './rules';
 import scheduled_statuses from './scheduled-statuses';
 import search from './search';
 import security from './security';
@@ -110,7 +109,6 @@ const reducers = {
   push_notifications,
   relationships,
   reports,
-  rules,
   scheduled_statuses,
   search,
   security,

src/reducers/rules.test.ts

@@ -1,31 +0,0 @@
-
-import { RULES_FETCH_REQUEST, RULES_FETCH_SUCCESS } from 'soapbox/actions/rules';
-
-import reducer from './rules';
-
-const initialState = {
-  items: [],
-  isLoading: false,
-};
-
-describe('rules reducer', () => {
-  it('should return the initial state', () => {
-    expect(reducer(undefined, {} as any)).toEqual(initialState);
-  });
-
-  describe('RULES_FETCH_REQUEST', () => {
-    it('sets "needsOnboarding" to "true"', () => {
-      const action = { type: RULES_FETCH_REQUEST } as any;
-      expect(reducer(initialState, action).isLoading).toEqual(true);
-    });
-  });
-
-  describe('ONBOARDING_END', () => {
-    it('sets "needsOnboarding" to "false"', () => {
-      const action = { type: RULES_FETCH_SUCCESS, payload: [{ id: '123' }] } as any;
-      const result = reducer(initialState, action);
-      expect(result.isLoading).toEqual(false);
-      expect(result.items[0].id).toEqual('123');
-    });
-  });
-});

src/reducers/rules.ts

@@ -1,31 +0,0 @@
-import { RULES_FETCH_REQUEST, RULES_FETCH_SUCCESS } from '../actions/rules';
-
-import type { RulesActions } from '../actions/rules';
-
-export type Rule = {
-  id: string;
-  text: string;
-  subtext: string;
-  rule_type: 'content' | 'account';
-}
-
-type RulesState = {
-  items: Rule[];
-  isLoading: boolean;
-}
-
-const initialState: RulesState = {
-  items: [],
-  isLoading: false,
-};
-
-export default function rules(state: RulesState = initialState, action: RulesActions): RulesState {
-  switch (action.type) {
-    case RULES_FETCH_REQUEST:
-      return { ...state, isLoading: true };
-    case RULES_FETCH_SUCCESS:
-      return { ...state, isLoading: false, items: action.payload };
-    default:
-      return state;
-  }
-}

src/schemas/rule.ts

@@ -2,10 +2,17 @@ import { z } from 'zod';
 
 import { coerceObject } from './utils';
 
-const ruleSchema = coerceObject({
+const ruleSchema = z.preprocess((data: any) => {
+  return {
+    ...data,
+    hint: data.hint || data.subtext,
+  };
+}, coerceObject({
   id: z.string(),
   text: z.string().catch(''),
-});
+  hint: z.string().catch(''),
+  rule_type: z.enum(['account', 'content', 'group']).nullable().catch(null),
+}));
 
 type Rule = z.infer<typeof ruleSchema>;