Allow to manage instance relays

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

src/api/hooks/admin/index.ts

@@ -1,6 +1,9 @@
 export { useCreateDomain, type CreateDomainParams } from './useCreateDomain';
+export { useCreateRelay } from './useCreateRelay';
 export { useDeleteDomain } from './useDeleteDomain';
+export { useDeleteRelay } from './useDeleteRelay';
 export { useDomains } from './useDomains';
+export { useRelays } from './useRelays';
 export { useSuggest } from './useSuggest';
 export { useUpdateDomain } from './useUpdateDomain';
 export { useVerify } from './useVerify';

src/api/hooks/admin/useCreateRelay.ts

@@ -0,0 +1,18 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useCreateEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+import { relaySchema } from 'soapbox/schemas';
+
+const useCreateRelay = () => {
+  const api = useApi();
+
+  const { createEntity, ...rest } = useCreateEntity([Entities.RELAYS], (relayUrl: string) =>
+    api.post('/api/v1/pleroma/admin/relay', { relay_url: relayUrl }), { schema: relaySchema });
+
+  return {
+    createRelay: createEntity,
+    ...rest,
+  };
+};
+
+export { useCreateRelay };

src/api/hooks/admin/useDeleteDomain.ts

@@ -2,11 +2,6 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useDeleteEntity } from 'soapbox/entity-store/hooks';
 import { useApi } from 'soapbox/hooks';
 
-interface DeleteDomainParams {
-  domain: string;
-  public: boolean;
-}
-
 const useDeleteDomain = () => {
   const api = useApi();
 
@@ -23,4 +18,4 @@ const useDeleteDomain = () => {
   };
 };
 
-export { useDeleteDomain, type DeleteDomainParams };
+export { useDeleteDomain };

src/api/hooks/admin/useDeleteRelay.ts

@@ -0,0 +1,19 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useDeleteEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+
+const useDeleteRelay = () => {
+  const api = useApi();
+
+  const { deleteEntity, ...rest } = useDeleteEntity(Entities.RELAYS, (relayUrl: string) =>
+    api.delete('/api/v1/pleroma/admin/relay', {
+      data: { relay_url: relayUrl },
+    }));
+
+  return {
+    mutate: deleteEntity,
+    ...rest,
+  };
+};
+
+export { useDeleteRelay };

src/api/hooks/admin/useRelays.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useApi } from 'soapbox/hooks';
+import { relaySchema, type Relay } from 'soapbox/schemas';
+
+const useRelays = () => {
+  const api = useApi();
+
+  const getRelays = async () => {
+    const { data } = await api.get<{ relays: Relay[] }>('/api/v1/pleroma/admin/relay');
+
+    const normalizedData = data.relays?.map((relay) => relaySchema.parse(relay));
+    return normalizedData;
+  };
+
+  const result = useQuery<ReadonlyArray<Relay>>({
+    queryKey: ['relays'],
+    queryFn: getRelays,
+    placeholderData: [],
+  });
+
+  return result;
+};
+
+export { useRelays };

src/entity-store/entities.ts

@@ -11,6 +11,7 @@ enum Entities {
   GROUP_TAGS = 'GroupTags',
   PATRON_USERS = 'PatronUsers',
   RELATIONSHIPS = 'Relationships',
+  RELAYS = 'Relays',
   STATUSES = 'Statuses'
 }
 
@@ -24,6 +25,7 @@ interface EntityTypes {
   [Entities.GROUP_TAGS]: Schemas.GroupTag;
   [Entities.PATRON_USERS]: Schemas.PatronUser;
   [Entities.RELATIONSHIPS]: Schemas.Relationship;
+  [Entities.RELAYS]: Schemas.Relay;
   [Entities.STATUSES]: Schemas.Status;
 }
 

src/features/admin/domains.tsx

@@ -37,7 +37,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
     dispatch(openModal('EDIT_DOMAIN', { domainId: domain.id }));
   };
 
