diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less index d1509a48b5..6238066681 100644 --- a/client/app/assets/less/ant.less +++ b/client/app/assets/less/ant.less @@ -14,6 +14,7 @@ @import '~antd/lib/radio/style/index'; @import '~antd/lib/time-picker/style/index'; @import '~antd/lib/pagination/style/index'; +@import '~antd/lib/drawer/style/index'; @import '~antd/lib/table/style/index'; @import '~antd/lib/popover/style/index'; @import '~antd/lib/icon/style/index'; diff --git a/client/app/assets/less/inc/base.less b/client/app/assets/less/inc/base.less index d5f05424ef..55faf52d6e 100755 --- a/client/app/assets/less/inc/base.less +++ b/client/app/assets/less/inc/base.less @@ -124,6 +124,10 @@ strong { transition: height 0s, width 0s !important; } +.admin-schema-editor { + padding: 50px 0; +} + // Ace Editor .ace_editor { border: 1px solid fade(@redash-gray, 15%) !important; diff --git a/client/app/assets/less/inc/schema-browser.less b/client/app/assets/less/inc/schema-browser.less index 0034391086..d547a78790 100644 --- a/client/app/assets/less/inc/schema-browser.less +++ b/client/app/assets/less/inc/schema-browser.less @@ -7,14 +7,14 @@ div.table-name { border-radius: @redash-radius; position: relative; - .copy-to-editor { + .copy-to-editor, .info { display: none; } &:hover { background: fade(@redash-gray, 10%); - .copy-to-editor { + .copy-to-editor, .info { display: flex; } } @@ -36,7 +36,7 @@ div.table-name { background: transparent; } - .copy-to-editor { + .copy-to-editor, .info { color: fade(@redash-gray, 90%); cursor: pointer; position: absolute; @@ -49,6 +49,10 @@ div.table-name { justify-content: center; } + .info { + right: 20px + } + .table-open { padding: 0 22px 0 26px; overflow: hidden; @@ -56,14 +60,14 @@ div.table-name { white-space: nowrap; position: relative; - .copy-to-editor { + .copy-to-editor, .info { display: none; } &:hover { background: fade(@redash-gray, 10%); - .copy-to-editor { + .copy-to-editor, .info { display: flex; } } diff --git a/client/app/components/proptypes.js b/client/app/components/proptypes.js index a1240cf029..d45896f106 100644 --- a/client/app/components/proptypes.js +++ b/client/app/components/proptypes.js @@ -11,8 +11,16 @@ export const DataSource = PropTypes.shape({ type_name: PropTypes.string, }); +export const DataSourceMetadata = PropTypes.shape({ + key: PropTypes.number, + 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); @@ -31,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 new file mode 100644 index 0000000000..e1ad6bfab3 --- /dev/null +++ b/client/app/components/queries/SchemaData.jsx @@ -0,0 +1,101 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { react2angular } from 'react2angular'; +import Drawer from 'antd/lib/drawer'; +import Table from 'antd/lib/table'; + +import { DataSourceMetadata } from '@/components/proptypes'; + +function textWrapRenderer(text) { + return ( +
+ {text} +
+ ); +} + +class SchemaData extends React.PureComponent { + static propTypes = { + show: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + tableName: PropTypes.string, + tableDescription: PropTypes.string, + tableMetadata: PropTypes.arrayOf(DataSourceMetadata), + }; + + static defaultProps = { + tableName: '', + tableDescription: '', + tableMetadata: [], + }; + + render() { + const columns = [{ + title: 'Column Name', + dataIndex: 'name', + width: 400, + key: 'name', + render: textWrapRenderer, + }, { + title: 'Column Type', + dataIndex: 'type', + width: 400, + key: 'type', + 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', + dataIndex: 'example', + width: 400, + key: 'example', + render: textWrapRenderer, + }); + } + + return ( + +
+ {this.props.tableDescription} +
+ + + ); + } +} + +export default function init(ngModule) { + ngModule.component('schemaData', react2angular(SchemaData, null, [])); +} + +init.init = true; diff --git a/client/app/components/queries/schema-browser.html b/client/app/components/queries/schema-browser.html index fe7e26669e..5f452acf74 100644 --- a/client/app/components/queries/schema-browser.html +++ b/client/app/components/queries/schema-browser.html @@ -19,22 +19,32 @@
-
+
{{table.name}} ({{table.size}}) +
-
{{column}} +
+ {{column.name}} + ng-click="$ctrl.itemSelected($event, [column.name])">
+
diff --git a/client/app/components/queries/schema-browser.js b/client/app/components/queries/schema-browser.js index ded89d09bc..c5ab533f8e 100644 --- a/client/app/components/queries/schema-browser.js +++ b/client/app/components/queries/schema-browser.js @@ -11,6 +11,18 @@ function SchemaBrowserCtrl($rootScope, $scope) { $scope.$broadcast('vsRepeatTrigger'); }; + $scope.showSchemaInfo = false; + $scope.openSchemaInfo = ($event, table) => { + $scope.tableName = table.name; + $scope.tableDescription = table.description; + $scope.tableMetadata = table.columns; + $scope.showSchemaInfo = true; + $event.stopPropagation(); + }; + $scope.closeSchemaInfo = () => { + $scope.$apply(() => { $scope.showSchemaInfo = false; }); + }; + this.getSize = (table) => { let size = 22; @@ -34,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('.')); $event.preventDefault(); diff --git a/client/app/pages/data-sources/EditDataSource.jsx b/client/app/pages/data-sources/EditDataSource.jsx index 4db6045387..4ea39e51e3 100644 --- a/client/app/pages/data-sources/EditDataSource.jsx +++ b/client/app/pages/data-sources/EditDataSource.jsx @@ -10,6 +10,7 @@ import notification from '@/services/notification'; import PromiseRejectionError from '@/lib/promise-rejection-error'; import LoadingState from '@/components/items-list/components/LoadingState'; import DynamicForm from '@/components/dynamic-form/DynamicForm'; +import SchemaTable from '@/pages/data-sources/schema-table-components/SchemaTable'; import helper from '@/components/dynamic-form/dynamicFormHelper'; import { HelpTrigger, TYPES as HELP_TRIGGER_TYPES } from '@/components/HelpTrigger'; @@ -26,13 +27,23 @@ class EditDataSource extends React.Component { dataSource: null, type: null, loading: true, + schema: null, }; componentDidMount() { DataSource.get({ id: $route.current.params.dataSourceId }).$promise.then((dataSource) => { const { type } = dataSource; this.setState({ dataSource }); - DataSource.types(types => this.setState({ type: find(types, { type }), loading: false })); + + const typesPromise = DataSource.types().$promise; + const schemaPromise = DataSource.schema({ id: $route.current.params.dataSourceId }).$promise; + + typesPromise.then(types => this.setState({ type: find(types, { type }) })); + schemaPromise.then(data => this.setState({ schema: data.schema })); + + Promise.all([typesPromise, schemaPromise]).then(() => { + this.setState({ loading: false }); + }); }).catch((error) => { // ANGULAR_REMOVE_ME This code is related to Angular's HTTP services if (error.status && error.data) { @@ -78,6 +89,12 @@ class EditDataSource extends React.Component { }); }; + updateSchema = (schema, tableId, columnId) => { + const { dataSource } = this.state; + const data = { tableId, columnId, schema }; + DataSource.updateSchema({ id: dataSource.id }, data); + }; + testConnection = (callback) => { const { dataSource } = this.state; DataSource.test({ id: dataSource.id }, (httpResponse) => { @@ -124,6 +141,12 @@ class EditDataSource extends React.Component {
+
+ +
); } diff --git a/client/app/pages/data-sources/schema-table-components/EditableTable.jsx b/client/app/pages/data-sources/schema-table-components/EditableTable.jsx new file mode 100644 index 0000000000..6154541e6f --- /dev/null +++ b/client/app/pages/data-sources/schema-table-components/EditableTable.jsx @@ -0,0 +1,87 @@ +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 }) => ( + + + +); + +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(prevState => ({ visible: !prevState.visible })); + } + + getInput = () => { + if (this.props.input_type === 'visible') { + return ( + + ); + } + return