Merge 1fa95e13cd into 8b34daf254

app/javascript/mastodon/components/badge.jsx

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
-import PersonIcon from '@/material-icons/400-24px/person.svg?react';
-import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
-
-
-export const Badge = ({ icon = <PersonIcon />, label, domain, roleId }) => (
-  <div className='account-role' data-account-role-id={roleId}>
-    {icon}
-    {label}
-    {domain && <span className='account-role__domain'>{domain}</span>}
-  </div>
-);
-
-Badge.propTypes = {
-  icon: PropTypes.node,
-  label: PropTypes.node,
-  domain: PropTypes.node,
-  roleId: PropTypes.string
-};
-
-export const GroupBadge = () => (
-  <Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
-);
-
-export const AutomatedBadge = () => (
-  <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
-);

app/javascript/mastodon/components/badge.tsx

@@ -0,0 +1,45 @@
+import type { FC, ReactNode } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
+import PersonIcon from '@/material-icons/400-24px/person.svg?react';
+import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
+
+interface BadgeProps {
+  icon?: ReactNode;
+  label?: ReactNode;
+  domain?: ReactNode;
+  roleId?: string;
+}
+
+export const Badge: FC<BadgeProps> = ({
+  icon = <PersonIcon />,
+  label,
+  domain,
+  roleId,
+}) => (
+  <div className='account-role' data-account-role-id={roleId}>
+    {icon}
+    {label}
+    {domain && <span className='account-role__domain'>{domain}</span>}
+  </div>
+);
+
+export const GroupBadge = () => (
+  <Badge
+    icon={<GroupsIcon />}
+    label={
+      <FormattedMessage id='account.badges.group' defaultMessage='Group' />
+    }
+  />
+);
+
+export const AutomatedBadge = () => (
+  <Badge
+    icon={<SmartToyIcon />}
+    label={
+      <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
+    }
+  />
+);

app/javascript/mastodon/containers/admin_component.jsx

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { IntlProvider } from 'mastodon/locales';
-
-export default class AdminComponent extends PureComponent {
-
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  render () {
-    const { children } = this.props;
-
-    return (
-      <IntlProvider>
-        {children}
-      </IntlProvider>
-    );
-  }
-
-}

app/javascript/mastodon/containers/admin_component.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+import { IntlProvider } from 'mastodon/locales';
+
+interface Props {
+  children: ReactNode;
+}
+
+const AdminComponent: React.FC<Props> = ({ children }) => {
+  return (
+    <IntlProvider>
+      {children}
+    </IntlProvider>
+  );
+};
+
+export default AdminComponent;

app/javascript/mastodon/features/notifications/components/clear_column_button.jsx

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import DeleteForeverIcon from '@/material-icons/400-24px/delete_forever.svg?react';
-import { Icon }  from 'mastodon/components/icon';
-
-export default class ClearColumnButton extends PureComponent {
-
-  static propTypes = {
-    onClick: PropTypes.func.isRequired,
-  };
-
-  render () {
-    return (
-      <button className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.props.onClick}><Icon id='eraser' icon={DeleteForeverIcon} /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
-    );
-  }
-
-}

app/javascript/mastodon/features/notifications/components/clear_column_button.tsx

@@ -0,0 +1,27 @@
+import React, { MouseEventHandler } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import DeleteForeverIcon from '@/material-icons/400-24px/delete_forever.svg?react';
+import { Icon } from 'mastodon/components/icon';
+
+interface Props {
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+const ClearColumnButton: React.FC<Props> = ({ onClick }) => {
+  return (
+    <button
+      className='text-btn column-header__setting-btn'
+      tabIndex={0}
+      onClick={onClick}
+    >
+      <Icon id='eraser' icon={DeleteForeverIcon} />{' '}
+      <FormattedMessage
+        id='notifications.clear'
+        defaultMessage='Clear notifications'
+      />
+    </button>
+  );
+};
+
+export default ClearColumnButton;

app/javascript/mastodon/features/notifications/components/grant_permission_button.jsx

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-export default class GrantPermissionButton extends PureComponent {
-
-  static propTypes = {
-    onClick: PropTypes.func.isRequired,
-  };
-
-  render () {
-    return (
-      <button className='text-btn column-header__permission-btn' tabIndex={0} onClick={this.props.onClick}>
-        <FormattedMessage id='notifications.grant_permission' defaultMessage='Grant permission.' />
-      </button>
-    );
-  }
-
-}

app/javascript/mastodon/features/notifications/components/grant_permission_button.tsx

@@ -0,0 +1,23 @@
+import { MouseEventHandler } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+interface Props {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+const GrantPermissionButton: React.FC<Props> = ({ onClick }) => {
+  return (
+    <button
+      className='text-btn column-header__permission-btn'
+      tabIndex={0}
+      onClick={onClick}
+    >
+      <FormattedMessage
+        id='notifications.grant_permission'
+        defaultMessage='Grant permission.'
+      />
+    </button>
+  );
+};
+
+export default GrantPermissionButton;

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

@@ -9,17 +9,29 @@ describe('<Column />', () => {
     it('runs the scroll animation if the column contains scrollable content', () => {
       const scrollToMock = jest.fn();
       const { container } = render(
-        <Column heading='notifications' icon='notifications' iconComponent={fakeIcon}>
+        <Column
+          heading='notifications'
+          icon='notifications'
+          iconComponent={fakeIcon}
+        >
           <div className='scrollable' />
         </Column>,
       );
-      container.querySelector('.scrollable').scrollTo = scrollToMock;
+      const scrollable = container.querySelector('.scrollable');
+      if (scrollable?.scrollTo) scrollable.scrollTo = scrollToMock;
+
       fireEvent.click(screen.getByText('notifications'));
       expect(scrollToMock).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
     });
 
     it('does not try to scroll if there is no scrollable content', () => {
-      render(<Column heading='notifications' icon='notifications' iconComponent={fakeIcon} />);
+      render(
+        <Column
+          heading='notifications'
+          icon='notifications'
+          iconComponent={fakeIcon}
+        />,
+      );
       fireEvent.click(screen.getByText('notifications'));
     });
   });

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

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ColumnSubheading = ({ text }) => {
-  return (
-    <div className='column-subheading'>
-      {text}
-    </div>
-  );
-};
-
-ColumnSubheading.propTypes = {
-  text: PropTypes.string.isRequired,
-};
-
-export default ColumnSubheading;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface Props {
+  text: string;
+}
+
+const ColumnSubheading: React.FC<Props> = ({ text }) => {
+  return <div className='column-subheading'>{text}</div>;
+};
+
+export default ColumnSubheading;