You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ly...@apache.org on 2021/12/22 18:22:54 UTC
[superset] branch master updated: chore: Help user to find the input fields in the dataset editor (#17824)
This is an automated email from the ASF dual-hosted git repository.
lyndsi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new d2ed1b7 chore: Help user to find the input fields in the dataset editor (#17824)
d2ed1b7 is described below
commit d2ed1b72dcabfba4af3f937a4646a095d0944d1b
Author: Lyndsi Kay Williams <55...@users.noreply.github.com>
AuthorDate: Wed Dec 22 12:21:37 2021 -0600
chore: Help user to find the input fields in the dataset editor (#17824)
* Updated fields in Metrics and Calculated Columns tabs inside dataset editor, deleted label in expanded Metrics tab
* Fix tests
* Vertically aligned rows in columns tab
---
.../src/components/Datasource/DatasourceEditor.jsx | 34 +++++++++++++---------
.../Datasource/DatasourceEditor.test.jsx | 9 +++---
2 files changed, 25 insertions(+), 18 deletions(-)
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index 001fc3c..0c617c1 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -118,6 +118,16 @@ const StyledLabelWrapper = styled.div`
}
`;
+const StyledColumnsTabWrapper = styled.div`
+ .table > tbody > tr > td {
+ vertical-align: middle;
+ }
+
+ .ant-tag {
+ margin-top: ${({ theme }) => theme.gridUnit}px;
+ }
+`;
+
const checkboxGenerator = (d, onChange) => (
<CheckboxControl value={d} onChange={onChange} />
);
@@ -314,7 +324,7 @@ function ColumnCollectionTable({
details={record.certification_details}
/>
)}
- <EditableTitle canEdit title={v} onSaveTitle={onItemChange} />
+ <TextControl value={v} onChange={onItemChange} />
</StyledLabelWrapper>
) : (
<StyledLabelWrapper>
@@ -1079,11 +1089,6 @@ class DatasourceEditor extends React.PureComponent {
<FormContainer>
<Fieldset compact>
<Field
- fieldKey="verbose_name"
- label={t('Label')}
- control={<TextControl controlId="verbose_name" />}
- />
- <Field
fieldKey="description"
label={t('Description')}
control={
@@ -1165,15 +1170,17 @@ class DatasourceEditor extends React.PureComponent {
</FlexRowContainer>
),
verbose_name: (v, onChange) => (
- <EditableTitle canEdit title={v} onSaveTitle={onChange} />
+ <TextControl canEdit value={v} onChange={onChange} />
),
expression: (v, onChange) => (
- <EditableTitle
+ <TextAreaControl
canEdit
- title={v}
- onSaveTitle={onChange}
+ initialValue={v}
+ onChange={onChange}
extraClasses={['datasource-sql-expression']}
- multiLine
+ language="sql"
+ offerEditInModal={false}
+ minLines={5}
/>
),
description: (v, onChange, label) => (
@@ -1247,7 +1254,7 @@ class DatasourceEditor extends React.PureComponent {
}
key={2}
>
- <div>
+ <StyledColumnsTabWrapper>
<ColumnButtonWrapper>
<span className="m-t-10 m-r-10">
<Button
@@ -1264,6 +1271,7 @@ class DatasourceEditor extends React.PureComponent {
</ColumnButtonWrapper>
<ColumnCollectionTable
className="columns-table"
+ editableColumnName
columns={this.state.databaseColumns}
datasource={datasource}
onColumnsChange={databaseColumns =>
@@ -1272,7 +1280,7 @@ class DatasourceEditor extends React.PureComponent {
onDatasourceChange={this.onDatasourceChange}
/>
{this.state.metadataLoading && <Loading />}
- </div>
+ </StyledColumnsTabWrapper>
</Tabs.TabPane>
<Tabs.TabPane
tab={
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
index 8d63493..c3904d7 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
@@ -78,7 +78,7 @@ describe('DatasourceEditor', () => {
});
userEvent.click(getToggles[0]);
const getTextboxes = screen.getAllByRole('textbox');
- expect(getTextboxes.length).toEqual(5);
+ expect(getTextboxes.length).toEqual(12);
const inputLabel = screen.getByPlaceholderText('Label');
const inputDescription = screen.getByPlaceholderText('Description');
@@ -122,10 +122,9 @@ describe('DatasourceEditor', () => {
});
expect(addBtn).toBeInTheDocument();
userEvent.click(addBtn);
- const newColumn = screen.getByRole('button', {
- name: /<new column>/i,
- });
- expect(newColumn).toBeInTheDocument();
+ // newColumn (Column name) is the first textbox in the tab
+ const newColumn = screen.getAllByRole('textbox', { name: '' })[0];
+ expect(newColumn).toHaveValue('<new column>');
});
it('renders isSqla fields', () => {