This is an automated email from the ASF dual-hosted git repository. graceguo pushed a commit to branch gg-SourceTabReadOnly in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 256800ab2689c4a6a9cc01dff9d8aa608922caa6 Author: Grace <[email protected]> AuthorDate: Tue Dec 1 10:09:42 2020 -0800 move padlock to the bottom of tab --- .../datasource/DatasourceEditor_spec.jsx | 4 +- .../src/datasource/DatasourceEditor.jsx | 49 +++++++++++----------- .../components/controls/TextAreaControl.jsx | 6 ++- 3 files changed, 31 insertions(+), 28 deletions(-) diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx index a6758fb..3caa82b 100644 --- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx +++ b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx @@ -152,9 +152,7 @@ describe('DatasourceEditor', () => { beforeAll(() => { isFeatureEnabledMock = jest .spyOn(featureFlags, 'isFeatureEnabled') - .mockImplementation( - feature => feature === 'ENABLE_DATASET_SOURCE_EDIT', - ); + .mockImplementation(() => false); wrapper = shallow(el, { context: { store } }).dive(); }); diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx index bf730a7..e6b21d5 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.jsx +++ b/superset-frontend/src/datasource/DatasourceEditor.jsx @@ -68,12 +68,13 @@ const FlexRowContainer = styled.div` } `; -const EditLockContainer = styled.span` - float: right; - padding: 20px; - width: 120px; - font-size: ${supersetTheme.typography.sizes.xs}px; - text-align: center; +const EditLockContainer = styled.div` + font-size: ${supersetTheme.typography.sizes.s}px; + display: flex; + align-items: center; + a { + padding: 0 10px; + } `; const checkboxGenerator = (d, onChange) => ( @@ -660,22 +661,6 @@ class DatasourceEditor extends React.PureComponent { {type.label} </Radio> ))} - {this.allowEditSource && ( - <EditLockContainer> - <a href="#" onClick={this.onChangeEditMode}> - <Icon - color={supersetTheme.colors.primary.base} - name={this.state.isEditMode ? 'lock-unlocked' : 'lock-locked'} - /> - </a> - {!this.state.isEditMode && ( - <div>{t('Click the lock to make changes.')}</div> - )} - {this.state.isEditMode && ( - <div>{t('Click the lock to prevent further changes.')}</div> - )} - </EditLockContainer> - )} </div> <hr /> <Fieldset item={datasource} onChange={this.onDatasourceChange} compact> @@ -730,8 +715,8 @@ class DatasourceEditor extends React.PureComponent { <TextAreaControl language="sql" offerEditInModal={false} - minLines={25} - maxLines={25} + minLines={20} + maxLines={20} readOnly={!this.state.isEditMode} /> } @@ -799,6 +784,22 @@ class DatasourceEditor extends React.PureComponent { </Col> )} </Fieldset> + {this.allowEditSource && ( + <EditLockContainer> + <a href="#" onClick={this.onChangeEditMode}> + <Icon + color={supersetTheme.colors.grayscale.base} + name={this.state.isEditMode ? 'lock-unlocked' : 'lock-locked'} + /> + </a> + {!this.state.isEditMode && ( + <div>{t('Click the lock to make changes.')}</div> + )} + {this.state.isEditMode && ( + <div>{t('Click the lock to prevent further changes.')}</div> + )} + </EditLockContainer> + )} </div> ); } diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx index b1bb5d3..0bcf2d1 100644 --- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx +++ b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx @@ -78,10 +78,14 @@ export default class TextAreaControl extends React.Component { const value = this.props.value || ''; const minLines = inModal ? 40 : this.props.minLines || 12; if (this.props.language) { + const style = { border: '1px solid #CCC' }; + if (this.props.readOnly) { + style.backgroundColor = '#f2f2f2'; + } return ( <TextAreaEditor mode={this.props.language} - style={{ border: '1px solid #CCC' }} + style={style} minLines={minLines} maxLines={inModal ? 1000 : this.props.maxLines} onChange={this.onAceChangeDebounce}
