IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Renamed to FilterInput and added label and search icon

Browse Source
This commit is contained in:
Hugo Häggmark
2019-02-12 16:22:57 +01:00
parent 25dbca9585
commit 4c74b09a9d
10 changed files with 80 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/core/components/RegExpSafeInput/RegExpSafeInput.tsx → public/app/core/components/FilterInput/FilterInput.tsx
View File

@@ -31,17 +31,21 @@ export const unEscapeStringFromRegex = (value: string) => {
export interface Props { export interface Props {
value: string | undefined; value: string | undefined;
placeholder?: string; placeholder?: string;
className?: string; labelClassName?: string;
inputClassName?: string;
onChange: (value: string) => void; onChange: (value: string) => void;
} }
export const RegExpSafeInput = forwardRef<HTMLInputElement, Props>((props, ref) => ( export const FilterInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
<input <label className={props.labelClassName}>
ref={ref} <input
type="text" ref={ref}
className={props.className} type="text"
value={unEscapeStringFromRegex(props.value)} className={props.inputClassName}
onChange={event => props.onChange(escapeStringForRegex(event.target.value))} value={unEscapeStringFromRegex(props.value)}
placeholder={props.placeholder ? props.placeholder : null} onChange={event => props.onChange(escapeStringForRegex(event.target.value))}
/> placeholder={props.placeholder ? props.placeholder : null}
/>
<i className="gf-form-input-icon fa fa-search" />
</label>
)); ));

18
public/app/core/components/OrgActionBar/OrgActionBar.tsx
View File

