Refactor BundleColumnError to TS (#39177)

app/javascript/mastodon/features/account_edit/components/column.tsx

@@ -9,7 +9,7 @@ import { Helmet } from '@unhead/react/helmet';
 import { Column } from '@/mastodon/components/column';
 import { ColumnHeader } from '@/mastodon/components/column_header';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
-import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
+import { BundleColumnError } from '@/mastodon/features/ui/components/bundle_column_error';
 
 import { useColumnsContext } from '../../ui/util/columns_context';
 import classes from '../styles.module.scss';

app/javascript/mastodon/features/account_featured/index.tsx

@@ -19,7 +19,7 @@ import {
 } from '@/mastodon/components/scrollable_list/components';
 import type { TruncatedListItemInfo } from '@/mastodon/components/truncated_list';
 import { TruncatedListItems } from '@/mastodon/components/truncated_list';
-import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
+import { BundleColumnError } from '@/mastodon/features/ui/components/bundle_column_error';
 import Column from '@/mastodon/features/ui/components/column';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountId } from '@/mastodon/hooks/useAccountId';

app/javascript/mastodon/features/account_gallery/index.tsx

@@ -11,7 +11,7 @@ import { ColumnBackButton } from '@/mastodon/components/column_back_button';
 import { LimitedAccountHint } from '@/mastodon/components/limited_account_hint';
 import { RemoteHint } from '@/mastodon/components/remote_hint';
 import ScrollableList from '@/mastodon/components/scrollable_list';
-import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
+import { BundleColumnError } from '@/mastodon/features/ui/components/bundle_column_error';
 import Column from '@/mastodon/features/ui/components/column';
 import { useAccountId } from '@/mastodon/hooks/useAccountId';
 import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';

app/javascript/mastodon/features/account_timeline/index.tsx

@@ -19,7 +19,7 @@ import { LimitedAccountHint } from '@/mastodon/components/limited_account_hint';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import { RemoteHint } from '@/mastodon/components/remote_hint';
 import StatusList from '@/mastodon/components/status_list';
