From 63d25944c424a820350fd00ce306cdea7cabddcb Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 8 May 2020 12:40:42 +0200
Subject: [PATCH] Minor UI touches (#24371)

* Justify to alignment in stat

* No stats label in inspect

* Use sentence case in panel names

* typos

* typo

* Typo

* Query -> query options

* prettier

* Transformer -> transform data

* Do not show deprecated plugins in the viz picker

* Update viz picker layout
---
 .../dashboard/components/Inspector/InspectDataTab.tsx    | 2 +-
 .../dashboard/components/Inspector/PanelInspector.tsx    | 1 -
 .../app/features/dashboard/panel_editor/QueryOptions.tsx | 2 +-
 .../features/dashboard/panel_editor/VizTypePicker.tsx    | 9 +++++++--
 public/app/plugins/panel/alertlist/plugin.json           | 2 +-
 public/app/plugins/panel/annolist/plugin.json            | 2 +-
 public/app/plugins/panel/bargauge/plugin.json            | 2 +-
 public/app/plugins/panel/gauge/module.tsx                | 2 +-
 public/app/plugins/panel/graph/tab_display.html          | 2 +-
 public/app/plugins/panel/graph2/plugin.json              | 2 +-
 public/app/plugins/panel/homelinks/plugin.json           | 2 +-
 public/app/plugins/panel/news/plugin.json                | 2 +-
 public/app/plugins/panel/piechart/plugin.json            | 2 +-
 public/app/plugins/panel/stat/module.tsx                 | 2 +-
 public/app/plugins/panel/stat/types.ts                   | 2 +-
 15 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
index 5ac3912e332..1f3b188a0fa 100644
--- a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
@@ -114,7 +114,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
       <div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
         <div className={styles.toolbar}>
           {data.length > 1 && (
-            <Field label="Transformer" className="flex-grow-1">
+            <Field label="Transform data" className="flex-grow-1">
               <Select options={transformationOptions} value={transformId} onChange={this.onTransformationChange} />
             </Field>
           )}
diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
index 3df631e4ee7..d31f88cb074 100644
--- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
+++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
@@ -241,7 +241,6 @@ export class PanelInspectorUnconnected extends PureComponent<Props, State> {
 
     return (
       <div style={{ paddingBottom: '16px' }}>
-        <div className="section-heading">{name}</div>
         <table className="filter-table width-30">
           <tbody>
             {stats.map((stat, index) => {
diff --git a/public/app/features/dashboard/panel_editor/QueryOptions.tsx b/public/app/features/dashboard/panel_editor/QueryOptions.tsx
index ea3e4fc2096..17b962937a0 100644
--- a/public/app/features/dashboard/panel_editor/QueryOptions.tsx
+++ b/public/app/features/dashboard/panel_editor/QueryOptions.tsx
@@ -293,7 +293,7 @@ export class QueryOptions extends PureComponent<Props, State> {
 
     return (
       <QueryOperationRow
-        title="Options"
+        title="Query options"
         headerElement={this.renderCollapsedText(styles)}
         isOpen={isOpen}
         onOpen={this.onOpenOptions}
diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
index b4ec3610d21..0f8aa564525 100644
--- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
+++ b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
@@ -87,7 +87,12 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
   return (
     <div className={styles.grid}>
       {hasResults ? (
-        renderList.map((plugin, index) => renderVizPlugin(plugin, index))
+        renderList.map((plugin, index) => {
+          if (plugin.state === PluginState.deprecated) {
+            return null;
+          }
+          return renderVizPlugin(plugin, index);
+        })
       ) : (
         <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
       )}
@@ -103,7 +108,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       max-width: 100%;
       display: grid;
       grid-gap: ${theme.spacing.md};
-      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
     `,
   };
 });
diff --git a/public/app/plugins/panel/alertlist/plugin.json b/public/app/plugins/panel/alertlist/plugin.json
index 767f33008ef..11d0305b38c 100644
--- a/public/app/plugins/panel/alertlist/plugin.json
+++ b/public/app/plugins/panel/alertlist/plugin.json
@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Alert List",
+  "name": "Alert list",
   "id": "alertlist",
 
   "skipDataQuery": true,
diff --git a/public/app/plugins/panel/annolist/plugin.json b/public/app/plugins/panel/annolist/plugin.json
index f80e5e74aff..33fca12022b 100644
--- a/public/app/plugins/panel/annolist/plugin.json
+++ b/public/app/plugins/panel/annolist/plugin.json
@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Annotations list (alpha)",
+  "name": "Annotations list",
   "id": "annolist",
   "state": "alpha",
 
diff --git a/public/app/plugins/panel/bargauge/plugin.json b/public/app/plugins/panel/bargauge/plugin.json
index 81c45b7b16c..52eb30c60f5 100644
--- a/public/app/plugins/panel/bargauge/plugin.json
+++ b/public/app/plugins/panel/bargauge/plugin.json
@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Bar Gauge",
+  "name": "Bar gauge",
   "id": "bargauge",
   "state": "beta",
 
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index de193d1decb..1627d2d1d40 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -11,7 +11,7 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
     builder
       .addBooleanSwitch({
         path: 'showThresholdLabels',
-        name: 'Show threshold Labels',
+        name: 'Show threshold labels',
         description: 'Render the threshold values around the gauge bar',
         defaultValue: false,
       })
diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html
index c93a1e0c98d..dac0887fe57 100644
--- a/public/app/plugins/panel/graph/tab_display.html
+++ b/public/app/plugins/panel/graph/tab_display.html
@@ -119,7 +119,7 @@
 </div>
 
 <div class="gf-form-group">
-  <h5 class="section-heading">Stacking & Null value</h5>
+  <h5 class="section-heading">Stacking and null value</h5>
   <gf-form-switch
     class="gf-form"
     label="Stack"
diff --git a/public/app/plugins/panel/graph2/plugin.json b/public/app/plugins/panel/graph2/plugin.json
index fb80ad8add6..e39a28ff047 100644
--- a/public/app/plugins/panel/graph2/plugin.json
+++ b/public/app/plugins/panel/graph2/plugin.json
@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "React Graph",
+  "name": "React graph",
   "id": "graph2",
   "state": "alpha",
 
diff --git a/public/app/plugins/panel/homelinks/plugin.json b/public/app/plugins/panel/homelinks/plugin.json
index 10bea40dd3f..6d7b8769bc0 100755
--- a/public/app/plugins/panel/homelinks/plugin.json
+++ b/public/app/plugins/panel/homelinks/plugin.json
@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "Home Links",
+  "name": "Home links",
   "id": "homelinks",
 
   "hideFromList": true,
diff --git a/public/app/plugins/panel/news/plugin.json b/public/app/plugins/panel/news/plugin.json
index 3cb274e2f8d..7f4129cfd3d 100755
--- a/public/app/plugins/panel/news/plugin.json
+++ b/public/app/plugins/panel/news/plugin.json
@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "News Panel",
+  "name": "News",
   "id": "news",
 
   "skipDataQuery": true,
diff --git a/public/app/plugins/panel/piechart/plugin.json b/public/app/plugins/panel/piechart/plugin.json
index d64e5fe4668..510a8f99a1e 100644
--- a/public/app/plugins/panel/piechart/plugin.json
+++ b/public/app/plugins/panel/piechart/plugin.json
@@ -1,6 +1,6 @@
 {
   "type": "panel",
-  "name": "PieChart v2",
+  "name": "Pie chart v2",
   "id": "piechart",
   "state": "alpha",
 
diff --git a/public/app/plugins/panel/stat/module.tsx b/public/app/plugins/panel/stat/module.tsx
index ed8aa3a0169..fa1fdcfb867 100644
--- a/public/app/plugins/panel/stat/module.tsx
+++ b/public/app/plugins/panel/stat/module.tsx
@@ -36,7 +36,7 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
       })
       .addRadio({
         path: 'justifyMode',
-        name: 'Justify mode',
+        name: 'Alignment mode',
         description: 'Value & title posititioning',
         defaultValue: 'auto',
         settings: {
diff --git a/public/app/plugins/panel/stat/types.ts b/public/app/plugins/panel/stat/types.ts
index 9dab54eeb04..d0ac9bd3c72 100644
--- a/public/app/plugins/panel/stat/types.ts
+++ b/public/app/plugins/panel/stat/types.ts
@@ -31,7 +31,7 @@ export function addStandardDataReduceOptions(
   builder.addRadio({
     path: 'reduceOptions.values',
     name: 'Show',
-    description: 'Calculate a single value per colum or series or show each row',
+    description: 'Calculate a single value per column or series or show each row',
     settings: {
       options: [
         { value: false, label: 'Calculate' },