update collection table

apache · Jul 28, 2020 · 92e4fa4 · 92e4fa4
1 parent 6bbd533
commit 92e4fa4
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 80 deletions.
diff --git a/...set-frontend/src/CRUD/CollectionTable.jsx → ...set-frontend/src/CRUD/CollectionTable.tsx b/...set-frontend/src/CRUD/CollectionTable.jsx → ...set-frontend/src/CRUD/CollectionTable.tsx
@@ -16,56 +16,50 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import shortid from 'shortid';
 import { t } from '@superset-ui/translation';
 import Button from '../components/Button';
 import Fieldset from './Fieldset';
 import { recurseReactClone } from './utils';
 import './crud.less';
 
-const propTypes = {
-  collection: PropTypes.arrayOf(PropTypes.object).isRequired,
-  itemGenerator: PropTypes.func,
-  columnLabels: PropTypes.object,
-  tableColumns: PropTypes.array.isRequired,
-  onChange: PropTypes.func,
-  itemRenderers: PropTypes.object,
-  allowDeletes: PropTypes.bool,
-  expandFieldset: PropTypes.node,
-  emptyMessage: PropTypes.node,
-  extraButtons: PropTypes.node,
-  allowAddItem: PropTypes.bool,
-};
-const defaultProps = {
-  onChange: () => {},
-  itemRenderers: {},
-  columnLabels: {},
-  allowDeletes: false,
-  emptyMessage: 'No entries',
-  allowAddItem: false,
-  itemGenerator: () => ({}),
-  expandFieldset: null,
-  extraButtons: null,
-};
-const Frame = props => <div className="frame">{props.children}</div>;
-Frame.propTypes = { children: PropTypes.node };
+interface CRUDCollectionProps {
+  allowAddItem: boolean;
+  allowDeletes: boolean;
+  collection: Array<object>;
+  columnLabels: object;
+  emptyMessage: ReactNode;
+  expandFieldset: ReactNode;
+  extraButtons: ReactNode;
+  itemGenerator: () => any;
+  itemRenderers: any;
+  onChange: (arg0: any) => void;
+  tableColumns: Array<any>;
+}
+
+interface CRUDCollectionState {
+  collection: object;
+  expandedColumns: object;
+}
 
