Allow managing instance rules

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/api/hooks/admin/index.ts

@@ -5,6 +5,7 @@ export { useDeleteRelay } from './useDeleteRelay';
 export { useDomains } from './useDomains';
 export { useModerationLog } from './useModerationLog';
 export { useRelays } from './useRelays';
+export { useRules } from './useRules';
 export { useSuggest } from './useSuggest';
 export { useUpdateDomain } from './useUpdateDomain';
 export { useVerify } from './useVerify';

src/api/hooks/admin/useRules.ts

@@ -0,0 +1,84 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { AxiosResponse } from 'axios';
+
+import { useApi } from 'soapbox/hooks';
+import { queryClient } from 'soapbox/queries/client';
+import { adminRuleSchema, type AdminRule } from 'soapbox/schemas';
+
+interface CreateRuleParams {
+  priority?: number;
+  text: string;
+  hint?: string;
+}
+
+interface UpdateRuleParams {
+  id: string;
+  priority?: number;
+  text?: string;
+  hint?: string;
+}
+
+const useRules = () => {
+  const api = useApi();
+
+  const getRules = async () => {
+    const { data } = await api.get<AdminRule[]>('/api/v1/pleroma/admin/rules');
+
+    const normalizedData = data.map((rule) => adminRuleSchema.parse(rule));
+    return normalizedData;
+  };
+
+  const result = useQuery<ReadonlyArray<AdminRule>>({
+    queryKey: ['admin', 'rules'],
+    queryFn: getRules,
+    placeholderData: [],
+  });
+
+  const {
+    mutate: createRule,
+    isPending: isCreating,
+  } = useMutation({
+    mutationFn: (params: CreateRuleParams) => api.post('/api/v1/pleroma/admin/rules', params),
+    retry: false,
+    onSuccess: ({ data }: AxiosResponse) =>
+      queryClient.setQueryData(['admin', 'rules'], (prevResult: ReadonlyArray<AdminRule>) =>
+        [...prevResult, adminRuleSchema.parse(data)],
+      ),
+  });
+
+  const {
+    mutate: updateRule,
+    isPending: isUpdating,
+  } = useMutation({
+    mutationFn: ({ id, ...params }: UpdateRuleParams) => api.patch(`/api/v1/pleroma/admin/rules/${id}`, params),
+    retry: false,
+    onSuccess: ({ data }: AxiosResponse) =>
+      queryClient.setQueryData(['admin', 'rules'], (prevResult: ReadonlyArray<AdminRule>) =>
+        prevResult.map((rule) => rule.id === data.id ? adminRuleSchema.parse(data) : rule),
+      ),
+  });
+
+  const {
+    mutate: deleteRule,
+    isPending: isDeleting,
+  } = useMutation({
+    mutationFn: (id: string) => api.delete(`/api/v1/pleroma/admin/rules/${id}`),
+    retry: false,
+    onSuccess: (_, id) =>
+      queryClient.setQueryData(['admin', 'rules'], (prevResult: ReadonlyArray<AdminRule>) =>
+        prevResult.filter(({ id: ruleId }) => ruleId !== id),
+      ),
+  });
+
+  return {
+    ...result,
+    createRule,
+    isCreating,
+    updateRule,
+    isUpdating,
+    deleteRule,
+    isDeleting,
+  };
+};
+
+export { useRules };

src/entity-store/entities.ts

