message: cluster settings: add text filter for global config table
diff: @@ -8,8 +8,10 @@ import * as plugins from '../../plugins';
  import { RootState } from '../../redux';
  import { featureReducerName, flagPending, FeatureState } from '../../reducers/features';
  import { K8sKind, k8sList, referenceForModel, getResourceDescription } from '../../module/k8s';
  -import { resourcePathFromModel, Kebab, LoadingBox } from '../utils';
  +import { resourcePathFromModel, EmptyBox, Kebab, LoadingBox } from '../utils';
  import { addIDPItems } from './oauth';
  +import { TextFilter } from '../factory';
  +import { fuzzyCaseInsensitive } from '../factory/table-filters';
  const stateToProps = (state: RootState) => ({
  configResources: state.k8s.getIn(['RESOURCES', 'configResources']),
  @@ -54,6 +56,7 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
  errorMessage: '',
  items: [],
  loading: true,
  + textFilter: '',
  };
  getGlobalConfigs(): plugins.GlobalConfig[] {
  @@ -143,8 +146,31 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
  }
  render() {
  - const { errorMessage, items, loading } = this.state;
  + const { errorMessage, items = [], loading, textFilter } = this.state;
  + const visibleItems = items.filter(({ label, description = '' }) => {
  return (
  + fuzzyCaseInsensitive(textFilter, label) ||
  + description.toLowerCase().indexOf(textFilter.toLowerCase()) !== -1
  + );
  + });
  + return (
  + <>
  + {!loading && (
  + <div className="co-m-pane__filter-bar co-m-pane__filter-bar--with-help-text">
  + <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--help-text">
  + <p className="co-help-text">
  + Edit the following resources to manage the configuration of your cluster.
  + </p>
  + </div>
  + <div className="co-m-pane__fiter-bar-group co-m-pane__filter-bar-group--filter">
  + <TextFilter
  + value={textFilter}
  + label="by name or description"
  + onChange={(e) => this.setState({ textFilter: e.target.value })}
  + />
  + </div>
  + </div>
  + )}
  <div className="co-m-pane__body">
  {errorMessage && (
  <Alert isInline className="co-alert" variant="danger" title="Error loading resources">
  @@ -152,11 +178,10 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
  </Alert>
  )}
  {loading && <LoadingBox />}
  - {!loading && (
  - <>
  - <p className="co-m-pane__explanation">
  - Edit the following resources to manage the configuration of your cluster.
  - </p>
  + {!loading &&
  + (_.isEmpty(visibleItems) ? (
  + <EmptyBox label="Configuration Resources" />
  + ) : (
  <div className="co-m-table-grid co-m-table-grid--bordered">
  <div className="row co-m-table-grid__head">
  <div className="col-xs-10 col-sm-4">Configuration Resource</div>
  @@ -164,14 +189,14 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
  <div />
  </div>
  <div className="co-m-table-grid__body">
  - {_.map(items, (item) => (
  + {_.map(visibleItems, (item) => (
  <ItemRow item={item} key={item.id} />
  ))}
  </div>
  </div>
  - </>
  - )}
  + ))}
  </div>
  + </>
  );
  }
  }
  @@ -187,6 +212,7 @@ type GlobalConfigPageState = {
  errorMessage: string;
  items: any;
  loading: boolean;
  + textFilter: string;
  };
  type GlobalConfigObjectProps = {
  