IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Improve SecretInput story (#51665)

Browse Source 
* Added mdx file for secret input

* Chore: Improve SecretInput story

* review related changes in docs

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Pawan Verma 2022-07-05 14:02:51 +05:30 committed by GitHub
parent f78b7f1f17
commit 920bd1e88d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.betterer.results
View File

@ -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"]
],

28
packages/grafana-ui/src/components/SecretInput/SecretInput.mdx Normal file
View File

@ -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} />

10
packages/grafana-ui/src/components/SecretInput/SecretInput.story.tsx
View File

@ -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('');