Schema Improvements Part 2: Add data source config options.

mozilla · May 6, 2019 · 567d6ce · 567d6ce
1 parent 7108af7
commit 567d6ce
Show file tree

Hide file tree

Showing 17 changed files with 511 additions and 18 deletions.
diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -83,6 +83,10 @@ body {
   }
 }
 
+.admin-schema-editor {
+  padding: 50px 0;
+}
+
 .creation-container {
   h5 {
     color: #a7a7a7;

diff --git a/client/app/components/proptypes.js b/client/app/components/proptypes.js
@@ -16,10 +16,11 @@ export const DataSourceMetadata = PropTypes.shape({
   name: PropTypes.string,
   type: PropTypes.string,
   example: PropTypes.string,
+  description: PropTypes.string,
 });
 
 export const Table = PropTypes.shape({
-  columns: PropTypes.arrayOf(PropTypes.string).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
 });
 
 export const Schema = PropTypes.arrayOf(Table);
@@ -38,6 +39,13 @@ export const RefreshScheduleDefault = {
   until: null,
 };
 
+export const TableMetadata = PropTypes.shape({
+  key: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  visible: PropTypes.bool.isRequired,
+});
+
 export const Field = PropTypes.shape({
   name: PropTypes.string.isRequired,
   title: PropTypes.string,

diff --git a/client/app/components/queries/SchemaData.jsx b/client/app/components/queries/SchemaData.jsx
@@ -19,11 +19,13 @@ class SchemaData extends React.PureComponent {
     show: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     tableName: PropTypes.string,
+    tableDescription: PropTypes.string,
     tableMetadata: PropTypes.arrayOf(DataSourceMetadata),
   };
 
   static defaultProps = {
     tableName: '',
+    tableDescription: '',
     tableMetadata: [],
   };
 
@@ -42,9 +44,22 @@ class SchemaData extends React.PureComponent {
       render: textWrapRenderer,
     }];
 
+    const hasDescription =
+      this.props.tableMetadata.some(columnMetadata => columnMetadata.description);
+
     const hasExample =
       this.props.tableMetadata.some(columnMetadata => columnMetadata.example);
 
+    if (hasDescription) {
+      columns.push({
+        title: 'Description',
+        dataIndex: 'description',
+        width: 400,
+        key: 'description',
+        render: textWrapRenderer,
+      });
+    }
+
     if (hasExample) {
       columns.push({
         title: 'Example',
@@ -64,6 +79,9 @@ class SchemaData extends React.PureComponent {
         onClose={this.props.onClose}
         visible={this.props.show}
       >
+        <h5 className="table-description">
+          {this.props.tableDescription}
+        </h5>
         <Table
           dataSource={this.props.tableMetadata}
           pagination={false}

diff --git a/client/app/components/queries/schema-browser.html b/client/app/components/queries/schema-browser.html
@@ -19,15 +19,15 @@
   </div>
 
   <div class="schema-browser" vs-repeat vs-size="$ctrl.getSize(table)">
-    <div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilterObject | filter: {name: '!'+$ctrl.versionFilter}">
+    <div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilterObject | filter:$ctrl.itemExists track by table.name">
       <div class="table-name" ng-click="$ctrl.showTable(table)">
         <i class="fa fa-table"></i>
         <strong>
           <span title="{{table.name}}">{{table.name}}</span>
           <span ng-if="table.size !== undefined"> ({{table.size}})</span>
         </strong>
         <i ng-if="table.hasColumnMetadata" class="fa fa-question-circle info" title="More Info" aria-hidden="true"
-          ng-click="openSchemaInfo($event, table.name, table.columns)"></i>
+          ng-click="openSchemaInfo($event, table)"></i>
         <i class="fa fa-angle-double-right copy-to-editor" aria-hidden="true"
           ng-click="$ctrl.itemSelected($event, [table.name])"></i>
       </div>
@@ -43,6 +43,7 @@
   <schema-data
     show="showSchemaInfo"
     table-name="tableName"
+    table-description="tableDescription"
     table-metadata="tableMetadata"
     on-close="closeSchemaInfo"
   ></schema-data>

diff --git a/client/app/components/queries/schema-browser.js b/client/app/components/queries/schema-browser.js
@@ -12,9 +12,10 @@ function SchemaBrowserCtrl($rootScope, $scope) {
   };
 
   $scope.showSchemaInfo = false;
-  $scope.openSchemaInfo = ($event, tableName, tableMetadata) => {
-    $scope.tableName = tableName;
-    $scope.tableMetadata = tableMetadata;
+  $scope.openSchemaInfo = ($event, table) => {
+    $scope.tableName = table.name;
+    $scope.tableDescription = table.description;
+    $scope.tableMetadata = table.columns;
     $scope.showSchemaInfo = true;
     $event.stopPropagation();
   };
@@ -45,6 +46,13 @@ function SchemaBrowserCtrl($rootScope, $scope) {
     }
   };
 
+  this.itemExists = (item) => {
+    if ('visible' in item) {
+      return item.visible;
+    }
+    return false;
+  };
+
   this.itemSelected = ($event, hierarchy) => {
     $rootScope.$broadcast('query-editor.command', 'paste', hierarchy.join('.').split('(')[0]);
     $event.preventDefault();

diff --git a/client/app/pages/data-sources/schema-table-components/EditableTable.jsx b/client/app/pages/data-sources/schema-table-components/EditableTable.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import Form from 'antd/lib/form';
+import Input from 'antd/lib/input';
+import PropTypes from 'prop-types';
+import { TableMetadata } from '@/components/proptypes';
+import TableVisibilityCheckbox from './TableVisibilityCheckbox';
+import './schema-table.css';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+export const EditableContext = React.createContext();
+
+// eslint-disable-next-line react/prop-types
+const EditableRow = ({ form, index, ...props }) => (
+  <EditableContext.Provider value={form}>
+    <tr {...props} />
+  </EditableContext.Provider>
+);
+
+export const EditableFormRow = Form.create()(EditableRow);
+
+export class EditableCell extends React.Component {
+  static propTypes = {
+    dataIndex: PropTypes.string,
+    input_type: PropTypes.string,
+    editing: PropTypes.bool,
+    record: TableMetadata,
+  };
+
+  static defaultProps = {
+    dataIndex: undefined,
+    input_type: undefined,
+    editing: false,
+    record: {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: this.props.record ? this.props.record.visible : false,
+    };
+  }
+
+  onChange = () => {
+    this.setState({ visible: !this.state.visible });
+  }
+
+  getInput = () => {
+    if (this.props.input_type === 'visible') {
+      return (
+        <TableVisibilityCheckbox
+          visible={this.state.visible}
+          onChange={this.onChange}
+        />);
+    }
+    return <TextArea className="table-textarea" placeholder="Enter table description..." style={{ resize: 'vertical' }} />;
+  };
+
+  render() {
+    const {
+      editing,
+      dataIndex,
+      record,
+      ...restProps
+    } = this.props;
+
+    return (
+      <EditableContext.Consumer>
+        {(form) => {
+          const { getFieldDecorator } = form;
+          return (
+            <td {...restProps}>
+              {editing ? (
+                <FormItem style={{ margin: 0 }}>
+                  {getFieldDecorator(dataIndex, {
+                    initialValue: record[dataIndex],
+                  })(this.getInput()) }
+                </FormItem>
+              ) : restProps.children}
+            </td>
+          );
+        }}
+      </EditableContext.Consumer>
+    );
+  }
+}