ronantakizawa/codereview-bench huggingface dataset:
Repository: hasura/graphql-engine
File: console/src/telemetry/Actions.ts (TypeScript)

Code before:
          consoleState
        )}' where hasura_uuid='${hasura_uuid}';`
      )
    ),
  };

  return (dispatch(requestAction(url, options)) as any).then(
    (data: object) => {
      if (successCb) {
        successCb(data);
      }
    },
    (error: Error) => {
      if (errorCb) {
        errorCb(error);
      }
    }
  );
};

const telemetryNotificationShown = () => (dispatch: (arg: Partial<SetNotificationShowAction>) => void) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb: SuccessCb = (data: object) => {
    console.log(
      'Updated telemetry notification status in db' + JSON.stringify(data)
    );
  };

  const errorCb: ErrorCb = (error: Error) => {
    console.error(
      'Failed to update telemetry notification status in db' +
        JSON.stringify(error)
    );
  };

  const opts: Partial<Opts> = {
    telemetryNotificationShown: true,
  };

  return setConsoleOptsInDB(opts, successCb, errorCb);
};

const setPreReleaseNotificationOptOutInDB = () => (dispatch: (arg: unknown) => void) => {
  const successCb = () => {
    dispatch(
      showSuccessNotification(
        'Success',
        'Opted out of pre-release version release notifications'

Review comment (suggestion):
No need, and we can remove `SuccessCb` type and inline it.
```suggestion
  const successCb = (data: object) => {
```

Code after:
  if (!hasura_uuid) {
    dispatch(
      showErrorNotification(
        'Opt out of pre-release notifications failed',
        'Internal error: missing hasura_uuid'
      )
    );
    return;
  }

  const options: RequestInit = {
    credentials: globalCookiePolicy,
    method: 'POST',
    headers: dataHeaders(getState),
    body: JSON.stringify(
      getRunSqlQuery(
        `update hdb_catalog.hdb_version set console_state = '${JSON.stringify(
          consoleState
        )}' where hasura_uuid='${hasura_uuid}';`
      )
    ),
  };

  // eslint-disable-next-line consistent-return
  return dispatch(requestAction(url, options)).then(
    (data: object) => {
      if (successCb) {
        successCb(data);
      }
    },
    (error: Error) => {
      if (errorCb) {
        errorCb(error);
      }
    }
  );
};

const telemetryNotificationShown = () => (
  dispatch: Dispatch<TelemetryActionTypes>
) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb = (data: object) => {
    console.log(
      `Updated telemetry notification status in db ${JSON.stringify(data)}`
    );
  };
Repository: hasura/graphql-engine
File: console/src/telemetry/Actions.ts (TypeScript)

Code before:
  return (dispatch(requestAction(url, options)) as any).then(
    (data: object) => {
      if (successCb) {
        successCb(data);
      }
    },
    (error: Error) => {
      if (errorCb) {
        errorCb(error);
      }
    }
  );
};

const telemetryNotificationShown = () => (dispatch: (arg: Partial<SetNotificationShowAction>) => void) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb: SuccessCb = (data: object) => {
    console.log(
      'Updated telemetry notification status in db' + JSON.stringify(data)
    );
  };

  const errorCb: ErrorCb = (error: Error) => {
    console.error(
      'Failed to update telemetry notification status in db' +
        JSON.stringify(error)
    );
  };

  const opts: Partial<Opts> = {
    telemetryNotificationShown: true,
  };

  return setConsoleOptsInDB(opts, successCb, errorCb);
};

const setPreReleaseNotificationOptOutInDB = () => (dispatch: (arg: unknown) => void) => {
  const successCb = () => {
    dispatch(
      showSuccessNotification(
        'Success',
        'Opted out of pre-release version release notifications'
      )
    );
  };

  const errorCb = (error: Error) => {
    dispatch(showErrorNotification('Failed to opt out', null, error));

Review comment (suggestion):
Ditto.
```suggestion
  const errorCb = (error: Error) => {
```

Code after:
    );
    return;
  }

  const options: RequestInit = {
    credentials: globalCookiePolicy,
    method: 'POST',
    headers: dataHeaders(getState),
    body: JSON.stringify(
      getRunSqlQuery(
        `update hdb_catalog.hdb_version set console_state = '${JSON.stringify(
          consoleState
        )}' where hasura_uuid='${hasura_uuid}';`
      )
    ),
  };

  // eslint-disable-next-line consistent-return
  return dispatch(requestAction(url, options)).then(
    (data: object) => {
      if (successCb) {
        successCb(data);
      }
    },
    (error: Error) => {
      if (errorCb) {
        errorCb(error);
      }
    }
  );
};

