{refreshTooltip.length > 1
? `${t('Query')} ${index + 1}: ${item}`
: item}
@@ -232,18 +233,18 @@ class SliceHeaderControls extends React.PureComponent {
)}
-
- {t('Share chart')}}
- />
-
+
{resizeLabel}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index 7dd01e97873..b02897782b7 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -67,6 +67,7 @@ const propTypes = {
supersetCanExplore: PropTypes.bool.isRequired,
supersetCanCSV: PropTypes.bool.isRequired,
sliceCanEdit: PropTypes.bool.isRequired,
+ addSuccessToast: PropTypes.func.isRequired,
addDangerToast: PropTypes.func.isRequired,
};
@@ -256,6 +257,7 @@ export default class Chart extends React.Component {
supersetCanExplore,
supersetCanCSV,
sliceCanEdit,
+ addSuccessToast,
addDangerToast,
handleToggleFullSize,
isFullSize,
@@ -306,6 +308,7 @@ export default class Chart extends React.Component {
componentId={componentId}
dashboardId={dashboardId}
filters={filters}
+ addSuccessToast={addSuccessToast}
addDangerToast={addDangerToast}
handleToggleFullSize={handleToggleFullSize}
isFullSize={isFullSize}
diff --git a/superset-frontend/src/dashboard/components/menu/ShareMenuItems.tsx b/superset-frontend/src/dashboard/components/menu/ShareMenuItems.tsx
new file mode 100644
index 00000000000..2152dc75357
--- /dev/null
+++ b/superset-frontend/src/dashboard/components/menu/ShareMenuItems.tsx
@@ -0,0 +1,85 @@
+/**
+ * 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 { useUrlShortener } from 'src/common/hooks/useUrlShortener';
+import copyTextToClipboard from 'src/utils/copy';
+import { t } from '@superset-ui/core';
+import { Menu } from 'src/common/components';
+
+interface ShareMenuItemProps {
+ url: string;
+ copyMenuItemTitle: string;
+ emailMenuItemTitle: string;
+ emailSubject: string;
+ emailBody: string;
+ addDangerToast: Function;
+ addSuccessToast: Function;
+}
+
+const ShareMenuItems = (props: ShareMenuItemProps) => {
+ const {
+ url,
+ copyMenuItemTitle,
+ emailMenuItemTitle,
+ emailSubject,
+ emailBody,
+ addDangerToast,
+ addSuccessToast,
+ ...rest
+ } = props;
+
+ const getShortUrl = useUrlShortener(url);
+
+ async function onCopyLink() {
+ try {
+ const shortUrl = await getShortUrl();
+ await copyTextToClipboard(shortUrl);
+ addSuccessToast(t('Copied to clipboard!'));
+ } catch (error) {
+ addDangerToast(t('Sorry, your browser does not support copying.'));
+ }
+ }
+
+ async function onShareByEmail() {
+ try {
+ const shortUrl = await getShortUrl();
+ const bodyWithLink = `${emailBody}${shortUrl}`;
+ window.location.href = `mailto:?Subject=${emailSubject}%20&Body=${bodyWithLink}`;
+ } catch (error) {
+ addDangerToast(t('Sorry, something went wrong. Try again later.'));
+ }
+ }
+
+ return (
+ <>
+
+
+ {copyMenuItemTitle}
+
+
+
+
+ {emailMenuItemTitle}
+
+
+
+ );
+};
+
+export default ShareMenuItems;
diff --git a/superset-frontend/src/dashboard/containers/Chart.jsx b/superset-frontend/src/dashboard/containers/Chart.jsx
index 7f74657380b..19f4c9adb44 100644
--- a/superset-frontend/src/dashboard/containers/Chart.jsx
+++ b/superset-frontend/src/dashboard/containers/Chart.jsx
@@ -26,7 +26,7 @@ import {
} from '../actions/dashboardState';
import { updateComponents } from '../actions/dashboardLayout';
import { changeFilter } from '../actions/dashboardFilters';
-import { addDangerToast } from '../../messageToasts/actions';
+import { addSuccessToast, addDangerToast } from '../../messageToasts/actions';
import { refreshChart } from '../../chart/chartAction';
import { logEvent } from '../../logger/actions';
import {
@@ -89,6 +89,7 @@ function mapDispatchToProps(dispatch) {
return bindActionCreators(
{
updateComponents,
+ addSuccessToast,
addDangerToast,
toggleExpandSlice,
changeFilter,
diff --git a/superset-frontend/src/explore/components/EmbedCodeButton.jsx b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
index 0ff7afce959..b65ba756aef 100644
--- a/superset-frontend/src/explore/components/EmbedCodeButton.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
@@ -22,6 +22,8 @@ import { t } from '@superset-ui/core';
import Popover from 'src/common/components/Popover';
import FormLabel from 'src/components/FormLabel';
+import Icon from 'src/components/Icon';
+import { Tooltip } from 'src/common/components/Tooltip';
import CopyToClipboard from 'src/components/CopyToClipboard';
import { getShortUrl } from 'src/utils/urlUtils';
import { URL_PARAMS } from 'src/constants';
@@ -150,10 +152,20 @@ export default class EmbedCodeButton extends React.Component {
onClick={this.getCopyUrl}
content={this.renderPopoverContent()}
>
-
-
-
-
+
+
+
+
+
);
}
diff --git a/superset-frontend/src/explore/components/ExploreActionButtons.jsx b/superset-frontend/src/explore/components/ExploreActionButtons.jsx
deleted file mode 100644
index 23035beb039..00000000000
--- a/superset-frontend/src/explore/components/ExploreActionButtons.jsx
+++ /dev/null
@@ -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 cx from 'classnames';
-import { t } from '@superset-ui/core';
-
-import URLShortLinkButton from '../../components/URLShortLinkButton';
-import EmbedCodeButton from './EmbedCodeButton';
-import ConnectedDisplayQueryButton from './DisplayQueryButton';
-import { exportChart, getExploreLongUrl } from '../exploreUtils';
-
-const propTypes = {
- actions: PropTypes.object.isRequired,
- canDownload: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
- .isRequired,
- chartStatus: PropTypes.string,
- chartHeight: PropTypes.string.isRequired,
- latestQueryFormData: PropTypes.object,
- queriesResponse: PropTypes.arrayOf(PropTypes.object),
- slice: PropTypes.object,
-};
-
-export default function ExploreActionButtons({
- actions,
- canDownload,
- chartHeight,
- chartStatus,
- latestQueryFormData,
- queriesResponse,
- slice,
-}) {
- const exportToCSVClasses = cx('btn btn-default btn-sm', {
- disabled: !canDownload,
- });
- const doExportCSV = exportChart.bind(this, {
- formData: latestQueryFormData,
- resultType: 'results',
- resultFormat: 'csv',
- });
- const doExportChart = exportChart.bind(this, {
- formData: latestQueryFormData,
- resultType: 'results',
- resultFormat: 'json',
- });
-
- return (
-
- {latestQueryFormData && (
-
- )}
-
- {latestQueryFormData && (
-
- )}
-
- {latestQueryFormData && (
-
- .json
-
- )}
- {latestQueryFormData && (
-
- .csv
-
- )}
-
-
- );
-}
-
-ExploreActionButtons.propTypes = propTypes;
diff --git a/superset-frontend/src/explore/components/ExploreActionButtons.tsx b/superset-frontend/src/explore/components/ExploreActionButtons.tsx
new file mode 100644
index 00000000000..60f7301bbb8
--- /dev/null
+++ b/superset-frontend/src/explore/components/ExploreActionButtons.tsx
@@ -0,0 +1,204 @@
+/**
+ * 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 cx from 'classnames';
+import { t } from '@superset-ui/core';
+import Icon from 'src/components/Icon';
+import { Tooltip } from 'src/common/components/Tooltip';
+import copyTextToClipboard from 'src/utils/copy';
+import withToasts from 'src/messageToasts/enhancers/withToasts';
+import { useUrlShortener } from 'src/common/hooks/useUrlShortener';
+import EmbedCodeButton from './EmbedCodeButton';
+import ConnectedDisplayQueryButton from './DisplayQueryButton';
+import { exportChart, getExploreLongUrl } from '../exploreUtils';
+
+type ActionButtonProps = {
+ icon: React.ReactElement;
+ text?: string;
+ tooltip: string;
+ className?: string;
+ onClick: React.MouseEventHandler
;
+ onTooltipVisibilityChange?: (visible: boolean) => void;
+ 'data-test'?: string;
+};
+
+type ExploreActionButtonsProps = {
+ actions: { redirectSQLLab: Function; openPropertiesModal: Function };
+ canDownload: boolean;
+ chartHeight: number;
+ chartStatus: string;
+ latestQueryFormData: {};
+ queriesResponse: {};
+ slice: { slice_name: string };
+ addDangerToast: Function;
+};
+
+const ActionButton = (props: ActionButtonProps) => {
+ const {
+ icon,
+ text,
+ tooltip,
+ className,
+ onTooltipVisibilityChange,
+ ...rest
+ } = props;
+ return (
+
+
+ {icon}
+ {text && {text}}
+
+
+ );
+};
+
+const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
+ const {
+ actions,
+ canDownload,
+ chartHeight,
+ chartStatus,
+ latestQueryFormData,
+ queriesResponse,
+ slice,
+ addDangerToast,
+ } = props;
+
+ const copyTooltipText = t('Copy chart URL to clipboard');
+ const [copyTooltip, setCopyTooltip] = useState(copyTooltipText);
+ const longUrl = getExploreLongUrl(latestQueryFormData);
+ const getShortUrl = useUrlShortener(longUrl);
+
+ const doCopyLink = async () => {
+ try {
+ setCopyTooltip(t('Loading...'));
+ const shortUrl = await getShortUrl();
+ await copyTextToClipboard(shortUrl);
+ setCopyTooltip(t('Copied to clipboard!'));
+ } catch (error) {
+ setCopyTooltip(t('Sorry, your browser does not support copying.'));
+ }
+ };
+
+ const doShareEmail = async () => {
+ try {
+ const subject = t('Superset Chart');
+ const shortUrl = await getShortUrl();
+ const body = t('%s%s', 'Check out this chart: ', shortUrl);
+ window.location.href = `mailto:?Subject=${subject}%20&Body=${body}`;
+ } catch (error) {
+ addDangerToast(t('Sorry, something went wrong. Try again later.'));
+ }
+ };
+
+ const doExportCSV = exportChart.bind(this, {
+ formData: latestQueryFormData,
+ resultType: 'results',
+ resultFormat: 'csv',
+ });
+
+ const doExportChart = exportChart.bind(this, {
+ formData: latestQueryFormData,
+ resultType: 'results',
+ resultFormat: 'json',
+ });
+
+ const exportToCSVClasses = cx('btn btn-default btn-sm', {
+ disabled: !canDownload,
+ });
+
+ return (
+
+ {latestQueryFormData && (
+ <>
+
+ }
+ tooltip={copyTooltip}
+ onClick={doCopyLink}
+ data-test="short-link-button"
+ onTooltipVisibilityChange={value =>
+ !value && setTimeout(() => setCopyTooltip(copyTooltipText), 200)
+ }
+ />
+
+ }
+ tooltip={t('Share chart by email')}
+ onClick={doShareEmail}
+ />
+
+
}
+ text=".JSON"
+ tooltip={t('Export to .JSON format')}
+ onClick={doExportChart}
+ />
+
}
+ text=".CSV"
+ tooltip={t('Export to .CSV format')}
+ onClick={doExportCSV}
+ className={exportToCSVClasses}
+ />
+
+ )}
+
+
+ <>
{t('Chart')}
-
+
),
buttonStyle: 'tertiary',
onClick: () => {
diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
index 04fc116ebf0..5b8f933ba9e 100644
--- a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
@@ -148,9 +148,10 @@ function DashboardTable({
buttons={[
{
name: (
-
- Dashboard{' '}
-
+ <>
+
+ Dashboard
+
),
buttonStyle: 'tertiary',
onClick: () => {
diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
index f86b0b82c3a..68705ffde03 100644
--- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@@ -267,10 +267,10 @@ const SavedQueries = ({
buttons={[
{
name: (
-
+ <>
- SQL Query{' '}
-
+ SQL Query
+
),
buttonStyle: 'tertiary',
onClick: () => {