mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
chore: convert URLShortLinkButton to typescript (#19954)
This commit is contained in:
parent
7c3fd06fd6
commit
54bfd8375a
@ -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);
|
||||
});
|
||||
});
|
@ -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;
|
@ -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')} />
|
||||
}
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
</span>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
URLShortLinkButton.defaultProps = {
|
||||
placement: 'left',
|
||||
emailSubject: '',
|
||||
emailContent: '',
|
||||
};
|
||||
|
||||
URLShortLinkButton.propTypes = propTypes;
|
||||
|
||||
export default withToasts(URLShortLinkButton);
|
@ -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'];
|
@ -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();
|
||||
});
|
||||
});
|
@ -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>
|
||||
);
|
||||
}
|
@ -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;
|
@ -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')} />
|
||||
}
|
||||
/>
|
||||
|
||||
<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" />
|
||||
|
||||
</span>
|
||||
</Popover>
|
||||
);
|
||||
}
|
@ -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 &&
|
||||
|
@ -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>
|
||||
|
@ -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'}
|
||||
/>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user