feat: Add resize drag handle to Dataset SQL fields (#20670)

* feat: Add resize drag handle to Dataset SQL fields * PR comments
apache · Aug 2, 2022 · dd353ca · dd353ca
1 parent 9291ad5
commit dd353ca
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 6 deletions.
diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx
@@ -33,6 +33,14 @@ interface CRUDCollectionProps {
   expandFieldset?: ReactNode;
   extraButtons?: ReactNode;
   itemGenerator?: () => any;
+  itemCellProps?: ((
+    val: unknown,
+    label: string,
+    record: any,
+  ) => React.DetailedHTMLProps<
+    React.TdHTMLAttributes<HTMLTableCellElement>,
+    HTMLTableCellElement
+  >)[];
   itemRenderers?: ((
     val: unknown,
     onChange: () => void,
@@ -335,6 +343,12 @@ export default class CRUDCollection extends React.PureComponent<
     );
   }
 
+  getCellProps(record: any, col: any) {
+    const cellPropsFn = this.props.itemCellProps?.[col];
+    const val = record[col];
+    return cellPropsFn ? cellPropsFn(val, this.getLabel(col), record) : {};
+  }
+
   renderCell(record: any, col: any) {
     const renderer = this.props.itemRenderers && this.props.itemRenderers[col];
     const val = record[col];
@@ -366,7 +380,9 @@ export default class CRUDCollection extends React.PureComponent<
     }
     tds = tds.concat(
       tableColumns.map(col => (
-        <td key={col}>{this.renderCell(record, col)}</td>
+        <td {...this.getCellProps(record, col)} key={col}>
+          {this.renderCell(record, col)}
+        </td>
       )),
     );
     if (allowAddItem) {

diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -235,6 +235,7 @@ function ColumnCollectionTable({
                   <TextAreaControl
                     language="markdown"
                     offerEditInModal={false}
+                    resize="vertical"
                   />
                 }
               />
@@ -848,7 +849,11 @@ class DatasourceEditor extends React.PureComponent {
           fieldKey="description"
           label={t('Description')}
           control={
-            <TextAreaControl language="markdown" offerEditInModal={false} />
+            <TextAreaControl
+              language="markdown"
+              offerEditInModal={false}
+              resize="vertical"
+            />
           }
         />
         <Field
@@ -882,6 +887,7 @@ class DatasourceEditor extends React.PureComponent {
                 language="sql"
                 controlId="fetch_values_predicate"
                 minLines={5}
+                resize="vertical"
               />
             }
           />
@@ -901,6 +907,7 @@ class DatasourceEditor extends React.PureComponent {
                 controlId="extra"
                 language="json"
                 offerEditInModal={false}
+                resize="vertical"
               />
             }
           />
@@ -1081,6 +1088,7 @@ class DatasourceEditor extends React.PureComponent {
                         minLines={20}
                         maxLines={20}
                         readOnly={!this.state.isEditMode}
+                        resize="both"
                       />
                     }
                   />
@@ -1233,6 +1241,7 @@ class DatasourceEditor extends React.PureComponent {
                     controlId="warning_markdown"
                     language="markdown"
                     offerEditInModal={false}
+                    resize="vertical"
                   />
                 }
               />
@@ -1247,6 +1256,11 @@ class DatasourceEditor extends React.PureComponent {
           verbose_name: '',
           expression: '',
         })}
+        itemCellProps={{
+          expression: () => ({
+            width: '240px',
+          }),
+        }}
         itemRenderers={{
           metric_name: (v, onChange, _, record) => (
             <FlexRowContainer>
@@ -1276,6 +1290,8 @@ class DatasourceEditor extends React.PureComponent {
               language="sql"
               offerEditInModal={false}
               minLines={5}
+              textAreaStyles={{ minWidth: '200px', maxWidth: '450px' }}
+              resize="both"
             />
           ),
           description: (v, onChange, label) => (

diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
@@ -45,6 +45,16 @@ const propTypes = {
   ]),
   aboveEditorSection: PropTypes.node,
   readOnly: PropTypes.bool,
+  resize: PropTypes.oneOf([
+    null,
+    'block',
+    'both',
+    'horizontal',
+    'inline',
+    'none',
+    'vertical',
+  ]),
+  textAreaStyles: PropTypes.object,
 };
 
 const defaultProps = {
@@ -55,6 +65,8 @@ const defaultProps = {
   maxLines: 10,
   offerEditInModal: true,
   readOnly: false,
+  resize: null,
+  textAreaStyles: {},
 };
 
 class TextAreaControl extends React.Component {
@@ -72,18 +84,23 @@ class TextAreaControl extends React.Component {
     if (this.props.language) {
       const style = {
         border: `1px solid ${this.props.theme.colors.grayscale.light1}`,
+        minHeight: `${minLines}em`,
+        width: 'auto',
+        ...this.props.textAreaStyles,
       };
+      if (this.props.resize) {
+        style.resize = this.props.resize;
+      }
       if (this.props.readOnly) {
         style.backgroundColor = '#f2f2f2';
       }
+
       return (
         <TextAreaEditor
           mode={this.props.language}
           style={style}
           minLines={minLines}
           maxLines={inModal ? 1000 : this.props.maxLines}
-          width="100%"
-          height={`${minLines}em`}
           editorProps={{ $blockScrolling: true }}
           defaultValue={this.props.initialValue}
           readOnly={this.props.readOnly}
@@ -106,10 +123,10 @@ class TextAreaControl extends React.Component {
 
   renderModalBody() {
     return (
-      <div>
+      <>
         <div>{this.props.aboveEditorSection}</div>
         {this.renderEditor(true)}
-      </div>
+      </>
     );
   }