Add a confirmation screen when suspending a domain (#25144)
This commit is contained in:
		
							
								
								
									
										91
									
								
								app/javascript/mastodon/components/admin/ImpactReport.jsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										91
									
								
								app/javascript/mastodon/components/admin/ImpactReport.jsx
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,91 @@
 | 
			
		||||
import PropTypes from 'prop-types';
 | 
			
		||||
import { PureComponent } from 'react';
 | 
			
		||||
 | 
			
		||||
import { FormattedNumber, FormattedMessage } from 'react-intl';
 | 
			
		||||
 | 
			
		||||
import classNames from 'classnames';
 | 
			
		||||
 | 
			
		||||
import api from 'mastodon/api';
 | 
			
		||||
import { Skeleton } from 'mastodon/components/skeleton';
 | 
			
		||||
 | 
			
		||||
export default class ImpactReport extends PureComponent {
 | 
			
		||||
 | 
			
		||||
  static propTypes = {
 | 
			
		||||
    domain: PropTypes.string.isRequired,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  state = {
 | 
			
		||||
    loading: true,
 | 
			
		||||
    data: null,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  componentDidMount () {
 | 
			
		||||
    const { domain } = this.props;
 | 
			
		||||
 | 
			
		||||
    const params = {
 | 
			
		||||
      domain: domain,
 | 
			
		||||
      include_subdomains: true,
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    api().post('/api/v1/admin/measures', {
 | 
			
		||||
      keys: ['instance_accounts', 'instance_follows', 'instance_followers'],
 | 
			
		||||
      start_at: null,
 | 
			
		||||
      end_at: null,
 | 
			
		||||
      instance_accounts: params,
 | 
			
		||||
      instance_follows: params,
 | 
			
		||||
      instance_followers: params,
 | 
			
		||||
    }).then(res => {
 | 
			
		||||
      this.setState({
 | 
			
		||||
        loading: false,
 | 
			
		||||
        data: res.data,
 | 
			
		||||
      });
 | 
			
		||||
    }).catch(err => {
 | 
			
		||||
      console.error(err);
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  render () {
 | 
			
		||||
    const { loading, data } = this.state;
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <div className='dimension'>
 | 
			
		||||
        <h4><FormattedMessage id='admin.impact_report.title' defaultMessage='Impact summary' /></h4>
 | 
			
		||||
 | 
			
		||||
        <table>
 | 
			
		||||
          <tbody>
 | 
			
		||||
            <tr className='dimension__item'>
 | 
			
		||||
              <td className='dimension__item__key'>
 | 
			
		||||
                <FormattedMessage id='admin.impact_report.instance_accounts' defaultMessage='Accounts profiles this would delete' />
 | 
			
		||||
              </td>
 | 
			
		||||
 | 
			
		||||
              <td className='dimension__item__value'>
 | 
			
		||||
                {loading ? <Skeleton width={60} /> : <FormattedNumber value={data[0].total} />}
 | 
			
		||||
              </td>
 | 
			
		||||
            </tr>
 | 
			
		||||
 | 
			
		||||
            <tr className={classNames('dimension__item', { negative: !loading && data[1].total > 0 })}>
 | 
			
		||||
              <td className='dimension__item__key'>
 | 
			
		||||
                <FormattedMessage id='admin.impact_report.instance_follows' defaultMessage='Followers their users would lose' />
 | 
			
		||||
              </td>
 | 
			
		||||
 | 
			
		||||
              <td className='dimension__item__value'>
 | 
			
		||||
                {loading ? <Skeleton width={60} /> : <FormattedNumber value={data[1].total} />}
 | 
			
		||||
              </td>
 | 
			
		||||
            </tr>
 | 
			
		||||
 | 
			
		||||
            <tr className={classNames('dimension__item', { negative: !loading && data[2].total > 0 })}>
 | 
			
		||||
              <td className='dimension__item__key'>
 | 
			
		||||
                <FormattedMessage id='admin.impact_report.instance_followers' defaultMessage='Followers our users would lose' />
 | 
			
		||||
              </td>
 | 
			
		||||
 | 
			
		||||
              <td className='dimension__item__value'>
 | 
			
		||||
                {loading ? <Skeleton width={60} /> : <FormattedNumber value={data[2].total} />}
 | 
			
		||||
              </td>
 | 
			
		||||
            </tr>
 | 
			
		||||
          </tbody>
 | 
			
		||||
        </table>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user