@@ -12,7 +12,8 @@ enum Entities {
   PATRON_USERS = 'PatronUsers',
   RELATIONSHIPS = 'Relationships',
   RELAYS = 'Relays',
-  STATUSES = 'Statuses'
+  RULES = 'Rules',
+  STATUSES = 'Statuses',
 }
 
 interface EntityTypes {
@@ -26,6 +27,7 @@ interface EntityTypes {
   [Entities.PATRON_USERS]: Schemas.PatronUser;
   [Entities.RELATIONSHIPS]: Schemas.Relationship;
   [Entities.RELAYS]: Schemas.Relay;
+  [Entities.RULES]: Schemas.AdminRule;
   [Entities.STATUSES]: Schemas.Status;
 }
 

src/features/admin/rules.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import { useRules } from 'soapbox/api/hooks/admin';
+import ScrollableList from 'soapbox/components/scrollable-list';
+import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+import { AdminRule } from 'soapbox/schemas';
+import toast from 'soapbox/toast';
+
+const messages = defineMessages({
+  heading: { id: 'column.admin.rules', defaultMessage: 'Instance rules' },
+  deleteConfirm: { id: 'confirmations.admin.delete_rule.confirm', defaultMessage: 'Delete' },
+  deleteHeading: { id: 'confirmations.admin.delete_rule.heading', defaultMessage: 'Delete rule' },
+  deleteMessage: { id: 'confirmations.admin.delete_rule.message', defaultMessage: 'Are you sure you want to delete the rule?' },
+  ruleDeleteSuccess: { id: 'admin.edit_rule.deleted', defaultMessage: 'Rule deleted' },
+});
+
+interface IRule {
+  rule: AdminRule;
+}
+
+const Rule: React.FC<IRule> = ({ rule }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const { deleteRule } = useRules();
+
+  const handleEditRule = (rule: AdminRule) => () => {
+    dispatch(openModal('EDIT_RULE', { rule }));
+  };
+
+  const handleDeleteRule = (id: string) => () => {
+    dispatch(openModal('CONFIRM', {
+      heading: intl.formatMessage(messages.deleteHeading),
+      message: intl.formatMessage(messages.deleteMessage),
+      confirm: intl.formatMessage(messages.deleteConfirm),
+      onConfirm: () => deleteRule(id, {
+        onSuccess: () => toast.success(messages.ruleDeleteSuccess),
+      }),
+    }));
+  };
+
+  return (
+    <div key={rule.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+      <Stack space={2}>
+        <Text>{rule.text}</Text>
+        <Text tag='span' theme='muted' size='sm'>{rule.hint}</Text>
+        {rule.priority !== null && (
+          <Text size='sm'>
+            <Text tag='span' size='sm' weight='medium'>
+              <FormattedMessage id='admin.rule.priority' defaultMessage='Priority:' />
+            </Text>
+            {' '}
+            {rule.priority}
+          </Text>
+        )}
+        <HStack justifyContent='end' space={2}>
+          <Button theme='primary' onClick={handleEditRule(rule)}>
+            <FormattedMessage id='admin.rules.edit' defaultMessage='Edit' />
+          </Button>
+          <Button theme='primary' onClick={handleDeleteRule(rule.id)}>
+            <FormattedMessage id='admin.rules.delete' defaultMessage='Delete' />
+          </Button>
+        </HStack>
+      </Stack>
+    </div>
+  );
+};
+
+const Rules: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const { data, isLoading } = useRules();
+
+  const handleCreateRule = () => {
+    dispatch(openModal('EDIT_RULE'));
+  };
+
+  const emptyMessage = <FormattedMessage id='empty_column.admin.rules' defaultMessage='There are no instance rules yet.' />;
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Stack className='gap-4'>
+        <Button
+          className='sm:w-fit sm:self-end'
+          icon={require('@tabler/icons/outline/plus.svg')}
+          onClick={handleCreateRule}
+          theme='secondary'
+          block
+        >
+          <FormattedMessage id='admin.rules.action' defaultMessage='Create rule' />
+        </Button>
+        <ScrollableList
+          scrollKey='rules'
+          emptyMessage={emptyMessage}
+          itemClassName='py-3 first:pt-0 last:pb-0'
+          isLoading={isLoading}
+          showLoading={isLoading}
+        >
+          {data!.map((rule) => (
+            <Rule key={rule.id} rule={rule} />
+          ))}
+        </ScrollableList>
+      </Stack>
+    </Column>
+  );
+};
+
+export default Rules;

src/features/admin/tabs/dashboard.tsx

@@ -100,6 +100,13 @@ const Dashboard: React.FC = () => {
           />
         )}
 
