From 3b27a08ef63dcff965ad6957b798ce5a888454ae Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 11 Jun 2020 11:55:36 -0700 Subject: [PATCH] chore(superset-ui-control-uitils): add MetricOption and dependencies to control utils (#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 * remove prop assignments * fix lint Co-authored-by: Evan Rusackas --- .../superset-ui-control-utils/package.json | 1 + .../src/MetricOption.tsx | 86 +++++++++++++++++++ .../superset-ui-control-utils/src/index.ts | 1 + .../{ => components}/ColumnOption.test.tsx | 6 +- .../{ => components}/ColumnTypeLabel.test.tsx | 2 +- .../InfoTooltipWithTrigger.test.tsx | 20 ++++- .../test/components/MetricOption.test.tsx | 86 +++++++++++++++++++ 7 files changed, 197 insertions(+), 5 deletions(-) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/MetricOption.tsx rename superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/{ => components}/ColumnOption.test.tsx (94%) rename superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/{ => components}/ColumnTypeLabel.test.tsx (96%) rename superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/{ => components}/InfoTooltipWithTrigger.test.tsx (59%) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/MetricOption.test.tsx diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/package.json index 9f8f8c511e973..7805d602fd947 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/package.json @@ -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" } } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/MetricOption.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/MetricOption.tsx new file mode 100644 index 0000000000000..df00f24db43ac --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/MetricOption.tsx @@ -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 ? ( + + {verbose} + + ) : ( + verbose + ); + return ( +
+ {showType && } + {link} + {metric.description && ( + + )} + {showFormula && ( + + )} + {metric.warning_text && ( + + )} +
+ ); +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/index.ts index 0ac1d5d1d3f80..22726d7cb9162 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/index.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/index.ts @@ -12,3 +12,4 @@ export * from './InfoTooltipWithTrigger'; export * from './ColumnOption'; export * from './ColumnTypeLabel'; export * from './mainMetric'; +export * from './MetricOption'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/ColumnOption.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/ColumnOption.test.tsx similarity index 94% rename from superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/ColumnOption.test.tsx rename to superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/ColumnOption.test.tsx index 779b317fdafbf..3a4886d6f1915 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/ColumnOption.test.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/ColumnOption.test.tsx @@ -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 = { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/ColumnTypeLabel.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/ColumnTypeLabel.test.tsx similarity index 96% rename from superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/ColumnTypeLabel.test.tsx rename to superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/ColumnTypeLabel.test.tsx index 7478548fcce25..90304a1bf0c6c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/ColumnTypeLabel.test.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/ColumnTypeLabel.test.tsx @@ -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 = { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/InfoTooltipWithTrigger.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/InfoTooltipWithTrigger.test.tsx similarity index 59% rename from superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/InfoTooltipWithTrigger.test.tsx rename to superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/InfoTooltipWithTrigger.test.tsx index b4f85a8120aa9..2825941e571a2 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/InfoTooltipWithTrigger.test.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/InfoTooltipWithTrigger.test.tsx @@ -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', () => { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/MetricOption.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/MetricOption.test.tsx new file mode 100644 index 0000000000000..8384f35a75648 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/test/components/MetricOption.test.tsx @@ -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) => ; + beforeEach(() => { + wrapper = shallow(factory(defaultProps)); + props = { ...defaultProps }; + }); + it('is a valid element', () => { + expect(React.isValidElement()).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); + }); +});