const telemetryNotificationShown = () => (
  dispatch: Dispatch<TelemetryActionTypes>
) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb = (data: object) => {
    console.log(
      `Updated telemetry notification status in db ${JSON.stringify(data)}`
    );
  };

  const errorCb = (error: Error) => {
    console.error(
      `Failed to update telemetry notification status in db ${JSON.stringify(
        error
      )}`
    );
Repository: hasura/graphql-engine
File: console/src/telemetry/Actions.ts (TypeScript)

Code before:
const telemetryNotificationShown = () => (dispatch: (arg: Partial<SetNotificationShowAction>) => void) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb: SuccessCb = (data: object) => {
    console.log(
      'Updated telemetry notification status in db' + JSON.stringify(data)
    );
  };

  const errorCb: ErrorCb = (error: Error) => {
    console.error(
      'Failed to update telemetry notification status in db' +
        JSON.stringify(error)
    );
  };

  const opts: Partial<Opts> = {
    telemetryNotificationShown: true,
  };

  return setConsoleOptsInDB(opts, successCb, errorCb);
};

const setPreReleaseNotificationOptOutInDB = () => (dispatch: (arg: unknown) => void) => {
  const successCb = () => {
    dispatch(
      showSuccessNotification(
        'Success',
        'Opted out of pre-release version release notifications'
      )
    );
  };

  const errorCb = (error: Error) => {
    dispatch(showErrorNotification('Failed to opt out', null, error));
  };

  const opts: Partial<Opts> = {
    disablePreReleaseUpdateNotifications: true,
  };

  return dispatch(setConsoleOptsInDB(opts, successCb, errorCb));
};



const loadConsoleOpts = () => {
  return (dispatch: Dispatch<any>, getState: any) => {
    const url = Endpoints.getSchema;

Review comment (suggestion):
```suggestion
const setPreReleaseNotificationOptOutInDB = () => (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
```

Code after:
    ),
  };

  // eslint-disable-next-line consistent-return
  return dispatch(requestAction(url, options)).then(
    (data: object) => {
      if (successCb) {
        successCb(data);
      }
    },
    (error: Error) => {
      if (errorCb) {
        errorCb(error);
      }
    }
  );
};

const telemetryNotificationShown = () => (
  dispatch: Dispatch<TelemetryActionTypes>
) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb = (data: object) => {
    console.log(
      `Updated telemetry notification status in db ${JSON.stringify(data)}`
    );
  };

  const errorCb = (error: Error) => {
    console.error(
      `Failed to update telemetry notification status in db ${JSON.stringify(
        error
      )}`
    );
  };

  const opts = {
    telemetryNotificationShown: true,
  };

  return setConsoleOptsInDB(opts, successCb, errorCb);
};

const setPreReleaseNotificationOptOutInDB = () => (
  dispatch: ThunkDispatch<ReduxState, {}, AnyAction>
) => {
  const successCb = () => {
    dispatch(
Repository: hasura/graphql-engine
File: console/src/telemetry/Actions.ts (TypeScript)

Code before:
    method: 'POST',
    headers: dataHeaders(getState),
    body: JSON.stringify(
      getRunSqlQuery(
        `update hdb_catalog.hdb_version set console_state = '${JSON.stringify(
          consoleState
        )}' where hasura_uuid='${hasura_uuid}';`
      )
    ),
  };

  return (dispatch(requestAction(url, options)) as any).then(
    (data: object) => {
      if (successCb) {
        successCb(data);
      }
    },
    (error: Error) => {
      if (errorCb) {
        errorCb(error);
      }
    }
  );
};

const telemetryNotificationShown = () => (dispatch: (arg: Partial<SetNotificationShowAction>) => void) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb: SuccessCb = (data: object) => {
    console.log(
      'Updated telemetry notification status in db' + JSON.stringify(data)
    );
  };

  const errorCb: ErrorCb = (error: Error) => {
    console.error(
      'Failed to update telemetry notification status in db' +
        JSON.stringify(error)
    );
  };

  const opts: Partial<Opts> = {
    telemetryNotificationShown: true,
  };

  return setConsoleOptsInDB(opts, successCb, errorCb);
};

