From d8167ffb884e7cc7349d992bb17098f6d35d706c Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Tue, 19 Mar 2019 13:24:45 +0100
Subject: [PATCH] Add SecretFormField component

---
 .../SecretFormFied/SecretFormField.story.tsx  | 38 +++++++++++++
 .../SecretFormFied/SecretFormField.tsx        | 56 +++++++++++++++++++
 packages/grafana-ui/src/components/index.ts   |  1 +
 .../src/utils/storybook/UseState.tsx          |  2 +-
 4 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-ui/src/components/SecretFormFied/SecretFormField.story.tsx
 create mode 100644 packages/grafana-ui/src/components/SecretFormFied/SecretFormField.tsx

diff --git a/packages/grafana-ui/src/components/SecretFormFied/SecretFormField.story.tsx b/packages/grafana-ui/src/components/SecretFormFied/SecretFormField.story.tsx
new file mode 100644
index 00000000000..be0b19b8f68
--- /dev/null
+++ b/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>
+  );
+});
diff --git a/packages/grafana-ui/src/components/SecretFormFied/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormFied/SecretFormField.tsx
new file mode 100644
index 00000000000..04bb38578dd
--- /dev/null
+++ b/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';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index e20a52f6485..cc6fb0b376b 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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';
diff --git a/packages/grafana-ui/src/utils/storybook/UseState.tsx b/packages/grafana-ui/src/utils/storybook/UseState.tsx
index cc263b9a456..fb9bf06bfb2 100644
--- a/packages/grafana-ui/src/utils/storybook/UseState.tsx
+++ b/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 }> {