switch the web console to use react pure components (#7845)

web-console/src/bootstrap/react-table-custom-pagination.tsx

@@ -44,7 +44,7 @@ interface ReactTableCustomPaginationState {
   page: string | number;
 }
 
-export class ReactTableCustomPagination extends React.Component<ReactTableCustomPaginationProps, ReactTableCustomPaginationState> {
+export class ReactTableCustomPagination extends React.PureComponent<ReactTableCustomPaginationProps, ReactTableCustomPaginationState> {
   constructor(props: ReactTableCustomPaginationProps) {
     super(props);
 

web-console/src/bootstrap/react-table-defaults.tsx

@@ -26,7 +26,7 @@ import { ReactTableCustomPagination } from './react-table-custom-pagination';
 
 /* tslint:disable:max-classes-per-file */
 
-class NoData extends React.Component {
+class NoData extends React.PureComponent {
   render() {
     const { children } = this.props;
     if (!children) return null;

web-console/src/components/action-cell/action-cell.tsx

@@ -30,7 +30,7 @@ export interface ActionCellProps extends React.Props<any> {
   actions?: BasicAction[];
 }
 
-export class ActionCell extends React.Component<ActionCellProps, {}> {
+export class ActionCell extends React.PureComponent<ActionCellProps, {}> {
   static COLUMN_ID = 'actions';
   static COLUMN_LABEL = 'Actions';
   static COLUMN_WIDTH = 70;

web-console/src/components/action-icon/action-icon.tsx

@@ -28,7 +28,7 @@ export interface ActionIconProps extends React.Props<any> {
   onClick?: () => void;
 }
 
-export class ActionIcon extends React.Component<ActionIconProps, {}> {
+export class ActionIcon extends React.PureComponent<ActionIconProps, {}> {
   render() {
     const { className, icon, onClick } = this.props;
 

web-console/src/components/array-input/array-input.tsx

@@ -28,7 +28,7 @@ export interface ArrayInputProps {
   disabled?: boolean;
 }
 
-export class ArrayInput extends React.Component<ArrayInputProps, { stringValue: string }> {
+export class ArrayInput extends React.PureComponent<ArrayInputProps, { stringValue: string }> {
   constructor(props: ArrayInputProps) {
     super(props);
     this.state = {

web-console/src/components/auto-form/auto-form.tsx

@@ -68,7 +68,7 @@ export interface AutoFormState<T> {
   jsonInputsValidity: any;
 }
 
-export class AutoForm<T extends Record<string, any>> extends React.Component<AutoFormProps<T>, AutoFormState<T>> {
+export class AutoForm<T extends Record<string, any>> extends React.PureComponent<AutoFormProps<T>, AutoFormState<T>> {
   static makeLabelName(label: string): string {
     let newLabel = label.split(/(?=[A-Z])/).join(' ').toLowerCase().replace(/\./g, ' ');
     newLabel = newLabel[0].toUpperCase() + newLabel.slice(1);

web-console/src/components/center-message/center-message.tsx

@@ -23,7 +23,7 @@ import './center-message.scss';
 export interface CenterMessageProps extends React.Props<any> {
 }
 
-export class CenterMessage extends React.Component<CenterMessageProps, {}> {
+export class CenterMessage extends React.PureComponent<CenterMessageProps, {}> {
   render() {
     return <div className="center-message bp3-input">
       <div className="center-message-inner">

web-console/src/components/clearable-input/clearable-input.tsx

@@ -28,7 +28,7 @@ export interface ClearableInputProps extends React.Props<any> {
   placeholder: string;
 }
 
-export class ClearableInput extends React.Component<ClearableInputProps, {}> {
+export class ClearableInput extends React.PureComponent<ClearableInputProps, {}> {
   render() {
     const { className, value, onChange, placeholder } = this.props;
 

web-console/src/components/external-link/external-link.tsx

@@ -22,7 +22,7 @@ export interface ExternalLinkProps extends React.Props<any> {
   href: string;
 }
 
-export class ExternalLink extends React.Component<ExternalLinkProps, {}> {
+export class ExternalLink extends React.PureComponent<ExternalLinkProps, {}> {
   render() {
     const { href, children } = this.props;
 

web-console/src/components/header-bar/header-bar.tsx

@@ -60,7 +60,7 @@ export interface HeaderBarState {
   overlordDynamicConfigDialogOpen: boolean;
 }
 
-export class HeaderBar extends React.Component<HeaderBarProps, HeaderBarState> {
+export class HeaderBar extends React.PureComponent<HeaderBarProps, HeaderBarState> {
   constructor(props: HeaderBarProps) {
     super(props);
     this.state = {

web-console/src/components/json-collapse/json-collapse.tsx

@@ -29,7 +29,7 @@ interface JSONCollapseState {
   isOpen: boolean;
 }
 
-export class JSONCollapse extends React.Component<JSONCollapseProps, JSONCollapseState> {
+export class JSONCollapse extends React.PureComponent<JSONCollapseProps, JSONCollapseState> {
   constructor(props: any) {
     super(props);
     this.state = {

web-console/src/components/json-input/json-input.tsx

@@ -34,7 +34,7 @@ interface JSONInputState {
   stringValue: string;
 }
 
-export class JSONInput extends React.Component<JSONInputProps, JSONInputState> {
+export class JSONInput extends React.PureComponent<JSONInputProps, JSONInputState> {
   constructor(props: JSONInputProps) {
     super(props);
     this.state = {

web-console/src/components/loader/loader.tsx

@@ -28,7 +28,7 @@ export interface LoaderProps extends React.Props<any> {
 export interface LoaderState {
 }
 
-export class Loader extends React.Component<LoaderProps, LoaderState> {
+export class Loader extends React.PureComponent<LoaderProps, LoaderState> {
 
   render() {
     const { loadingText, loading } = this.props;

web-console/src/components/menu-checkbox/menu-checkbox.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 
 import './menu-checkbox.scss';
 
-export class MenuCheckbox extends React.Component<ICheckboxProps, {}> {
+export class MenuCheckbox extends React.PureComponent<ICheckboxProps, {}> {
 
   render() {
     return <li className="menu-checkbox">

web-console/src/components/rule-editor/rule-editor.tsx

@@ -47,7 +47,7 @@ export interface RuleEditorState {
   isOpen: boolean;
 }
 
-export class RuleEditor extends React.Component<RuleEditorProps, RuleEditorState> {
+export class RuleEditor extends React.PureComponent<RuleEditorProps, RuleEditorState> {
   static ruleToString(rule: Rule): string {
     return rule.type + (rule.period ? `(${rule.period})` : '') + (rule.interval ? `(${rule.interval})` : '');
   }

web-console/src/components/show-json/show-json.tsx

@@ -36,7 +36,7 @@ export interface ShowJsonState {
   jsonValue: string;
 }
 
-export class ShowJson extends React.Component<ShowJsonProps, ShowJsonState> {
+export class ShowJson extends React.PureComponent<ShowJsonProps, ShowJsonState> {
   constructor(props: ShowJsonProps, context: any) {
     super(props, context);
     this.state = {

web-console/src/components/show-log/show-log.tsx

@@ -46,7 +46,7 @@ export interface ShowLogState {
   tail: boolean;
 }
 
-export class ShowLog extends React.Component<ShowLogProps, ShowLogState> {
+export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
   public log = React.createRef<HTMLTextAreaElement>();
 
   constructor(props: ShowLogProps, context: any) {

web-console/src/components/sql-control/sql-control.tsx

@@ -79,7 +79,7 @@ export interface SqlControlState {
 }
 
 @HotkeysTarget
-export class SqlControl extends React.Component<SqlControlProps, SqlControlState> {
+export class SqlControl extends React.PureComponent<SqlControlProps, SqlControlState> {
   constructor(props: SqlControlProps, context: any) {
     super(props, context);
     this.state = {

web-console/src/components/table-cell/table-cell.tsx

@@ -39,7 +39,7 @@ interface ShortParts {
   suffix: string;
 }
 
-export class TableCell extends React.Component<NullTableCellProps, {}> {
+export class TableCell extends React.PureComponent<NullTableCellProps, {}> {
   static MAX_CHARS_TO_SHOW = 50;
 
   static possiblyTruncate(str: string): React.ReactNode {

web-console/src/components/table-column-selector/table-column-selector.tsx

@@ -34,7 +34,7 @@ interface TableColumnSelectorState {
 
 }
 
-export class TableColumnSelector extends React.Component<TableColumnSelectorProps, TableColumnSelectorState> {
+export class TableColumnSelector extends React.PureComponent<TableColumnSelectorProps, TableColumnSelectorState> {
 
   constructor(props: TableColumnSelectorProps) {
     super(props);

web-console/src/components/view-control-bar/view-control-bar.tsx

@@ -24,7 +24,7 @@ export interface ViewControlBarProps {
   label: string;
 }
 
-export class ViewControlBar extends React.Component<ViewControlBarProps, {}> {
+export class ViewControlBar extends React.PureComponent<ViewControlBarProps, {}> {
   constructor(props: ViewControlBarProps) {
     super(props);
   }

web-console/src/console-application.tsx

@@ -54,7 +54,7 @@ export interface ConsoleApplicationState {
   capabilitiesLoading: boolean;
 }
 
-export class ConsoleApplication extends React.Component<ConsoleApplicationProps, ConsoleApplicationState> {
+export class ConsoleApplication extends React.PureComponent<ConsoleApplicationProps, ConsoleApplicationState> {
   static MESSAGE_KEY = 'druid-console-message';
   static MESSAGE_DISMISSED = 'dismissed';
   private capabilitiesQueryManager: QueryManager<string, string>;

web-console/src/dialogs/about-dialog/about-dialog.tsx

@@ -30,7 +30,7 @@ export interface AboutDialogProps extends React.Props<any> {
 export interface AboutDialogState {
 }
 
-export class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
+export class AboutDialog extends React.PureComponent<AboutDialogProps, AboutDialogState> {
   constructor(props: AboutDialogProps) {
     super(props);
     this.state = {};

web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx

@@ -47,7 +47,7 @@ export interface AsyncAlertDialogState {
   working: boolean;
 }
 
-export class AsyncActionDialog extends React.Component<AsyncAlertDialogProps, AsyncAlertDialogState> {
+export class AsyncActionDialog extends React.PureComponent<AsyncAlertDialogProps, AsyncAlertDialogState> {
   constructor(props: AsyncAlertDialogProps) {
     super(props);
     this.state = {

web-console/src/dialogs/compaction-dialog/compaction-dialog.tsx

@@ -36,7 +36,7 @@ export interface CompactionDialogState {
   allJSONValid: boolean;
 }
 
-export class CompactionDialog extends React.Component<CompactionDialogProps, CompactionDialogState> {
+export class CompactionDialog extends React.PureComponent<CompactionDialogProps, CompactionDialogState> {
   constructor(props: CompactionDialogProps) {
     super(props);
     this.state = {

web-console/src/dialogs/coordinator-dynamic-config/coordinator-dynamic-config.tsx

@@ -37,7 +37,7 @@ export interface CoordinatorDynamicConfigDialogState {
   historyRecords: any[];
 }
 
-export class CoordinatorDynamicConfigDialog extends React.Component<CoordinatorDynamicConfigDialogProps, CoordinatorDynamicConfigDialogState> {
+export class CoordinatorDynamicConfigDialog extends React.PureComponent<CoordinatorDynamicConfigDialogProps, CoordinatorDynamicConfigDialogState> {
   private historyQueryManager: QueryManager<string, any>;
 
   constructor(props: CoordinatorDynamicConfigDialogProps) {

web-console/src/dialogs/history-dialog/history-dialog.tsx

@@ -31,7 +31,7 @@ interface HistoryDialogState {
 
 }
 
-export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDialogState> {
+export class HistoryDialog extends React.PureComponent<HistoryDialogProps, HistoryDialogState> {
   constructor(props: HistoryDialogProps) {
     super(props);
     this.state = {

web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx

@@ -40,7 +40,7 @@ export interface LookupEditDialogProps extends React.Props<any> {
 export interface LookupEditDialogState {
 }
 
-export class LookupEditDialog extends React.Component<LookupEditDialogProps, LookupEditDialogState> {
+export class LookupEditDialog extends React.PureComponent<LookupEditDialogProps, LookupEditDialogState> {
 
   constructor(props: LookupEditDialogProps) {
     super(props);

web-console/src/dialogs/overlord-dynamic-config/overlord-dynamic-config.tsx

@@ -38,7 +38,7 @@ export interface OverlordDynamicConfigDialogState {
   historyRecords: any[];
 }
 
-export class OverlordDynamicConfigDialog extends React.Component<OverlordDynamicConfigDialogProps, OverlordDynamicConfigDialogState> {
+export class OverlordDynamicConfigDialog extends React.PureComponent<OverlordDynamicConfigDialogProps, OverlordDynamicConfigDialogState> {
   private historyQueryManager: QueryManager<string, any>;
 
   constructor(props: OverlordDynamicConfigDialogProps) {

web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx

@@ -33,7 +33,7 @@ export interface QueryPlanDialogState {
 
 }
 
-export class QueryPlanDialog extends React.Component<QueryPlanDialogProps, QueryPlanDialogState> {
+export class QueryPlanDialog extends React.PureComponent<QueryPlanDialogProps, QueryPlanDialogState> {
 
   constructor(props: QueryPlanDialogProps) {
     super(props);

web-console/src/dialogs/retention-dialog/retention-dialog.tsx

@@ -51,7 +51,7 @@ export interface RetentionDialogState {
   historyRecords: any[];
 }
 
-export class RetentionDialog extends React.Component<RetentionDialogProps, RetentionDialogState> {
+export class RetentionDialog extends React.PureComponent<RetentionDialogProps, RetentionDialogState> {
   private historyQueryManager: QueryManager<string, any>;
 
   constructor(props: RetentionDialogProps) {

web-console/src/dialogs/snitch-dialog/snitch-dialog.tsx

@@ -49,7 +49,7 @@ export interface SnitchDialogState {
   showHistory?: boolean;
 }
 
-export class SnitchDialog extends React.Component<SnitchDialogProps, SnitchDialogState> {
+export class SnitchDialog extends React.PureComponent<SnitchDialogProps, SnitchDialogState> {
   constructor(props: SnitchDialogProps) {
     super(props);
 

web-console/src/dialogs/spec-dialog/spec-dialog.tsx

@@ -33,7 +33,7 @@ export interface SpecDialogState {
   spec: string;
 }
 
-export class SpecDialog extends React.Component<SpecDialogProps, SpecDialogState> {
+export class SpecDialog extends React.PureComponent<SpecDialogProps, SpecDialogState> {
   static validJson(json: string): boolean {
     try {
       JSON.parse(json);

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx

@@ -33,7 +33,7 @@ interface SupervisorTableActionDialogState {
   activeTab: 'payload' | 'status' | 'stats' | 'history';
 }
 
-export class SupervisorTableActionDialog extends React.Component<SupervisorTableActionDialogProps, SupervisorTableActionDialogState> {
+export class SupervisorTableActionDialog extends React.PureComponent<SupervisorTableActionDialogProps, SupervisorTableActionDialogState> {
   constructor(props: SupervisorTableActionDialogProps) {
     super(props);
     this.state = {

web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx

@@ -34,7 +34,7 @@ interface TableActionDialogProps extends IDialogProps {
   bottomButtons?: React.ReactNode;
 }
 
-export class TableActionDialog extends React.Component<TableActionDialogProps, {}> {
+export class TableActionDialog extends React.PureComponent<TableActionDialogProps, {}> {
   constructor(props: TableActionDialogProps) {
     super(props);
     this.state = {};

web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx

@@ -33,7 +33,7 @@ interface TaskTableActionDialogState {
   activeTab: 'payload' | 'status' | 'reports' | 'log';
 }
 
-export class TaskTableActionDialog extends React.Component<TaskTableActionDialogProps, TaskTableActionDialogState> {
+export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDialogProps, TaskTableActionDialogState> {
   constructor(props: TaskTableActionDialogProps) {
     super(props);
     this.state = {

web-console/src/views/datasource-view/datasource-view.tsx

@@ -83,7 +83,7 @@ export interface DatasourcesViewState {
   dropReloadInterval: string;
 }
 
-export class DatasourcesView extends React.Component<DatasourcesViewProps, DatasourcesViewState> {
+export class DatasourcesView extends React.PureComponent<DatasourcesViewProps, DatasourcesViewState> {
   static DISABLED_COLOR = '#0a1500';
   static FULLY_AVAILABLE_COLOR = '#57d500';
   static PARTIALLY_AVAILABLE_COLOR = '#ffbf00';

web-console/src/views/home-view/home-view.tsx

@@ -76,7 +76,7 @@ export interface HomeViewState {
   serverCountError: string | null;
 }
 
-export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
+export class HomeView extends React.PureComponent<HomeViewProps, HomeViewState> {
   private statusQueryManager: QueryManager<string, any>;
   private datasourceQueryManager: QueryManager<string, any>;
   private segmentQueryManager: QueryManager<string, any>;

web-console/src/views/load-data-view/load-data-view.tsx

@@ -222,7 +222,7 @@ export interface LoadDataViewState {
   selectedMetricSpec: MetricSpec | null;
 }
 
-export class LoadDataView extends React.Component<LoadDataViewProps, LoadDataViewState> {
+export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDataViewState> {
   constructor(props: LoadDataViewProps) {
     super(props);
 

web-console/src/views/lookups-view/lookups-view.tsx

@@ -61,7 +61,7 @@ export interface LookupsViewState {
   deleteLookupTier: string | null;
 }
 
-export class LookupsView extends React.Component<LookupsViewProps, LookupsViewState> {
+export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsViewState> {
   private lookupsGetQueryManager: QueryManager<string, {lookupEntries: any[], tiers: string[]}>;
   private tableColumnSelectionHandler: TableColumnSelectionHandler;
 

web-console/src/views/segments-view/segments-view.tsx

@@ -80,7 +80,7 @@ interface SegmentQueryResultRow {
   is_overshadowed: number;
 }
 
-export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsViewState> {
+export class SegmentsView extends React.PureComponent<SegmentsViewProps, SegmentsViewState> {
   private segmentsSqlQueryManager: QueryManager<QueryAndSkip, SegmentQueryResultRow[]>;
   private segmentsJsonQueryManager: QueryManager<any, SegmentQueryResultRow[]>;
   private tableColumnSelectionHandler: TableColumnSelectionHandler;

web-console/src/views/servers-view/servers-view.tsx

@@ -108,7 +108,7 @@ interface MiddleManagerQueryResultRow {
 
 interface ServerResultRow extends ServerQueryResultRow, Partial<LoadQueueStatus>, Partial<MiddleManagerQueryResultRow> {}
 
-export class ServersView extends React.Component<ServersViewProps, ServersViewState> {
+export class ServersView extends React.PureComponent<ServersViewProps, ServersViewState> {
   private serverQueryManager: QueryManager<string, ServerQueryResultRow[]>;
   private serverTableColumnSelectionHandler: TableColumnSelectionHandler;
 

web-console/src/views/sql-view/sql-view.tsx

@@ -62,7 +62,7 @@ interface SqlQueryResult {
   queryElapsed: number;
 }
 
-export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
+export class SqlView extends React.PureComponent<SqlViewProps, SqlViewState> {
   static trimSemicolon(query: string): string {
     // Trims out a trailing semicolon while preserving space (https://bit.ly/1n1yfkJ)
     return query.replace(/;+(\s*)$/, '$1');

web-console/src/views/task-view/tasks-view.tsx

@@ -109,7 +109,7 @@ function statusToColor(status: string): string {
   }
 }
 
-export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
+export class TasksView extends React.PureComponent<TasksViewProps, TasksViewState> {
   private supervisorQueryManager: QueryManager<string, SupervisorQueryResultRow[]>;
   private taskQueryManager: QueryManager<string, TaskQueryResultRow[]>;
   private supervisorTableColumnSelectionHandler: TableColumnSelectionHandler;