Skip to content

N
nexpie-grafana-theme
Commit d7d94d13 by Tobias Skarhed Committed by GitHub
Options

Forms migration: New datasource (#23221) 

* Add Icon to Button and add newForms to FilterInput

* Reset button changes

* Update feedback

* Update Snapshots
parent dcf6bbc1
Showing with 35 additions and 55 deletions
public/app/core/components/FilterInput/FilterInput.tsx
import React, { forwardRef } from 'react';
import React, { FC } from 'react';
import { escapeStringForRegex, unEscapeStringFromRegex } from '@grafana/data';
import { Forms, Icon } from '@grafana/ui';
export interface Props {
value: string | undefined;
......@@ -9,16 +10,15 @@ export interface Props {
onChange: (value: string) => void;
}
export const FilterInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
<label className={props.labelClassName}>
<input
ref={ref}
export const FilterInput: FC<Props> = props => (
<Forms.Input
// Replaces the usage of ref
autoFocus
prefix={<Icon name="search" />}
type="text"
className={props.inputClassName}
size="md"
value={props.value ? unEscapeStringFromRegex(props.value) : ''}
onChange={event => props.onChange(escapeStringForRegex(event.target.value))}
onChange={event => props.onChange(escapeStringForRegex(event.currentTarget.value))}
placeholder={props.placeholder ?? ''}
/>
<i className="gf-form-input-icon fa fa-search" />
</label>
));
);
public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap
......@@ -7,7 +7,7 @@ exports[`Render should render component 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
......
public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
......@@ -13,7 +13,7 @@ exports[`Render should render alert rules 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input"
labelClassName="gf-form--has-input-icon gf-form--grow"
onChange={[Function]}
......@@ -157,7 +157,7 @@ exports[`Render should render component 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input"
labelClassName="gf-form--has-input-icon gf-form--grow"
onChange={[Function]}
......
public/app/features/dashboard/panel_editor/VizPickerSearch.tsx
......@@ -15,14 +15,7 @@ export class VizPickerSearch extends PureComponent<Props> {
const { searchQuery, onChange, onClose } = this.props;
return (
<>
<FilterInput
labelClassName="gf-form--has-input-icon"
inputClassName="gf-form-input width-13"
placeholder=""
onChange={onChange}
value={searchQuery}
ref={element => element && element.focus()}
/>
<FilterInput placeholder="" onChange={onChange} value={searchQuery} />
<button className="btn btn-link toolbar__close" onClick={onClose}>
<i className="fa fa-chevron-up" />
</button>
......
public/app/features/datasources/NewDataSourcePage.tsx
......@@ -3,7 +3,7 @@ import classNames from 'classnames';
import { connect } from 'react-redux';
import { hot } from 'react-hot-loader';
import { DataSourcePluginMeta, NavModel } from '@grafana/data';
import { List } from '@grafana/ui';
import { List, LinkButton, Button } from '@grafana/ui';
import { e2e } from '@grafana/e2e';
import Page from 'app/core/components/Page/Page';
......@@ -25,11 +25,8 @@ export interface Props {
}
class NewDataSourcePage extends PureComponent<Props> {
searchInput: HTMLElement;
componentDidMount() {
this.props.loadDataSourcePlugins();
this.searchInput.focus();
}
onDataSourceTypeClicked = (plugin: DataSourcePluginMeta) => {
......@@ -76,14 +73,14 @@ class NewDataSourcePage extends PureComponent<Props> {
</div>
))}
<div className="add-data-source-more">
<a
className="btn btn-inverse"
<LinkButton
variant="secondary"
href="https://grafana.com/plugins?type=datasource&utm_source=grafana_add_ds"
target="_blank"
rel="noopener"
>
Find more data source plugins on grafana.com
</a>
</LinkButton>
</div>
</>
);
......@@ -96,20 +93,9 @@ class NewDataSourcePage extends PureComponent<Props> {
<Page navModel={navModel}>
<Page.Contents isLoading={isLoading}>
<div className="page-action-bar">
<div className="gf-form gf-form--grow">
<FilterInput
ref={elem => (this.searchInput = elem)}
labelClassName="gf-form--has-input-icon"
inputClassName="gf-form-input width-30"
value={searchQuery}
onChange={this.onSearchQueryChange}
placeholder="Filter by name or type"
/>
</div>
<FilterInput value={searchQuery} onChange={this.onSearchQueryChange} placeholder="Filter by name or type" />
<div className="page-action-bar__spacer" />
<a className="btn btn-secondary" href="datasources">
Cancel
</a>
<LinkButton href="datasources">Cancel</LinkButton>
</div>
<div>
{searchQuery && this.renderPlugins(plugins)}
......@@ -151,17 +137,18 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
</div>
<div className="add-data-source-item-actions">
{learnMoreLink && (
<a
className="btn btn-inverse"
<LinkButton
variant="secondary"
href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
target="_blank"
rel="noopener"
onClick={onLearnMoreClick}
icon="fa fa-external-link"
>
{learnMoreLink.name} <i className="fa fa-external-link add-datasource-item-actions__btn-icon" />
</a>
{learnMoreLink.name}
</LinkButton>
)}
{!isPhantom && <button className="btn btn-primary">Select</button>}
{!isPhantom && <Button>Select</Button>}
</div>
</div>
);
......
public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
......@@ -41,7 +41,7 @@ exports[`Render should render teams table 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input"
labelClassName="gf-form--has-input-icon gf-form--grow"
onChange={[Function]}
......@@ -376,7 +376,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input"
labelClassName="gf-form--has-input-icon gf-form--grow"
onChange={[Function]}
......@@ -503,7 +503,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input"
labelClassName="gf-form--has-input-icon gf-form--grow"
onChange={[Function]}
......
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
......@@ -8,7 +8,7 @@ exports[`Render should render component 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input"
labelClassName="gf-form--has-input-icon gf-form--grow"
onChange={[Function]}
......@@ -102,7 +102,7 @@ exports[`Render should render team members 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input"
labelClassName="gf-form--has-input-icon gf-form--grow"
onChange={[Function]}
......
public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
......@@ -7,7 +7,7 @@ exports[`Render should render component 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
......@@ -28,7 +28,7 @@ exports[`Render should render pending invites button 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
......@@ -73,7 +73,7 @@ exports[`Render should show external user management button 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
......@@ -100,7 +100,7 @@ exports[`Render should show invite button 1`] = `
<div
className="gf-form gf-form--grow"
>
<ForwardRef
<Component
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment