Skip to content

A
amundsen_dev
Unverified Commit d9ae38a6 authored by Diksha Thakur's avatar Diksha Thakur Committed by GitHub
Browse files
Options

fix: Uneditable descriptions with no value or possible actions should not show header (#533) 

* added renderDescription method

* simplified method

* Added unit test cases

* modified logic and unit test cases

* code cleanup

* incorporated PR review suggestions

* minor changes to unit test cases
parent 276b8b51
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 35 deletions
amundsen_application/static/js/components/TableDetail/ColumnListItem/index.spec.tsx
View file @ d9ae38a6
...@@ -68,9 +68,9 @@ describe('ColumnListItem', () => { ...@@ -68,9 +68,9 @@ describe('ColumnListItem', () => {
it('turns expanded state to the opposite state', () => { it('turns expanded state to the opposite state', () => {
setStateSpy.mockClear(); setStateSpy.mockClear();
const { isExpanded } = instance.state; const prevState = instance.state;
instance.toggleExpand(null); instance.toggleExpand(null);
expect(setStateSpy).toHaveBeenCalledWith({ isExpanded: !isExpanded }); expect(setStateSpy).toHaveBeenCalled();
}); });
}); });
...@@ -124,27 +124,137 @@ describe('ColumnListItem', () => { ...@@ -124,27 +124,137 @@ describe('ColumnListItem', () => {
expect(wrapper.find('.column-dropdown').exists()).toBe(false); expect(wrapper.find('.column-dropdown').exists()).toBe(false);
}); });
it('renders column stats and editable text when expanded', () => { describe('when expanded', () => {
instance.setState({ isExpanded: true }); it('renders column stats and editable text', () => {
const newWrapper = shallow(instance.render()); instance.setState({ isExpanded: true });
expect(newWrapper.find('.expanded-content').exists()).toBe(true); const newWrapper = shallow(instance.render());
expect(newWrapper.find(ColumnDescEditableText).exists()).toBe(true); expect(newWrapper.find('.expanded-content').exists()).toBe(true);
expect(newWrapper.find(ColumnStats).exists()).toBe(true); expect(newWrapper.find(EditableSection).exists()).toBe(true);
}); expect(newWrapper.find(ColumnDescEditableText).exists()).toBe(true);
expect(newWrapper.find(ColumnStats).exists()).toBe(true);
});
it('renders EditableSection with correct edit text and Url when expanded', () => { it('renders EditableSection with non-empty description, edit text and url', () => {
instance.setState({ isExpanded: true }); instance.setState({ isExpanded: true });
const newWrapper = shallow(instance.render()); const newWrapper = shallow(instance.render());
expect(newWrapper.find(EditableSection).exists()).toBe(true); const editableSection = newWrapper.find(EditableSection);
const editableSection = newWrapper.find(EditableSection); expect(editableSection.props()).toMatchObject({
expect(editableSection.props()).toMatchObject({ title: 'Description',
title: 'Description', readOnly: !props.data.is_editable,
readOnly: !props.data.is_editable, editText: props.editText,
editText: props.editText, editUrl: props.editUrl,
editUrl: props.editUrl, });
}); });
});
it('renders EditableSection with non-empty description, empty edit text and url', () => {
const { props, wrapper } = setup({
editText: '',
editUrl: '',
});
const instance = wrapper.instance();
instance.setState({ isExpanded: true });
const newWrapper = shallow(instance.render());
expect(newWrapper.find(EditableSection).exists()).toBe(true);
const editableSection = newWrapper.find(EditableSection);
expect(editableSection.props()).toMatchObject({
title: 'Description',
readOnly: !props.data.is_editable,
editText: props.editText,
editUrl: props.editUrl,
});
});
describe('when empty description', () => {
it('renders EditableSection with empty edit text and url for editable column description', () => {
const { props, wrapper } = setup({
data: {
name: 'test_column_name',
description: '',
is_editable: true,
col_type: 'varchar(32)',
stats: [
{
end_epoch: 1571616000,
start_epoch: 1571616000,
stat_type: 'count',
stat_val: '12345',
},
],
},
editText: '',
editUrl: '',
});
const instance = wrapper.instance();
instance.setState({ isExpanded: true });
const newWrapper = shallow(instance.render());
expect(newWrapper.find(EditableSection).exists()).toBe(true);
const editableSection = newWrapper.find(EditableSection);
expect(editableSection.props()).toMatchObject({
title: 'Description',
readOnly: !props.data.is_editable,
editText: props.editText,
editUrl: props.editUrl,
});
});
it('does not render EditableSection with empty edit text and url for non-editable column description', () => {
const { wrapper } = setup({
data: {
name: 'test_column_name',
description: '',
is_editable: false,
col_type: 'varchar(32)',
stats: [
{
end_epoch: 1571616000,
start_epoch: 1571616000,
stat_type: 'count',
stat_val: '12345',
},
],
},
editText: '',
editUrl: '',
});
const instance = wrapper.instance();
instance.setState({ isExpanded: true });
const newWrapper = shallow(instance.render());
expect(newWrapper.find(EditableSection).exists()).toBe(false);
});
it('renders EditableSection with non-empty edit text and url for non-editable column description', () => {
const { props, wrapper } = setup({
data: {
name: 'test_column_name',
description: '',
is_editable: false,
col_type: 'varchar(32)',
stats: [
{
end_epoch: 1571616000,
start_epoch: 1571616000,
stat_type: 'count',
stat_val: '12345',
},
],
},
editText: 'Click to edit description in source',
editUrl: 'source/test_column_name',
});
const instance = wrapper.instance();
instance.setState({ isExpanded: true });
const newWrapper = shallow(instance.render());
expect(newWrapper.find(EditableSection).exists()).toBe(true);
const editableSection = newWrapper.find(EditableSection);
expect(editableSection.props()).toMatchObject({
title: 'Description',
readOnly: !props.data.is_editable,
editText: props.editText,
editUrl: props.editUrl,
});
});
});
});
describe('when not expanded', () => { describe('when not expanded', () => {
let newWrapper; let newWrapper;
beforeAll(() => { beforeAll(() => {
......
amundsen_application/static/js/components/TableDetail/ColumnListItem/index.tsx
View file @ d9ae38a6
...@@ -18,6 +18,7 @@ import './styles.scss'; ...@@ -18,6 +18,7 @@ import './styles.scss';
import EditableSection from 'components/common/EditableSection'; import EditableSection from 'components/common/EditableSection';
const MORE_BUTTON_TEXT = 'More options'; const MORE_BUTTON_TEXT = 'More options';
const EDITABLE_SECTION_TITLE = 'Description';
interface DispatchFromProps { interface DispatchFromProps {
openRequestDescriptionDialog: ( openRequestDescriptionDialog: (
...@@ -51,15 +52,19 @@ export class ColumnListItem extends React.Component< ...@@ -51,15 +52,19 @@ export class ColumnListItem extends React.Component<
} }
toggleExpand = (e) => { toggleExpand = (e) => {
const metadata = this.props.data;
if (!this.state.isExpanded) { if (!this.state.isExpanded) {
const metadata = this.props.data;
logClick(e, { logClick(e, {
target_id: `column::${metadata.name}`, target_id: `column::${metadata.name}`,
target_type: 'column stats', target_type: 'column stats',
label: `${metadata.name} ${metadata.col_type}`, label: `${metadata.name} ${metadata.col_type}`,
}); });
} }
this.setState({ isExpanded: !this.state.isExpanded }); if (this.shouldRenderDescription() || metadata.stats.length !== 0) {
this.setState((prevState) => ({
isExpanded: !prevState.isExpanded,
}));
}
}; };
openRequest = () => { openRequest = () => {
...@@ -73,6 +78,17 @@ export class ColumnListItem extends React.Component< ...@@ -73,6 +78,17 @@ export class ColumnListItem extends React.Component<
e.stopPropagation(); e.stopPropagation();
}; };
shouldRenderDescription = (): boolean => {
const { data, editText, editUrl } = this.props;
if (data.description) {
return true;
}
if (!editText && !editUrl && !data.is_editable) {
return false;
}
return true;
};
renderColumnType = (columnIndex: number, type: string) => { renderColumnType = (columnIndex: number, type: string) => {
const truncatedTypes: string[] = ['array', 'struct', 'map', 'row']; const truncatedTypes: string[] = ['array', 'struct', 'map', 'row'];
let shouldTrucate = false; let shouldTrucate = false;
...@@ -172,19 +188,21 @@ export class ColumnListItem extends React.Component< ...@@ -172,19 +188,21 @@ export class ColumnListItem extends React.Component<
{this.state.isExpanded && ( {this.state.isExpanded && (
<section className="expanded-content"> <section className="expanded-content">
<div className="stop-propagation" onClick={this.stopPropagation}> <div className="stop-propagation" onClick={this.stopPropagation}>
<EditableSection {this.shouldRenderDescription() && (
title="Description" <EditableSection
readOnly={!metadata.is_editable} title={EDITABLE_SECTION_TITLE}
editText={this.props.editText} readOnly={!metadata.is_editable}
editUrl={this.props.editUrl} editText={this.props.editText}
> editUrl={this.props.editUrl}
<ColumnDescEditableText >
columnIndex={this.props.index} <ColumnDescEditableText
editable={metadata.is_editable} columnIndex={this.props.index}
maxLength={getMaxLength('columnDescLength')} editable={metadata.is_editable}
value={metadata.description} maxLength={getMaxLength('columnDescLength')}
/> value={metadata.description}
</EditableSection> />
</EditableSection>
)}
</div> </div>
<ColumnStats stats={metadata.stats} /> <ColumnStats stats={metadata.stats} />
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment