mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Renamed to FilterInput and added label and search icon
This commit is contained in:
parent
25dbca9585
commit
4c74b09a9d
@ -31,17 +31,21 @@ export const unEscapeStringFromRegex = (value: string) => {
|
||||
export interface Props {
|
||||
value: string | undefined;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
inputClassName?: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
export const RegExpSafeInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
|
||||
<input
|
||||
ref={ref}
|
||||
type="text"
|
||||
className={props.className}
|
||||
value={unEscapeStringFromRegex(props.value)}
|
||||
onChange={event => props.onChange(escapeStringForRegex(event.target.value))}
|
||||
placeholder={props.placeholder ? props.placeholder : null}
|
||||
/>
|
||||
export const FilterInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
|
||||
<label className={props.labelClassName}>
|
||||
<input
|
||||
ref={ref}
|
||||
type="text"
|
||||
className={props.inputClassName}
|
||||
value={unEscapeStringFromRegex(props.value)}
|
||||
onChange={event => props.onChange(escapeStringForRegex(event.target.value))}
|
||||
placeholder={props.placeholder ? props.placeholder : null}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
));
|
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector';
|
||||
import { RegExpSafeInput } from '../RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from '../FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
searchQuery: string;
|
||||
@ -23,15 +23,13 @@ export default class OrgActionBar extends PureComponent<Props> {
|
||||
return (
|
||||
<div className="page-action-bar">
|
||||
<div className="gf-form gf-form--grow">
|
||||
<label className="gf-form--has-input-icon">
|
||||
<RegExpSafeInput
|
||||
className={'gf-form-input width-20'}
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
placeholder={'Filter by name or type'}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon"
|
||||
inputClassName="gf-form-input width-20"
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
placeholder={'Filter by name or type'}
|
||||
/>
|
||||
<LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
|
||||
</div>
|
||||
<div className="page-action-bar__spacer" />
|
||||
|
@ -5,7 +5,7 @@ import AsyncSelect from '@torkelo/react-select/lib/Async';
|
||||
import { TagOption } from './TagOption';
|
||||
import { TagBadge } from './TagBadge';
|
||||
import { components } from '@torkelo/react-select';
|
||||
import { escapeStringForRegex } from '../RegExpSafeInput/RegExpSafeInput';
|
||||
import { escapeStringForRegex } from '../FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
tags: string[];
|
||||
|
@ -9,7 +9,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
|
||||
import { NavModel, StoreState, AlertRule } from 'app/types';
|
||||
import { getAlertRulesAsync, setSearchQuery, togglePauseAlertRule } from './state/actions';
|
||||
import { getAlertRuleItems, getSearchQuery } from './state/selectors';
|
||||
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
navModel: NavModel;
|
||||
@ -94,15 +94,13 @@ export class AlertRuleList extends PureComponent<Props, any> {
|
||||
<Page.Contents isLoading={isLoading}>
|
||||
<div className="page-action-bar">
|
||||
<div className="gf-form gf-form--grow">
|
||||
<label className="gf-form--has-input-icon gf-form--grow">
|
||||
<RegExpSafeInput
|
||||
className="gf-form-input"
|
||||
placeholder="Search alerts"
|
||||
value={search}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon gf-form--grow"
|
||||
inputClassName="gf-form-input"
|
||||
placeholder="Search alerts"
|
||||
value={search}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<label className="gf-form-label">States</label>
|
||||
|
@ -13,7 +13,7 @@ import config from 'app/core/config';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
|
||||
import { DeleteButton } from '@grafana/ui';
|
||||
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
navModel: NavModel;
|
||||
@ -187,15 +187,13 @@ export class ApiKeysPage extends PureComponent<Props, any> {
|
||||
<>
|
||||
<div className="page-action-bar">
|
||||
<div className="gf-form gf-form--grow">
|
||||
<label className="gf-form--has-input-icon gf-form--grow">
|
||||
<RegExpSafeInput
|
||||
className="gf-form-input"
|
||||
placeholder="Search keys"
|
||||
value={searchQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon gf-form--grow"
|
||||
inputClassName="gf-form-input"
|
||||
placeholder="Search keys"
|
||||
value={searchQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="page-action-bar__spacer" />
|
||||
|
@ -17,7 +17,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
|
||||
import { PanelModel } from '../state/PanelModel';
|
||||
import { DashboardModel } from '../state/DashboardModel';
|
||||
import { PanelPlugin } from 'app/types/plugins';
|
||||
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
|
||||
interface Props {
|
||||
panel: PanelModel;
|
||||
@ -184,16 +184,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
if (this.state.isVizPickerOpen) {
|
||||
return (
|
||||
<>
|
||||
<label className="gf-form--has-input-icon">
|
||||
<RegExpSafeInput
|
||||
className="gf-form-input width-13"
|
||||
placeholder=""
|
||||
onChange={this.onSearchQueryChange}
|
||||
value={searchQuery}
|
||||
ref={elem => elem && elem.focus()}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon"
|
||||
inputClassName="gf-form-input width-13"
|
||||
placeholder=""
|
||||
onChange={this.onSearchQueryChange}
|
||||
value={searchQuery}
|
||||
ref={elem => elem && elem.focus()}
|
||||
/>
|
||||
<button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}>
|
||||
<i className="fa fa-chevron-up" />
|
||||
</button>
|
||||
|
@ -6,7 +6,7 @@ import { NavModel, Plugin, StoreState } from 'app/types';
|
||||
import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
|
||||
import { getNavModel } from 'app/core/selectors/navModel';
|
||||
import { getDataSourceTypes } from './state/selectors';
|
||||
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
navModel: NavModel;
|
||||
@ -39,15 +39,13 @@ class NewDataSourcePage extends PureComponent<Props> {
|
||||
<div className="page-container page-body">
|
||||
<h2 className="add-data-source-header">Choose data source type</h2>
|
||||
<div className="add-data-source-search">
|
||||
<label className="gf-form--has-input-icon">
|
||||
<RegExpSafeInput
|
||||
className="gf-form-input width-20"
|
||||
value={dataSourceTypeSearchQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
placeholder="Filter by name or type"
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon"
|
||||
inputClassName="gf-form-input width-20"
|
||||
value={dataSourceTypeSearchQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
placeholder="Filter by name or type"
|
||||
/>
|
||||
</div>
|
||||
<div className="add-data-source-grid">
|
||||
{dataSourceTypes.map((plugin, index) => {
|
||||
|
@ -8,7 +8,7 @@ import { NavModel, Team } from 'app/types';
|
||||
import { loadTeams, deleteTeam, setSearchQuery } from './state/actions';
|
||||
import { getSearchQuery, getTeams, getTeamsCount } from './state/selectors';
|
||||
import { getNavModel } from 'app/core/selectors/navModel';
|
||||
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
navModel: NavModel;
|
||||
@ -90,15 +90,13 @@ export class TeamList extends PureComponent<Props, any> {
|
||||
<>
|
||||
<div className="page-action-bar">
|
||||
<div className="gf-form gf-form--grow">
|
||||
<label className="gf-form--has-input-icon gf-form--grow">
|
||||
<RegExpSafeInput
|
||||
className="gf-form-input"
|
||||
placeholder="Search teams"
|
||||
value={searchQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon gf-form--grow"
|
||||
inputClassName="gf-form-input"
|
||||
placeholder="Search teams"
|
||||
value={searchQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="page-action-bar__spacer" />
|
||||
|
@ -7,7 +7,7 @@ import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
|
||||
import { TeamMember, User } from 'app/types';
|
||||
import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
|
||||
import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
|
||||
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
members: TeamMember[];
|
||||
@ -90,15 +90,13 @@ export class TeamMembers extends PureComponent<Props, State> {
|
||||
<div>
|
||||
<div className="page-action-bar">
|
||||
<div className="gf-form gf-form--grow">
|
||||
<label className="gf-form--has-input-icon gf-form--grow">
|
||||
<RegExpSafeInput
|
||||
className="gf-form-input"
|
||||
placeholder="Search members"
|
||||
value={searchMemberQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon gf-form--grow"
|
||||
inputClassName="gf-form-input"
|
||||
placeholder="Search members"
|
||||
value={searchMemberQuery}
|
||||
onChange={this.onSearchQueryChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="page-action-bar__spacer" />
|
||||
|
@ -3,7 +3,7 @@ import { connect } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import { setUsersSearchQuery } from './state/actions';
|
||||
import { getInviteesCount, getUsersSearchQuery } from './state/selectors';
|
||||
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
|
||||
export interface Props {
|
||||
searchQuery: string;
|
||||
@ -44,15 +44,13 @@ export class UsersActionBar extends PureComponent<Props> {
|
||||
return (
|
||||
<div className="page-action-bar">
|
||||
<div className="gf-form gf-form--grow">
|
||||
<label className="gf-form--has-input-icon">
|
||||
<RegExpSafeInput
|
||||
className="gf-form-input width-20"
|
||||
value={searchQuery}
|
||||
onChange={setUsersSearchQuery}
|
||||
placeholder="Filter by name or type"
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<FilterInput
|
||||
labelClassName="gf-form--has-input-icon"
|
||||
inputClassName="gf-form-input width-20"
|
||||
value={searchQuery}
|
||||
onChange={setUsersSearchQuery}
|
||||
placeholder="Filter by name or type"
|
||||
/>
|
||||
{pendingInvitesCount > 0 && (
|
||||
<div style={{ marginLeft: '1rem' }}>
|
||||
<button className={usersButtonStyle} key="users" onClick={onShowInvites}>
|
||||
|
Loading…
Reference in New Issue
Block a user