From e2be194b461afb2dce6a04cd1f35422d75817558 Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Sat, 9 Mar 2019 15:10:06 -0800
Subject: [PATCH] autofill space rather than force with/height values

---
 .../components/Table/TableInputCSV.story.tsx  |  9 ++---
 .../components/Table/TableInputCSV.test.tsx   |  6 ++--
 .../src/components/Table/TableInputCSV.tsx    | 36 +++++++++++++------
 .../src/components/Table/_TableInputCSV.scss  | 12 +++++--
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx
index 4ff4a00a4fa..604eefca7a2 100644
--- a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx
+++ b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx
@@ -4,16 +4,17 @@ import { storiesOf } from '@storybook/react';
 import TableInputCSV from './TableInputCSV';
 import { action } from '@storybook/addon-actions';
 import { TableData } from '../../types/data';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 const TableInputStories = storiesOf('UI/Table/Input', module);
 
+TableInputStories.addDecorator(withCenteredStory);
+
 TableInputStories.add('default', () => {
   return (
-    <div>
+    <div style={{ width: '90%', height: '90vh' }}>
       <TableInputCSV
-        text="a,b,c\n1,2,3"
-        width={'90%'}
-        height={'90vh'}
+        text={'a,b,c\n1,2,3'}
         onTableParsed={(table: TableData, text: string) => {
           console.log('Table', table, text);
           action('Table')(table, text);
diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx
index e99061f2c5b..9e2dfbf80c3 100644
--- a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx
+++ b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx
@@ -9,11 +9,9 @@ describe('TableInputCSV', () => {
     const tree = renderer
       .create(
         <TableInputCSV
-          text="a,b,c\n1,2,3"
-          width={100}
-          height={100}
+          text={'a,b,c\n1,2,3'}
           onTableParsed={(table: TableData, text: string) => {
-            console.log('Table:', table, 'from:', text);
+            // console.log('Table:', table, 'from:', text);
           }}
         />
       )
diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx
index 5828c97228b..184d4452bda 100644
--- a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx
+++ b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx
@@ -2,11 +2,10 @@ import React from 'react';
 import debounce from 'lodash/debounce';
 import { ParseConfig, parseCSV, ParseDetails } from '../../utils/processTableData';
 import { TableData } from '../../types/data';
+import { AutoSizer } from 'react-virtualized';
 
 interface Props {
   config?: ParseConfig;
-  width: number | string;
-  height: number | string;
   text: string;
   onTableParsed: (table: TableData, text: string) => void;
 }
@@ -17,6 +16,9 @@ interface State {
   details: ParseDetails;
 }
 
+/**
+ * Expects the container div to have size set and will fill it 100%
+ */
 class TableInputCSV extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -54,24 +56,38 @@ class TableInputCSV extends React.PureComponent<Props, State> {
     }
   }
 
+  handleFooterClicked = (event: any) => {
+    console.log('Errors', this.state);
+    const message = this.state.details
+      .errors!.map(err => {
+        return err.message;
+      })
+      .join('\n');
+    alert('CSV Parsing Errors:\n' + message);
+  };
+
   handleChange = (event: any) => {
     this.setState({ text: event.target.value });
   };
 
   render() {
-    const { width, height } = this.props;
     const { table, details } = this.state;
 
     const hasErrors = details.errors && details.errors.length > 0;
+    const footerClassNames = hasErrors ? 'gf-table-input-csv-err' : '';
 
     return (
-      <div className="gf-table-input-csv" style={{ width, height }}>
-        <textarea placeholder="Enter CSV here..." value={this.state.text} onChange={this.handleChange} />
-        <footer>
-          Rows:{table.rows.length}, Columns:{table.columns.length}
-          {hasErrors ? <i className="fa fa-exclamation-triangle" /> : <i className="fa fa-check-circle" />}
-        </footer>
-      </div>
+      <AutoSizer>
+        {({ height, width }) => (
+          <div className="gf-table-input-csv" style={{ width, height }}>
+            <textarea placeholder="Enter CSV here..." value={this.state.text} onChange={this.handleChange} />
+            <footer onClick={this.handleFooterClicked} className={footerClassNames}>
+              Rows:{table.rows.length}, Columns:{table.columns.length} &nbsp;
+              {hasErrors ? <i className="fa fa-exclamation-triangle" /> : <i className="fa fa-check-circle" />}
+            </footer>
+          </div>
+        )}
+      </AutoSizer>
     );
   }
 }
diff --git a/packages/grafana-ui/src/components/Table/_TableInputCSV.scss b/packages/grafana-ui/src/components/Table/_TableInputCSV.scss
index 9f64ffe5a22..c819d636fc5 100644
--- a/packages/grafana-ui/src/components/Table/_TableInputCSV.scss
+++ b/packages/grafana-ui/src/components/Table/_TableInputCSV.scss
@@ -10,9 +10,15 @@
 
 .gf-table-input-csv footer {
   position: absolute;
-  bottom: 20px;
-  right: 20px;
+  bottom: 15px;
+  right: 15px;
   border: 1px solid #222;
   background: #ccc;
-  padding: 4px 10px;
+  padding: 1px 4px;
+  font-size: 80%;
+  cursor: pointer;
+}
+
+.gf-table-input-csv footer.gf-table-input-csv-err {
+  background: yellow;
 }