Chore: Improve SecretInput story (#51665)

* Added mdx file for secret input

* Chore: Improve SecretInput story

* review related changes in docs

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

.betterer.results

@@ -1736,9 +1736,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-ui/src/components/SecretInput/SecretInput.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.story.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -10367,9 +10364,6 @@ exports[`no undocumented stories`] = {
     "packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx:5381": [
       [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
     ],
-    "packages/grafana-ui/src/components/SecretInput/SecretInput.story.tsx:5381": [
-      [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
-    ],
     "packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.story.tsx:5381": [
       [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
     ],

packages/grafana-ui/src/components/SecretInput/SecretInput.mdx

@@ -0,0 +1,28 @@
+import { Props } from '@storybook/addon-docs/blocks';
+import { SecretInput } from './SecretInput';
+
+# Secret Input
+
+Used for secret/password input. It has 2 states: **_configured_** and **_not configured_**.
+
+- If configured it will disable the input and add a reset button that will
+  clear the input and make it accessible.
+- In non configured state it behaves like a normal password input.
+
+This is used for passwords or anything that is encrypted on the server and is
+later returned encrypted to the user (like datasource passwords).
+
+### Usage
+
+```tsx
+import {SecretInput} from '@grafana/ui';
+
+<SecretInput
+  value={...}
+  isConfigured={...}
+  onChange={...}
+  onReset={...}
+/>
+```
+
+<Props of={SecretInput} />

packages/grafana-ui/src/components/SecretInput/SecretInput.story.tsx

@@ -4,12 +4,16 @@ import React, { useState, ChangeEvent } from 'react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { SecretInput, Props } from './SecretInput';
+import mdx from './SecretInput.mdx';
 
-export default {
+const meta: Meta = {
   title: 'Forms/SecretInput',
   component: SecretInput,
   decorators: [withCenteredStory],
   parameters: {
+    docs: {
+      page: mdx,
+    },
     controls: {
       exclude: [
         'prefix',
@@ -32,7 +36,9 @@ export default {
   argTypes: {
     width: { control: { type: 'range', min: 10, max: 200, step: 10 } },
   },
-} as Meta;
+};
+
+export default meta;
 
 const Template: Story<Props> = (args) => {
   const [secret, setSecret] = useState('');