From 6d89ffbcb7533dc04093a66852aab26db0b5bc11 Mon Sep 17 00:00:00 2001 From: smileydev <47900232+prosdev0107@users.noreply.github.com> Date: Thu, 31 Mar 2022 10:10:21 -0400 Subject: [PATCH 01/11] fix(dashboard): make to show the correct owned objects (#19372) * fix(dashboard): make to show the correct owned objects * fix(dashboard): make to filter is reusable * fix(homepage): make sure the type Array * fix(homepage): make to display dashboard correctly by owners --- superset-frontend/src/views/CRUD/utils.tsx | 4 ++-- superset-frontend/src/views/CRUD/welcome/Welcome.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx index 6606fd459f874..3449d764abfa2 100644 --- a/superset-frontend/src/views/CRUD/utils.tsx +++ b/superset-frontend/src/views/CRUD/utils.tsx @@ -166,8 +166,8 @@ export const getUserOwnedObjects = ( resource: string, filters: Array = [ { - col: 'created_by', - opr: 'rel_o_m', + col: 'owners', + opr: 'rel_m_m', value: `${userId}`, }, ], diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx index a1f7707a23541..056e02e8f6226 100644 --- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx +++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx @@ -204,8 +204,8 @@ function Welcome({ user, addDangerToast }: WelcomeProps) { // Sets other activity data in parallel with recents api call const ownSavedQueryFilters = [ { - col: 'owners', - opr: 'rel_m_m', + col: 'created_by', + opr: 'rel_o_m', value: `${id}`, }, ]; From 47abad867355f45bc369d6e7e59f3b7f1f9d02ca Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Thu, 31 Mar 2022 13:29:54 -0300 Subject: [PATCH 02/11] chore: Removes hard-coded colors from legacy-preset-chart-nvd3 (#19443) --- .../legacy-preset-chart-nvd3/src/ReactNVD3.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx index 507cc60fe6666..9a9962e8aaca4 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx +++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx @@ -63,7 +63,7 @@ export default styled(NVD3)` } .nvtooltip tr.highlight td { font-weight: ${({ theme }) => theme.typography.weights.bold}; - font-size: 15px !important; + font-size: ${({ theme }) => theme.typography.sizes.m}px !important; } text.nv-axislabel { font-size: ${({ theme }) => theme.typography.sizes.m} !important; @@ -160,15 +160,15 @@ export default styled(NVD3)` .d3-tip.nv-event-annotation-layer-NATIVE { width: 200px; border-radius: 2px; - background-color: #484848; + background-color: ${({ theme }) => theme.colors.grayscale.base}; fill-opacity: 0.6; - margin: 8px; - padding: 8px; - color: #fff; + margin: ${({ theme }) => theme.gridUnit * 2}px; + padding: ${({ theme }) => theme.gridUnit * 2}px; + color: ${({ theme }) => theme.colors.grayscale.light5}; &:after { content: '\\25BC'; font-size: ${({ theme }) => theme.typography.sizes.m}; - color: #484848; + color: ${({ theme }) => theme.colors.grayscale.base}; position: absolute; bottom: -14px; left: 94px; From 31095a523d5bb379fef5ef4cdf5738031857179b Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Thu, 31 Mar 2022 13:30:36 -0300 Subject: [PATCH 03/11] chore: Removes plugin-chart-pivot-table hard-coded colors (#19439) --- .../plugin-chart-pivot-table/src/react-pivottable/Styles.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js index 06bfdd3b0cb91..7ff2c0e5267b3 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js @@ -84,7 +84,7 @@ export const Styles = styled.div` } table.pvtTable tr th.active { - background-color: #d9dbe4; + background-color: ${theme.colors.primary.light3}; } table.pvtTable .pvtTotalLabel { @@ -97,7 +97,7 @@ export const Styles = styled.div` } table.pvtTable tbody tr td { - color: #2a3f5f; + color: ${theme.colors.primary.dark2}; padding: ${theme.gridUnit}px; background-color: ${theme.colors.grayscale.light5}; border-top: 1px solid ${theme.colors.grayscale.light2}; @@ -133,7 +133,7 @@ export const Styles = styled.div` } .hoverable:hover { - background-color: #eceef2; + background-color: ${theme.colors.primary.light4}; cursor: pointer; } `} From 13467beb537f08714c49c6336bc812bb7c1e5ba3 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Thu, 31 Mar 2022 13:31:20 -0300 Subject: [PATCH 04/11] refactor: Removes the CSS files from the Calendar Heatmap plugin (#19436) --- .../legacy-plugin-chart-calendar/package.json | 34 ++- .../src/Calendar.js | 1 - .../src/ReactCalendar.jsx | 207 +++++++++++++++++- .../src/vendor/cal-heatmap.css | 129 ----------- .../src/vendor/cal-heatmap.js | 1 - .../src/vendor/d3tip.css | 74 ------- 6 files changed, 212 insertions(+), 234 deletions(-) delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.css delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/d3tip.css diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json b/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json index 47364327092cd..cb11164183d71 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json +++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json @@ -2,31 +2,25 @@ "name": "@superset-ui/legacy-plugin-chart-calendar", "version": "0.18.25", "description": "Superset Legacy Chart - Calendar Heatmap", - "sideEffects": [ - "*.css" - ], - "main": "lib/index.js", - "module": "esm/index.js", - "files": [ - "esm", - "lib" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/apache-superset/superset-ui.git" - }, "keywords": [ "superset" ], - "author": "Superset", - "license": "Apache-2.0", + "homepage": "https://github.com/apache-superset/superset-ui#readme", "bugs": { "url": "https://github.com/apache-superset/superset-ui/issues" }, - "homepage": "https://github.com/apache-superset/superset-ui#readme", - "publishConfig": { - "access": "public" + "repository": { + "type": "git", + "url": "git+https://github.com/apache-superset/superset-ui.git" }, + "license": "Apache-2.0", + "author": "Superset", + "main": "lib/index.js", + "module": "esm/index.js", + "files": [ + "esm", + "lib" + ], "dependencies": { "d3-array": "^2.0.3", "d3-selection": "^1.4.0", @@ -34,8 +28,12 @@ "prop-types": "^15.6.2" }, "peerDependencies": { + "@emotion/react": "^11.4.1", "@superset-ui/chart-controls": "*", "@superset-ui/core": "*", "react": "^16.13.1" + }, + "publishConfig": { + "access": "public" } } diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js index a1adc2818947b..74a9aecb49da3 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js +++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js @@ -21,7 +21,6 @@ import { extent as d3Extent, range as d3Range } from 'd3-array'; import { select as d3Select } from 'd3-selection'; import { getSequentialSchemeRegistry } from '@superset-ui/core'; import CalHeatMap from './vendor/cal-heatmap'; -import './vendor/cal-heatmap.css'; const propTypes = { data: PropTypes.shape({ diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx index cf2097ed95880..e7d39d6310ca4 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx @@ -18,13 +18,69 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { reactify, styled } from '@superset-ui/core'; +import { reactify, styled, css } from '@superset-ui/core'; +import { Global } from '@emotion/react'; import Component from './Calendar'; const ReactComponent = reactify(Component); const Calender = ({ className, ...otherProps }) => (
+ css` + .d3-tip { + line-height: 1; + padding: ${theme.gridUnit * 3}px; + background: ${theme.colors.grayscale.dark2}; + color: ${theme.colors.grayscale.light5}; + border-radius: 4px; + pointer-events: none; + z-index: 1000; + font-size: ${theme.typography.sizes.s}px; + } + /* Creates a small triangle extender for the tooltip */ + .d3-tip:after { + box-sizing: border-box; + display: inline; + font-size: ${theme.typography.sizes.xs}; + width: 100%; + line-height: 1; + color: ${theme.colors.grayscale.dark2}; + position: absolute; + pointer-events: none; + } + /* Northward tooltips */ + .d3-tip.n:after { + content: '\\25BC'; + margin: -${theme.gridUnit}px 0 0 0; + top: 100%; + left: 0; + text-align: center; + } + /* Eastward tooltips */ + .d3-tip.e:after { + content: '\\25C0'; + margin: -${theme.gridUnit}px 0 0 0; + top: 50%; + left: -${theme.gridUnit * 2}px; + } + /* Southward tooltips */ + .d3-tip.s:after { + content: '\\25B2'; + margin: 0; + top: -${theme.gridUnit * 2}px; + left: 0; + text-align: center; + } + /* Westward tooltips */ + .d3-tip.w:after { + content: '\\25B6'; + margin: -${theme.gridUnit}px 0 0 0px; + top: 50%; + left: 100%; + } + `} + />
); @@ -39,14 +95,143 @@ Calender.propTypes = { }; export default styled(Calender)` - .superset-legacy-chart-calendar { - padding: 10px; - position: static !important; - overflow: auto !important; - } - - .superset-legacy-chart-calendar .ch-tooltip { - margin-left: 20px; - margin-top: 5px; - } + ${({ theme }) => ` + .superset-legacy-chart-calendar { + padding: ${theme.gridUnit * 3}px; + position: static !important; + overflow: auto !important; + } + + .superset-legacy-chart-calendar .ch-tooltip { + margin-left: ${theme.gridUnit * 5}px; + margin-top: ${theme.gridUnit}px; + } + + .superset-legacy-chart-calendar .d3-tip { + line-height: 1; + padding: ${theme.gridUnit * 3}px; + background: ${theme.colors.grayscale.dark2}; + color: ${theme.colors.grayscale.light5}; + border-radius: ${theme.borderRadius}px; + pointer-events: none; + z-index: 1000; + } + + .cal-heatmap-container { + display: block; + } + + .cal-heatmap-container .graph-label { + fill: ${theme.colors.grayscale.base}; + font-size: ${theme.typography.sizes.xs}px; + } + + .cal-heatmap-container .graph, + .cal-heatmap-container .graph-legend rect { + shape-rendering: crispedges; + } + + .cal-heatmap-container .graph-rect { + fill: ${theme.colors.grayscale.light2}; + } + + .cal-heatmap-container .graph-subdomain-group rect:hover { + stroke: ${theme.colors.grayscale.dark2}; + stroke-width: 1px; + } + + .cal-heatmap-container .subdomain-text { + font-size: ${theme.typography.sizes.xs}px; + pointer-events: none; + } + + .cal-heatmap-container .hover_cursor:hover { + cursor: pointer; + } + + .cal-heatmap-container .qi { + background-color: ${theme.colors.grayscale.base}; + fill: ${theme.colors.grayscale.base}; + } + + .cal-heatmap-container .q1 { + background-color: ${theme.colors.alert.light2}; + fill: ${theme.colors.alert.light2}; + } + + .cal-heatmap-container .q2 { + background-color: ${theme.colors.alert.light1}; + fill: ${theme.colors.alert.light1}; + } + + .cal-heatmap-container .q3 { + background-color: ${theme.colors.success.light1}; + fill: ${theme.colors.success.light1}; + } + + .cal-heatmap-container .q4 { + background-color: ${theme.colors.success.base}; + fill: ${theme.colors.success.base}; + } + + .cal-heatmap-container .q5 { + background-color: ${theme.colors.success.dark1}; + fill: ${theme.colors.success.dark1}; + } + + .cal-heatmap-container rect.highlight { + stroke: ${theme.colors.grayscale.dark1}; + stroke-width: 1; + } + + .cal-heatmap-container text.highlight { + fill: ${theme.colors.grayscale.dark1}; + } + + .cal-heatmap-container rect.highlight-now { + stroke: ${theme.colors.error.base}; + } + + .cal-heatmap-container text.highlight-now { + fill: ${theme.colors.error.base}; + font-weight: ${theme.typography.weights.bold}; + } + + .cal-heatmap-container .domain-background { + fill: none; + shape-rendering: crispedges; + } + + .ch-tooltip { + padding: ${theme.gridUnit * 2}px; + background: ${theme.colors.grayscale.dark1}; + color: ${theme.colors.grayscale.light1}; + font-size: ${theme.typography.sizes.s}px; + line-height: 1.4; + width: 140px; + position: absolute; + z-index: 99999; + text-align: center; + border-radius: ${theme.borderRadius}px; + box-shadow: 2px 2px 2px ${theme.colors.grayscale.dark2}; + display: none; + box-sizing: border-box; + } + + .ch-tooltip::after { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + content: ''; + padding: 0; + display: block; + bottom: -${theme.gridUnit}px; + left: 50%; + margin-left: -${theme.gridUnit}px; + border-width: ${theme.gridUnit}px ${theme.gridUnit}px 0; + border-top-color: ${theme.colors.grayscale.dark1}; + } + `} `; diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.css b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.css deleted file mode 100644 index de282154a5096..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.css +++ /dev/null @@ -1,129 +0,0 @@ -/* [LICENSE TBD] */ -/* Cal-HeatMap CSS */ - -.cal-heatmap-container { - display: block; -} - -.cal-heatmap-container .graph-label { - fill: #999; - font-size: 10px; -} - -.cal-heatmap-container .graph, -.cal-heatmap-container .graph-legend rect { - shape-rendering: crispedges; -} - -.cal-heatmap-container .graph-rect { - fill: #ededed; -} - -.cal-heatmap-container .graph-subdomain-group rect:hover { - stroke: #000; - stroke-width: 1px; -} - -.cal-heatmap-container .subdomain-text { - font-size: 8px; - pointer-events: none; -} - -.cal-heatmap-container .hover_cursor:hover { - cursor: pointer; -} - -.cal-heatmap-container .qi { - background-color: #999; - fill: #999; -} - -/* -Remove comment to apply this style to date with value equal to 0 -.q0 -{ - background-color: #fff; - fill: #fff; - stroke: #ededed -} -*/ - -.cal-heatmap-container .q1 { - background-color: #dae289; - fill: #dae289; -} - -.cal-heatmap-container .q2 { - background-color: #cedb9c; - fill: #9cc069; -} - -.cal-heatmap-container .q3 { - background-color: #b5cf6b; - fill: #669d45; -} - -.cal-heatmap-container .q4 { - background-color: #637939; - fill: #637939; -} - -.cal-heatmap-container .q5 { - background-color: #3b6427; - fill: #3b6427; -} - -.cal-heatmap-container rect.highlight { - stroke: #444; - stroke-width: 1; -} - -.cal-heatmap-container text.highlight { - fill: #444; -} - -.cal-heatmap-container rect.highlight-now { - stroke: red; -} - -.cal-heatmap-container text.highlight-now { - fill: red; - font-weight: 800; -} - -.cal-heatmap-container .domain-background { - fill: none; - shape-rendering: crispedges; -} - -.ch-tooltip { - padding: 10px; - background: #222; - color: #bbb; - font-size: 12px; - line-height: 1.4; - width: 140px; - position: absolute; - z-index: 99999; - text-align: center; - border-radius: 2px; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); - display: none; - box-sizing: border-box; -} - -.ch-tooltip::after { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - content: ''; - padding: 0; - display: block; - bottom: -6px; - left: 50%; - margin-left: -6px; - border-width: 6px 6px 0; - border-top-color: #222; -} diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js index 572070f614087..3320693f5cc63 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js @@ -10,7 +10,6 @@ import d3tip from 'd3-tip'; import { getContrastingColor } from '@superset-ui/core'; -import './d3tip.css'; var d3 = typeof require === 'function' ? require('d3') : window.d3; diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/d3tip.css b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/d3tip.css deleted file mode 100644 index 980a5be4396ef..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/d3tip.css +++ /dev/null @@ -1,74 +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. - */ -/* from d3-tip */ -.d3-tip { - line-height: 1; - padding: 12px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 2px; - pointer-events: none; - z-index: 1000; -} - -/* Creates a small triangle extender for the tooltip */ -.d3-tip:after { - box-sizing: border-box; - display: inline; - font-size: 10px; - width: 100%; - line-height: 1; - color: rgba(0, 0, 0, 0.8); - position: absolute; - pointer-events: none; -} - -/* Northward tooltips */ -.d3-tip.n:after { - content: '\25BC'; - margin: -1px 0 0 0; - top: 100%; - left: 0; - text-align: center; -} - -/* Eastward tooltips */ -.d3-tip.e:after { - content: '\25C0'; - margin: -4px 0 0 0; - top: 50%; - left: -8px; -} - -/* Southward tooltips */ -.d3-tip.s:after { - content: '\25B2'; - margin: 0 0 1px 0; - top: -8px; - left: 0; - text-align: center; -} - -/* Westward tooltips */ -.d3-tip.w:after { - content: '\25B6'; - margin: -4px 0 0 -1px; - top: 50%; - left: 100%; -} From ac6b2f2d93a684c0d482ce3638d936568974041c Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Thu, 31 Mar 2022 13:32:20 -0300 Subject: [PATCH 05/11] refactor: Removes the CSS files from the Heatmap plugin (#19417) * refactor: Removes the CSS files from the Heatmap plugin * Adds peer dependencies --- .../legacy-plugin-chart-heatmap/package.json | 37 +++-- .../src/Heatmap.css | 72 --------- .../src/Heatmap.js | 3 - .../src/ReactHeatmap.js | 22 --- .../src/ReactHeatmap.jsx | 148 ++++++++++++++++++ .../src/vendor/d3tip.css | 74 --------- 6 files changed, 166 insertions(+), 190 deletions(-) delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.css delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.js create mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json b/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json index bb34fb817b0d0..692a9dc107704 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json +++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json @@ -2,31 +2,25 @@ "name": "@superset-ui/legacy-plugin-chart-heatmap", "version": "0.18.25", "description": "Superset Legacy Chart - Heatmap", - "sideEffects": [ - "*.css" - ], - "main": "lib/index.js", - "module": "esm/index.js", - "files": [ - "esm", - "lib" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/apache-superset/superset-ui.git" - }, "keywords": [ "superset" ], - "author": "Superset", - "license": "Apache-2.0", + "homepage": "https://github.com/apache-superset/superset-ui#readme", "bugs": { "url": "https://github.com/apache-superset/superset-ui/issues" }, - "homepage": "https://github.com/apache-superset/superset-ui#readme", - "publishConfig": { - "access": "public" + "repository": { + "type": "git", + "url": "git+https://github.com/apache-superset/superset-ui.git" }, + "license": "Apache-2.0", + "author": "Superset", + "main": "lib/index.js", + "module": "esm/index.js", + "files": [ + "esm", + "lib" + ], "dependencies": { "d3": "^3.5.17", "d3-svg-legend": "^1.x", @@ -34,7 +28,12 @@ "prop-types": "^15.6.2" }, "peerDependencies": { + "@emotion/react": "^11.4.1", "@superset-ui/chart-controls": "*", - "@superset-ui/core": "*" + "@superset-ui/core": "*", + "react": "^16.13.1" + }, + "publishConfig": { + "access": "public" } } diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.css b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.css deleted file mode 100644 index cf26d7b43ea6d..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.css +++ /dev/null @@ -1,72 +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. - */ - -.superset-legacy-chart-heatmap { - position: relative; - top: 0; - left: 0; - height: 100%; -} - -.superset-legacy-chart-heatmap .axis text { - font: 10px sans-serif; - text-rendering: optimizeLegibility; - fill: #555; -} - -.superset-legacy-chart-heatmap .background-rect { - stroke: #ddd; - fill-opacity: 0; - pointer-events: all; -} - -.superset-legacy-chart-heatmap .axis path, -.superset-legacy-chart-heatmap .axis line { - fill: none; - stroke: #ddd; - shape-rendering: crispEdges; -} - -.superset-legacy-chart-heatmap canvas, -.superset-legacy-chart-heatmap img { - image-rendering: optimizeSpeed; /* Older versions of FF */ - image-rendering: -moz-crisp-edges; /* FF 6.0+ */ - image-rendering: -webkit-optimize-contrast; /* Safari */ - image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ - image-rendering: pixelated; /* Awesome future-browsers */ - -ms-interpolation-mode: nearest-neighbor; /* IE */ -} - -.superset-legacy-chart-heatmap .legendCells text { - font-size: 10px; - font-weight: normal; - opacity: 0; -} - -.superset-legacy-chart-heatmap .legendCells .cell:first-child text { - opacity: 1; -} -.superset-legacy-chart-heatmap .legendCells .cell:last-child text { - opacity: 1; -} - -.dashboard .superset-legacy-chart-heatmap .axis text { - font-size: 10px; - opacity: 0.75; -} diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js index 4626116aa8cd5..dc442039112e7 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js @@ -27,9 +27,6 @@ import { getSequentialSchemeRegistry, } from '@superset-ui/core'; -import './vendor/d3tip.css'; -import './Heatmap.css'; - const propTypes = { data: PropTypes.shape({ records: PropTypes.arrayOf( diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.js deleted file mode 100644 index 6b98c23dca492..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.js +++ /dev/null @@ -1,22 +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 { reactify } from '@superset-ui/core'; -import Component from './Heatmap'; - -export default reactify(Component); diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx new file mode 100644 index 0000000000000..22dde813b6b1e --- /dev/null +++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx @@ -0,0 +1,148 @@ +/** + * 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 { reactify, css, styled } from '@superset-ui/core'; +import { Global } from '@emotion/react'; +import Component from './Heatmap'; + +const ReactComponent = reactify(Component); + +const Heatmap = ({ className, ...otherProps }) => ( +
+ css` + .d3-tip { + line-height: 1; + padding: ${theme.gridUnit * 3}px; + background: ${theme.colors.grayscale.dark2}; + color: ${theme.colors.grayscale.light5}; + border-radius: 4px; + pointer-events: none; + z-index: 1000; + font-size: ${theme.typography.sizes.s}px; + } + + /* Creates a small triangle extender for the tooltip */ + .d3-tip:after { + box-sizing: border-box; + display: inline; + font-size: ${theme.typography.sizes.xs}; + width: 100%; + line-height: 1; + color: ${theme.colors.grayscale.dark2}; + position: absolute; + pointer-events: none; + } + + /* Northward tooltips */ + .d3-tip.n:after { + content: '\\25BC'; + margin: -${theme.gridUnit}px 0 0 0; + top: 100%; + left: 0; + text-align: center; + } + + /* Eastward tooltips */ + .d3-tip.e:after { + content: '\\25C0'; + margin: -${theme.gridUnit}px 0 0 0; + top: 50%; + left: -${theme.gridUnit * 2}px; + } + + /* Southward tooltips */ + .d3-tip.s:after { + content: '\\25B2'; + margin: 0; + top: -${theme.gridUnit * 2}px; + left: 0; + text-align: center; + } + + /* Westward tooltips */ + .d3-tip.w:after { + content: '\\25B6'; + margin: -${theme.gridUnit}px 0 0 0px; + top: 50%; + left: 100%; + } + `} + /> + +
+); + +export default styled(Heatmap)` + ${({ theme }) => ` + .superset-legacy-chart-heatmap { + position: relative; + top: 0; + left: 0; + height: 100%; + } + + .superset-legacy-chart-heatmap .axis text { + font-size: ${theme.typography.sizes.xs}px; + text-rendering: optimizeLegibility; + } + + .superset-legacy-chart-heatmap .background-rect { + stroke: ${theme.colors.grayscale.light2}; + fill-opacity: 0; + pointer-events: all; + } + + .superset-legacy-chart-heatmap .axis path, + .superset-legacy-chart-heatmap .axis line { + fill: none; + stroke: ${theme.colors.grayscale.light2}; + shape-rendering: crispEdges; + } + + .superset-legacy-chart-heatmap canvas, + .superset-legacy-chart-heatmap img { + image-rendering: optimizeSpeed; /* Older versions of FF */ + image-rendering: -moz-crisp-edges; /* FF 6.0+ */ + image-rendering: -webkit-optimize-contrast; /* Safari */ + image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ + image-rendering: pixelated; /* Awesome future-browsers */ + -ms-interpolation-mode: nearest-neighbor; /* IE */ + } + + .superset-legacy-chart-heatmap .legendCells text { + font-size: ${theme.typography.sizes.xs}px; + font-weight: ${theme.typography.weights.normal}; + opacity: 0; + } + + .superset-legacy-chart-heatmap .legendCells .cell:first-child text { + opacity: 1; + } + + .superset-legacy-chart-heatmap .legendCells .cell:last-child text { + opacity: 1; + } + + .dashboard .superset-legacy-chart-heatmap .axis text { + font-size: ${theme.typography.sizes.xs}px; + opacity: ${theme.opacity.heavy}; + } + `} +`; diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css deleted file mode 100644 index 980a5be4396ef..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css +++ /dev/null @@ -1,74 +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. - */ -/* from d3-tip */ -.d3-tip { - line-height: 1; - padding: 12px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 2px; - pointer-events: none; - z-index: 1000; -} - -/* Creates a small triangle extender for the tooltip */ -.d3-tip:after { - box-sizing: border-box; - display: inline; - font-size: 10px; - width: 100%; - line-height: 1; - color: rgba(0, 0, 0, 0.8); - position: absolute; - pointer-events: none; -} - -/* Northward tooltips */ -.d3-tip.n:after { - content: '\25BC'; - margin: -1px 0 0 0; - top: 100%; - left: 0; - text-align: center; -} - -/* Eastward tooltips */ -.d3-tip.e:after { - content: '\25C0'; - margin: -4px 0 0 0; - top: 50%; - left: -8px; -} - -/* Southward tooltips */ -.d3-tip.s:after { - content: '\25B2'; - margin: 0 0 1px 0; - top: -8px; - left: 0; - text-align: center; -} - -/* Westward tooltips */ -.d3-tip.w:after { - content: '\25B6'; - margin: -4px 0 0 -1px; - top: 50%; - left: 100%; -} From 85e330e94bc490d5a35fa0536f44e7189e299d20 Mon Sep 17 00:00:00 2001 From: James Turton <9107319+jnturton@users.noreply.github.com> Date: Thu, 31 Mar 2022 18:42:27 +0200 Subject: [PATCH 06/11] fix(drill): specify an SA URL parm of `impersonation_target` for drill+sadrill (#19252) * Update drill+sadrill to specify an SA URL parm of "impersonation_target". Sqlalchemy-drill is being updated to support impersonation with the drill+sadrill driver, where previously it did not. The way that callers should specify impersonation matches that for the drill+jdbc driver in that a SA URL parameter of impersonation_target should be set to the username of the user to be impersonated, while the stadard SA username and password should be those of the proxy user. * Remove lint. * Address review comments. * Use idiomatic pytest to test for a raised exception. * Fix import statement order in drill.py. --- superset/db_engine_specs/drill.py | 7 ++++-- .../unit_tests/db_engine_specs/test_drill.py | 24 +++++++++++++++++-- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/superset/db_engine_specs/drill.py b/superset/db_engine_specs/drill.py index 3c06017fa2daa..de8c8397f66b3 100644 --- a/superset/db_engine_specs/drill.py +++ b/superset/db_engine_specs/drill.py @@ -21,6 +21,7 @@ from sqlalchemy.engine.url import URL from superset.db_engine_specs.base import BaseEngineSpec +from superset.db_engine_specs.exceptions import SupersetDBAPIProgrammingError from superset.utils import core as utils @@ -84,7 +85,9 @@ def modify_url_for_impersonation( if impersonate_user and username is not None: if url.drivername == "drill+odbc": url.query["DelegationUID"] = username - elif url.drivername == "drill+jdbc": + elif url.drivername in ["drill+sadrill", "drill+jdbc"]: url.query["impersonation_target"] = username else: - url.username = username + raise SupersetDBAPIProgrammingError( + f"impersonation is not supported for {url.drivername}" + ) diff --git a/tests/unit_tests/db_engine_specs/test_drill.py b/tests/unit_tests/db_engine_specs/test_drill.py index 08f7972d80b78..ad7254870f6ef 100644 --- a/tests/unit_tests/db_engine_specs/test_drill.py +++ b/tests/unit_tests/db_engine_specs/test_drill.py @@ -17,6 +17,7 @@ # pylint: disable=unused-argument, import-outside-toplevel, protected-access from flask.ctx import AppContext +from pytest import raises def test_odbc_impersonation(app_context: AppContext) -> None: @@ -55,7 +56,7 @@ def test_sadrill_impersonation(app_context: AppContext) -> None: """ Test ``modify_url_for_impersonation`` method when driver == sadrill. - The method changes the username of URL Object. + The method adds the parameter ``impersonation_target`` to the query string. """ from sqlalchemy.engine.url import URL @@ -64,4 +65,23 @@ def test_sadrill_impersonation(app_context: AppContext) -> None: url = URL("drill+sadrill") username = "DoAsUser" DrillEngineSpec.modify_url_for_impersonation(url, True, username) - assert url.username == username + assert url.query["impersonation_target"] == username + + +def test_invalid_impersonation(app_context: AppContext) -> None: + """ + Test ``modify_url_for_impersonation`` method when driver == foobar. + + The method raises an exception because impersonation is not supported + for drill+foobar. + """ + from sqlalchemy.engine.url import URL + + from superset.db_engine_specs.drill import DrillEngineSpec + from superset.db_engine_specs.exceptions import SupersetDBAPIProgrammingError + + url = URL("drill+foobar") + username = "DoAsUser" + + with raises(SupersetDBAPIProgrammingError): + DrillEngineSpec.modify_url_for_impersonation(url, True, username) From 1a1322d3d92960416a4874997b53aec3bd59eff6 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Thu, 31 Mar 2022 20:41:15 +0200 Subject: [PATCH 07/11] feat(explore): Move chart actions into dropdown (#19446) * feat(explore): Move chart actions to a dropdown menu * Fix tests and add some new ones * Add background color to embed code button * Fix cypress tests * Move copy permalink to actions menu * Remove unused function * Move share by email above embed code * Fix test * Fix test * Fix test * Fix test * Fix test --- .../cypress/integration/explore/link.test.ts | 9 +- .../src/components/ModalTrigger/index.jsx | 2 + .../src/components/ReportModal/index.tsx | 25 +- .../src/dashboard/components/Header/index.jsx | 10 +- .../explore/components/EmbedCodeButton.jsx | 168 ------- .../components/EmbedCodeButton.test.jsx | 62 --- .../explore/components/EmbedCodeContent.jsx | 153 ++++++ .../components/EmbedCodeContent.test.jsx | 48 ++ .../components/ExploreActionButtons.test.jsx | 117 ----- .../components/ExploreActionButtons.tsx | 234 --------- .../ExploreAdditionalActionsMenu.test.jsx | 60 --- .../ExploreAdditionalActionsMenu.test.tsx | 198 +++++++- .../ExploreReport.tsx | 92 ++++ .../ExploreAdditionalActionsMenu/index.jsx | 476 +++++++++++++++--- .../ExploreChartHeader.test.tsx | 10 +- .../components/ExploreChartHeader/index.jsx | 84 +--- 16 files changed, 901 insertions(+), 847 deletions(-) delete mode 100644 superset-frontend/src/explore/components/EmbedCodeButton.jsx delete mode 100644 superset-frontend/src/explore/components/EmbedCodeButton.test.jsx create mode 100644 superset-frontend/src/explore/components/EmbedCodeContent.jsx create mode 100644 superset-frontend/src/explore/components/EmbedCodeContent.test.jsx delete mode 100644 superset-frontend/src/explore/components/ExploreActionButtons.test.jsx delete mode 100644 superset-frontend/src/explore/components/ExploreActionButtons.tsx delete mode 100644 superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreAdditionalActionsMenu.test.jsx create mode 100644 superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreReport.tsx diff --git a/superset-frontend/cypress-base/cypress/integration/explore/link.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/link.test.ts index 027326e021837..9f07e9c10b859 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/link.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/link.test.ts @@ -38,7 +38,7 @@ describe('Test explore links', () => { cy.visitChartByName('Growth Rate'); cy.verifySliceSuccess({ waitAlias: '@chartData' }); - cy.get('div#query').click(); + cy.get('[aria-label="Menu actions trigger"]').click(); cy.get('span').contains('View query').parent().click(); cy.wait('@chartData').then(() => { cy.get('code'); @@ -52,7 +52,12 @@ describe('Test explore links', () => { cy.visitChartByName('Growth Rate'); cy.verifySliceSuccess({ waitAlias: '@chartData' }); - cy.get('[data-test=embed-code-button]').click(); + cy.get('[aria-label="Menu actions trigger"]').click(); + cy.get('div[title="Share"]').trigger('mouseover'); + // need to use [id= syntax, otherwise error gets triggered because of special character in id + cy.get('[id="share_submenu$Menu"]').within(() => { + cy.contains('Embed code').parent().click(); + }); cy.get('#embed-code-popover').within(() => { cy.get('textarea[name=embedCode]').contains('iframe'); }); diff --git a/superset-frontend/src/components/ModalTrigger/index.jsx b/superset-frontend/src/components/ModalTrigger/index.jsx index e01e6591adb07..b15000d851fb3 100644 --- a/superset-frontend/src/components/ModalTrigger/index.jsx +++ b/superset-frontend/src/components/ModalTrigger/index.jsx @@ -39,6 +39,7 @@ const propTypes = { resizableConfig: PropTypes.object, draggable: PropTypes.bool, draggableConfig: PropTypes.object, + destroyOnClose: PropTypes.bool, }; const defaultProps = { @@ -89,6 +90,7 @@ export default class ModalTrigger extends React.Component { resizableConfig={this.props.resizableConfig} draggable={this.props.draggable} draggableConfig={this.props.draggableConfig} + destroyOnClose={this.props.destroyOnClose} > {this.props.modalBody} diff --git a/superset-frontend/src/components/ReportModal/index.tsx b/superset-frontend/src/components/ReportModal/index.tsx index c8273bd985801..5cdc216a0e67f 100644 --- a/superset-frontend/src/components/ReportModal/index.tsx +++ b/superset-frontend/src/components/ReportModal/index.tsx @@ -26,8 +26,7 @@ import React, { } from 'react'; import { t, SupersetTheme } from '@superset-ui/core'; import { getClientErrorObject } from 'src/utils/getClientErrorObject'; -import { bindActionCreators } from 'redux'; -import { connect, useDispatch, useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { addReport, editReport } from 'src/reports/actions/reports'; import { AlertObject } from 'src/views/CRUD/alert/types'; @@ -85,6 +84,7 @@ interface ChartObject { chartUpdateEndTime: number; chartUpdateStartTime: number; latestQueryFormData: object; + sliceFormData: Record; queryController: { abort: () => {} }; queriesResponse: object; triggerQuery: boolean; @@ -92,7 +92,6 @@ interface ChartObject { } interface ReportProps { - addReport: (report?: ReportObject) => {}; onHide: () => {}; onReportAdd: (report?: ReportObject) => {}; addDangerToast: (msg: string) => void; @@ -102,7 +101,6 @@ interface ReportProps { dashboardId?: number; chart?: ChartObject; creationMethod: string; - props: any; } interface ReportPayloadType { @@ -189,8 +187,8 @@ const ReportModal: FunctionComponent = ({ show = false, ...props }) => { - const vizType = props.props.chart?.sliceFormData?.viz_type; - const isChart = !!props.props.chart; + const vizType = props.chart?.sliceFormData?.viz_type; + const isChart = !!props.chart; const defaultNotificationFormat = isChart && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType) ? NOTIFICATION_FORMATS.TEXT @@ -226,19 +224,19 @@ const ReportModal: FunctionComponent = ({ // Create new Report const newReportValues: Partial = { crontab: currentReport?.crontab, - dashboard: props.props.dashboardId, - chart: props.props.chart?.id, + dashboard: props.dashboardId, + chart: props.chart?.id, description: currentReport?.description, name: currentReport?.name, - owners: [props.props.userId], + owners: [props.userId], recipients: [ { - recipient_config_json: { target: props.props.userEmail }, + recipient_config_json: { target: props.userEmail }, type: 'Email', }, ], type: 'Report', - creation_method: props.props.creationMethod, + creation_method: props.creationMethod, active: true, report_format: currentReport?.report_format || defaultNotificationFormat, timezone: currentReport?.timezone, @@ -416,7 +414,4 @@ const ReportModal: FunctionComponent = ({ ); }; -const mapDispatchToProps = (dispatch: any) => - bindActionCreators({ addReport, editReport }, dispatch); - -export default connect(null, mapDispatchToProps)(withToasts(ReportModal)); +export default withToasts(ReportModal); diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx index ad668daf79a53..af68742b4ab17 100644 --- a/superset-frontend/src/dashboard/components/Header/index.jsx +++ b/superset-frontend/src/dashboard/components/Header/index.jsx @@ -662,12 +662,10 @@ class Header extends React.PureComponent { )} diff --git a/superset-frontend/src/explore/components/EmbedCodeButton.jsx b/superset-frontend/src/explore/components/EmbedCodeButton.jsx deleted file mode 100644 index 71f77a4621fa2..0000000000000 --- a/superset-frontend/src/explore/components/EmbedCodeButton.jsx +++ /dev/null @@ -1,168 +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 { t } from '@superset-ui/core'; - -import Popover from 'src/components/Popover'; -import { FormLabel } from 'src/components/Form'; -import Icons from 'src/components/Icons'; -import { Tooltip } from 'src/components/Tooltip'; -import CopyToClipboard from 'src/components/CopyToClipboard'; -import { URL_PARAMS } from 'src/constants'; -import { getChartPermalink } from 'src/utils/urlUtils'; - -export default class EmbedCodeButton extends React.Component { - constructor(props) { - super(props); - this.state = { - height: '400', - width: '600', - url: '', - errorMessage: '', - }; - this.handleInputChange = this.handleInputChange.bind(this); - this.updateUrl = this.updateUrl.bind(this); - } - - handleInputChange(e) { - const { value, name } = e.currentTarget; - const data = {}; - data[name] = value; - this.setState(data); - } - - updateUrl() { - this.setState({ url: '' }); - getChartPermalink(this.props.formData) - .then(url => this.setState({ errorMessage: '', url })) - .catch(() => { - this.setState({ errorMessage: t('Error') }); - this.props.addDangerToast( - t('Sorry, something went wrong. Try again later.'), - ); - }); - } - - generateEmbedHTML() { - if (!this.state.url) return ''; - const srcLink = `${this.state.url}?${URL_PARAMS.standalone.name}=1&height=${this.state.height}`; - return ( - '\n' + - '' - ); - } - - renderPopoverContent() { - const html = this.generateEmbedHTML(); - const text = - this.state.errorMessage || html || t('Generating link, please wait..'); - return ( -
-
-
-