+        {features.adminRules && (
+          <ListItem
+            to='/soapbox/admin/rules'
+            label={<FormattedMessage id='column.admin.rules' defaultMessage='Instance rules' />}
+          />
+        )}
+
         {features.domains && (
           <ListItem
             to='/soapbox/admin/domains'

src/features/ui/components/modal-root.tsx

@@ -41,6 +41,7 @@ import {
   SelectBookmarkFolderModal,
   UnauthorizedModal,
   VideoModal,
+  EditRuleModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import ModalLoading from './modal-loading';
@@ -63,6 +64,7 @@ const MODAL_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
   'EDIT_BOOKMARK_FOLDER': EditBookmarkFolderModal,
   'EDIT_DOMAIN': EditDomainModal,
   'EDIT_FEDERATION': EditFederationModal,
+  'EDIT_RULE': EditRuleModal,
   'EMBED': EmbedModal,
   'EVENT_MAP': EventMapModal,
   'EVENT_PARTICIPANTS': EventParticipantsModal,

src/features/ui/components/modals/edit-rule-modal.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { useRules } from 'soapbox/api/hooks/admin';
+import { Form, FormGroup, Input, Modal } from 'soapbox/components/ui';
+import { useTextField } from 'soapbox/hooks/forms';
+import { type AdminRule } from 'soapbox/schemas';
+import toast from 'soapbox/toast';
+
+const messages = defineMessages({
+  save: { id: 'admin.edit_rule.save', defaultMessage: 'Save' },
+  ruleTextPlaceholder: { id: 'admin.edit_rule.fields.text_placeholder', defaultMessage: 'Instance rule text' },
+  rulePriorityPlaceholder: { id: 'admin.edit_rule.fields.priority_placeholder', defaultMessage: 'Instance rule display priority' },
+  ruleCreateSuccess: { id: 'admin.edit_rule.created', defaultMessage: 'Rule created' },
+  ruleUpdateSuccess: { id: 'admin.edit_rule.updated', defaultMessage: 'Rule edited' },
+});
+
+interface IEditRuleModal {
+  onClose: (type?: string) => void;
+  rule?: AdminRule;
+}
+
+const EditRuleModal: React.FC<IEditRuleModal> = ({ onClose, rule }) => {
+  const intl = useIntl();
+
+  const { createRule, updateRule } = useRules();
+
+  const text = useTextField(rule?.text);
+  const priority = useTextField(rule?.priority?.toString());
+
+  const onClickClose = () => {
+    onClose('EDIT_RULE');
+  };
+
+  const handleSubmit = () => {
+    if (rule) {
+      updateRule({
+        id: rule.id,
+        text: text.value,
+        priority: isNaN(Number(priority.value)) ? undefined : Number(priority.value),
+      }, {
+        onSuccess: () => {
+          toast.success(messages.ruleUpdateSuccess);
+          onClickClose();
+        },
+      });
+    } else {
+      createRule({
+        text: text.value,
+        priority: isNaN(Number(priority.value)) ? undefined : Number(priority.value),
+      }, {
+        onSuccess: () => {
+          toast.success(messages.ruleUpdateSuccess);
+          onClickClose();
+        },
+      });
+    }
+  };
+
+  return (
+    <Modal
+      onClose={onClickClose}
+      title={rule
+        ? <FormattedMessage id='column.admin.edit_rule' defaultMessage='Edit rule' />
+        : <FormattedMessage id='column.admin.create_rule' defaultMessage='Create rule' />}
+      confirmationAction={handleSubmit}
+      confirmationText={intl.formatMessage(messages.save)}
+    >
+      <Form>
+        <FormGroup
+          labelText={<FormattedMessage id='admin.edit_rule.fields.text_label' defaultMessage='Rule text' />}
+        >
+          <Input
+            placeholder={intl.formatMessage(messages.ruleTextPlaceholder)}
+            {...text}
+          />
+        </FormGroup>
+        <FormGroup
+          labelText={<FormattedMessage id='admin.edit_rule.fields.priority_label' defaultMessage='Rule priority' />}
+        >
+          <Input
+            placeholder={intl.formatMessage(messages.rulePriorityPlaceholder)}
+            type='number'
+            {...priority}
+          />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditRuleModal;

src/features/ui/index.tsx

@@ -142,6 +142,7 @@ import {
   NostrRelays,
   Bech32Redirect,
   Relays,
+  Rules,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -332,9 +333,10 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/soapbox/admin/log' staffOnly page={AdminPage} component={ModerationLog} content={children} exact />
       <WrappedRoute path='/soapbox/admin/users' staffOnly page={AdminPage} component={UserIndex} content={children} exact />
       <WrappedRoute path='/soapbox/admin/theme' staffOnly page={AdminPage} component={ThemeEditor} content={children} exact />
+      <WrappedRoute path='/soapbox/admin/relays' staffOnly page={AdminPage} component={Relays} content={children} exact />
       {features.adminAnnouncements && <WrappedRoute path='/soapbox/admin/announcements' staffOnly page={AdminPage} component={Announcements} content={children} exact />}
       {features.domains && <WrappedRoute path='/soapbox/admin/domains' staffOnly page={AdminPage} component={Domains} content={children} exact />}
-      <WrappedRoute path='/soapbox/admin/relays' staffOnly page={AdminPage} component={Relays} content={children} exact />
+      {features.adminRules && <WrappedRoute path='/soapbox/admin/rules' staffOnly page={AdminPage} component={Rules} content={children} exact />}
       <WrappedRoute path='/info' page={EmptyPage} component={ServerInfo} content={children} />
 
       <WrappedRoute path='/developers/apps/create' developerOnly page={DefaultPage} component={CreateApp} content={children} />

src/features/ui/util/async-components.ts

@@ -173,3 +173,5 @@ export const EditDomainModal = lazy(() => import('soapbox/features/ui/components
 export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays'));
 export const Bech32Redirect = lazy(() => import('soapbox/features/nostr/Bech32Redirect'));
 export const Relays = lazy(() => import('soapbox/features/admin/relays'));
+export const Rules = lazy(() => import('soapbox/features/admin/rules'));
+export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));

src/schemas/index.ts

@@ -18,6 +18,7 @@ export { patronUserSchema, type PatronUser } from './patron';
 export { pollSchema, type Poll, type PollOption } from './poll';
 export { relationshipSchema, type Relationship } from './relationship';
 export { relaySchema, type Relay } from './relay';
+export { ruleSchema, adminRuleSchema, type Rule, type AdminRule } from './rule';
 export { statusSchema, type Status } from './status';
 export { tagSchema, type Tag } from './tag';
 export { tombstoneSchema, type Tombstone } from './tombstone';

src/schemas/rule.ts

@@ -1,19 +1,25 @@
 import { z } from 'zod';
 
-import { coerceObject } from './utils';
+const baseRuleSchema = z.object({
+  id: z.string(),
+  text: z.string().catch(''),
+  hint: z.string().catch(''),
+  rule_type: z.enum(['account', 'content', 'group']).nullable().catch(null),
+});
 
 const ruleSchema = z.preprocess((data: any) => {
   return {
     ...data,
     hint: data.hint || data.subtext,
   };
-}, coerceObject({
+}, baseRuleSchema);
-  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>;
 
-export { ruleSchema, type Rule };
+const adminRuleSchema = baseRuleSchema.extend({
+  priority: z.number().nullable().catch(null),
+});
+
+type AdminRule = z.infer<typeof adminRuleSchema>;
+
+export { ruleSchema, adminRuleSchema, type Rule, type AdminRule };

src/utils/features.ts

@@ -203,6 +203,15 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     adminFE: v.software === PLEROMA,
 
+    /**
+     * Ability to manage instance rules by admins.
+     * @see GET /api/v1/pleroma/admin/rules
+     * @see POST /api/v1/pleroma/admin/rules
+     * @see PATCH /api/v1/pleroma/admin/rules/:id
+     * @see DELETE /api/v1/pleroma/admin/rules/:id
+     */
+    adminRules: v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.51'),
+
     /**
      * Can display announcements set by admins.
      * @see GET /api/v1/announcements