const setPreReleaseNotificationOptOutInDB = () => (dispatch: (arg: unknown) => void) => {

Review comment (suggestion):
```suggestion
const telemetryNotificationShown = () => (dispatch: Dispatch<TelemetryActionTypes>) => void) => {
```
And you can update `SetNotificationShowAction` to:
```ts
interface SetNotificationShowAction {
  type: typeof SET_NOTIFICATION_SHOWN;
  data?: object;
}
``` 

Code after:
  const consoleState = {
    ...console_opts,
    ...opts,
  };

  if (!hasura_uuid) {
    dispatch(
      showErrorNotification(
        'Opt out of pre-release notifications failed',
        'Internal error: missing hasura_uuid'
      )
    );
    return;
  }

  const options: RequestInit = {
    credentials: globalCookiePolicy,
    method: 'POST',
    headers: dataHeaders(getState),
    body: JSON.stringify(
      getRunSqlQuery(
        `update hdb_catalog.hdb_version set console_state = '${JSON.stringify(
          consoleState
        )}' where hasura_uuid='${hasura_uuid}';`
      )
    ),
  };

  // eslint-disable-next-line consistent-return
  return dispatch(requestAction(url, options)).then(
    (data: object) => {
      if (successCb) {
        successCb(data);
      }
    },
    (error: Error) => {
      if (errorCb) {
        errorCb(error);
      }
    }
  );
};

const telemetryNotificationShown = () => (
  dispatch: Dispatch<TelemetryActionTypes>
) => {
  dispatch({ type: SET_NOTIFICATION_SHOWN });
};

