Repository: hasura/graphql-engine
File: console/src/components/Services/Data/TablePermissions/Permissions.js (JavaScript)

Code before:
class Permissions extends Component {
  constructor() {
    super();

    this.state = {
      presetsInfo: {
        insert: {
          columnTypeMap: {},
        },
        update: {
          columnTypeMap: {},
        },
      },
      filterString: '',
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({ type: RESET });
    dispatch(setTable(this.props.tableName));
    dispatch(fetchFunctionInit());
  }

  componentWillReceiveProps(nextProps) {
    const currPermissionsState = this.props.permissionsState;
    const nextPermissionsState = nextProps.permissionsState;

    // clear local filterString
    if (
      currPermissionsState.role !== nextPermissionsState.role ||
      currPermissionsState.query !== nextPermissionsState.query
    ) {
      this.setState({ filterString: '' });
    }
  }

  componentDidUpdate(prevProps) {
    const currPermissionsState = this.props.permissionsState;
    const prevPermissionsState = prevProps.permissionsState;

    // scroll to edit section if role/query change
    if (
      (currPermissionsState.role &&
        currPermissionsState.role !== prevPermissionsState.role) ||
      (currPermissionsState.query &&
        currPermissionsState.query !== prevPermissionsState.query)
    ) {
      document
        .getElementById('permission-edit-section')

Review comment (security):
`componentWillReceiveProps` will be deprecated and in React 16.3 there was `getDerivedStateFromProps` introduced to replace it. So can we use this instead?
```js
static getDerivedStateFromProps(nextProps, prevState) {
    const currPermissionsState = prevState.permissionsState;
    const nextPermissionsState = nextProps.permissionsState;

    if (
      currPermissionsState.role !== nextPermissionsState.role ||
      currPermissionsState.query !== nextPermissionsState.query
    ) {
      return { filterString: '' };
    }
    return null;
}
```


Code after:
class Permissions extends Component {
  constructor() {
    super();

    this.state = {
      presetsInfo: {
        insert: {
          columnTypeMap: {},
        },
        update: {
          columnTypeMap: {},
        },
      },
      filterString: '',
      prevPermissionsState: {},
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({ type: RESET });
    dispatch(setTable(this.props.tableName));
    dispatch(fetchFunctionInit());
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const prevPermissionsState = prevState.prevPermissionsState;
    const nextPermissionsState = nextProps.permissionsState;

    const newState = {
      prevPermissionsState: nextPermissionsState,
    };

    if (
      prevPermissionsState.role !== nextPermissionsState.role ||
      prevPermissionsState.query !== nextPermissionsState.query
    ) {
      newState.filterString = '';
    }

    return newState;
  }

  componentDidUpdate(prevProps) {
    const currPermissionsState = this.props.permissionsState;
    const prevPermissionsState = prevProps.permissionsState;

    // scroll to edit section if role/query change
    if (
      (currPermissionsState.role &&