iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test: CacheLabel (#13318) 

* add HTMLAttributes on Label Component

* Split TooltipContent

* moving "CacheLabel.jsx" to "CacheLabel" folder

* remove "data-test-id"

* Fix timestamp name

* removing unused file
This commit is contained in:
Bruno Motta 2021-02-25 20:48:34 -03:00 committed by GitHub
parent abfd3734cf
commit 45cca3a945
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 178 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
superset-frontend/src/components/CachedLabel.jsx
View File

@ -1,88 +0,0 @@
/**
* 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 PropTypes from 'prop-types';
import moment from 'moment';
import { t } from '@superset-ui/core';
import Label from 'src/components/Label';
import { Tooltip } from 'src/common/components/Tooltip';
const propTypes = {
onClick: PropTypes.func,
cachedTimestamp: PropTypes.string,
className: PropTypes.string,
};
class CacheLabel extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
tooltipContent: '',
hovered: false,
};
}
updateTooltipContent() {
const cachedText = this.props.cachedTimestamp ? (
<span>
{t('Loaded data cached')}
<b> {moment.utc(this.props.cachedTimestamp).fromNow()}</b>
</span>
) : (
t('Loaded from cache')
);
const tooltipContent = (
<span>
{cachedText}. {t('Click to force-refresh')}
</span>
);
this.setState({ tooltipContent });
}
mouseOver() {
this.updateTooltipContent();
this.setState({ hovered: true });
}
mouseOut() {
this.setState({ hovered: false });
}
render() {
const labelType = this.state.hovered ? 'primary' : 'default';
return (
<Tooltip title={this.state.tooltipContent} id="cache-desc-tooltip">
<Label
className={`${this.props.className}`}
type={labelType}
onClick={this.props.onClick}
onMouseOver={this.mouseOver.bind(this)}
onMouseOut={this.mouseOut.bind(this)}
>
{t('cached')} <i className="fa fa-refresh" />
</Label>
</Tooltip>
);
}
}
CacheLabel.propTypes = propTypes;
export default CacheLabel;

39
superset-frontend/src/components/CachedLabel/CachedLabel.test.tsx Normal file
View File

@ -0,0 +1,39 @@
/**
* 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 } from 'spec/helpers/testing-library';
import moment from 'moment';
import { TooltipContent } from './TooltipContent';
test('Rendering TooltipContent correctly - no timestamp', () => {
render(<TooltipContent />);
expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
'Loaded from cache. Click to force-refresh',
);
});
test('Rendering TooltipContent correctly - with timestamp', () => {
render(<TooltipContent cachedTimestamp="01-01-2000" />);
expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
`Loaded data cached ${moment
.utc('01-01-2000')
.fromNow()}. Click to force-refresh`,
);
});

39
superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx Normal file
View File

@ -0,0 +1,39 @@
/**
* 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 } from 'spec/helpers/testing-library';
import moment from 'moment';
import { TooltipContent } from './TooltipContent';
test('Rendering TooltipContent correctly - no timestep', () => {
render(<TooltipContent />);
expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
'Loaded from cache. Click to force-refresh',
);
});
test('Rendering TooltipContent correctly - with timestep', () => {
render(<TooltipContent cachedTimestamp="01-01-2000" />);
expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
`Loaded data cached ${moment
.utc('01-01-2000')
.fromNow()}. Click to force-refresh`,
);
});

42
superset-frontend/src/components/CachedLabel/TooltipContent.tsx Normal file
View File

@ -0,0 +1,42 @@
/**
* 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 moment from 'moment';
import { t } from '@superset-ui/core';
interface Props {
cachedTimestamp?: string;
}
export const TooltipContent: React.FC<Props> = ({ cachedTimestamp }) => {
const cachedText = cachedTimestamp ? (
<span>
{t('Loaded data cached')}
<b> {moment.utc(cachedTimestamp).fromNow()}</b>
</span>
) : (
t('Loaded from cache')
);
return (
<span data-test="tooltip-content">
{cachedText}. {t('Click to force-refresh')}
</span>
);
};

57
superset-frontend/src/components/CachedLabel/index.tsx Normal file
View File

@ -0,0 +1,57 @@
/**
* 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, { useState } from 'react';
import { t } from '@superset-ui/core';
import Label from 'src/components/Label';
import { Tooltip } from 'src/common/components/Tooltip';
import { TooltipContent } from './TooltipContent';
interface Props {
onClick?: React.MouseEventHandler<HTMLElement>;
cachedTimestamp?: string;
className?: string;
}
const CacheLabel: React.FC<Props> = ({
className,
onClick,
cachedTimestamp,
}) => {
const [hovered, setHovered] = useState(false);
const labelType = hovered ? 'primary' : 'default';
return (
<Tooltip
title={<TooltipContent cachedTimestamp={cachedTimestamp} />}
id="cache-desc-tooltip"
>
<Label
className={`${className}`}
type={labelType}
onClick={onClick}
onMouseOver={() => setHovered(true)}
onMouseOut={() => setHovered(false)}
>
{t('cached')} <i className="fa fa-refresh" />
</Label>
</Tooltip>
);
};
export default CacheLabel;

2
superset-frontend/src/components/Label/index.tsx
View File

@ -31,7 +31,7 @@ export type Type =
| 'primary'
| 'secondary';
export interface LabelProps {
export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
key?: string;
className?: string;
onClick?: OnClickHandler;