This is an automated email from the ASF dual-hosted git repository. diegopucci pushed a commit to branch feat/color-schemes-names in repository https://gitbox.apache.org/repos/asf/superset.git
commit ad39cfb516f25b5b4374e970a6300283874ff7cc Author: geido <[email protected]> AuthorDate: Wed Aug 10 21:58:59 2022 +0300 Add tooltip --- .../ColorSchemeControl/ColorSchemeLabel.test.tsx | 59 ++++++++++++ .../ColorSchemeControl/ColorSchemeLabel.tsx | 102 +++++++++++++++++++++ .../controls/ColorSchemeControl/index.jsx | 36 ++------ 3 files changed, 167 insertions(+), 30 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.test.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.test.tsx new file mode 100644 index 0000000000..e3117d2f77 --- /dev/null +++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.test.tsx @@ -0,0 +1,59 @@ +/** + * 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 { render, screen, waitFor } from 'spec/helpers/testing-library'; +import ColorSchemeLabel from './ColorSchemeLabel'; + +const defaultProps = { + colors: [ + '#000000', + '#FFFFFF', + '#CCCCCC', + '#000000', + '#FFFFFF', + '#CCCCCC', + '#000000', + '#FFFFFF', + '#CCCCCC', + '#000000', + '#FFFFFF', + '#CCCCCC', + ], + label: 'Superset Colors', + id: 'colorScheme', +}; + +const setup = (overrides?: Record<string, any>) => + render(<ColorSchemeLabel {...defaultProps} {...overrides} />); + +test('should render', async () => { + const { container } = setup(); + await waitFor(() => expect(container).toBeVisible()); +}); + +test('should render the label', () => { + setup(); + expect(screen.getByText('Superset Colors')).toBeInTheDocument(); +}); + +test('should render the colors', () => { + setup(); + const allColors = screen.getAllByTestId('color'); + expect(allColors).toHaveLength(12); +}); diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx new file mode 100644 index 0000000000..4ab725c445 --- /dev/null +++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx @@ -0,0 +1,102 @@ +import { css, SupersetTheme } from '@superset-ui/core'; +import React, { useRef, useState } from 'react'; +import { Tooltip } from 'src/components/Tooltip'; + +type ColorSchemeLabelProps = { + colors: string[]; + id: string; + label: string; +}; + +export default function ColorSchemeLabel(props: ColorSchemeLabelProps) { + const { id, label, colors } = props; + const [showTooltip, setShowTooltip] = useState<boolean>(false); + const labelNameRef = useRef<HTMLElement>(null); + const labelColorsRef = useRef<HTMLElement>(null); + const handleShowTooltip = () => { + const labelNameElement = labelNameRef.current; + const labelColorsElement = labelColorsRef.current; + if ( + labelNameElement && + labelColorsElement && + (labelNameElement.scrollWidth > labelNameElement.offsetWidth || + labelNameElement.scrollHeight > labelNameElement.offsetHeight || + labelColorsElement.scrollWidth > labelColorsElement.offsetWidth || + labelColorsElement.scrollHeight > labelColorsElement.offsetHeight) + ) { + setShowTooltip(true); + } + }; + const handleHideTooltip = () => { + setShowTooltip(false); + }; + + const colorsList = () => + colors.map((color: string, i: number) => ( + <span + data-test="color" + key={`${id}-${i}`} + css={(theme: { gridUnit: number }) => css` + padding-left: ${theme.gridUnit / 2}px; + :before { + content: ''; + display: inline-block; + background-color: ${color}; + border: 1px solid ${color === 'white' ? 'black' : color}; + width: 9px; + height: 10px; + } + `} + /> + )); + + const tooltipContent = () => ( + <> + <span>{label}</span> + <div>{colorsList()}</div> + </> + ); + + return ( + <Tooltip + data-testid="tooltip" + title={tooltipContent} + key={id} + visible={showTooltip} + > + <span + title={label} + onMouseEnter={handleShowTooltip} + onMouseLeave={handleHideTooltip} + css={css` + display: flex; + align-items: center; + `} + > + <span + ref={labelNameRef} + css={css` + min-width: 80px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + `} + > + {label} + </span> + <span + ref={labelColorsRef} + css={(theme: SupersetTheme) => css` + padding-left: ${theme.gridUnit}px; + min-width: 150px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + `} + > + {colorsList()} + </span> + </span> + </Tooltip> + ); +} diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx index f0ccc12398..d585520785 100644 --- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx @@ -24,6 +24,7 @@ import { Tooltip } from 'src/components/Tooltip'; import { styled, t } from '@superset-ui/core'; import Icons from 'src/components/Icons'; import ControlHeader from 'src/explore/components/ControlHeader'; +import ColorSchemeLabel from './ColorSchemeLabel'; const propTypes = { hasCustomLabelColors: PropTypes.bool, @@ -86,36 +87,11 @@ export default class ColorSchemeControl extends React.PureComponent { } return ( - <span key={currentScheme.id} title={currentScheme.label}> - <ul - css={{ - listStyle: 'none', - margin: 0, - padding: 0, - display: 'flex', - alignItems: 'center', - - '& li': { - flexBasis: 9, - height: 10, - margin: '9px 1px', - }, - }} - data-test={currentScheme.id} - > - {colors.map((color, i) => ( - <li - key={`${currentScheme.id}-${i}`} - css={{ - backgroundColor: color, - border: `1px solid ${color === 'white' ? 'black' : color}`, - }} - > - - </li> - ))} - </ul> - </span> + <ColorSchemeLabel + id={currentScheme.id} + label={currentScheme.label} + colors={colors} + /> ); }
