mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
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
This commit is contained in:
parent
c49545aec1
commit
d2ed1b72dc
@ -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>
|
||||
@ -1078,11 +1088,6 @@ class DatasourceEditor extends React.PureComponent {
|
||||
expandFieldset={
|
||||
<FormContainer>
|
||||
<Fieldset compact>
|
||||
<Field
|
||||
fieldKey="verbose_name"
|
||||
label={t('Label')}
|
||||
control={<TextControl controlId="verbose_name" />}
|
||||
/>
|
||||
<Field
|
||||
fieldKey="description"
|
||||
label={t('Description')}
|
||||
@ -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={
|
||||
|
@ -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', () => {
|
||||
|
Loading…
Reference in New Issue
Block a user