Repository: facebook/react
File: packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js (JavaScript)

Code before:
                      updateFilterValueRegExp(
                        componentFilter,
                        currentTarget.value,
                      )
                    }
                    value={componentFilter.value}
                  />
                )}
              </td>
              <td className={styles.TableCell}>
                <Button
                  onClick={() => removeFilter(index)}
                  title="Delete filter">
                  <ButtonIcon type="delete" />
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <Button onClick={addFilter} title="Add filter">
        <ButtonIcon className={styles.ButtonIcon} type="add" />
        Add filter
      </Button>
      {componentFilters.length > 0 && (
        <Button onClick={removeAllFilter} title="Delete All filters">
          <ButtonIcon className={styles.ButtonIcon} type="delete" />
          Delete all filters
        </Button>
      )}
    </div>
  );
}

type ToggleIconProps = {
  isEnabled: boolean,
  isValid: boolean,
};
function ToggleIcon({isEnabled, isValid}: ToggleIconProps) {
  let className;
  if (isValid) {
    className = isEnabled ? styles.ToggleOn : styles.ToggleOff;
  } else {
    className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;
  }
  return (
    <div className={className}>
      <div
        className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}
      />
    </div>

Review comment (suggestion):
```suggestion
        <Button onClick={removeAllFilter} title="Delete all filters">
```

Code after:
                      updateFilterValueRegExp(
                        componentFilter,
                        currentTarget.value,
                      )
                    }
                    value={componentFilter.value}
                  />
                )}
              </td>
              <td className={styles.TableCell}>
                <Button
                  onClick={() => removeFilter(index)}
                  title="Delete filter">
                  <ButtonIcon type="delete" />
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <Button onClick={addFilter} title="Add filter">
        <ButtonIcon className={styles.ButtonIcon} type="add" />
        Add filter
      </Button>
      {componentFilters.length > 0 && (
        <Button onClick={removeAllFilter} title="Delete all filters">
          <ButtonIcon className={styles.ButtonIcon} type="delete" />
          Delete all filters
        </Button>
      )}
    </div>
  );
}

type ToggleIconProps = {
  isEnabled: boolean,
  isValid: boolean,
};
function ToggleIcon({isEnabled, isValid}: ToggleIconProps) {
  let className;
  if (isValid) {
    className = isEnabled ? styles.ToggleOn : styles.ToggleOff;
  } else {
    className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;
  }
  return (
    <div className={className}>
      <div
        className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}
      />
    </div>