ronantakizawa/codereview-bench huggingface dataset:
Repository: hasura/graphql-engine
File: console/src/components/Services/Settings/Sidebar.tsx (TypeScript)

Code before:

type SectionDataKey = 'actions' | 'status' | 'allowed-queries' | 'logout';

interface SectionData {
  key: SectionDataKey;
  link: string;
  dataTestVal: string;
  title: string | JSX.Element;
}

const Sidebar: React.FC<SidebarProps> = ({ location, metadata }) => {
  const sectionsData: SectionData[] = [];

  sectionsData.push({
    key: 'actions',
    link: `/settings/metadata-actions`,
    dataTestVal: 'metadata-actions-link',
    title: 'Metadata Actions',
  });

  const consistentIcon =
    metadata.inconsistentObjects.length === 0 ? <CheckIcon /> : <CrossIcon />;

  sectionsData.push({
    key: 'status',
    link: `/settings/metadata-status`,
    dataTestVal: 'metadata-status-link',
    title: (
      <div className={styles.display_flex}>
        Metadata Status
        <span className={styles.add_mar_left}>{consistentIcon}</span>
      </div>
    ),
  });

  sectionsData.push({
    key: 'allowed-queries',
    link: `/settings/allowed-queries`,
    dataTestVal: 'allowed-queries-link',
    title: 'Allowed Queries',
  });

  const adminSecret = getAdminSecret();

  if (adminSecret && globals.consoleMode !== CLI_CONSOLE_MODE) {
    sectionsData.push({
      key: 'logout',
      link: `/settings/logout`,
      dataTestVal: 'logout-page-link',
      title: 'Logout (clear admin-secret)',
    });

Review comment (suggestion):
```suggestion
    link: '/settings/metadata-status',
```

Code after:

type SectionDataKey =
  | 'actions'
  | 'status'
  | 'allowed-queries'
  | 'logout'
  | 'about';

interface SectionData {
  key: SectionDataKey;
  link: string;
  dataTestVal: string;
  title: string | JSX.Element;
}

const Sidebar: React.FC<SidebarProps> = ({ location, metadata }) => {
  const sectionsData: SectionData[] = [];

  sectionsData.push({
    key: 'actions',
    link: '/settings/metadata-actions',
    dataTestVal: 'metadata-actions-link',
    title: 'Metadata Actions',
  });

  const consistentIcon =
    metadata.inconsistentObjects.length === 0 ? <CheckIcon /> : <CrossIcon />;

  sectionsData.push({
    key: 'status',
    link: '/settings/metadata-status',
    dataTestVal: 'metadata-status-link',
    title: (
      <div className={styles.display_flex}>
        Metadata Status
        <span className={styles.add_mar_left}>{consistentIcon}</span>
      </div>
    ),
  });

  sectionsData.push({
    key: 'allowed-queries',
    link: '/settings/allowed-queries',
    dataTestVal: 'allowed-queries-link',
    title: 'Allowed Queries',
  });

  const adminSecret = getAdminSecret();

  if (adminSecret && globals.consoleMode !== CLI_CONSOLE_MODE) {
    sectionsData.push({
Repository: hasura/graphql-engine
File: console/src/components/Services/Settings/Sidebar.tsx (TypeScript)

Code before:

  sectionsData.push({
    key: 'actions',
    link: `/settings/metadata-actions`,
    dataTestVal: 'metadata-actions-link',
    title: 'Metadata Actions',
  });

  const consistentIcon =
    metadata.inconsistentObjects.length === 0 ? <CheckIcon /> : <CrossIcon />;

  sectionsData.push({
    key: 'status',
    link: `/settings/metadata-status`,
    dataTestVal: 'metadata-status-link',
    title: (
      <div className={styles.display_flex}>
        Metadata Status
        <span className={styles.add_mar_left}>{consistentIcon}</span>
      </div>
    ),
  });

  sectionsData.push({
    key: 'allowed-queries',
    link: `/settings/allowed-queries`,
    dataTestVal: 'allowed-queries-link',
    title: 'Allowed Queries',
  });

  const adminSecret = getAdminSecret();

  if (adminSecret && globals.consoleMode !== CLI_CONSOLE_MODE) {
    sectionsData.push({
      key: 'logout',
      link: `/settings/logout`,
      dataTestVal: 'logout-page-link',
      title: 'Logout (clear admin-secret)',
    });
  }

  const currentLocation = location.pathname;

  const sections: JSX.Element[] = [];

  sectionsData.forEach(section => {
    sections.push(
      <li
        role="presentation"
        key={section.key}
        className={currentLocation.includes(section.link) ? styles.active : ''}

Review comment (suggestion):
```suggestion
    link: '/settings/allowed-queries',
```

Code after:
  title: string | JSX.Element;
}

const Sidebar: React.FC<SidebarProps> = ({ location, metadata }) => {
  const sectionsData: SectionData[] = [];

  sectionsData.push({
    key: 'actions',
    link: '/settings/metadata-actions',
    dataTestVal: 'metadata-actions-link',
    title: 'Metadata Actions',
  });

  const consistentIcon =
    metadata.inconsistentObjects.length === 0 ? <CheckIcon /> : <CrossIcon />;

  sectionsData.push({
    key: 'status',
    link: '/settings/metadata-status',
    dataTestVal: 'metadata-status-link',
    title: (
      <div className={styles.display_flex}>
        Metadata Status
        <span className={styles.add_mar_left}>{consistentIcon}</span>
      </div>
    ),
  });

  sectionsData.push({
    key: 'allowed-queries',
    link: '/settings/allowed-queries',
    dataTestVal: 'allowed-queries-link',
    title: 'Allowed Queries',
  });

  const adminSecret = getAdminSecret();

  if (adminSecret && globals.consoleMode !== CLI_CONSOLE_MODE) {
    sectionsData.push({
      key: 'logout',
      link: '/settings/logout',
      dataTestVal: 'logout-page-link',
      title: 'Logout (clear admin-secret)',
    });
  }

  sectionsData.push({
    key: 'about',
    link: '/settings/about',
    dataTestVal: 'about-link',
    title: 'About',
Repository: hasura/graphql-engine
File: console/src/components/Services/Settings/Sidebar.tsx (TypeScript)

Code before:

  sectionsData.push({
    key: 'status',
    link: `/settings/metadata-status`,
    dataTestVal: 'metadata-status-link',
    title: (
      <div className={styles.display_flex}>
        Metadata Status
        <span className={styles.add_mar_left}>{consistentIcon}</span>
      </div>
    ),
  });

  sectionsData.push({
    key: 'allowed-queries',
    link: `/settings/allowed-queries`,
    dataTestVal: 'allowed-queries-link',
    title: 'Allowed Queries',
  });

  const adminSecret = getAdminSecret();

  if (adminSecret && globals.consoleMode !== CLI_CONSOLE_MODE) {
    sectionsData.push({
      key: 'logout',
      link: `/settings/logout`,
      dataTestVal: 'logout-page-link',
      title: 'Logout (clear admin-secret)',
    });
  }

  const currentLocation = location.pathname;

  const sections: JSX.Element[] = [];

  sectionsData.forEach(section => {
    sections.push(
      <li
        role="presentation"
        key={section.key}
        className={currentLocation.includes(section.link) ? styles.active : ''}
      >
        <Link
          className={styles.linkBorder}
          to={section.link}
          data-test={section.dataTestVal}
        >
          {section.title}
        </Link>
      </li>
    );

Review comment (suggestion):
```suggestion
      link: '/settings/logout',
```

Code after:
    title: 'Metadata Actions',
  });

  const consistentIcon =
    metadata.inconsistentObjects.length === 0 ? <CheckIcon /> : <CrossIcon />;

  sectionsData.push({
    key: 'status',
    link: '/settings/metadata-status',
    dataTestVal: 'metadata-status-link',
    title: (
      <div className={styles.display_flex}>
        Metadata Status
        <span className={styles.add_mar_left}>{consistentIcon}</span>
      </div>
    ),
  });

  sectionsData.push({
    key: 'allowed-queries',
    link: '/settings/allowed-queries',
    dataTestVal: 'allowed-queries-link',
    title: 'Allowed Queries',
  });

  const adminSecret = getAdminSecret();

  if (adminSecret && globals.consoleMode !== CLI_CONSOLE_MODE) {
    sectionsData.push({
      key: 'logout',
      link: '/settings/logout',
      dataTestVal: 'logout-page-link',
      title: 'Logout (clear admin-secret)',
    });
  }

  sectionsData.push({
    key: 'about',
    link: '/settings/about',
    dataTestVal: 'about-link',
    title: 'About',
  });

  const currentLocation = location.pathname;

  const sections: JSX.Element[] = [];

  sectionsData.forEach(section => {
    sections.push(
      <li
        role="presentation"
Repository: hasura/graphql-engine
File: console/src/components/Common/CollapsibleToggle/CollapsibleToggle.tsx (TypeScript)

Code before:
import React from 'react';

/**
 *  Accepts following props
 *    `title, string || react-element `: Title of the collapsible toggle
 *    `isOpen`(optional, default to false): Whether the body should be shown or not
 *    `toggleHandler (optional)`: Function to call when the toggle is clicked
 *    `testId, string`: Test identifier
 *    `children, react-element`: The content which needs to be toggled
 */

interface CollapsibleToggleProps {
  title: string;
  isOpen: boolean;
  toggleHandler?: () => void;
  testId: string;
  children: React.ReactNode;
  useDefaultTitleStyle?: boolean;
}

interface CollapsibleToggleState {
  isOpen: boolean;
  toggleHandler: () => void;
}

class CollapsibleToggle extends React.Component<
  CollapsibleToggleProps,
  CollapsibleToggleState
> {
  constructor(props: CollapsibleToggleProps) {
    super(props);

    this.state = {
      isOpen: props.isOpen || false,
      toggleHandler:
        props.toggleHandler || this.defaultToggleHandler.bind(this),
    };
  }

  defaultToggleHandler() {
    this.setState({ isOpen: !this.state.isOpen });
  }

Review comment (suggestion):
Typings for `children` will already be there as we are extending `React.Component`.
```suggestion
```

Code after:
import React from 'react';
import styles from './CollapsibleToggle.scss';
/**
 *  Accepts following props
 *    `title, string || react-element `: Title of the collapsible toggle
 *    `isOpen`(optional, default to false): Whether the body should be shown or not
 *    `toggleHandler (optional)`: Function to call when the toggle is clicked
 *    `testId, string`: Test identifier
 *    `children, react-element`: The content which needs to be toggled
 */

interface CollapsibleToggleProps {
  title: string;
  isOpen: boolean;
  toggleHandler?: () => void;
  testId: string;
  useDefaultTitleStyle?: boolean;
}

interface CollapsibleToggleState {
  isOpen: boolean;
  toggleHandler: () => void;
}

class CollapsibleToggle extends React.Component<
  CollapsibleToggleProps,
  CollapsibleToggleState
> {
  constructor(props: CollapsibleToggleProps) {
    super(props);

    this.state = {
      isOpen: props.isOpen || false,
      toggleHandler:
        props.toggleHandler || this.defaultToggleHandler.bind(this),
    };
  }

  componentWillReceiveProps(nextProps: CollapsibleToggleProps) {
    const { isOpen, toggleHandler } = nextProps;

    if (toggleHandler) {
Repository: hasura/graphql-engine
File: console/src/components/UIKit/atoms/AlertBox/index.tsx (TypeScript)

Code before:
import React from 'react';

import { theme, Theme } from '../../theme';
import { Icon, IconProps } from '../Icon';
import { StyledAlertBox, StyledAlertBoxProps } from './AlertBox';
import { Text } from '../Typography';

const alertBoxWidth = 866;

export interface AlertBoxProps extends IconProps, Omit<StyledAlertBoxProps, 'size'> {
  type: keyof Theme['alertBox'] ;
}


export const AlertBox: React.FC<AlertBoxProps> = props => {
  const { children, type } = props;

  const backgroundColorValue = theme.alertBox[type]
    ? theme.alertBox[type].backgroundColor
    : theme.alertBox.default.backgroundColor;

  const borderColorValue = theme.alertBox[type]
    ? theme.alertBox[type].borderColor
    : theme.alertBox.default.borderColor;

  let alertMessage;

  if (children) {
    alertMessage = children;
  } else {
    alertMessage = theme.alertBox[type]
      ? theme.alertBox[type].message
      : theme.alertBox.default.message;
  }

  return (

Review comment (suggestion):
```suggestion
  type: keyof Theme['alertBox'];
```

Code after:
import React from 'react';

import { theme, Theme } from '../../theme';
import { Icon, IconProps } from '../Icon';
import { StyledAlertBox, StyledAlertBoxProps } from './AlertBox';
import { Text } from '../Typography';

const alertBoxWidth = 866;

export interface AlertBoxProps
  extends IconProps,
    Omit<StyledAlertBoxProps, 'size'> {
  type: keyof Theme['alertBox'];
}

export const AlertBox: React.FC<AlertBoxProps> = props => {
  const { children, type } = props;

  const backgroundColorValue = theme.alertBox[type]
    ? theme.alertBox[type].backgroundColor
    : theme.alertBox.default.backgroundColor;

  const borderColorValue = theme.alertBox[type]
    ? theme.alertBox[type].borderColor
    : theme.alertBox.default.borderColor;

  let alertMessage;

  if (children) {
    alertMessage = children;
  } else {
    alertMessage = theme.alertBox[type]
      ? theme.alertBox[type].message
      : theme.alertBox.default.message;
  }
Repository: hasura/graphql-engine
File: console/src/components/UIKit/atoms/AlertBox/AlertBox.ts (TypeScript)

Code before:
import styled from 'styled-components';
import {
  flexbox,
  color,
  border,
  typography,
  layout,
  space,
  shadow,
  FlexboxProps,
  ColorProps,
  BorderProps,
  TypographyProps,
  LayoutProps,
  SpaceProps,
  ShadowProps,
} from 'styled-system';

import{ BoxProps, Box } from '../Box';

interface StyledAlertBoxOwnProps
  extends FlexboxProps,
    ColorProps,
    BorderProps,
    TypographyProps,
    LayoutProps,
    SpaceProps,
    ShadowProps {}

export interface StyledAlertBoxProps extends StyledAlertBoxOwnProps, BoxProps {}

export const StyledAlertBox = styled(Box)<StyledAlertBoxProps>`
  ${flexbox};
  ${color}
  ${border}
  ${typography}
  ${layout}
  ${space}
  ${shadow}

  /* Alert type text */
  span {
    text-transform: capitalize;
  }

Review comment (suggestion):
```suggestion
import { BoxProps, Box } from '../Box';
```

Code after:
import styled from 'styled-components';
import {
  flexbox,
  color,
  border,
  typography,
  layout,
  space,
  shadow,
  FlexboxProps,
  ColorProps,
  BorderProps,
  TypographyProps,
  LayoutProps,
  SpaceProps,
  ShadowProps,
} from 'styled-system';

import { BoxProps, Box } from '../Box';

interface StyledAlertBoxOwnProps
  extends FlexboxProps,
    ColorProps,
    BorderProps,
    TypographyProps,
    LayoutProps,
    SpaceProps,
    ShadowProps {}

export interface StyledAlertBoxProps extends StyledAlertBoxOwnProps, BoxProps {}

export const StyledAlertBox = styled(Box)<StyledAlertBoxProps>`
  ${flexbox};
  ${color}
  ${border}
  ${typography}
  ${layout}
  ${space}
  ${shadow}

  /* Alert type text */
  span {
    text-transform: capitalize;
  }
Repository: hasura/graphql-engine
File: console/src/components/UIKit/atoms/AlertBox/index.tsx (TypeScript)

Code before:
import React from 'react';

import { theme, Theme } from '../../theme';
import { Icon, IconProps } from '../Icon';
import { StyledAlertBox, StyledAlertBoxProps } from './AlertBox';
import { Text } from '../Typography';

const alertBoxWidth = 866;

export interface AlertBoxProps extends IconProps, Omit<StyledAlertBoxProps, 'size'> {
  type: keyof Theme['alertBox'];
}


export const AlertBox: React.FC<AlertBoxProps> = props => {
  const { children, type } = props;

  const backgroundColorValue = theme.alertBox[type]
    ? theme.alertBox[type].backgroundColor
    : theme.alertBox.default.backgroundColor;

  const borderColorValue = theme.alertBox[type]
    ? theme.alertBox[type].borderColor
    : theme.alertBox.default.borderColor;

  let alertMessage;

  if (children) {
    alertMessage = children;
  } else {
    alertMessage = theme.alertBox[type]
      ? theme.alertBox[type].message
      : theme.alertBox.default.message;
  }

  return (
    <StyledAlertBox

Review comment (suggestion):
```suggestion
export interface AlertBoxProps
  extends IconProps,
    Omit<StyledAlertBoxProps, 'size'> {
  type: keyof Theme['alertBox'];
}
```

Code after:
import React from 'react';

import { theme, Theme } from '../../theme';
import { Icon, IconProps } from '../Icon';
import { StyledAlertBox, StyledAlertBoxProps } from './AlertBox';
import { Text } from '../Typography';

const alertBoxWidth = 866;

export interface AlertBoxProps
  extends IconProps,
    Omit<StyledAlertBoxProps, 'size'> {
  type: keyof Theme['alertBox'];
}

export const AlertBox: React.FC<AlertBoxProps> = props => {
  const { children, type } = props;

  const backgroundColorValue = theme.alertBox[type]
    ? theme.alertBox[type].backgroundColor
    : theme.alertBox.default.backgroundColor;

  const borderColorValue = theme.alertBox[type]
    ? theme.alertBox[type].borderColor
    : theme.alertBox.default.borderColor;

  let alertMessage;

  if (children) {
    alertMessage = children;
  } else {
    alertMessage = theme.alertBox[type]
      ? theme.alertBox[type].message
      : theme.alertBox.default.message;
  }

  return (
Repository: hasura/graphql-engine
File: console/src/components/Services/Settings/Container.tsx (TypeScript)

Code before:
import PageContainer from '../../Common/Layout/PageContainer/PageContainer';

type Metadata = {
  inconsistentObjects: never[];
  ongoingRequest: boolean;
  allowedQueries: never[];
};

type ContainerProps = {
  location: LocationShape;
  metadata: Metadata;
  children: JSX.Element;
};

const Container: React.FC<ContainerProps> = ({
  location,
  children,
  metadata,
}) => {
  const helmet = 'Settings | Hasura';

  const sidebar = <Sidebar location={location} metadata={metadata} />;

  const childrenWithProps = React.Children.map(
    children,
    (child: React.ReactElement<any>) => React.cloneElement(child, { metadata })
  );
  return (
    <PageContainer helmet={helmet} leftContainer={sidebar}>
      {childrenWithProps}
    </PageContainer>
  );
};

const mapStateToProps = (state: any) => {
  return {
    ...state.main,
    metadata: state.metadata,
    dataHeaders: { ...state.tables.dataHeaders },
  };
};

const connector = (connect: Connect) => connect(mapStateToProps)(Container);

export default connector;


Review comment (suggestion):
We can replace `any` with `{metadata: Metadata}`.
```suggestion
    (child: React.ReactElement<{ metadata: Metadata }>) => React.cloneElement(child, { metadata })
```

Code after:
import PageContainer from '../../Common/Layout/PageContainer/PageContainer';

type Metadata = {
  inconsistentObjects: object[];
  ongoingRequest: boolean;
  allowedQueries: object[];
};

type ExternalProps = {
  location: LocationShape;
  children: JSX.Element;
};

interface ContainerProps extends StateProps, ExternalProps {}

const Container: React.FC<ContainerProps> = ({
  location,
  children,
  metadata,
}) => {
  const helmet = 'Settings | Hasura';

  const sidebar = <Sidebar location={location} metadata={metadata} />;

  const childrenWithProps = React.Children.map(
    children,
    (child: React.ReactElement<{ metadata: Metadata }>) =>
      React.cloneElement(child, { metadata })
  );
  return (
    <PageContainer helmet={helmet} leftContainer={sidebar}>
      {childrenWithProps}
    </PageContainer>
  );
};

type DerivedState = {
  main: Record<string, any>;
  metadata: Metadata;
  tables: Record<'dataHeaders', Record<string, string>>;
};

const mapStateToProps = (state: DerivedState) => {
  return {
    ...state.main,
    metadata: state.metadata,
    dataHeaders: { ...state.tables.dataHeaders },
  };
};

type StateProps = ReturnType<typeof mapStateToProps>;
Repository: hasura/graphql-engine
File: console/src/telemetry/Actions.ts (TypeScript)

Code before:

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;
    const options = {
      credentials: globalCookiePolicy,
      method: 'POST',
      headers: dataHeaders(getState),
      body: JSON.stringify({
        type: 'select',
        args: {
          table: {
            name: 'hdb_version',
            schema: 'hdb_catalog',
          },
          columns: ['hasura_uuid', 'console_state'],
        },
      }),
    };

    return dispatch(requestAction(url, options) as any).then(
      (data: {[key: string]: string}[]) => {
        if (data.length !== 0) {
          dispatch({
            type: SET_HASURA_UUID,
            data: data[0].hasura_uuid,
          });
          dispatch({

Review comment (suggestion):
```suggestion
  return (dispatch: ThunkDispatch<{}, {}, AnyAction>, getState: getState: () => { telemetry: TelemetryState }) => {
```
`ThunkDispatch` is from `redux-thunk`, and `AnyAction` is from `redux`.

Code after:
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(
      showSuccessNotification(
        'Success',
        'Opted out of pre-release version release notifications'
      )
    );
  };

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

  const options = {
    disablePreReleaseUpdateNotifications: true,
  };

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

const loadConsoleOpts = () => {
  return (
    dispatch: ThunkDispatch<ReduxState, {}, AnyAction>,
    getState: GetReduxState
  ) => {
    const url = Endpoints.getSchema;