[Glitch] Change all components to use the same error page in web UI

Port cee357d5385c66a0217827ba3ceab2e77cd2f649 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

9 files changed, 15 insertions, 77 deletions

diff --git a/app/javascript/flavours/glitch/components/missing_indicator.jsx b/app/javascript/flavours/glitch/components/missing_indicator.jsx
deleted file mode 100644
index 08e39c236..000000000
--- a/app/javascript/flavours/glitch/components/missing_indicator.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import illustration from 'flavours/glitch/images/elephant_ui_disappointed.svg';
-import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
-
-const MissingIndicator = ({ fullPage }) => (
-  <div className={classNames('regeneration-indicator', { 'regeneration-indicator--without-header': fullPage })}>
-    <div className='regeneration-indicator__figure'>
-      <img src={illustration} alt='' />
-    </div>
-
-    <div className='regeneration-indicator__label'>
-      <FormattedMessage id='missing_indicator.label' tagName='strong' defaultMessage='Not found' />
-      <FormattedMessage id='missing_indicator.sublabel' defaultMessage='This resource could not be found' />
-    </div>
-
-    <Helmet>
-      <meta name='robots' content='noindex' />
-    </Helmet>
-  </div>
-);
-
-MissingIndicator.propTypes = {
-  fullPage: PropTypes.bool,
-};
-
-export default MissingIndicator;
diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.jsx b/app/javascript/flavours/glitch/features/account_gallery/index.jsx
index 6914bcba7..685b606fa 100644
--- a/app/javascript/flavours/glitch/features/account_gallery/index.jsx
+++ b/app/javascript/flavours/glitch/features/account_gallery/index.jsx
@@ -13,9 +13,9 @@ import MediaItem from './components/media_item';
 import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import LoadMore from 'flavours/glitch/components/load_more';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map';
+import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
 const mapStateToProps = (state, { params: { acct, id } }) => {
   const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]);