@@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector'; import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector';
import { RegExpSafeInput } from '../RegExpSafeInput/RegExpSafeInput'; import { FilterInput } from '../FilterInput/FilterInput';
export interface Props { export interface Props {
searchQuery: string; searchQuery: string;
@@ -23,15 +23,13 @@ export default class OrgActionBar extends PureComponent<Props> {
return ( return (
<div className="page-action-bar"> <div className="page-action-bar">
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<label className="gf-form--has-input-icon"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon"
className={'gf-form-input width-20'} inputClassName="gf-form-input width-20"
value={searchQuery} value={searchQuery}
onChange={setSearchQuery} onChange={setSearchQuery}
placeholder={'Filter by name or type'} placeholder={'Filter by name or type'}
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
<LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} /> <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
</div> </div>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />

2
public/app/core/components/TagFilter/TagFilter.tsx
View File

@@ -5,7 +5,7 @@ import AsyncSelect from '@torkelo/react-select/lib/Async';
import { TagOption } from './TagOption'; import { TagOption } from './TagOption';
import { TagBadge } from './TagBadge'; import { TagBadge } from './TagBadge';
import { components } from '@torkelo/react-select'; import { components } from '@torkelo/react-select';
import { escapeStringForRegex } from '../RegExpSafeInput/RegExpSafeInput'; import { escapeStringForRegex } from '../FilterInput/FilterInput';
export interface Props { export interface Props {
tags: string[]; tags: string[];

18
public/app/features/alerting/AlertRuleList.tsx
View File

@@ -9,7 +9,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
import { NavModel, StoreState, AlertRule } from 'app/types'; import { NavModel, StoreState, AlertRule } from 'app/types';
import { getAlertRulesAsync, setSearchQuery, togglePauseAlertRule } from './state/actions'; import { getAlertRulesAsync, setSearchQuery, togglePauseAlertRule } from './state/actions';
import { getAlertRuleItems, getSearchQuery } from './state/selectors'; 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 { export interface Props {
navModel: NavModel; navModel: NavModel;
@@ -94,15 +94,13 @@ export class AlertRuleList extends PureComponent<Props, any> {
<Page.Contents isLoading={isLoading}> <Page.Contents isLoading={isLoading}>
<div className="page-action-bar"> <div className="page-action-bar">
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<label className="gf-form--has-input-icon gf-form--grow"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon gf-form--grow"
className="gf-form-input" inputClassName="gf-form-input"
placeholder="Search alerts" placeholder="Search alerts"
value={search} value={search}
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
</div> </div>
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label">States</label> <label className="gf-form-label">States</label>

18
public/app/features/api-keys/ApiKeysPage.tsx
View File

@@ -13,7 +13,7 @@ import config from 'app/core/config';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { DeleteButton } from '@grafana/ui'; import { DeleteButton } from '@grafana/ui';
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
@@ -187,15 +187,13 @@ export class ApiKeysPage extends PureComponent<Props, any> {
<> <>
<div className="page-action-bar"> <div className="page-action-bar">
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<label className="gf-form--has-input-icon gf-form--grow"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon gf-form--grow"
className="gf-form-input" inputClassName="gf-form-input"
placeholder="Search keys" placeholder="Search keys"
value={searchQuery} value={searchQuery}
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
</div> </div>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />

20
public/app/features/dashboard/panel_editor/VisualizationTab.tsx
View File

@@ -17,7 +17,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
import { PanelModel } from '../state/PanelModel'; import { PanelModel } from '../state/PanelModel';
import { DashboardModel } from '../state/DashboardModel'; import { DashboardModel } from '../state/DashboardModel';
import { PanelPlugin } from 'app/types/plugins'; import { PanelPlugin } from 'app/types/plugins';
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
interface Props { interface Props {
panel: PanelModel; panel: PanelModel;
@@ -184,16 +184,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
if (this.state.isVizPickerOpen) { if (this.state.isVizPickerOpen) {
return ( return (
<> <>
<label className="gf-form--has-input-icon"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon"
className="gf-form-input width-13" inputClassName="gf-form-input width-13"
placeholder="" placeholder=""
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
value={searchQuery} value={searchQuery}
ref={elem => elem && elem.focus()} ref={elem => elem && elem.focus()}
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
<button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}> <button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}>
<i className="fa fa-chevron-up" /> <i className="fa fa-chevron-up" />
</button> </button>

18
public/app/features/datasources/NewDataSourcePage.tsx
View File

@@ -6,7 +6,7 @@ import { NavModel, Plugin, StoreState } from 'app/types';
import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions'; import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
import { getDataSourceTypes } from './state/selectors'; import { getDataSourceTypes } from './state/selectors';
import { RegExpSafeInput } from 'app/core/components/RegExpSafeInput/RegExpSafeInput'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
@@ -39,15 +39,13 @@ class NewDataSourcePage extends PureComponent<Props> {
<div className="page-container page-body"> <div className="page-container page-body">
<h2 className="add-data-source-header">Choose data source type</h2> <h2 className="add-data-source-header">Choose data source type</h2>
<div className="add-data-source-search"> <div className="add-data-source-search">
<label className="gf-form--has-input-icon"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon"
className="gf-form-input width-20" inputClassName="gf-form-input width-20"
value={dataSourceTypeSearchQuery} value={dataSourceTypeSearchQuery}
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
placeholder="Filter by name or type" placeholder="Filter by name or type"
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
</div> </div>
<div className="add-data-source-grid"> <div className="add-data-source-grid">
{dataSourceTypes.map((plugin, index) => { {dataSourceTypes.map((plugin, index) => {

18
public/app/features/teams/TeamList.tsx
View File

@@ -8,7 +8,7 @@ import { NavModel, Team } from 'app/types';
import { loadTeams, deleteTeam, setSearchQuery } from './state/actions'; import { loadTeams, deleteTeam, setSearchQuery } from './state/actions';
import { getSearchQuery, getTeams, getTeamsCount } from './state/selectors'; import { getSearchQuery, getTeams, getTeamsCount } from './state/selectors';
import { getNavModel } from 'app/core/selectors/navModel'; 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 { export interface Props {
navModel: NavModel; navModel: NavModel;
@@ -90,15 +90,13 @@ export class TeamList extends PureComponent<Props, any> {
<> <>
<div className="page-action-bar"> <div className="page-action-bar">
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<label className="gf-form--has-input-icon gf-form--grow"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon gf-form--grow"
className="gf-form-input" inputClassName="gf-form-input"
placeholder="Search teams" placeholder="Search teams"
value={searchQuery} value={searchQuery}
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
</div> </div>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />

18
public/app/features/teams/TeamMembers.tsx
View File

@@ -7,7 +7,7 @@ import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
import { TeamMember, User } from 'app/types'; import { TeamMember, User } from 'app/types';
import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions'; import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
import { getSearchMemberQuery, getTeamMembers } from './state/selectors'; 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 { export interface Props {
members: TeamMember[]; members: TeamMember[];
@@ -90,15 +90,13 @@ export class TeamMembers extends PureComponent<Props, State> {
<div> <div>
<div className="page-action-bar"> <div className="page-action-bar">
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<label className="gf-form--has-input-icon gf-form--grow"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon gf-form--grow"
className="gf-form-input" inputClassName="gf-form-input"
placeholder="Search members" placeholder="Search members"
value={searchMemberQuery} value={searchMemberQuery}
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
</div> </div>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />

18
public/app/features/users/UsersActionBar.tsx
View File

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import { setUsersSearchQuery } from './state/actions'; import { setUsersSearchQuery } from './state/actions';
import { getInviteesCount, getUsersSearchQuery } from './state/selectors'; 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 { export interface Props {
searchQuery: string; searchQuery: string;
@@ -44,15 +44,13 @@ export class UsersActionBar extends PureComponent<Props> {
return ( return (
<div className="page-action-bar"> <div className="page-action-bar">
<div className="gf-form gf-form--grow"> <div className="gf-form gf-form--grow">
<label className="gf-form--has-input-icon"> <FilterInput
<RegExpSafeInput labelClassName="gf-form--has-input-icon"
className="gf-form-input width-20" inputClassName="gf-form-input width-20"
value={searchQuery} value={searchQuery}
onChange={setUsersSearchQuery} onChange={setUsersSearchQuery}
placeholder="Filter by name or type" placeholder="Filter by name or type"
/> />
<i className="gf-form-input-icon fa fa-search" />
</label>
{pendingInvitesCount > 0 && ( {pendingInvitesCount > 0 && (
<div style={{ marginLeft: '1rem' }}> <div style={{ marginLeft: '1rem' }}>
<button className={usersButtonStyle} key="users" onClick={onShowInvites}> <button className={usersButtonStyle} key="users" onClick={onShowInvites}>