const setTelemetryNotificationShownInDB = () => {
  const successCb = (data: object) => {
Repository: hasura/graphql-engine
File: console/src/telemetry/Notifications.tsx (TypeScript)

Code before:
import React from 'react';
import { Dispatch } from 'redux';
import Notifications from 'react-notification-system-redux';
import { setTelemetryNotificationShownInDB } from './Actions';

const onRemove = () => {
  return (dispatch: Dispatch<any>) => {
    dispatch(setTelemetryNotificationShownInDB());
  };
};

const showTelemetryNotification = () => {
  return (dispatch: Dispatch<any>) => {
    dispatch(
      Notifications.show({
        position: 'tr',
        autoDismiss: 10,
        level: 'info',
        title: 'Telemetry',
        children: (
          <div>
            Help us improve Hasura! The console collects anonymized usage stats
            which allows us to keep improving Hasura at warp speed.
            <a
              href="https://hasura.io/docs/1.0/graphql/manual/guides/telemetry.html"
              target="_blank"
              rel="noopener noreferrer"
            >
              {' '}
              Click here
            </a>{' '}
            to read more or to opt-out.

Review comment (suggestion):
```suggestion
  return (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
```

Code after:
import React from 'react';
import { AnyAction } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import Notifications from 'react-notification-system-redux';
import { setTelemetryNotificationShownInDB } from './Actions';
import { ReduxState } from '../types';

const onRemove = () => {
  return (dispatch: ThunkDispatch<ReduxState, {}, AnyAction>) => {
    dispatch(setTelemetryNotificationShownInDB());
  };
};

const showTelemetryNotification = () => {
  return (dispatch: ThunkDispatch<ReduxState, {}, AnyAction>) => {
    dispatch(
      Notifications.show({
        position: 'tr',
        autoDismiss: 10,
        level: 'info',
        title: 'Telemetry',
        children: (
          <div>
            Help us improve Hasura! The console collects anonymized usage stats
            which allows us to keep improving Hasura at warp speed.
            <a
              href="https://hasura.io/docs/1.0/graphql/manual/guides/telemetry.html"
              target="_blank"
              rel="noopener noreferrer"
            >
              {' '}
              Click here
Repository: hasura/graphql-engine
File: console/src/telemetry/Notifications.tsx (TypeScript)

Code before:
import React from 'react';
import { Dispatch } from 'redux';
import Notifications from 'react-notification-system-redux';
import { setTelemetryNotificationShownInDB } from './Actions';

const onRemove = () => {
  return (dispatch: Dispatch<any>) => {
    dispatch(setTelemetryNotificationShownInDB());
  };
};

const showTelemetryNotification = () => {
  return (dispatch: Dispatch<any>) => {
    dispatch(
      Notifications.show({
        position: 'tr',
        autoDismiss: 10,
        level: 'info',
        title: 'Telemetry',
        children: (
          <div>
            Help us improve Hasura! The console collects anonymized usage stats
            which allows us to keep improving Hasura at warp speed.
            <a
              href="https://hasura.io/docs/1.0/graphql/manual/guides/telemetry.html"
              target="_blank"
              rel="noopener noreferrer"
            >
              {' '}
              Click here
            </a>{' '}
            to read more or to opt-out.
          </div>
        ),
        onRemove: () => dispatch(onRemove()),
      })
    );
  };

Review comment (suggestion):
```suggestion
  return (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
```

Code after:
import React from 'react';
import { AnyAction } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import Notifications from 'react-notification-system-redux';
import { setTelemetryNotificationShownInDB } from './Actions';
import { ReduxState } from '../types';

const onRemove = () => {
  return (dispatch: ThunkDispatch<ReduxState, {}, AnyAction>) => {
    dispatch(setTelemetryNotificationShownInDB());
  };
};

const showTelemetryNotification = () => {
  return (dispatch: ThunkDispatch<ReduxState, {}, AnyAction>) => {
    dispatch(
      Notifications.show({
        position: 'tr',
        autoDismiss: 10,
        level: 'info',
        title: 'Telemetry',
        children: (
          <div>
            Help us improve Hasura! The console collects anonymized usage stats
            which allows us to keep improving Hasura at warp speed.
            <a
              href="https://hasura.io/docs/1.0/graphql/manual/guides/telemetry.html"
              target="_blank"
              rel="noopener noreferrer"
            >
              {' '}
              Click here
            </a>{' '}
            to read more or to opt-out.
          </div>
        ),
        onRemove: () => dispatch(onRemove()),
      })
Repository: hasura/graphql-engine
File: console/src/components/Services/Actions/Modify/ActionEditor.js (JavaScript)

Code before:
        onChange={handlerOnChange}
        placeholder="action handler"
        className={styles.add_mar_bottom_mid}
        service="create-action"
      />
      <hr />
      {actionType === 'query' ? null : (
        <React.Fragment>
          <KindEditor
            value={kind}
            onChange={kindOnChange}
            className={styles.add_mar_bottom_mid}
            disabled={readOnlyMode}
          />
          <hr />
        </React.Fragment>
      )}
      <HeaderConfEditor
        forwardClientHeaders={forwardClientHeaders}
        toggleForwardClientHeaders={toggleForwardClientHeaders}
        headers={headers}
        setHeaders={setHeaders}
        disabled={readOnlyMode}
      />
      <hr />
      <div className={styles.display_flex}>
        {!readOnlyMode && (
          <Button
            color="yellow"
            size="sm"
            type="submit"
            onClick={onSave}
            disabled={!allowSave}
            className={styles.add_mar_right}
          >
            Save
          </Button>
        )}
        {!readOnlyMode && (
          <Button
            color="red"
            size="sm"
            type="submit"
            onClick={onDelete}
            disabled={isFetching}
          >
            Delete
          </Button>
        )}
      </div>
    </div>

Review comment (suggestion):
Can do the check only once for both:

```js
!readOnlyMode && (
  <React.Fragment>
    <Button>Save</Button>
    <Button>Delete</Button>
  </React.Fagment>
)
```

Code after:
        placeholder="action handler"
        className={styles.add_mar_bottom_mid}
        service="create-action"
      />
      <hr />
      {actionType === 'query' ? null : (
        <React.Fragment>
          <KindEditor
            value={kind}
            onChange={kindOnChange}
            className={styles.add_mar_bottom_mid}
            disabled={readOnlyMode}
          />
          <hr />
        </React.Fragment>
      )}
      <HeaderConfEditor
        forwardClientHeaders={forwardClientHeaders}
        toggleForwardClientHeaders={toggleForwardClientHeaders}
        headers={headers}
        setHeaders={setHeaders}
        disabled={readOnlyMode}
      />
      <hr />
      <div className={styles.display_flex}>
        {!readOnlyMode && (
          <React.Fragment>
            <Button
              color="yellow"
              size="sm"
              type="submit"
              onClick={onSave}
              disabled={!allowSave}
              className={styles.add_mar_right}
            >
              Save
            </Button>
            <Button
              color="red"
              size="sm"
              type="submit"
              onClick={onDelete}
              disabled={isFetching}
            >
              Delete
            </Button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
Repository: hasura/graphql-engine
File: console/src/components/Services/Actions/Common/components/HeaderConfEditor.js (JavaScript)

Code before:
import React from 'react';
import styles from './Styles.scss';
import Tooltip from './Tooltip';
import Headers from '../../../../Common/Headers/Headers';

const editorLabel = 'Headers';
const editorTooltip =
  'Headers Hasura will send to the webhook with the POST request';
// Tooltip todo

const HeaderConfEditor = ({
  className,
  forwardClientHeaders,
  toggleForwardClientHeaders,
  headers,
  setHeaders,
  disabled = false,
}) => {
  const getHeaders = () => {
    return <Headers {...{ headers, setHeaders, disabled }} />;
  };

  return (
    <div className={`${className || ''}`}>
      <h2
        className={`${styles.subheading_text} ${styles.add_mar_bottom_small}`}
      >
        {editorLabel}
        <Tooltip
          id="action-name"
          text={editorTooltip}
          className={styles.add_mar_left_mid}
        />
      </h2>
      <div className={`${styles.add_mar_bottom_mid}`}>
        <label className={`${styles.add_mar_right} ${styles.cursorPointer}`}>
          <input
            type="checkbox"
            checked={forwardClientHeaders}
            onChange={toggleForwardClientHeaders}
            className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
            disabled={disabled}
          />
          Forward client headers to webhook
        </label>

Review comment (suggestion):
```suggestion
    return <Headers headers={headers} setHeaders={setHeaders} disabled={disabled} }} />;
```

Code after:
import React from 'react';
import styles from './Styles.scss';
import Tooltip from './Tooltip';
import Headers from '../../../../Common/Headers/Headers';

const editorLabel = 'Headers';
const editorTooltip =
  'Headers Hasura will send to the webhook with the POST request';
// Tooltip todo

const HeaderConfEditor = ({
  className,
  forwardClientHeaders,
  toggleForwardClientHeaders,
  headers,
  setHeaders,
  disabled = false,
}) => {
  return (
    <div className={`${className || ''}`}>
      <h2
        className={`${styles.subheading_text} ${styles.add_mar_bottom_small}`}
      >
        {editorLabel}
        <Tooltip
          id="action-name"
          text={editorTooltip}
          className={styles.add_mar_left_mid}
        />
      </h2>
      <div className={`${styles.add_mar_bottom_mid}`}>
        <label className={`${styles.add_mar_right} ${styles.cursorPointer}`}>
          <input
            type="checkbox"
            checked={forwardClientHeaders}
            onChange={toggleForwardClientHeaders}
            className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
            disabled={disabled}
          />
          Forward client headers to webhook
        </label>
      </div>
      <Headers headers={headers} setHeaders={setHeaders} disabled={disabled} />
    </div>
  );