pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-17 11:09:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: Help user to find the input fields in the dataset editor (#17824)

Browse Source 
* 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
This commit is contained in:
Lyndsi Kay Williams 2021-12-22 12:21:37 -06:00 committed by GitHub
parent c49545aec1
commit d2ed1b72dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
superset-frontend/src/components/Datasource/DatasourceEditor.jsx
View File

@ -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) => ( const checkboxGenerator = (d, onChange) => (
<CheckboxControl value={d} onChange={onChange} /> <CheckboxControl value={d} onChange={onChange} />
); );
@ -314,7 +324,7 @@ function ColumnCollectionTable({
details={record.certification_details} details={record.certification_details}
/> />
)} )}
<EditableTitle canEdit title={v} onSaveTitle={onItemChange} /> <TextControl value={v} onChange={onItemChange} />
</StyledLabelWrapper> </StyledLabelWrapper>
) : ( ) : (
<StyledLabelWrapper> <StyledLabelWrapper>
@ -1078,11 +1088,6 @@ class DatasourceEditor extends React.PureComponent {
expandFieldset={ expandFieldset={
<FormContainer> <FormContainer>
<Fieldset compact> <Fieldset compact>
<Field
fieldKey="verbose_name"
label={t('Label')}
control={<TextControl controlId="verbose_name" />}
/>
<Field <Field
fieldKey="description" fieldKey="description"
label={t('Description')} label={t('Description')}
@ -1165,15 +1170,17 @@ class DatasourceEditor extends React.PureComponent {
</FlexRowContainer> </FlexRowContainer>
), ),
verbose_name: (v, onChange) => ( verbose_name: (v, onChange) => (
<EditableTitle canEdit title={v} onSaveTitle={onChange} /> <TextControl canEdit value={v} onChange={onChange} />
), ),
expression: (v, onChange) => ( expression: (v, onChange) => (
<EditableTitle <TextAreaControl
canEdit canEdit
title={v} initialValue={v}
onSaveTitle={onChange} onChange={onChange}
extraClasses={['datasource-sql-expression']} extraClasses={['datasource-sql-expression']}
multiLine language="sql"
offerEditInModal={false}
minLines={5}
/> />
), ),
description: (v, onChange, label) => ( description: (v, onChange, label) => (
@ -1247,7 +1254,7 @@ class DatasourceEditor extends React.PureComponent {
} }
key={2} key={2}
> >
<div> <StyledColumnsTabWrapper>
<ColumnButtonWrapper> <ColumnButtonWrapper>
<span className="m-t-10 m-r-10"> <span className="m-t-10 m-r-10">
<Button <Button
@ -1264,6 +1271,7 @@ class DatasourceEditor extends React.PureComponent {
</ColumnButtonWrapper> </ColumnButtonWrapper>
<ColumnCollectionTable <ColumnCollectionTable
className="columns-table" className="columns-table"
editableColumnName
columns={this.state.databaseColumns} columns={this.state.databaseColumns}
datasource={datasource} datasource={datasource}
onColumnsChange={databaseColumns => onColumnsChange={databaseColumns =>
@ -1272,7 +1280,7 @@ class DatasourceEditor extends React.PureComponent {
onDatasourceChange={this.onDatasourceChange} onDatasourceChange={this.onDatasourceChange}
/> />
{this.state.metadataLoading && <Loading />} {this.state.metadataLoading && <Loading />}
</div> </StyledColumnsTabWrapper>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane <Tabs.TabPane
tab={ tab={

9
superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
View File

@ -78,7 +78,7 @@ describe('DatasourceEditor', () => {
}); });
userEvent.click(getToggles[0]); userEvent.click(getToggles[0]);
const getTextboxes = screen.getAllByRole('textbox'); const getTextboxes = screen.getAllByRole('textbox');
expect(getTextboxes.length).toEqual(5); expect(getTextboxes.length).toEqual(12);
const inputLabel = screen.getByPlaceholderText('Label'); const inputLabel = screen.getByPlaceholderText('Label');
const inputDescription = screen.getByPlaceholderText('Description'); const inputDescription = screen.getByPlaceholderText('Description');
@ -122,10 +122,9 @@ describe('DatasourceEditor', () => {
}); });
expect(addBtn).toBeInTheDocument(); expect(addBtn).toBeInTheDocument();
userEvent.click(addBtn); userEvent.click(addBtn);
const newColumn = screen.getByRole('button', { // newColumn (Column name) is the first textbox in the tab
name: /<new column>/i, const newColumn = screen.getAllByRole('textbox', { name: '' })[0];
}); expect(newColumn).toHaveValue('<new column>');
expect(newColumn).toBeInTheDocument();
}); });
it('renders isSqla fields', () => { it('renders isSqla fields', () => {