-function createKeyedCollection(arr) {
-  const newArr = arr.map(o => ({
+function createKeyedCollection(arr: Array<object>) {
+  const newArr = arr.map((o: any) => ({
     ...o,
     id: o.id || shortid.generate(),
   }));
   const map = {};
-  newArr.forEach(o => {
+  newArr.forEach((o: any) => {
     map[o.id] = o;
   });
   return map;
 }
 
-export default class CRUDCollection extends React.PureComponent {
-  constructor(props) {
+export default class CRUDCollection extends React.PureComponent<
+  CRUDCollectionProps,
+  CRUDCollectionState
+> {
+  constructor(props: CRUDCollectionProps) {
     super(props);
     this.state = {
       expandedColumns: {},
@@ -79,14 +73,14 @@ export default class CRUDCollection extends React.PureComponent {
     this.renderTableBody = this.renderTableBody.bind(this);
     this.changeCollection = this.changeCollection.bind(this);
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: CRUDCollectionProps) {
     if (nextProps.collection !== this.props.collection) {
       this.setState({
         collection: createKeyedCollection(nextProps.collection),
       });
     }
   }
-  onCellChange(id, col, val) {
+  onCellChange(id: number, col: string, val: boolean) {
     this.changeCollection({
       ...this.state.collection,
       [id]: {
@@ -105,13 +99,13 @@ export default class CRUDCollection extends React.PureComponent {
       [newItem.id]: newItem,
     });
   }
-  onFieldsetChange(item) {
+  onFieldsetChange(item: any) {
     this.changeCollection({
       ...this.state.collection,
       [item.id]: item,
     });
   }
-  getLabel(col) {
+  getLabel(col: any) {
     const { columnLabels } = this.props;
     let label = columnLabels[col] ? columnLabels[col] : col;
     if (label.startsWith('__')) {
@@ -120,11 +114,11 @@ export default class CRUDCollection extends React.PureComponent {
     }
     return label;
   }
-  changeCollection(collection) {
+  changeCollection(collection: any) {
     this.setState({ collection });
     this.props.onChange(Object.keys(collection).map(k => collection[k]));
   }
-  deleteItem(id) {
+  deleteItem(id: number) {
     const newColl = { ...this.state.collection };
     delete newColl[id];
     this.changeCollection(newColl);
@@ -136,7 +130,7 @@ export default class CRUDCollection extends React.PureComponent {
       : tableColumns;
     return expandFieldset ? ['__expand'].concat(cols) : cols;
   }
-  toggleExpand(id) {
+  toggleExpand(id: any) {
     this.onCellChange(id, '__expanded', false);
     this.setState({
       expandedColumns: {
@@ -173,21 +167,21 @@ export default class CRUDCollection extends React.PureComponent {
       </thead>
     );
   }
-  renderExpandableSection(item) {
+  renderExpandableSection(item: any) {
     const propsGenerator = () => ({ item, onChange: this.onFieldsetChange });
     return recurseReactClone(
       this.props.expandFieldset,
       Fieldset,
       propsGenerator,
     );
   }
-  renderCell(record, col) {
+  renderCell(record: any, col: any) {
     const renderer = this.props.itemRenderers[col];
     const val = record[col];
     const onChange = this.onCellChange.bind(this, record.id, col);
     return renderer ? renderer(val, onChange, this.getLabel(col)) : val;
   }
-  renderItem(record) {
+  renderItem(record: any) {
     const {
       allowAddItem,
       allowDeletes,
@@ -217,11 +211,9 @@ export default class CRUDCollection extends React.PureComponent {
         <td key={col}>{this.renderCell(record, col)}</td>
       )),
     );
-
     if (allowAddItem) {
       tds.push(<td />);
     }
-
     if (allowDeletes) {
       tds.push(
         <td key="__actions">
@@ -280,5 +272,3 @@ export default class CRUDCollection extends React.PureComponent {
     );
   }
 }
-CRUDCollection.defaultProps = defaultProps;
-CRUDCollection.propTypes = propTypes;
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -83,18 +83,23 @@ function ColumnCollectionTable({
               <Field
                 fieldKey="expression"
                 label={t('SQL Expression')}
-                control={<TextControl />}
+                control={
+                  <TextAreaControl
+                    language="markdown"
+                    offerEditInModal={false}
+                  />
+                }
               />
             )}
             <Field
               fieldKey="verbose_name"
               label={t('Label')}
-              control={<TextControl />}
+              control={<TextControl placeholder={t('Label')} />}
             />
             <Field
               fieldKey="description"
               label={t('Description')}
-              control={<TextControl />}
+              control={<TextControl placeholder={t('Description')} />}
             />
             {allowEditDataType && (
               <Field
@@ -130,7 +135,7 @@ function ColumnCollectionTable({
                       database/column name level via the extra parameter.`)}
                 </div>
               }
-              control={<TextControl />}
+              control={<TextControl placeholder={'%y/%m/%d'} />}
             />
           </Fieldset>
         </FormContainer>
@@ -582,20 +587,20 @@ export class DatasourceEditor extends React.PureComponent {
               <Field
                 fieldKey="description"
                 label={t('Description')}
-                control={<TextControl />}
+                control={<TextControl placeholder={t('Description')} />}
               />
               <Field
                 fieldKey="d3format"
                 label={t('D3 Format')}
-                control={<TextControl />}
+                control={<TextControl placeholder="%y/%m/%d" />}
               />
               <Field
                 label={t('Warning Message')}
                 fieldKey="warning_text"
                 description={t(
                   'Warning message to display in the metric selector',
                 )}
-                control={<TextControl />}
+                control={<TextControl placeholder={t('Warning Message')} />}
               />
             </Fieldset>
           </FormContainer>

diff --git a/...plore/components/controls/TextControl.jsx → ...plore/components/controls/TextControl.tsx b/...plore/components/controls/TextControl.jsx → ...plore/components/controls/TextControl.tsx
@@ -17,38 +17,29 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FormGroup, FormControl } from 'react-bootstrap';
 import {
   legacyValidateNumber,
   legacyValidateInteger,
 } from '@superset-ui/validator';
 import ControlHeader from '../ControlHeader';
 
-const propTypes = {
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  isFloat: PropTypes.bool,
-  isInt: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
-
-const defaultProps = {
-  onChange: () => {},
-  onFocus: () => {},
-  value: '',
-  isInt: false,
-  isFloat: false,
-  disabled: false,
-};
+interface TextControlProps {
+  disabled: boolean;
+  isFloat: boolean;
+  isInt: boolean;
+  onChange: (value: any, errors: any) => {};
+  onFocus: () => {};
+  placeholder: string;
+  value: string | number;
+}
 
-export default class TextControl extends React.Component {
-  constructor(props) {
+export default class TextControl extends React.Component<TextControlProps> {
+  constructor(props: TextControlProps) {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
-  onChange(event) {
+  onChange(event: any) {
     let value = event.target.value;
 
     // Validation & casting
@@ -83,7 +74,7 @@ export default class TextControl extends React.Component {
         <FormGroup controlId="formInlineName" bsSize="small">
           <FormControl
             type="text"
-            placeholder=""
+            placeholder={this.props.placeholder}
             onChange={this.onChange}
             onFocus={this.props.onFocus}
             value={value}
@@ -94,6 +85,3 @@ export default class TextControl extends React.Component {
     );
   }
 }
-
-TextControl.propTypes = propTypes;
-TextControl.defaultProps = defaultProps;
diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less
@@ -233,6 +233,7 @@ table.table-no-hover tr:hover {
 }
 
 .editable-title.datasource-sql-expression textarea {
+  min-height: 252px;
   width: 95%;
 }
 

diff --git a/superset/config.py b/superset/config.py
@@ -810,7 +810,7 @@ class CeleryConfig:  # pylint: disable=too-few-public-methods
 # Enables the replacement react views for all the FAB views (list, edit, show) with
 # designs introduced in SIP-34: https://github.com/apache/incubator-superset/issues/8976
 # This is a work in progress so not all features available in FAB have been implemented
-ENABLE_REACT_CRUD_VIEWS = True
+ENABLE_REACT_CRUD_VIEWS = False
 
 # What is the Last N days relative in the time selector to:
 # 'today' means it is midnight (00:00:00) in the local timezone
-Original file line number
+Diff line change
@@ Expand Up / @@ -233,6 +233,7 @@ table.table-no-hover tr:hover { @@
     }
     .editable-title.datasource-sql-expression textarea {
+      min-height: 252px;
       width: 95%;
     }
@@ Expand Down @@