Skip to content

Commit

Permalink
chore(superset-ui-control-uitils): add MetricOption and dependencies …
Browse files Browse the repository at this point in the history
…to control utils (apache#593)

* feat: metric option added to control utils

* add test

* Add MetricOptions to superset-ui control utils and fix tests

* add suggestions

* Update packages/superset-ui-control-utils/test/components/InfoTooltipWithTrigger.test.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* remove prop assignments

* fix lint

Co-authored-by: Evan Rusackas <evan@preset.io>
  • Loading branch information
2 people authored and zhaoyongjie committed Nov 25, 2021
1 parent 422f4e6 commit 3b27a08
Show file tree
Hide file tree
Showing 7 changed files with 197 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"dependencies": {
"@types/react-bootstrap": "0.32.21",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react-bootstrap": "^0.33.1"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
import { ColumnTypeLabel } from './ColumnTypeLabel';

export interface MetricOptionProps {
metric: {
// eslint-disable-next-line camelcase
verbose_name: string;
// eslint-disable-next-line camelcase
metric_name: string;
label: string;
description: string;
// eslint-disable-next-line camelcase
warning_text: string;
expression: string;
};
openInNewWindow: boolean;
showFormula: boolean;
showType: boolean;
url: string;
}

export function MetricOption({
metric,
openInNewWindow = false,
showFormula = true,
showType = false,
url = '',
}: MetricOptionProps) {
const verbose = metric.verbose_name || metric.metric_name || metric.label;
const link = url ? (
<a href={url} target={openInNewWindow ? '_blank' : ''}>
{verbose}
</a>
) : (
verbose
);
return (
<div className="metric-option">
{showType && <ColumnTypeLabel type="expression" />}
<span className="option-label">{link}</span>
{metric.description && (
<InfoTooltipWithTrigger
className="text-muted"
icon="info"
tooltip={metric.description}
label={`descr-${metric.metric_name}`}
/>
)}
{showFormula && (
<InfoTooltipWithTrigger
className="text-muted"
icon="question-circle-o"
tooltip={metric.expression}
label={`expr-${metric.metric_name}`}
/>
)}
{metric.warning_text && (
<InfoTooltipWithTrigger
className="text-danger"
icon="warning"
tooltip={metric.warning_text}
label={`warn-${metric.metric_name}`}
/>
)}
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,4 @@ export * from './InfoTooltipWithTrigger';
export * from './ColumnOption';
export * from './ColumnTypeLabel';
export * from './mainMetric';
export * from './MetricOption';
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';

import { ColumnOption, ColumnOptionProps } from '../src/ColumnOption';
import { ColumnTypeLabel } from '../src/ColumnTypeLabel';
import InfoTooltipWithTrigger from '../src/InfoTooltipWithTrigger';
import { ColumnOption, ColumnOptionProps } from '../../src/ColumnOption';
import { ColumnTypeLabel } from '../../src/ColumnTypeLabel';
import InfoTooltipWithTrigger from '../../src/InfoTooltipWithTrigger';

describe('ColumnOption', () => {
const defaultProps = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import React from 'react';
import { shallow } from 'enzyme';

import { ColumnTypeLabel, ColumnTypeLabelProps } from '../src/ColumnTypeLabel';
import { ColumnTypeLabel, ColumnTypeLabelProps } from '../../src/ColumnTypeLabel';

describe('ColumnOption', () => {
const defaultProps = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { shallow } from 'enzyme';
import { OverlayTrigger } from 'react-bootstrap';
import InfoTooltipWithTrigger from '../src/InfoTooltipWithTrigger';
import InfoTooltipWithTrigger from '../../src/InfoTooltipWithTrigger';

describe('InfoTooltipWithTrigger', () => {
it('renders a tooltip', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { MetricOption, MetricOptionProps } from '../../src/MetricOption';

describe('MetricOption', () => {
const defaultProps = {
metric: {
metric_name: 'foo',
verbose_name: 'Foo',
expression: 'SUM(foo)',
label: 'test',
description: 'Foo is the greatest metric of all',
warning_text: 'Be careful when using foo',
},
openInNewWindow: false,
showFormula: true,
showType: true,
url: '',
};

let wrapper: ShallowWrapper;
let props: MetricOptionProps;
const factory = (o: MetricOptionProps) => <MetricOption {...o} />;
beforeEach(() => {
wrapper = shallow(factory(defaultProps));
props = { ...defaultProps };
});
it('is a valid element', () => {
expect(React.isValidElement(<MetricOption {...defaultProps} />)).toBe(true);
});
it('shows a label with verbose_name', () => {
const lbl = wrapper.find('.option-label');
expect(lbl).toHaveLength(1);
expect(lbl.first().text()).toBe('Foo');
});
it('shows 3 InfoTooltipWithTrigger', () => {
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(3);
});
it('shows only 2 InfoTooltipWithTrigger when no descr', () => {
props.metric.description = '';
wrapper = shallow(factory(props));
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(2);
});
it('shows a label with metric_name when no verbose_name', () => {
props.metric.verbose_name = '';
wrapper = shallow(factory(props));
expect(wrapper.find('.option-label').first().text()).toBe('foo');
});
it('shows only 1 InfoTooltipWithTrigger when no descr and no warning', () => {
props.metric.warning_text = '';
wrapper = shallow(factory(props));
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(1);
});
it('sets target="_blank" when openInNewWindow is true', () => {
props.url = 'https://github.com/apache/incubator-superset';
wrapper = shallow(factory(props));
expect(wrapper.find('a').prop('target')).toBe('');

props.openInNewWindow = true;
wrapper = shallow(factory(props));
expect(wrapper.find('a').prop('target')).toBe('_blank');
});
it('shows a metric type label when showType is true', () => {
props.showType = true;
wrapper = shallow(factory(props));
expect(wrapper.find('ColumnTypeLabel')).toHaveLength(1);
});
});

0 comments on commit 3b27a08

Please sign in to comment.