-import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
+import { BundleColumnError } from '@/mastodon/features/ui/components/bundle_column_error';
 import {
   useAccountId,
   useCurrentAccountId,

app/javascript/mastodon/features/followers/components/list.tsx

@@ -6,7 +6,7 @@ import { Column } from '@/mastodon/components/column';
 import { ColumnBackButton } from '@/mastodon/components/column_back_button';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import ScrollableList from '@/mastodon/components/scrollable_list';
-import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
+import { BundleColumnError } from '@/mastodon/features/ui/components/bundle_column_error';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
 import { useLayout } from '@/mastodon/hooks/useLayout';

app/javascript/mastodon/features/terms_of_service/index.tsx

@@ -14,7 +14,7 @@ import { Helmet } from '@unhead/react/helmet';
 import { apiGetTermsOfService } from 'mastodon/api/instance';
 import type { ApiTermsOfServiceJSON } from 'mastodon/api_types/instance';
 import { Column } from 'mastodon/components/column';
-import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
+import { BundleColumnError } from 'mastodon/features/ui/components/bundle_column_error';
 
 const messages = defineMessages({
   title: { id: 'terms_of_service.title', defaultMessage: 'Terms of Service' },

app/javascript/mastodon/features/ui/components/bundle_column_error.jsx

@@ -1,116 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { Helmet } from '@unhead/react/helmet';
-import { Link } from 'react-router-dom';
-
-import { Button } from 'mastodon/components/button';
-import Column from 'mastodon/components/column';
-import { injectIntl } from '@/mastodon/components/intl';
-import { GIF } from 'mastodon/components/gif';
-
-class CopyButton extends PureComponent {
-
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    value: PropTypes.string.isRequired,
-  };
-
-  state = {
-    copied: false,
-  };
-
-  handleClick = () => {
-    const { value } = this.props;
-    navigator.clipboard.writeText(value);
-    this.setState({ copied: true });
-    this.timeout = setTimeout(() => this.setState({ copied: false }), 700);
-  };
-
-  componentWillUnmount () {
-    if (this.timeout) clearTimeout(this.timeout);
-  }
-
-  render () {
-    const { children } = this.props;
-    const { copied } = this.state;
-
-    return (
-      <Button onClick={this.handleClick} className={copied ? 'copied' : 'copyable'}>{copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : children}</Button>
-    );
-  }
-
-}
-
-class BundleColumnError extends PureComponent {
-
-  static propTypes = {
-    errorType: PropTypes.oneOf(['routing', 'network', 'error']),
-    onRetry: PropTypes.func,
-    intl: PropTypes.object.isRequired,
-    multiColumn: PropTypes.bool,
-    stacktrace: PropTypes.string,
-  };
-
-  static defaultProps = {
-    errorType: 'routing',
-  };
-
-  handleRetry = () => {
-    const { onRetry } = this.props;
-
-    if (onRetry) {
-      onRetry();
-    }
-  };
-
-  render () {
-    const { errorType, multiColumn, stacktrace } = this.props;
-
-    let title, body;
-
-    switch(errorType) {
-    case 'routing':
-      title = <FormattedMessage id='bundle_column_error.routing.title' defaultMessage='404' />;
-      body = <FormattedMessage id='bundle_column_error.routing.body' defaultMessage='The requested page could not be found. Are you sure the URL in the address bar is correct?' />;
-      break;
-    case 'network':
-      title = <FormattedMessage id='bundle_column_error.network.title' defaultMessage='Network error' />;
-      body = <FormattedMessage id='bundle_column_error.network.body' defaultMessage='There was an error when trying to load this page. This could be due to a temporary problem with your internet connection or this server.' />;
-      break;
-    case 'error':
-      title = <FormattedMessage id='bundle_column_error.error.title' defaultMessage='Oh, no!' />;
-      body = <FormattedMessage id='bundle_column_error.error.body' defaultMessage='The requested page could not be rendered. It could be due to a bug in our code, or a browser compatibility issue.' />;
-      break;
-    }
-
-    return (
-      <Column bindToDocument={!multiColumn}>
-        <div className='error-column'>
-          <GIF src='/oops.gif' staticSrc='/oops.png' className='error-column__image' />
-
-          <div className='error-column__message'>
-            <h1>{title}</h1>
-            <p>{body}</p>
-
-            <div className='error-column__message__actions'>
-              {errorType === 'network' && <Button onClick={this.handleRetry}><FormattedMessage id='bundle_column_error.retry' defaultMessage='Try again' /></Button>}
-              {errorType === 'error' && <CopyButton value={stacktrace}><FormattedMessage id='bundle_column_error.copy_stacktrace' defaultMessage='Copy error report' /></CopyButton>}
-              <Link to='/' className={classNames('button', { 'button-secondary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
-            </div>
-          </div>
-        </div>
-
-        <Helmet>
-          <meta name='robots' content='noindex' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default injectIntl(BundleColumnError);

app/javascript/mastodon/features/ui/components/bundle_column_error/index.tsx

@@ -0,0 +1,122 @@
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import { Helmet } from '@unhead/react/helmet';
+
+import { CopyButton } from '@/mastodon/components/copy_button';
+import { EmptyState } from '@/mastodon/components/empty_state';
+import { Button } from 'mastodon/components/button';
+import { Column } from 'mastodon/components/column';
+
+import classes from './styles.module.scss';
+
+interface BundleColumnErrorProps {
+  errorType?: 'routing' | 'network' | 'error';
+  onRetry?: () => void;
+  multiColumn?: boolean;
+  stacktrace?: string;
+}
+
+export const BundleColumnError: React.FC<BundleColumnErrorProps> = ({
+  errorType = 'routing',
+  onRetry,
+  multiColumn,
+  stacktrace,
+}) => {
+  let title, body;
+
+  switch (errorType) {
+    case 'routing':
+      title = (
+        <FormattedMessage
+          id='bundle_column_error.routing.title'
+          defaultMessage='404'
+        />
+      );
+      body = (
+        <FormattedMessage
+          id='bundle_column_error.routing.body'
+          defaultMessage='The requested page could not be found. Are you sure the URL in the address bar is correct?'
+        />
+      );
+      break;
+    case 'network':
+      title = (
+        <FormattedMessage
+          id='bundle_column_error.network.title'
+          defaultMessage='Network error'
+        />
+      );
+      body = (
+        <FormattedMessage
+          id='bundle_column_error.network.body'
+          defaultMessage='There was an error when trying to load this page. This could be due to a temporary problem with your internet connection or this server.'
+        />
+      );
+      break;
+    case 'error':
+      title = (
+        <FormattedMessage
+          id='bundle_column_error.error.title'
+          defaultMessage='Oh, no!'
+        />
+      );
+      body = (
+        <FormattedMessage
+          id='bundle_column_error.error.body'
+          defaultMessage='The requested page could not be rendered. It could be due to a bug in our code, or a browser compatibility issue.'
+        />
+      );
+      break;
+  }
+
+  return (
+    <Column bindToDocument={!multiColumn}>
+      <EmptyState
+        image='error'
+        title={title}
+        message={body}
+        className={classes.error}
+      >
+        <div className={classes.actions}>
+          {errorType === 'network' && onRetry && (
+            <Button onClick={onRetry}>
+              <FormattedMessage
+                id='bundle_column_error.retry'
+                defaultMessage='Try again'
+              />
+            </Button>
+          )}
+          {errorType === 'error' && stacktrace && (
+            <CopyButton value={stacktrace}>
+              <FormattedMessage
+                id='bundle_column_error.copy_stacktrace'
+                defaultMessage='Copy error report'
+              />
+            </CopyButton>
+          )}
+          <Link
+            to='/'
+            className={classNames('button', {
+              'button-secondary': errorType !== 'routing',
+            })}
+          >
+            <FormattedMessage
+              id='bundle_column_error.return'
+              defaultMessage='Go back home'
+            />
+          </Link>
+        </div>
+      </EmptyState>
+
+      <Helmet>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default BundleColumnError;

app/javascript/mastodon/features/ui/components/bundle_column_error/styles.module.scss

@@ -0,0 +1,12 @@
+.error {
+  flex-grow: 1;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 4px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  justify-content: center;
+}

app/javascript/mastodon/features/ui/components/columns_area.tsx

@@ -33,7 +33,7 @@ import {
 import { useColumnsContext } from '../util/columns_context';
 
 import Bundle from './bundle';
-import BundleColumnError from './bundle_column_error';
+import { BundleColumnError } from './bundle_column_error';
 import { ColumnLoading } from './column_loading';
 import { ComposePanel, RedirectToMobileComposeIfNeeded } from './compose_panel';
 import DrawerLoading from './drawer_loading';