From 3d8317a7470ce2e7a61339d0ebe034cf07b6a79d Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 4 Feb 2020 11:37:18 +0200
Subject: [PATCH] Fix/add default props to prom query editor (#21908)

* Plugins: Add default query to PromQueryEditor

* Plugins: Update PromQueryEditor snapshot

* Plugins: Use Partial for default PromQuery
---
 .../datasource/prometheus/components/PromQueryEditor.tsx     | 4 +++-
 .../components/__snapshots__/PromQueryEditor.test.tsx.snap   | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
index 91c1c98e317..c2a614a3552 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
@@ -37,7 +37,9 @@ export class PromQueryEditor extends PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    const { query } = props;
+    // Use default query to prevent undefined input values
+    const defaultQuery: Partial<PromQuery> = { expr: '', legendFormat: '', interval: '' };
+    const query = Object.assign({}, defaultQuery, props.query);
     this.query = query;
     // Query target properties that are fully controlled inputs
     this.state = {
diff --git a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
index 9723b983c4d..1f9d676b29c 100644
--- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
@@ -38,6 +38,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
         onChange={[Function]}
         placeholder="legend format"
         type="text"
+        value=""
       />
     </div>
     <div
@@ -62,7 +63,9 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
         className="gf-form-input width-8"
         onBlur={[Function]}
         onChange={[Function]}
+        placeholder=""
         type="text"
+        value=""
       />
     </div>
     <div
@@ -205,6 +208,8 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
           query={
             Object {
               "expr": "",
+              "interval": "",
+              "legendFormat": "",
               "refId": "A",
             }
           }