SecretFormField: updates story from knobs to control (#33920)

* SecretFormField: updates story from knobs to control

* disables knobs in story

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
+import { Meta, Story } from '@storybook/react';
 
-import { SecretFormField } from './SecretFormField';
+import { SecretFormField, Props } from './SecretFormField';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 
@@ -10,31 +10,48 @@ export default {
   title: 'Forms/SecretFormField',
   component: SecretFormField,
   decorators: [withCenteredStory],
-};
+  parameters: {
+    controls: {
+      exclude: ['onReset'],
+    },
+    knobs: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    labelWidth: { control: { type: 'range', min: 0, max: 30 } },
+    inputWidth: { control: { type: 'range', min: 0, max: 30 } },
+    tooltip: { control: { type: 'text' } },
+  },
+} as Meta;
 
-const getSecretFormFieldKnobs = () => {
+export const Basic: Story<Props> = (args) => {
-  return {
-    isConfigured: boolean('Set configured state', false),
-  };
-};
-
-export const basic = () => {
-  const knobs = getSecretFormFieldKnobs();
   return (
     <UseState initialState="Input value">
       {(value, setValue) => (
         <SecretFormField
-          label={'Secret field'}
+          label={args.label}
-          labelWidth={10}
+          labelWidth={args.labelWidth}
           value={value}
-          isConfigured={knobs.isConfigured}
+          isConfigured={args.isConfigured}
           onChange={(e) => setValue(e.currentTarget.value)}
           onReset={() => {
             action('Value was reset')('');
             setValue('');
           }}
+          inputWidth={args.inputWidth}
+          tooltip={args.tooltip}
+          placeholder={args.placeholder}
         />
       )}
     </UseState>
   );
 };
+Basic.args = {
+  label: 'Secret field',
+  labelWidth: 10,
+  isConfigured: false,
+  inputWidth: 12,
+  tooltip: 'this is a tooltip',
+  placeholder: 'Password',
+};