pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: convert URLShortLinkButton to typescript (#19954)

Browse Source
This commit is contained in:
Jesse Yang 2022-05-05 13:36:37 -07:00 committed by GitHub
parent 7c3fd06fd6
commit 54bfd8375a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 272 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
superset-frontend/src/components/AnchorLink/AnchorLink.test.jsx
View File

@ -1,73 +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 { shallow } from 'enzyme';
import AnchorLink from 'src/components/AnchorLink';
import URLShortLinkButton from 'src/components/URLShortLinkButton';
describe('AnchorLink', () => {
const props = {
anchorLinkId: 'CHART-123',
dashboardId: 10,
};
const globalLocation = window.location;
afterEach(() => {
window.location = globalLocation;
});
beforeEach(() => {
delete window.location;
window.location = new URL(`https://path?#${props.anchorLinkId}`);
});
afterEach(() => {
delete global.window.location.value;
});
it('should scroll the AnchorLink into view upon mount', async () => {
const callback = jest.fn();
const stub = jest.spyOn(document, 'getElementById').mockReturnValue({
scrollIntoView: callback,
});
shallow(<AnchorLink {...props} />);
await new Promise(r => setTimeout(r, 2000));
expect(stub).toHaveBeenCalledTimes(1);
});
it('should render anchor link with id', () => {
const wrapper = shallow(<AnchorLink {...props} />);
expect(wrapper.find(`#${props.anchorLinkId}`)).toExist();
expect(wrapper.find(URLShortLinkButton)).not.toExist();
});
it('should render URLShortLinkButton', () => {
const wrapper = shallow(<AnchorLink {...props} showShortLinkButton />);
expect(wrapper.find(URLShortLinkButton)).toExist();
expect(wrapper.find(URLShortLinkButton)).toHaveProp({ placement: 'right' });
const anchorLinkId = wrapper.find(URLShortLinkButton).prop('anchorLinkId');
const dashboardId = wrapper.find(URLShortLinkButton).prop('dashboardId');
expect(anchorLinkId).toBe(props.anchorLinkId);
expect(dashboardId).toBe(props.dashboardId);
});
});

94
superset-frontend/src/components/AnchorLink/index.jsx
View File

@ -1,94 +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 { t } from '@superset-ui/core';
import URLShortLinkButton from 'src/components/URLShortLinkButton';
import getLocationHash from 'src/dashboard/util/getLocationHash';
const propTypes = {
anchorLinkId: PropTypes.string.isRequired,
dashboardId: PropTypes.number,
filters: PropTypes.object,
showShortLinkButton: PropTypes.bool,
inFocus: PropTypes.bool,
placement: PropTypes.oneOf(['right', 'left', 'top', 'bottom']),
};
const defaultProps = {
inFocus: false,
showShortLinkButton: false,
placement: 'right',
filters: {},
};
class AnchorLink extends React.PureComponent {
componentDidMount() {
const hash = getLocationHash();
const { anchorLinkId } = this.props;
if (hash && anchorLinkId === hash) {
this.scrollToView();
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
const { inFocus = false } = nextProps;
if (inFocus) {
this.scrollToView();
}
}
scrollToView(delay = 0) {
const { anchorLinkId } = this.props;
const directLinkComponent = document.getElementById(anchorLinkId);
if (directLinkComponent) {
setTimeout(() => {
directLinkComponent.scrollIntoView({
block: 'center',
behavior: 'smooth',
});
}, delay);
}
}
render() {
const { anchorLinkId, dashboardId, showShortLinkButton, placement } =
this.props;
return (
<span className="anchor-link-container" id={anchorLinkId}>
{showShortLinkButton && (
<URLShortLinkButton
anchorLinkId={anchorLinkId}
dashboardId={dashboardId}
emailSubject={t('Superset chart')}
emailContent={t('Check out this chart in dashboard:')}
placement={placement}
/>
)}
</span>
);
}
}
AnchorLink.propTypes = propTypes;
AnchorLink.defaultProps = defaultProps;
export default AnchorLink;

120
superset-frontend/src/components/URLShortLinkButton/index.jsx
View File

@ -1,120 +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 { t } from '@superset-ui/core';
import Popover from 'src/components/Popover';
import CopyToClipboard from 'src/components/CopyToClipboard';
import { getDashboardPermalink, getUrlParam } from 'src/utils/urlUtils';
import withToasts from 'src/components/MessageToasts/withToasts';
import { URL_PARAMS } from 'src/constants';
import { getFilterValue } from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
const propTypes = {
addDangerToast: PropTypes.func.isRequired,
anchorLinkId: PropTypes.string,
dashboardId: PropTypes.number,
emailSubject: PropTypes.string,
emailContent: PropTypes.string,
placement: PropTypes.oneOf(['right', 'left', 'top', 'bottom']),
};
class URLShortLinkButton extends React.Component {
constructor(props) {
super(props);
this.state = {
shortUrl: '',
};
this.onShortUrlSuccess = this.onShortUrlSuccess.bind(this);
this.getCopyUrl = this.getCopyUrl.bind(this);
}
onShortUrlSuccess(shortUrl) {
this.setState(() => ({
shortUrl,
}));
}
getCopyUrl(e) {
e.stopPropagation();
const nativeFiltersKey = getUrlParam(URL_PARAMS.nativeFiltersKey);
if (this.props.dashboardId) {
getFilterValue(this.props.dashboardId, nativeFiltersKey)
.then(filterState =>
getDashboardPermalink({
dashboardId: this.props.dashboardId,
filterState,
hash: this.props.anchorLinkId,
})
.then(this.onShortUrlSuccess)
.catch(this.props.addDangerToast),
)
.catch(this.props.addDangerToast);
}
}
renderPopover() {
const emailBody = t('%s%s', this.props.emailContent, this.state.shortUrl);
return (
<div id="shorturl-popover" data-test="shorturl-popover">
<CopyToClipboard
text={this.state.shortUrl}
copyNode={
<i className="fa fa-clipboard" title={t('Copy to clipboard')} />
}
/>
&nbsp;&nbsp;
<a
href={`mailto:?Subject=${this.props.emailSubject}%20&Body=${emailBody}`}
>
<i className="fa fa-envelope" />
</a>
</div>
);
}
render() {
return (
<Popover
trigger="click"
placement={this.props.placement}
onClick={this.getCopyUrl}
content={this.renderPopover()}
>
<span
className="short-link-trigger btn btn-default btn-sm"
role="button"
>
<i className="short-link-trigger fa fa-link" />
&nbsp;
</span>
</Popover>
);
}
}
URLShortLinkButton.defaultProps = {
placement: 'left',
emailSubject: '',
emailContent: '',
};
URLShortLinkButton.propTypes = propTypes;
export default withToasts(URLShortLinkButton);

2
superset-frontend/src/components/AnchorLink/AnchorLink.stories.tsx → superset-frontend/src/dashboard/components/AnchorLink/AnchorLink.stories.tsx
View File

@ -25,7 +25,7 @@ export default {
};
export const InteractiveAnchorLink = (args: any) => (
<AnchorLink anchorLinkId="link" {...args} />
<AnchorLink id="link" {...args} />
);
const PLACEMENTS = ['right', 'left', 'top', 'bottom'];

69
superset-frontend/src/dashboard/components/AnchorLink/AnchorLink.test.tsx Normal file
View File

@ -0,0 +1,69 @@
/**
* 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, act } from 'spec/helpers/testing-library';
import AnchorLink from 'src/dashboard/components/AnchorLink';
describe('AnchorLink', () => {
const props = {
id: 'CHART-123',
dashboardId: 10,
};
const globalLocation = window.location;
afterEach(() => {
window.location = globalLocation;
});
it('should scroll the AnchorLink into view upon mount if id matches hash', async () => {
const callback = jest.fn();
jest.spyOn(document, 'getElementById').mockReturnValue({
scrollIntoView: callback,
} as unknown as HTMLElement);
window.location.hash = props.id;
await act(async () => {
render(<AnchorLink {...props} />, { useRedux: true });
});
expect(callback).toHaveBeenCalledTimes(1);
window.location.hash = 'random';
await act(async () => {
render(<AnchorLink {...props} />, { useRedux: true });
});
expect(callback).toHaveBeenCalledTimes(1);
});
it('should render anchor link without short link button', () => {
const { container, queryByRole } = render(
<AnchorLink showShortLinkButton={false} {...props} />,
{ useRedux: true },
);
expect(container.querySelector(`#${props.id}`)).toBeInTheDocument();
expect(queryByRole('button')).toBe(null);
});
it('should render short link button', () => {
const { getByRole } = render(
<AnchorLink {...props} showShortLinkButton />,
{ useRedux: true },
);
expect(getByRole('button')).toBeInTheDocument();
});
});

78
superset-frontend/src/dashboard/components/AnchorLink/index.tsx Normal file
View File

@ -0,0 +1,78 @@
/**
* 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, { useEffect } from 'react';
import { t } from '@superset-ui/core';
import URLShortLinkButton, {
URLShortLinkButtonProps,
} from 'src/dashboard/components/URLShortLinkButton';
import getLocationHash from 'src/dashboard/util/getLocationHash';
export type AnchorLinkProps = {
id: string;
scrollIntoView?: boolean;
showShortLinkButton?: boolean;
} & Pick<URLShortLinkButtonProps, 'dashboardId' | 'placement'>;
export default function AnchorLink({
id,
dashboardId,
placement = 'right',
scrollIntoView = false,
showShortLinkButton = true,
}: AnchorLinkProps) {
const scrollAnchorIntoView = (elementId: string) => {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
block: 'center',
behavior: 'smooth',
});
}
};
// will always scroll element into view if element id and url hash match
const hash = getLocationHash();
useEffect(() => {
if (hash && id === hash) {
scrollAnchorIntoView(id);
}
}, [hash, id]);
// force scroll into view
useEffect(() => {
if (scrollIntoView) {
scrollAnchorIntoView(id);
}
}, [id, scrollIntoView]);
return (
<span className="anchor-link-container" id={id}>
{showShortLinkButton && dashboardId && (
<URLShortLinkButton
anchorLinkId={id}
dashboardId={dashboardId}
emailSubject={t('Superset chart')}
emailContent={t('Check out this chart in dashboard:')}
placement={placement}
/>
)}
</span>
);
}

2
superset-frontend/src/components/URLShortLinkButton/URLShortLinkButton.test.tsx → superset-frontend/src/dashboard/components/URLShortLinkButton/URLShortLinkButton.test.tsx
View File

@ -20,7 +20,7 @@ import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock';
import URLShortLinkButton from 'src/components/URLShortLinkButton';
import URLShortLinkButton from 'src/dashboard/components/URLShortLinkButton';
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
const DASHBOARD_ID = 10;

97
superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx Normal file
View File

@ -0,0 +1,97 @@
/**
* 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 Popover, { PopoverProps } from 'src/components/Popover';
import CopyToClipboard from 'src/components/CopyToClipboard';
import { getDashboardPermalink, getUrlParam } from 'src/utils/urlUtils';
import { useToasts } from 'src/components/MessageToasts/withToasts';
import { URL_PARAMS } from 'src/constants';
import { getFilterValue } from 'src/dashboard/components/nativeFilters/FilterBar/keyValue';
export type URLShortLinkButtonProps = {
dashboardId: number;
anchorLinkId?: string;
emailSubject?: string;
emailContent?: string;
placement?: PopoverProps['placement'];
};
export default function URLShortLinkButton({
dashboardId,
anchorLinkId,
placement = 'right',
emailContent = '',
emailSubject = '',
}: URLShortLinkButtonProps) {
const [shortUrl, setShortUrl] = useState('');
const { addDangerToast } = useToasts();
const getCopyUrl = async () => {
const nativeFiltersKey = getUrlParam(URL_PARAMS.nativeFiltersKey);
try {
const filterState = await getFilterValue(dashboardId, nativeFiltersKey);
const url = await getDashboardPermalink({
dashboardId,
filterState,
hash: anchorLinkId,
});
setShortUrl(url);
} catch (error) {
addDangerToast(error);
}
};
const emailBody = `${emailContent}${shortUrl || ''}`;
const emailLink = `mailto:?Subject=${emailSubject}%20&Body=${emailBody}`;
return (
<Popover
trigger="click"
placement={placement}
content={
<div id="shorturl-popover" data-test="shorturl-popover">
<CopyToClipboard
text={shortUrl}
copyNode={
<i className="fa fa-clipboard" title={t('Copy to clipboard')} />
}
/>
&nbsp;&nbsp;
<a href={emailLink}>
<i className="fa fa-envelope" />
</a>
</div>
}
>
<span
className="short-link-trigger btn btn-default btn-sm"
tabIndex={0}
role="button"
onClick={e => {
e.stopPropagation();
getCopyUrl();
}}
>
<i className="short-link-trigger fa fa-link" />
&nbsp;
</span>
</Popover>
);
}

27
superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
View File

@ -23,22 +23,21 @@ import { useTheme } from '@superset-ui/core';
import { useSelector, connect } from 'react-redux';
import { getChartIdsInFilterBoxScope } from 'src/dashboard/util/activeDashboardFilters';
import Chart from '../../containers/Chart';
import AnchorLink from '../../../components/AnchorLink';
import DeleteComponentButton from '../DeleteComponentButton';
import DragDroppable from '../dnd/DragDroppable';
import HoverMenu from '../menu/HoverMenu';
import ResizableContainer from '../resizable/ResizableContainer';
import getChartAndLabelComponentIdFromPath from '../../util/getChartAndLabelComponentIdFromPath';
import { componentShape } from '../../util/propShapes';
import { COLUMN_TYPE, ROW_TYPE } from '../../util/componentTypes';
import Chart from 'src/dashboard/containers/Chart';
import AnchorLink from 'src/dashboard/components/AnchorLink';
import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
import ResizableContainer from 'src/dashboard/components/resizable/ResizableContainer';
import getChartAndLabelComponentIdFromPath from 'src/dashboard/util/getChartAndLabelComponentIdFromPath';
import { componentShape } from 'src/dashboard/util/propShapes';
import { COLUMN_TYPE, ROW_TYPE } from 'src/dashboard/util/componentTypes';
import {
GRID_BASE_UNIT,
GRID_GUTTER_SIZE,
GRID_MIN_COLUMN_COUNT,
GRID_MIN_ROW_UNITS,
} from '../../util/constants';
} from 'src/dashboard/util/constants';
const CHART_MARGIN = 32;
@ -350,8 +349,10 @@ class ChartHolder extends React.Component {
>
{!editMode && (
<AnchorLink
anchorLinkId={component.id}
inFocus={!!this.state.outlinedComponentId}
id={component.id}
scrollIntoView={
this.state.outlinedComponentId === component.id
}
/>
)}
{!!this.state.outlinedComponentId &&

16
superset-frontend/src/dashboard/components/gridComponents/Header.jsx
View File

@ -20,15 +20,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import PopoverDropdown from 'src/components/PopoverDropdown';
import EditableTitle from 'src/components/EditableTitle';
import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
import DragHandle from 'src/dashboard/components/dnd/DragHandle';
import EditableTitle from 'src/components/EditableTitle';
import AnchorLink from 'src/components/AnchorLink';
import AnchorLink from 'src/dashboard/components/AnchorLink';
import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
import BackgroundStyleDropdown from 'src/dashboard/components/menu/BackgroundStyleDropdown';
import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
import PopoverDropdown from 'src/components/PopoverDropdown';
import headerStyleOptions from 'src/dashboard/util/headerStyleOptions';
import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
import { componentShape } from 'src/dashboard/util/propShapes';
@ -39,13 +39,13 @@ import {
const propTypes = {
id: PropTypes.string.isRequired,
dashboardId: PropTypes.string.isRequired,
parentId: PropTypes.string.isRequired,
component: componentShape.isRequired,
depth: PropTypes.number.isRequired,
parentComponent: componentShape.isRequired,
index: PropTypes.number.isRequired,
editMode: PropTypes.bool.isRequired,
filters: PropTypes.object.isRequired,
// redux
handleComponentDrop: PropTypes.func.isRequired,
@ -100,13 +100,13 @@ class Header extends React.PureComponent {
const { isFocused } = this.state;
const {
dashboardId,
component,
depth,
parentComponent,
index,
handleComponentDrop,
editMode,
filters,
} = this.props;
const headerStyle = headerStyleOptions.find(
@ -176,11 +176,7 @@ class Header extends React.PureComponent {
showTooltip={false}
/>
{!editMode && (
<AnchorLink
anchorLinkId={component.id}
filters={filters}
showShortLinkButton
/>
<AnchorLink id={component.id} dashboardId={dashboardId} />
)}
</div>
</WithPopoverMenu>

16
superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
View File

@ -23,12 +23,12 @@ import { connect } from 'react-redux';
import { styled, t } from '@superset-ui/core';
import { EmptyStateMedium } from 'src/components/EmptyState';
import EditableTitle from 'src/components/EditableTitle';
import { setEditMode } from 'src/dashboard/actions/dashboardState';
import DashboardComponent from '../../containers/DashboardComponent';
import DragDroppable from '../dnd/DragDroppable';
import EditableTitle from '../../../components/EditableTitle';
import AnchorLink from '../../../components/AnchorLink';
import { componentShape } from '../../util/propShapes';
import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
import AnchorLink from 'src/dashboard/components/AnchorLink';
import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
import { componentShape } from 'src/dashboard/util/propShapes';
export const RENDER_TAB = 'RENDER_TAB';
export const RENDER_TAB_CONTENT = 'RENDER_TAB_CONTENT';
@ -45,7 +45,6 @@ const propTypes = {
onDropOnTab: PropTypes.func,
editMode: PropTypes.bool.isRequired,
canEdit: PropTypes.bool.isRequired,
filters: PropTypes.object.isRequired,
// grid related
availableColumnCount: PropTypes.number,
@ -251,7 +250,6 @@ class Tab extends React.PureComponent {
index,
depth,
editMode,
filters,
isFocused,
isHighlighted,
} = this.props;
@ -283,10 +281,8 @@ class Tab extends React.PureComponent {
/>
{!editMode && (
<AnchorLink
anchorLinkId={component.id}
id={component.id}
dashboardId={this.props.dashboardId}
filters={filters}
showShortLinkButton
placement={index >= 5 ? 'left' : 'right'}
/>
)}