Add SecretFormField component

packages/grafana-ui/src/components/SecretFormFied/SecretFormField.story.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+
+import { SecretFormField } from './SecretFormField';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { UseState } from '../../utils/storybook/UseState';
+
+const SecretFormFieldStories = storiesOf('UI/SecretFormField/SecretFormField', module);
+
+SecretFormFieldStories.addDecorator(withCenteredStory);
+const getSecretFormFieldKnobs = () => {
+  return {
+    isConfigured: boolean('Set configured state', false),
+  };
+};
+
+SecretFormFieldStories.add('default', () => {
+  const knobs = getSecretFormFieldKnobs();
+  return (
+    <UseState initialState="Input value">
+      {(value, setValue) => (
+        <SecretFormField
+          label={'Secret field'}
+          labelWidth={10}
+          value={value}
+          isConfigured={knobs.isConfigured}
+          onChange={e => setValue(e.currentTarget.value)}
+          onReset={() => {
+            action('Value was reset')('');
+            setValue('');
+          }}
+        />
+      )}
+    </UseState>
+  );
+});

packages/grafana-ui/src/components/SecretFormFied/SecretFormField.tsx

@@ -0,0 +1,56 @@
+import { omit } from 'lodash';
+import React, { InputHTMLAttributes, FunctionComponent } from 'react';
+import { FormField } from '..';
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  onReset: () => void;
+  isConfigured: boolean;
+
+  label?: string;
+  labelWidth?: number;
+  inputWidth?: number;
+}
+
+export const SecretFormField: FunctionComponent<Props> = ({
+  label,
+  labelWidth,
+  inputWidth,
+  onReset,
+  isConfigured,
+  ...inputProps
+}: Props) => {
+  return (
+    <FormField
+      label={label || 'Password'}
+      labelWidth={labelWidth}
+      inputEl={
+        isConfigured ? (
+          <>
+            <input
+              type="text"
+              className={`gf-form-input width-${inputWidth! - 2}`}
+              disabled={true}
+              value="configured"
+              {...omit(inputProps, 'value')}
+            />
+            <button className="btn btn-secondary gf-form-btn" onClick={onReset}>
+              reset
+            </button>
+          </>
+        ) : (
+          <input
+            type="password"
+            className={`gf-form-input width-${inputWidth}`}
+            placeholder={'password'}
+            {...inputProps}
+          />
+        )
+      }
+    />
+  );
+};
+
+SecretFormField.defaultProps = {
+  inputWidth: 12,
+};
+SecretFormField.displayName = 'SecretFormField';

packages/grafana-ui/src/components/index.ts

@@ -14,6 +14,7 @@ export { default as resetSelectStyles } from './Select/resetSelectStyles';
 // Forms
 export { FormLabel } from './FormLabel/FormLabel';
 export { FormField } from './FormField/FormField';
+export { SecretFormField } from './SecretFormFied/SecretFormField';
 
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';

packages/grafana-ui/src/utils/storybook/UseState.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 interface StateHolderProps<T> {
   initialState: T;
-  children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
+  children: (currentState: T, updateState: (nextState: T) => void) => React.ReactNode;
 }
 
 export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T; initialState: T }> {