Simplify column headers (#27557)

app/javascript/mastodon/features/ui/components/__tests__/column-test.jsx

@@ -1,13 +1,15 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from 'mastodon/test_helpers';
 
 import Column from '../column';
 
+const fakeIcon = () => <span />;
+
 describe('<Column />', () => {
   describe('<ColumnHeader /> click handler', () => {
     it('runs the scroll animation if the column contains scrollable content', () => {
       const scrollToMock = jest.fn();
       const { container } = render(
-        <Column heading='notifications'>
+        <Column heading='notifications' icon='notifications' iconComponent={fakeIcon}>
           <div className='scrollable' />
         </Column>,
       );
@@ -17,7 +19,7 @@ describe('<Column />', () => {
     });
 
     it('does not try to scroll if there is no scrollable content', () => {
-      render(<Column heading='notifications' />);
+      render(<Column heading='notifications' icon='notifications' iconComponent={fakeIcon} />);
       fireEvent.click(screen.getByText('notifications'));
     });
   });

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

@@ -3,15 +3,15 @@ import { PureComponent } from 'react';
 
 import { debounce } from 'lodash';
 
+import ColumnHeader from '../../../components/column_header';
 import { isMobile } from '../../../is_mobile';
 import { scrollTop } from '../../../scroll';
 
-import ColumnHeader from './column_header';
-
 export default class Column extends PureComponent {
 
   static propTypes = {
     heading: PropTypes.string,
+    alwaysShowBackButton: PropTypes.bool,
     icon: PropTypes.string,
     iconComponent: PropTypes.func,
     children: PropTypes.node,
@@ -51,13 +51,14 @@ export default class Column extends PureComponent {
   };
 
   render () {
-    const { heading, icon, iconComponent, children, active, hideHeadingOnMobile } = this.props;
+    const { heading, icon, iconComponent, children, active, hideHeadingOnMobile, alwaysShowBackButton } = this.props;
 
     const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
 
     const columnHeaderId = showHeading && heading.replace(/ /g, '-');
+
     const header = showHeading && (
-      <ColumnHeader icon={icon} iconComponent={iconComponent} active={active} type={heading} onClick={this.handleHeaderClick} columnHeaderId={columnHeaderId} />
+      <ColumnHeader icon={icon} iconComponent={iconComponent} active={active} title={heading} onClick={this.handleHeaderClick} columnHeaderId={columnHeaderId} showBackButton={alwaysShowBackButton} />
     );
     return (
       <div

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

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import classNames from 'classnames';
-
-import { Icon }  from 'mastodon/components/icon';
-
-export default class ColumnHeader extends PureComponent {
-
-  static propTypes = {
-    icon: PropTypes.string,
-    iconComponent: PropTypes.func,
-    type: PropTypes.string,
-    active: PropTypes.bool,
-    onClick: PropTypes.func,
-    columnHeaderId: PropTypes.string,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  };
-
-  render () {
-    const { icon, iconComponent, type, active, columnHeaderId } = this.props;
-    let iconElement = '';
-
-    if (icon) {
-      iconElement = <Icon id={icon} icon={iconComponent} className='column-header__icon' />;
-    }
-
-    return (
-      <h1 className={classNames('column-header', { active })} id={columnHeaderId || null}>
-        <button onClick={this.handleClick}>
-          {iconElement}
-          {type}
-        </button>
-      </h1>
-    );
-  }
-
-}