@@ -166,9 +166,7 @@ class AccountGallery extends ImmutablePureComponent {
 
     if (!isAccount) {
       return (
-        <Column>
-          <MissingIndicator />
-        </Column>
+        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.jsx b/app/javascript/flavours/glitch/features/account_timeline/index.jsx
index 38361b1ca..bc1adb1c4 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/index.jsx
@@ -13,12 +13,12 @@ import ColumnBackButton from 'flavours/glitch/components/column_back_button';
 import { List as ImmutableList } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import TimelineHint from 'flavours/glitch/components/timeline_hint';
 import LimitedAccountHint from './components/limited_account_hint';
 import { getAccountHidden } from 'flavours/glitch/selectors';
-import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map';
 import { fetchFeaturedTags } from '../../actions/featured_tags';
+import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map';
+import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
 const emptyList = ImmutableList();
 
@@ -160,10 +160,7 @@ class AccountTimeline extends ImmutablePureComponent {
       );
     } else if (!isLoading && !isAccount) {
       return (
-        <Column>
-          <ColumnBackButton multiColumn={multiColumn} />
-          <MissingIndicator />
-        </Column>
+        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/followers/index.jsx b/app/javascript/flavours/glitch/features/followers/index.jsx
index 2565772d1..2c4db665a 100644
--- a/app/javascript/flavours/glitch/features/followers/index.jsx
+++ b/app/javascript/flavours/glitch/features/followers/index.jsx
@@ -16,12 +16,12 @@ import Column from 'flavours/glitch/features/ui/components/column';
 import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
 import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import TimelineHint from 'flavours/glitch/components/timeline_hint';
 import LimitedAccountHint from '../account_timeline/components/limited_account_hint';
 import { getAccountHidden } from 'flavours/glitch/selectors';
 import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map';
+import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
 const mapStateToProps = (state, { params: { acct, id } }) => {
   const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]);
@@ -117,9 +117,7 @@ class Followers extends ImmutablePureComponent {
 
     if (!isAccount) {
       return (
-        <Column>
-          <MissingIndicator />
-        </Column>
+        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/following/index.jsx b/app/javascript/flavours/glitch/features/following/index.jsx
index 2c05e3310..39ff4c603 100644
--- a/app/javascript/flavours/glitch/features/following/index.jsx
+++ b/app/javascript/flavours/glitch/features/following/index.jsx
@@ -16,12 +16,12 @@ import Column from 'flavours/glitch/features/ui/components/column';
 import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
 import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import TimelineHint from 'flavours/glitch/components/timeline_hint';
 import LimitedAccountHint from '../account_timeline/components/limited_account_hint';
 import { getAccountHidden } from 'flavours/glitch/selectors';
 import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map';
+import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
 const mapStateToProps = (state, { params: { acct, id } }) => {
   const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]);
@@ -117,9 +117,7 @@ class Following extends ImmutablePureComponent {
 
     if (!isAccount) {
       return (
-        <Column>
-          <MissingIndicator />
-        </Column>
+        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/generic_not_found/index.jsx b/app/javascript/flavours/glitch/features/generic_not_found/index.jsx
deleted file mode 100644
index 4412adaed..000000000
--- a/app/javascript/flavours/glitch/features/generic_not_found/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import Column from 'flavours/glitch/features/ui/components/column';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
-
-const GenericNotFound = () => (
-  <Column>
-    <MissingIndicator fullPage />
-  </Column>
-);
-
-export default GenericNotFound;
diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.jsx b/app/javascript/flavours/glitch/features/list_timeline/index.jsx
index a32383b13..7b802318c 100644
--- a/app/javascript/flavours/glitch/features/list_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/list_timeline/index.jsx
@@ -10,13 +10,12 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { connectListStream } from 'flavours/glitch/actions/streaming';
 import { expandListTimeline } from 'flavours/glitch/actions/timelines';
 import Column from 'flavours/glitch/components/column';
-import ColumnBackButton from 'flavours/glitch/components/column_back_button';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import Icon from 'flavours/glitch/components/icon';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import RadioButton from 'flavours/glitch/components/radio_button';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
+import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
 const messages = defineMessages({
   deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@@ -156,11 +155,7 @@ class ListTimeline extends React.PureComponent {
       );
     } else if (list === false) {
       return (
-        <Column>
-          <div className='scrollable'>
-            <MissingIndicator />
-          </div>
-        </Column>
+        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
       );
     }
 
diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx
index f01ad2dbe..c220d761f 100644
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -16,7 +16,6 @@ import {
   translateStatus,
   undoStatusTranslation,
 } from 'flavours/glitch/actions/statuses';
-import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import DetailedStatus from './components/detailed_status';
 import ActionBar from './components/action_bar';
@@ -43,7 +42,6 @@ import { initReport } from 'flavours/glitch/actions/reports';
 import { initBoostModal } from 'flavours/glitch/actions/boosts';
 import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
-import ColumnBackButton from 'flavours/glitch/components/column_back_button';
 import ColumnHeader from '../../components/column_header';
 import StatusContainer from 'flavours/glitch/containers/status_container';
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -56,6 +54,7 @@ import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
 import Icon from 'flavours/glitch/components/icon';
 import { Helmet } from 'react-helmet';
+import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -620,21 +619,18 @@ class Status extends ImmutablePureComponent {
 
     if (status === null) {
       return (
-        <Column>
-          <ColumnBackButton multiColumn={multiColumn} />
-          <MissingIndicator />
-        </Column>
+        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
       );
     }
 
     const isExpanded = settings.getIn(['content_warnings', 'shared_state']) ? !status.get('hidden') : this.state.isExpanded;
 
     if (ancestorsIds && ancestorsIds.size > 0) {
-      ancestors = <div>{this.renderChildren(ancestorsIds)}</div>;
+      ancestors = <>{this.renderChildren(ancestorsIds)}</>;
     }
 
     if (descendantsIds && descendantsIds.size > 0) {
-      descendants = <div>{this.renderChildren(descendantsIds)}</div>;
+      descendants = <>{this.renderChildren(descendantsIds)}</>;
     }
 
     const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1;
diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js
index 03e501628..0e632bc81 100644
--- a/app/javascript/flavours/glitch/features/ui/util/async-components.js
+++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js
@@ -90,10 +90,6 @@ export function FollowRequests () {
   return import(/* webpackChunkName: "flavours/glitch/async/follow_requests" */'flavours/glitch/features/follow_requests');
 }
 
-export function GenericNotFound () {
-  return import(/* webpackChunkName: "flavours/glitch/async/generic_not_found" */'flavours/glitch/features/generic_not_found');
-}
-
 export function FavouritedStatuses () {
   return import(/* webpackChunkName: "flavours/glitch/async/favourited_statuses" */'flavours/glitch/features/favourited_statuses');
 }