Expose backups again

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - UI: added backdrop blur behind modals.
 - Admin: let admins configure media preview for attachment thumbnails.
 - Login: accept `?server` param in external login, eg `fe.soapbox.pub/login/external?server=gleasonator.com`.
+- Backups: restored Pleroma backups functionality.
 
 ### Changed
 - Posts: letterbox images to 19:6 again.

app/soapbox/features/backups/index.tsx

@@ -1,10 +1,9 @@
-import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
+import { Button, Column, FormActions, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -23,22 +22,14 @@ const Backups = () => {
 
   const [isLoading, setIsLoading] = useState(true);
 
-  const handleCreateBackup: React.MouseEventHandler<HTMLAnchorElement> = e => {
+  const handleCreateBackup: React.MouseEventHandler = e => {
     dispatch(createBackup());
     e.preventDefault();
   };
 
-  const makeColumnMenu = () => {
-    return [{
-      text: intl.formatMessage(messages.create),
-      action: handleCreateBackup,
-      icon: require('@tabler/icons/plus.svg'),
-    }];
-  };
-
   useEffect(() => {
     dispatch(fetchBackups()).then(() => {
-      setIsLoading(true);
+      setIsLoading(false);
     }).catch(() => {});
   }, []);
 
@@ -46,16 +37,14 @@ const Backups = () => {
 
   const emptyMessageAction = (
     <a href='#' onClick={handleCreateBackup}>
-      {intl.formatMessage(messages.emptyMessageAction)}
+      <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+        {intl.formatMessage(messages.emptyMessageAction)}
+      </Text>
     </a>
   );
 
   return (
-    <Column
+    <Column label={intl.formatMessage(messages.heading)}>
-      label={intl.formatMessage(messages.heading)}
-      // @ts-ignore FIXME: make this menu available.
-      menu={makeColumnMenu()}
-    >
       <ScrollableList
         isLoading={isLoading}
         showLoading={showLoading}
@@ -64,16 +53,22 @@ const Backups = () => {
       >
         {backups.map((backup) => (
           <div
-            className={classNames('backup', { 'backup--pending': !backup.processed })}
+            className='p-4'
             key={backup.id}
           >
             {backup.processed
               ? <a href={backup.url} target='_blank'>{backup.inserted_at}</a>
-              : <div>{intl.formatMessage(messages.pending)}: {backup.inserted_at}</div>
+              : <Text theme='subtle'>{intl.formatMessage(messages.pending)}: {backup.inserted_at}</Text>
             }
           </div>
         ))}
       </ScrollableList>
+
+      <FormActions>
+        <Button theme='primary' disabled={isLoading} onClick={handleCreateBackup}>
+          {intl.formatMessage(messages.create)}
+        </Button>
+      </FormActions>
     </Column>
   );
 };

app/soapbox/features/settings/index.tsx

@@ -27,6 +27,7 @@ const messages = defineMessages({
   other: { id: 'settings.other', defaultMessage: 'Other options' },
   mfaEnabled: { id: 'mfa.enabled', defaultMessage: 'Enabled' },
   mfaDisabled: { id: 'mfa.disabled', defaultMessage: 'Disabled' },
+  backups: { id: 'column.backups', defaultMessage: 'Backups' },
 });
 
 /** User settings page. */
@@ -47,6 +48,7 @@ const Settings = () => {
   const navigateToDeleteAccount = () => history.push('/settings/account');
   const navigateToMoveAccount = () => history.push('/settings/migration');
   const navigateToAliases = () => history.push('/settings/aliases');
+  const navigateToBackups = () => history.push('/settings/backups');
 
   const isMfaEnabled = mfa.getIn(['settings', 'totp']);
 
@@ -136,6 +138,10 @@ const Settings = () => {
                   <ListItem label={intl.formatMessage(messages.accountAliases)} onClick={navigateToAliases} />
                 ))}
 
+                {features.backups && (
+                  <ListItem label={intl.formatMessage(messages.backups)} onClick={navigateToBackups} />
+                )}
+
                 {features.security && (
                   <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
                 )}

app/soapbox/features/ui/index.tsx

@@ -78,7 +78,7 @@ import {
   SoapboxConfig,
   // ExportData,
   ImportData,
-  // Backups,
+  Backups,
   MfaForm,
   ChatIndex,
   ChatWidget,
@@ -278,6 +278,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.importData && <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />}
       {features.accountAliases && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}
       {features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />}
+      {features.backups && <WrappedRoute path='/settings/backups' page={DefaultPage} component={Backups} content={children} />}
       <WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} />
       <WrappedRoute path='/settings/password' page={DefaultPage} component={EditPassword} content={children} />
       <WrappedRoute path='/settings/account' page={DefaultPage} component={DeleteAccount} content={children} />
@@ -285,7 +286,6 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <WrappedRoute path='/settings/mfa' page={DefaultPage} component={MfaForm} exact />
       <WrappedRoute path='/settings/tokens' page={DefaultPage} component={AuthTokenList} content={children} />
       <WrappedRoute path='/settings' page={DefaultPage} component={Settings} content={children} />
-      {/* <WrappedRoute path='/backups' page={DefaultPage} component={Backups} content={children} /> */}
       <WrappedRoute path='/soapbox/config' adminOnly page={DefaultPage} component={SoapboxConfig} content={children} />
 
       <WrappedRoute path='/soapbox/admin' staffOnly page={AdminPage} component={Dashboard} content={children} exact />

app/soapbox/utils/features.ts

@@ -178,6 +178,13 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     announcementsReactions: v.software === MASTODON && gte(v.compatVersion, '3.1.0'),
 
+    /**
+     * Pleroma backups.
+     * @see GET /api/v1/pleroma/backups
+     * @see POST /api/v1/pleroma/backups
+     */
+    backups: v.software === PLEROMA,
+
     /**
      * Set your birthday and view upcoming birthdays.
      * @see GET /api/v1/pleroma/birthdays

app/styles/application.scss

@@ -43,7 +43,6 @@
 @import 'components/video-player';
 @import 'components/audio-player';
 @import 'components/filters';
-@import 'components/backups';
 @import 'components/crypto-donate';
 @import 'components/aliases';
 @import 'components/icon';

app/styles/components/backups.scss

@@ -1,12 +0,0 @@
-.backup {
-  padding: 15px;
-  border-bottom: 1px solid var(--brand-color--faint);
-
-  a {
-    color: var(--brand-color--hicontrast);
-  }
-
-  &--pending {
-    @apply text-gray-400 italic;
-  }
-}