Dashboard Parameters (#2756)

* #2641 Step 1: split Add Widget/Add Textbox buttons * Convert Add widget/textbox dialogs to React components * #2641 Step 2: Implement new dashboard parameters logic * Resolve conflicts and fix build errors * #2641 Refactoring and improve code quality * Add Edit parameter mappings dialog to the widget * #2641 Changes after code review * Use Ant's Select component instead on <select> tags * Fix Antd imports * Fix Antd imports * Fix Cannot read property 'getParametersDefs' of undefined * Fix widgets static params bugs (don't show input, don't init from URL) * Minor UI/UX fixes
getredash · Jan 15, 2019 · 0c45d69 · 0c45d69
1 parent df23842
commit 0c45d69
Show file tree

Hide file tree

Showing 29 changed files with 1,500 additions and 376 deletions.
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -26,13 +26,17 @@ module.exports = {
     "no-lonely-if": "off",
     "consistent-return": "off",
     "no-control-regex": "off",
+    "no-script-url": "off", // some <a> tags should have href="javascript:void(0)"
     "react/jsx-filename-extension": "off",
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
     "react/prefer-stateless-function": "warn",
     "react/forbid-prop-types": "warn",
     "react/prop-types": "warn",
     "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
     "max-len": ['error', 120, 2, {
       ignoreUrls: true,
       ignoreComments: false,

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -35,6 +35,10 @@ body {
   }
 }
 
+.word-wrap-break {
+  word-wrap: break-word;
+}
+
 .clearboth {
   clear: both;
 }

diff --git a/client/app/components/DateInput.jsx b/client/app/components/DateInput.jsx
@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
 
-function DateInput({
+export function DateInput({
   value,
   onSelect,
   // eslint-disable-next-line react/prop-types
   clientConfig,
+  className,
 }) {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
   const additionalAttributes = {};
@@ -17,6 +18,7 @@ function DateInput({
   }
   return (
     <DatePicker
+      className={className}
       {...additionalAttributes}
       format={format}
       placeholder="Select Date"
@@ -34,11 +36,13 @@ DateInput.propTypes = {
     }
   },
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateInput.defaultProps = {
   value: null,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {

diff --git a/client/app/components/DateRangeInput.jsx b/client/app/components/DateRangeInput.jsx
@@ -7,11 +7,12 @@ import DatePicker from 'antd/lib/date-picker';
 
 const { RangePicker } = DatePicker;
 
-function DateRangeInput({
+export function DateRangeInput({
   value,
   onSelect,
   // eslint-disable-next-line react/prop-types
   clientConfig,
+  className,
 }) {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
   const additionalAttributes = {};
@@ -20,6 +21,7 @@ function DateRangeInput({
   }
   return (
     <RangePicker
+      className={className}
       {...additionalAttributes}
       format={format}
       onChange={onSelect}
@@ -41,11 +43,13 @@ DateRangeInput.propTypes = {
     }
   },
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateRangeInput.defaultProps = {
   value: null,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {

diff --git a/client/app/components/DateTimeInput.jsx b/client/app/components/DateTimeInput.jsx
@@ -4,12 +4,13 @@ import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
 
-function DateTimeInput({
+export function DateTimeInput({
   value,
   withSeconds,
   onSelect,
   // eslint-disable-next-line react/prop-types
   clientConfig,
+  className,
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
@@ -19,6 +20,7 @@ function DateTimeInput({
   }
   return (
     <DatePicker
+      className={className}
       showTime
       {...additionalAttributes}
       format={format}
@@ -38,12 +40,14 @@ DateTimeInput.propTypes = {
   },
   withSeconds: PropTypes.bool,
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateTimeInput.defaultProps = {
   value: null,
   withSeconds: false,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {

diff --git a/client/app/components/DateTimeRangeInput.jsx b/client/app/components/DateTimeRangeInput.jsx
@@ -7,12 +7,13 @@ import DatePicker from 'antd/lib/date-picker';
 
 const { RangePicker } = DatePicker;
 
-function DateTimeRangeInput({
+export function DateTimeRangeInput({
   value,
   withSeconds,
   onSelect,
   // eslint-disable-next-line react/prop-types
   clientConfig,
+  className,
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
@@ -22,6 +23,7 @@ function DateTimeRangeInput({
   }
   return (
     <RangePicker
+      className={className}
       showTime
       {...additionalAttributes}
       format={format}
@@ -45,12 +47,14 @@ DateTimeRangeInput.propTypes = {
   },
   withSeconds: PropTypes.bool,
   onSelect: PropTypes.func,
+  className: PropTypes.string,
 };
 
 DateTimeRangeInput.defaultProps = {
   value: null,
   withSeconds: false,
   onSelect: () => {},
+  className: '',
 };
 
 export default function init(ngModule) {