-  const handleDeleteDomain = (id: string) => () => {
+  const handleDeleteDomain = () => () => {
     dispatch(openModal('CONFIRM', {
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
@@ -90,7 +90,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
           <Button theme='primary' onClick={handleEditDomain(domain)}>
             <FormattedMessage id='admin.domains.edit' defaultMessage='Edit' />
           </Button>
-          <Button theme='primary' onClick={handleDeleteDomain(domain.id)}>
+          <Button theme='primary' onClick={handleDeleteDomain()}>
             <FormattedMessage id='admin.domains.delete' defaultMessage='Delete' />
           </Button>
         </HStack>

src/features/admin/relays.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { useCreateRelay, useDeleteRelay, useRelays } from 'soapbox/api/hooks/admin';
+import ScrollableList from 'soapbox/components/scrollable-list';
+import { Button, Column, Form, HStack, Input, Stack, Text } from 'soapbox/components/ui';
+import { useTextField } from 'soapbox/hooks/forms';
+import toast from 'soapbox/toast';
+
+import type { Relay as RelayEntity } from 'soapbox/schemas';
+
+const messages = defineMessages({
+  heading: { id: 'column.admin.relays', defaultMessage: 'Instance relays' },
+  relayDeleteSuccess: { id: 'admin.relays.deleted', defaultMessage: 'Relay unfollowed' },
+  label: { id: 'admin.relays.new.url_placeholder', defaultMessage: 'Instance relay URL' },
+  createSuccess: { id: 'admin.relays.add.success', defaultMessage: 'Instance relay followed' },
+  createFail: { id: 'admin.relays.add.fail', defaultMessage: 'Failed to follow the instance relay' },
+});
+
+interface IRelay {
+  relay: RelayEntity;
+}
+
+const Relay: React.FC<IRelay> = ({ relay }) => {
+  const { mutate: deleteRelay } = useDeleteRelay();
+  const { refetch } = useRelays();
+
+  const handleDeleteRelay = () => () => {
+    deleteRelay(relay.actor).then(() => {
+      refetch();
+      toast.success(messages.relayDeleteSuccess);
+    }).catch(() => {});
+  };
+
+  return (
+    <div key={relay.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+      <Stack space={2}>
+        <HStack alignItems='center' space={4} wrap>
+          <Text size='sm'>
+            <Text tag='span' size='sm' weight='medium'>
+              <FormattedMessage id='admin.relays.url' defaultMessage='Instance URL:' />
+            </Text>
+            {' '}
+            {relay.actor}
+          </Text>
+          {relay.followed_back && (
+            <Text tag='span' size='sm' weight='medium'>
+              <FormattedMessage id='admin.relays.followed_back' defaultMessage='Followed back' />
+            </Text>
+          )}
+        </HStack>
+        <HStack justifyContent='end' space={2}>
+          <Button theme='primary' onClick={handleDeleteRelay()}>
+            <FormattedMessage id='admin.relays.unfollow' defaultMessage='Unfollow' />
+          </Button>
+        </HStack>
+      </Stack>
+    </div>
+  );
+};
+
+const NewRelayForm: React.FC = () => {
+  const intl = useIntl();
+
+  const name = useTextField();
+
+  const { createRelay, isSubmitting } = useCreateRelay();
+  const { refetch } = useRelays();
+
+  const handleSubmit = (e: React.FormEvent<Element>) => {
+    e.preventDefault();
+    createRelay(name.value, {
+      onSuccess() {
+        toast.success(messages.createSuccess);
+        refetch();
+      },
+      onError() {
+        toast.success(messages.createFail);
+      },
+    });
+  };
+
+  const label = intl.formatMessage(messages.label);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <HStack space={2} alignItems='center'>
+        <label className='grow'>
+          <span style={{ display: 'none' }}>{label}</span>
+
+          <Input
+            type='text'
+            placeholder={label}
+            disabled={isSubmitting}
+            {...name}
+          />
+        </label>
+
+        <Button
+          disabled={isSubmitting}
+          onClick={handleSubmit}
+          theme='primary'
+        >
+          <FormattedMessage id='admin.relays.new.follow' defaultMessage='Follow' />
+        </Button>
+      </HStack>
+    </Form>
+  );
+};
+
+const Relays: React.FC = () => {
+  const intl = useIntl();
+
+  const { data: relays, isFetching } = useRelays();
+
+  const emptyMessage = <FormattedMessage id='empty_column.admin.relays' defaultMessage='There are no relays followed yet.' />;
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Stack className='gap-4'>
+        <NewRelayForm />
+
+        {relays && (
+          <ScrollableList
+            scrollKey='relays'
+            emptyMessage={emptyMessage}
+            itemClassName='py-3 first:pt-0 last:pb-0'
+            isLoading={isFetching}
+            showLoading={isFetching && !relays?.length}
+          >
+            {relays.map((relay) => (
+              <Relay key={relay.id} relay={relay} />
+            ))}
+          </ScrollableList>
+        )}
+      </Stack>
+    </Column>
+  );
+};
+
+export default Relays;

src/features/bookmark-folders/components/new-folder-form.tsx

@@ -37,7 +37,7 @@ const NewFolderForm: React.FC = () => {
 
   return (
     <Form onSubmit={handleSubmit}>
-      <HStack space={2}>
+      <HStack space={2} alignItems='center'>
         <label className='grow'>
           <span style={{ display: 'none' }}>{label}</span>
 

src/features/ui/index.tsx

@@ -138,6 +138,7 @@ import {
   LandingTimeline,
   BookmarkFolders,
   Domains,
+  Relays,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -327,6 +328,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/soapbox/admin/theme' staffOnly page={AdminPage} component={ThemeEditor} 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 />
       <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

@@ -169,3 +169,4 @@ export const EditBookmarkFolderModal = lazy(() => import('soapbox/features/ui/co
 export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/select-bookmark-folder-modal'));
 export const Domains = lazy(() => import('soapbox/features/admin/domains'));
 export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal'));
+export const Relays = lazy(() => import('soapbox/features/admin/relays'));

src/locales/en.json

@@ -138,6 +138,14 @@
   "admin.latest_accounts_panel.more": "Click to see {count, plural, one {# account} other {# accounts}}",
   "admin.latest_accounts_panel.title": "Latest Accounts",
   "admin.moderation_log.empty_message": "You have not performed any moderation actions yet. When you do, a history will be shown here.",
+  "admin.relays.add.fail": "Failed to follow the instance relay",
+  "admin.relays.add.success": "Instance relay followed",
+  "admin.relays.deleted": "Relay unfollowed",
+  "admin.relays.followed_back": "Followed back",
+  "admin.relays.new.follow": "Follow",
+  "admin.relays.new.url_placeholder": "Instance relay URL",
+  "admin.relays.unfollow": "Unfollow",
+  "admin.relays.url": "Instance URL:",
   "admin.reports.actions.close": "Close",
   "admin.reports.actions.view_status": "View post",
   "admin.reports.empty_message": "There are no open reports. If a user gets reported, they will show up here.",
@@ -316,6 +324,7 @@
   "column.admin.edit_announcement": "Edit announcement",
   "column.admin.edit_domain": "Edit domain",
   "column.admin.moderation_log": "Moderation Log",
+  "column.admin.relays": "Instance relays",
   "column.admin.reports": "Reports",
   "column.admin.reports.menu.moderation_log": "Moderation Log",
   "column.admin.users": "Users",
@@ -679,6 +688,7 @@
   "empty_column.account_unavailable": "Profile unavailable",
   "empty_column.admin.announcements": "There are no announcements yet.",
   "empty_column.admin.domains": "There are no domains yet.",
+  "empty_column.admin.relays": "There are no relays followed yet.",
   "empty_column.aliases": "You haven't created any account alias yet.",
   "empty_column.aliases.suggestions": "There are no account suggestions available for the provided term.",
   "empty_column.blocks": "You haven't blocked any users yet.",

src/schemas/index.ts

@@ -16,6 +16,7 @@ export { notificationSchema, type Notification } from './notification';
 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 { statusSchema, type Status } from './status';
 export { tagSchema, type Tag } from './tag';
 export { tombstoneSchema, type Tombstone } from './tombstone';

src/schemas/relay.ts

@@ -0,0 +1,13 @@
+import z from 'zod';
+
+const relaySchema = z.preprocess((data: any) => {
+  return { id: data.actor, ...data };
+}, z.object({
+  actor: z.string().catch(''),
+  id: z.string(),
+  followed_back: z.boolean().catch(false),
+}));
+
+type Relay = z.infer<typeof relaySchema>
+
+export { relaySchema, type Relay };