From 13fbe6ed289fdf0edf91bd2e1081c741505f5104 Mon Sep 17 00:00:00 2001
From: eledobleefe <eledobleefe@gmail.com>
Date: Tue, 5 Jul 2022 15:38:26 +0200
Subject: [PATCH] Storybook: Add documentation to PluginSignatureBadge story
 (#51645)

* Import the mdx documentation file to PluginSignatureBadge.story.tsx and add to its export defaul

* Create the mdx file of PluginSignatureBadge with its information

* Fix signed PluginSignatureBadge status

* Modify text according to reviewer suggestions

* betterer

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .betterer.results                             |  3 --
 .../PluginSignatureBadge.mdx                  | 43 +++++++++++++++++++
 .../PluginSignatureBadge.story.tsx            |  7 +++
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.mdx

diff --git a/.betterer.results b/.betterer.results
index 39fb671de21..b8a91c250db 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -10347,9 +10347,6 @@ exports[`no undocumented stories`] = {
     "packages/grafana-ui/src/components/PanelChrome/PanelChrome.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/PluginSignatureBadge/PluginSignatureBadge.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/QueryField/QueryField.story.tsx:5381": [
       [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
     ],
diff --git a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.mdx b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.mdx
new file mode 100644
index 00000000000..508f1c0b739
--- /dev/null
+++ b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.mdx
@@ -0,0 +1,43 @@
+import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
+import { PluginSignatureBadge } from './PluginSignatureBadge';
+
+<Meta title="MDX|PluginSignatureBadge" component={PluginSignatureBadge} />
+
+# Plugin Signature Badge
+
+The Plugin Signature Badge can be found in each information plugin card of the configuration plugins panel (Grafana menu > Configuration > Plugins).
+This is a security measure to make sure plugins haven't been tampered with. Upon loading, Grafana checks to see the plugin signature status.
+
+## Badges:
+
+1.- Core: this badge indicates that the plugin has been built into Grafana.
+
+<Preview>
+  <PluginSignatureBadge status="internal" />
+</Preview>
+
+2.- Signed: the plugin's signature was successfully verified.
+
+<Preview>
+  <PluginSignatureBadge status="valid" />
+</Preview>
+
+3.- Invalid signature: this plugin has a invalid signature.
+
+<Preview>
+  <PluginSignatureBadge status="invalid" />
+</Preview>
+
+4.- Modified signature: this plugin has changed since it was signed. This may indicate malicious intent.
+
+<Preview>
+  <PluginSignatureBadge status="modified" />
+</Preview>
+
+5.- Unsigned: the plugin is not signed. In this case, as upon loading Grafana checks the plugins signature, Grafana will not load or start it. Furthermore, it will write an error message to the server log.
+
+<Preview>
+  <PluginSignatureBadge status="unsigned" />
+</Preview>
+
+<Props of={PluginSignatureBadge} />
diff --git a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx
index 0f35ecf1404..ed1d7d46c7a 100644
--- a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx
+++ b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.story.tsx
@@ -6,6 +6,8 @@ import { PluginSignatureBadge } from '@grafana/ui';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
+import mdx from './PluginSignatureBadge.mdx';
+
 export default {
   title: 'Data Display/PluginSignatureBadge',
   decorators: [withCenteredStory],
@@ -24,6 +26,11 @@ export default {
       ],
     },
   },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const Basic: Story = (args) => {