pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(explore): Dataset panel option tooltips (#19259) 

* feat(explore): Add description to column/metric tooltips in dataset panel

* Fix tests

* Address code review comments
This commit is contained in:
Kamil Gabryjelski 2022-03-25 07:55:11 +01:00 committed by GitHub
parent 446358642f
commit 45c28c8046
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 264 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
superset-frontend/package-lock.json generated
View File

@ -5276,7 +5276,6 @@
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
"dev": true,
"dependencies": {
"@types/istanbul-lib-coverage": "^2.0.0",
"@types/istanbul-reports": "^3.0.0",
@ -5292,7 +5291,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
"integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
"dev": true,
"dependencies": {
"@types/istanbul-lib-report": "*"
}
@ -21613,7 +21611,6 @@
"version": "7.29.4",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.29.4.tgz",
"integrity": "sha512-CtrJRiSYEfbtNGtEsd78mk1n1v2TUbeABlNIcOCJdDfkN5/JTOwQEbbQpoSRxGqzcWPgStMvJ4mNolSuBRv1NA==",
"dev": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
@ -21632,7 +21629,6 @@
"version": "5.11.6",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz",
"integrity": "sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1",
@ -21653,7 +21649,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
"dev": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
@ -21666,7 +21661,6 @@
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.0.tgz",
"integrity": "sha512-90xKYJzskZ7q/AoSuWraQL4EGZlr75uZvDt3nrO4M+rugN02zjO45tmOBq/JBOgDiMIL1tkhHioKXjJsVaSINA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^7.27.1"
@ -21683,7 +21677,6 @@
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-5.0.3.tgz",
"integrity": "sha512-UrnnRc5II7LMH14xsYNm/WRch/67cBafmrSQcyFh0v+UUmSf1uzfB7zn5jQXSettGwOSxJwdQUN7PgkT0w22Lg==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
"@types/react": ">=16.9.0",
@ -21710,7 +21703,6 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.0.tgz",
"integrity": "sha512-lmPrdi5SLRJR+AeJkqdkGlW/CRkAUvZnETahK58J4xb5wpbfDngasEGu+w0T1iXEhVrYBJZeW+c4V1hILCnMWQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5"
},
@ -21726,7 +21718,6 @@
"version": "12.7.0",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.7.0.tgz",
"integrity": "sha512-KzRM1KNDoW8pJ2HTenrUhTjV6wJMHvWAagDs8DDrYSWz6y4PN+K2jSvlm2bMHWNRk5LTJPo9jqIjNjJ3FlqXNw==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5"
},
@ -21759,8 +21750,7 @@
"node_modules/@types/aria-query": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
"integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==",
"dev": true
"integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A=="
},
"node_modules/@types/babel__core": {
"version": "7.1.9",
@ -22052,7 +22042,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
"integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
"dev": true,
"dependencies": {
"@types/istanbul-lib-coverage": "*"
}
@ -22071,7 +22060,6 @@
"version": "26.0.23",
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.23.tgz",
"integrity": "sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==",
"dev": true,
"dependencies": {
"jest-diff": "^26.0.0",
"pretty-format": "^26.0.0"
@ -22262,7 +22250,6 @@
"version": "16.9.8",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
"integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
@ -22377,7 +22364,6 @@
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
"integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
@ -22517,7 +22503,6 @@
"version": "5.9.5",
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
"integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
"dev": true,
"dependencies": {
"@types/jest": "*"
}
@ -22632,7 +22617,6 @@
"version": "15.0.13",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
"integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
"dev": true,
"dependencies": {
"@types/yargs-parser": "*"
}
@ -22640,8 +22624,7 @@
"node_modules/@types/yargs-parser": {
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
"integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
"dev": true
"integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
},
"node_modules/@types/yauzl": {
"version": "2.9.2",
@ -24536,7 +24519,6 @@
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.10.2",
"@babel/runtime-corejs3": "^7.10.2"
@ -29135,7 +29117,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
"dev": true,
"dependencies": {
"inherits": "^2.0.4",
"source-map": "^0.6.1",
@ -30038,20 +30019,17 @@
"node_modules/css.escape": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
"dev": true
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
},
"node_modules/css/node_modules/inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"node_modules/css/node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -30060,7 +30038,6 @@
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
"dev": true,
"dependencies": {
"atob": "^2.1.2",
"decode-uri-component": "^0.2.0"
@ -31356,7 +31333,6 @@
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
"integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
"dev": true,
"engines": {
"node": ">= 10.14.2"
}
@ -31457,8 +31433,7 @@
"node_modules/dom-accessibility-api": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
"dev": true
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ=="
},
"node_modules/dom-align": {
"version": "1.12.0",
@ -34472,7 +34447,6 @@
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/filter-console/-/filter-console-0.1.1.tgz",
"integrity": "sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg==",
"dev": true,
"engines": {
"node": ">=8"
}
@ -39190,7 +39164,6 @@
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
"integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
"dev": true,
"dependencies": {
"chalk": "^4.0.0",
"diff-sequences": "^26.6.2",
@ -40169,7 +40142,6 @@
"version": "26.3.0",
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
"dev": true,
"engines": {
"node": ">= 10.14.2"
}
@ -42868,7 +42840,6 @@
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
"dev": true,
"bin": {
"lz-string": "bin/bin.js"
}
@ -46972,7 +46943,6 @@
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
"dev": true,
"dependencies": {
"@jest/types": "^26.6.2",
"ansi-regex": "^5.0.0",
@ -46987,7 +46957,6 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"dev": true,
"engines": {
"node": ">=8"
}
@ -46995,8 +46964,7 @@
"node_modules/pretty-format/node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/pretty-hrtime": {
"version": "1.0.3",
@ -49486,7 +49454,7 @@
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
"integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==",
"dev": true,
"devOptional": true,
"dependencies": {
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
@ -49501,7 +49469,7 @@
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
"integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==",
"dev": true
"devOptional": true
},
"node_modules/react-textarea-autosize": {
"version": "8.3.3",
@ -50043,7 +50011,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
"dev": true,
"dependencies": {
"indent-string": "^4.0.0",
"strip-indent": "^3.0.0"
@ -51287,7 +51254,7 @@
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
"integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
"dev": true,
"devOptional": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
@ -58684,6 +58651,11 @@
"peerDependencies": {
"@emotion/react": "^11.4.1",
"@superset-ui/core": "*",
"@testing-library/dom": "^7.29.4",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.0",
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.7.0",
"@types/enzyme": "^3.10.5",
"@types/react": "*",
"antd": "^4.9.4",
@ -58709,7 +58681,6 @@
"@types/prop-types": "^15.7.2",
"@types/rison": "0.0.6",
"@types/seedrandom": "^2.4.28",
"@types/tinycolor2": "^1.4.3",
"@vx/responsive": "^0.0.199",
"csstype": "^2.6.4",
"d3-format": "^1.3.2",
@ -58741,8 +58712,10 @@
"@emotion/styled": "^11.3.0",
"@types/react": "*",
"@types/react-loadable": "*",
"@types/tinycolor2": "*",
"react": "^16.13.1",
"react-loadable": "^5.5.0"
"react-loadable": "^5.5.0",
"tinycolor2": "*"
}
},
"packages/superset-ui-core/node_modules/@vx/responsive": {
@ -63807,7 +63780,6 @@
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
"dev": true,
"requires": {
"@types/istanbul-lib-coverage": "^2.0.0",
"@types/istanbul-reports": "^3.0.0",
@ -63820,7 +63792,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
"integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
"dev": true,
"requires": {
"@types/istanbul-lib-report": "*"
}
@ -75815,7 +75786,6 @@
"@types/prop-types": "^15.7.2",
"@types/rison": "0.0.6",
"@types/seedrandom": "^2.4.28",
"@types/tinycolor2": "^1.4.3",
"@vx/responsive": "^0.0.199",
"csstype": "^2.6.4",
"d3-format": "^1.3.2",
@ -76931,7 +76901,6 @@
"version": "7.29.4",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.29.4.tgz",
"integrity": "sha512-CtrJRiSYEfbtNGtEsd78mk1n1v2TUbeABlNIcOCJdDfkN5/JTOwQEbbQpoSRxGqzcWPgStMvJ4mNolSuBRv1NA==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
@ -76947,7 +76916,6 @@
"version": "5.11.6",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz",
"integrity": "sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1",
@ -76963,7 +76931,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
@ -76975,7 +76942,6 @@
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.0.tgz",
"integrity": "sha512-90xKYJzskZ7q/AoSuWraQL4EGZlr75uZvDt3nrO4M+rugN02zjO45tmOBq/JBOgDiMIL1tkhHioKXjJsVaSINA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^7.27.1"
@ -76985,7 +76951,6 @@
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-5.0.3.tgz",
"integrity": "sha512-UrnnRc5II7LMH14xsYNm/WRch/67cBafmrSQcyFh0v+UUmSf1uzfB7zn5jQXSettGwOSxJwdQUN7PgkT0w22Lg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@types/react": ">=16.9.0",
@ -76999,7 +76964,6 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.0.tgz",
"integrity": "sha512-lmPrdi5SLRJR+AeJkqdkGlW/CRkAUvZnETahK58J4xb5wpbfDngasEGu+w0T1iXEhVrYBJZeW+c4V1hILCnMWQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5"
}
@ -77010,7 +76974,6 @@
"version": "12.7.0",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.7.0.tgz",
"integrity": "sha512-KzRM1KNDoW8pJ2HTenrUhTjV6wJMHvWAagDs8DDrYSWz6y4PN+K2jSvlm2bMHWNRk5LTJPo9jqIjNjJ3FlqXNw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5"
}
@ -77030,8 +76993,7 @@
"@types/aria-query": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
"integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==",
"dev": true
"integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A=="
},
"@types/babel__core": {
"version": "7.1.9",
@ -77323,7 +77285,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
"integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
"dev": true,
"requires": {
"@types/istanbul-lib-coverage": "*"
}
@ -77342,7 +77303,6 @@
"version": "26.0.23",
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.23.tgz",
"integrity": "sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==",
"dev": true,
"requires": {
"jest-diff": "^26.0.0",
"pretty-format": "^26.0.0"
@ -77532,7 +77492,6 @@
"version": "16.9.8",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
"integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
"dev": true,
"requires": {
"@types/react": "*"
}
@ -77647,7 +77606,6 @@
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
"integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==",
"dev": true,
"requires": {
"@types/react": "*"
}
@ -77789,7 +77747,6 @@
"version": "5.9.5",
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
"integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
"dev": true,
"requires": {
"@types/jest": "*"
}
@ -77895,7 +77852,6 @@
"version": "15.0.13",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
"integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
}
@ -77903,8 +77859,7 @@
"@types/yargs-parser": {
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
"integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
"dev": true
"integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
},
"@types/yauzl": {
"version": "2.9.2",
@ -79361,7 +79316,6 @@
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.2",
"@babel/runtime-corejs3": "^7.10.2"
@ -82954,7 +82908,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
"dev": true,
"requires": {
"inherits": "^2.0.4",
"source-map": "^0.6.1",
@ -82964,20 +82917,17 @@
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"source-map-resolve": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
"dev": true,
"requires": {
"atob": "^2.1.2",
"decode-uri-component": "^0.2.0"
@ -83590,8 +83540,7 @@
"css.escape": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
"dev": true
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
},
"csscolorparser": {
"version": "1.0.3",
@ -84635,8 +84584,7 @@
"diff-sequences": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
"integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
"dev": true
"integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q=="
},
"diffie-hellman": {
"version": "5.0.3",
@ -84729,8 +84677,7 @@
"dom-accessibility-api": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
"dev": true
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ=="
},
"dom-align": {
"version": "1.12.0",
@ -87102,8 +87049,7 @@
"filter-console": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/filter-console/-/filter-console-0.1.1.tgz",
"integrity": "sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg==",
"dev": true
"integrity": "sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg=="
},
"filter-obj": {
"version": "1.1.0",
@ -90728,7 +90674,6 @@
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
"integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
"dev": true,
"requires": {
"chalk": "^4.0.0",
"diff-sequences": "^26.6.2",
@ -91515,8 +91460,7 @@
"jest-get-type": {
"version": "26.3.0",
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
"dev": true
"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig=="
},
"jest-haste-map": {
"version": "26.6.2",
@ -93574,8 +93518,7 @@
"lz-string": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
"dev": true
"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY="
},
"magic-string": {
"version": "0.22.5",
@ -96802,7 +96745,6 @@
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
"dev": true,
"requires": {
"@jest/types": "^26.6.2",
"ansi-regex": "^5.0.0",
@ -96813,14 +96755,12 @@
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"dev": true
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
}
}
},
@ -98791,7 +98731,7 @@
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
"integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==",
"dev": true,
"devOptional": true,
"requires": {
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
@ -98803,7 +98743,7 @@
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
"integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==",
"dev": true
"devOptional": true
}
}
},
@ -99229,7 +99169,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
"dev": true,
"requires": {
"indent-string": "^4.0.0",
"strip-indent": "^3.0.0"
@ -100178,7 +100117,7 @@
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
"integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
"dev": true,
"devOptional": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"

41
superset-frontend/packages/superset-ui-chart-controls/package.json
View File

@ -2,6 +2,19 @@
"name": "@superset-ui/chart-controls",
"version": "0.18.25",
"description": "Superset UI control-utils",
"keywords": [
"superset"
],
"homepage": "https://github.com/apache-superset/superset-ui#readme",
"bugs": {
"url": "https://github.com/apache-superset/superset-ui/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/apache-superset/superset-ui.git"
},
"license": "Apache-2.0",
"author": "Superset",
"sideEffects": false,
"main": "lib/index.js",
"module": "esm/index.js",
@ -9,22 +22,6 @@
"esm",
"lib"
],
"repository": {
"type": "git",
"url": "git+https://github.com/apache-superset/superset-ui.git"
},
"keywords": [
"superset"
],
"author": "Superset",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/apache-superset/superset-ui/issues"
},
"homepage": "https://github.com/apache-superset/superset-ui#readme",
"publishConfig": {
"access": "public"
},
"dependencies": {
"@react-icons/all-files": "^4.1.0",
"lodash": "^4.17.15",
@ -33,10 +30,18 @@
"peerDependencies": {
"@emotion/react": "^11.4.1",
"@superset-ui/core": "*",
"@testing-library/dom": "^7.29.4",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.0",
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.7.0",
"@types/enzyme": "^3.10.5",
"@types/react": "*",
"antd": "^4.9.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"@types/enzyme": "^3.10.5"
"react-dom": "^16.13.1"
},
"publishConfig": {
"access": "public"
}
}

20
superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
View File

@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { useEffect, useState, ReactNode } from 'react';
import React, { useState, ReactNode, useLayoutEffect } from 'react';
import { styled } from '@superset-ui/core';
import { Tooltip } from './Tooltip';
import { ColumnTypeLabel } from './ColumnTypeLabel';
@ -47,7 +47,7 @@ export function ColumnOption({
const type = hasExpression ? 'expression' : type_generic;
const [tooltipText, setTooltipText] = useState<ReactNode>(column.column_name);
useEffect(() => {
useLayoutEffect(() => {
setTooltipText(getColumnTooltipNode(column, labelRef));
}, [labelRef, column]);
@ -61,26 +61,12 @@ export function ColumnOption({
details={column.certification_details}
/>
)}
<Tooltip
id="metric-name-tooltip"
title={tooltipText}
trigger={['hover']}
placement="top"
>
<Tooltip id="metric-name-tooltip" title={tooltipText}>
<span className="m-r-5 option-label column-option-label" ref={labelRef}>
{getColumnLabelText(column)}
</span>
</Tooltip>
{column.description && (
<InfoTooltipWithTrigger
className="m-r-5 text-muted"
icon="info"
tooltip={column.description}
label={`descr-${column.column_name}`}
placement="top"
/>
)}
{hasExpression && (
<InfoTooltipWithTrigger
className="m-r-5 text-muted"

19
superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
View File

@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { useEffect, useState, ReactNode } from 'react';
import React, { useState, ReactNode, useLayoutEffect } from 'react';
import { styled, Metric, SafeMarkdown } from '@superset-ui/core';
import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
import { ColumnTypeLabel } from './ColumnTypeLabel';
@ -63,7 +63,7 @@ export function MetricOption({
const [tooltipText, setTooltipText] = useState<ReactNode>(metric.metric_name);
useEffect(() => {
useLayoutEffect(() => {
setTooltipText(getMetricTooltipNode(metric, labelRef));
}, [labelRef, metric]);
@ -77,24 +77,11 @@ export function MetricOption({
details={metric.certification_details}
/>
)}
<Tooltip
id="metric-name-tooltip"
title={tooltipText}
trigger={['hover']}
placement="top"
>
<Tooltip id="metric-name-tooltip" title={tooltipText}>
<span className="option-label metric-option-label" ref={labelRef}>
{link}
</span>
</Tooltip>
{metric.description && (
<InfoTooltipWithTrigger
className="text-muted"
icon="info"
tooltip={metric.description}
label={`descr-${metric.metric_name}`}
/>
)}
{showFormula && (
<InfoTooltipWithTrigger
className="text-muted"

8
superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
View File

@ -46,9 +46,17 @@ export const Tooltip = ({ overlayStyle, color, ...props }: TooltipProps) => {
overlayStyle={{
fontSize: theme.typography.sizes.s,
lineHeight: '1.6',
maxWidth: theme.gridUnit * 62,
minWidth: theme.gridUnit * 30,
...overlayStyle,
}}
// make the tooltip display closer to the label
align={{ offset: [0, 1] }}
color={defaultColor || color}
trigger="hover"
placement="bottom"
// don't allow hovering over the tooltip
mouseLeaveDelay={0}
{...props}
/>
</>

99
superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
View File

@ -18,9 +18,41 @@
*/
import React, { ReactNode } from 'react';
import { t } from '@superset-ui/core';
import { css, styled, t } from '@superset-ui/core';
import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
const TooltipSectionWrapper = styled.div`
${({ theme }) => css`
display: flex;
flex-direction: column;
font-size: ${theme.typography.sizes.s}px;
line-height: 1.2;
&:not(:last-of-type) {
margin-bottom: ${theme.gridUnit * 2}px;
}
`}
`;
const TooltipSectionLabel = styled.span`
${({ theme }) => css`
font-weight: ${theme.typography.weights.bold};
`}
`;
const TooltipSection = ({
label,
text,
}: {
label: ReactNode;
text: ReactNode;
}) => (
<TooltipSectionWrapper>
<TooltipSectionLabel>{label}</TooltipSectionLabel>
<span>{text}</span>
</TooltipSectionWrapper>
);
export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean =>
!!(
labelRef &&
@ -35,22 +67,25 @@ export const getColumnTooltipNode = (
column: ColumnMeta,
labelRef?: React.RefObject<any>,
): ReactNode => {
// don't show tooltip if it hasn't verbose_name and hasn't truncated
if (!column.verbose_name && !isLabelTruncated(labelRef)) {
if (
!column.verbose_name &&
!column.description &&
!isLabelTruncated(labelRef)
) {
return null;
}
if (column.verbose_name) {
return (
<>
<div>{t('column name: %s', column.column_name)}</div>
<div>{t('verbose name: %s', column.verbose_name)}</div>
</>
);
}
// show column name in tooltip when column truncated
return t('column name: %s', column.column_name);
return (
<>
<TooltipSection label={t('Column name')} text={column.column_name} />
{column.verbose_name && (
<TooltipSection label={t('Label')} text={column.verbose_name} />
)}
{column.description && (
<TooltipSection label={t('Description')} text={column.description} />
)}
</>
);
};
type MetricType = Omit<Metric, 'id'> & { label?: string };
@ -59,23 +94,27 @@ export const getMetricTooltipNode = (
metric: MetricType,
labelRef?: React.RefObject<any>,
): ReactNode => {
// don't show tooltip if it hasn't verbose_name, label and hasn't truncated
if (!metric.verbose_name && !metric.label && !isLabelTruncated(labelRef)) {
if (
!metric.verbose_name &&
!metric.description &&
!metric.label &&
!isLabelTruncated(labelRef)
) {
return null;
}
if (metric.verbose_name) {
return (
<>
<div>{t('metric name: %s', metric.metric_name)}</div>
<div>{t('verbose name: %s', metric.verbose_name)}</div>
</>
);
}
if (isLabelTruncated(labelRef) && metric.label) {
return t('label name: %s', metric.label);
}
return t('metric name: %s', metric.metric_name);
return (
<>
<TooltipSection label={t('Metric name')} text={metric.metric_name} />
{(metric.label || metric.verbose_name) && (
<TooltipSection
label={t('Label')}
text={metric.label || metric.verbose_name}
/>
)}
{metric.description && (
<TooltipSection label={t('Description')} text={metric.description} />
)}
</>
);
};

7
superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
View File

@ -53,12 +53,7 @@ describe('ColumnOption', () => {
expect(lbl).toHaveLength(1);
expect(lbl.first().text()).toBe('Foo');
});
it('shows 2 InfoTooltipWithTrigger', () => {
expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(2);
});
it('shows only 1 InfoTooltipWithTrigger when no descr', () => {
delete props.column.description;
wrapper = shallow(factory(props));
it('shows 1 InfoTooltipWithTrigger', () => {
expect(wrapper.find(InfoTooltipWithTrigger)).toHaveLength(1);
});
it('shows a label with column_name when no verbose_name', () => {

9
superset-frontend/packages/superset-ui-chart-controls/test/components/MetricOption.test.tsx
View File

@ -51,12 +51,7 @@ describe('MetricOption', () => {
expect(lbl).toHaveLength(1);
expect(lbl.first().text()).toBe('Foo');
});
it('shows 3 InfoTooltipWithTrigger', () => {
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(3);
});
it('shows only 2 InfoTooltipWithTrigger when no descr', () => {
props.metric.description = '';
wrapper = shallow(factory(props));
it('shows 2 InfoTooltipWithTrigger', () => {
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(2);
});
it('shows a label with metric_name when no verbose_name', () => {
@ -64,7 +59,7 @@ describe('MetricOption', () => {
wrapper = shallow(factory(props));
expect(wrapper.find('.option-label').first().text()).toBe('foo');
});
it('shows only 1 InfoTooltipWithTrigger when no descr and no warning', () => {
it('shows only 1 InfoTooltipWithTrigger when no warning', () => {
props.metric.warning_text = '';
wrapper = shallow(factory(props));
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(1);

215
superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx
View File

@ -16,14 +16,19 @@
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import React, { ReactElement } from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
import {
getColumnLabelText,
getColumnTooltipNode,
getMetricTooltipNode,
} from '../../src/components/labelUtils';
const renderWithTheme = (ui: ReactElement) =>
render(<ThemeProvider theme={supersetTheme}>{ui}</ThemeProvider>);
test("should get column name when column doesn't have verbose_name", () => {
expect(
getColumnLabelText({
@ -52,66 +57,80 @@ test('should get null as tooltip', () => {
id: 123,
column_name: 'column name',
verbose_name: '',
description: '',
},
ref,
),
).toBe(null);
});
test('should get column name and verbose name when it has a verbose name', () => {
const rvNode = (
test('should get column name, verbose name and description when it has a verbose name', () => {
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
renderWithTheme(
<>
<div>column name: column name</div>
<div>verbose name: verbose name</div>
</>
{getColumnTooltipNode(
{
id: 123,
column_name: 'column name',
verbose_name: 'verbose name',
description: 'A very important column',
},
ref,
)}
</>,
);
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
expect(
getColumnTooltipNode(
{
id: 123,
column_name: 'column name',
verbose_name: 'verbose name',
},
ref,
),
).toStrictEqual(rvNode);
expect(screen.getByText('Column name')).toBeVisible();
expect(screen.getByText('column name')).toBeVisible();
expect(screen.getByText('Label')).toBeVisible();
expect(screen.getByText('verbose name')).toBeVisible();
expect(screen.getByText('Description')).toBeVisible();
expect(screen.getByText('A very important column')).toBeVisible();
});
test('should get column name as tooltip if it overflowed', () => {
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
expect(
getColumnTooltipNode(
{
id: 123,
column_name: 'long long long long column name',
verbose_name: '',
},
ref,
),
).toBe('column name: long long long long column name');
renderWithTheme(
<>
{getColumnTooltipNode(
{
id: 123,
column_name: 'long long long long column name',
verbose_name: '',
description: '',
},
ref,
)}
</>,
);
expect(screen.getByText('Column name')).toBeVisible();
expect(screen.getByText('long long long long column name')).toBeVisible();
expect(screen.queryByText('Label')).not.toBeInTheDocument();
expect(screen.queryByText('Description')).not.toBeInTheDocument();
});
test('should get column name and verbose name as tooltip if it overflowed', () => {
const rvNode = (
test('should get column name, verbose name and description as tooltip if it overflowed', () => {
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
renderWithTheme(
<>
<div>column name: long long long long column name</div>
<div>verbose name: long long long long verbose name</div>
</>
{getColumnTooltipNode(
{
id: 123,
column_name: 'long long long long column name',
verbose_name: 'long long long long verbose name',
description: 'A very important column',
},
ref,
)}
</>,
);
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
expect(
getColumnTooltipNode(
{
id: 123,
column_name: 'long long long long column name',
verbose_name: 'long long long long verbose name',
},
ref,
),
).toStrictEqual(rvNode);
expect(screen.getByText('Column name')).toBeVisible();
expect(screen.getByText('long long long long column name')).toBeVisible();
expect(screen.getByText('Label')).toBeVisible();
expect(screen.getByText('long long long long verbose name')).toBeVisible();
expect(screen.getByText('Description')).toBeVisible();
expect(screen.getByText('A very important column')).toBeVisible();
});
test('should get null as tooltip in metric', () => {
@ -122,64 +141,76 @@ test('should get null as tooltip in metric', () => {
metric_name: 'count',
label: '',
verbose_name: '',
description: '',
},
ref,
),
).toBe(null);
});
test('should get metric name and verbose name as tooltip in metric', () => {
const rvNode = (
<>
<div>metric name: count</div>
<div>verbose name: count(*)</div>
</>
);
test('should get metric name, verbose name and description as tooltip in metric', () => {
const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
expect(
getMetricTooltipNode(
{
metric_name: 'count',
label: 'count(*)',
verbose_name: 'count(*)',
},
ref,
),
).toStrictEqual(rvNode);
});
test('should get metric name and verbose name in tooltip if it overflowed', () => {
const rvNode = (
renderWithTheme(
<>
<div>metric name: count</div>
<div>verbose name: longlonglonglonglong verbose metric</div>
</>
{getMetricTooltipNode(
{
metric_name: 'count',
label: 'count(*)',
verbose_name: 'count(*)',
description: 'Count metric',
},
ref,
)}
</>,
);
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
expect(
getMetricTooltipNode(
{
metric_name: 'count',
label: '',
verbose_name: 'longlonglonglonglong verbose metric',
},
ref,
),
).toStrictEqual(rvNode);
expect(screen.getByText('Metric name')).toBeVisible();
expect(screen.getByText('count')).toBeVisible();
expect(screen.getByText('Label')).toBeVisible();
expect(screen.getByText('count(*)')).toBeVisible();
expect(screen.getByText('Description')).toBeVisible();
expect(screen.getByText('Count metric')).toBeVisible();
});
test('should get label name as tooltip in metric if it overflowed', () => {
test('should get metric name as tooltip if it overflowed', () => {
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
expect(
getMetricTooltipNode(
{
metric_name: 'count',
label: 'longlonglonglonglong metric label',
verbose_name: '',
},
ref,
),
).toBe('label name: longlonglonglonglong metric label');
renderWithTheme(
<>
{getMetricTooltipNode(
{
metric_name: 'long long long long metric name',
label: '',
verbose_name: '',
description: '',
},
ref,
)}
</>,
);
expect(screen.getByText('Metric name')).toBeVisible();
expect(screen.getByText('long long long long metric name')).toBeVisible();
expect(screen.queryByText('Label')).not.toBeInTheDocument();
expect(screen.queryByText('Description')).not.toBeInTheDocument();
});
test('should get metric name, verbose name and description in tooltip if it overflowed', () => {
const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
renderWithTheme(
<>
{getMetricTooltipNode(
{
metric_name: 'count',
label: '',
verbose_name: 'longlonglonglonglong verbose metric',
description: 'Count metric',
},
ref,
)}
</>,
);
expect(screen.getByText('Metric name')).toBeVisible();
expect(screen.getByText('count')).toBeVisible();
expect(screen.getByText('Label')).toBeVisible();
expect(screen.getByText('longlonglonglonglong verbose metric')).toBeVisible();
expect(screen.getByText('Description')).toBeVisible();
expect(screen.getByText('Count metric')).toBeVisible();
});