Merge pull request #1 from wooga/feat/add_pyexasol

add pyexasol datasource, ensure that integer dont overflow in javascript

.circleci/docker-compose.cypress.yml

@@ -2,7 +2,7 @@ version: '3'
 services:
   server:
     build: ../
-    command: dev_server
+    command: server
     depends_on:
       - postgres
       - redis

client/app/assets/less/inc/base.less

@@ -85,23 +85,23 @@ strong {
 
 // Fixed width layout for specific pages
 @media (min-width: 768px) {
-    .settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+    .settings-screen, .home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
         .container {
             width: 750px;
         }
     }
 }
 
 @media (min-width: 992px) {
-    .settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+    .settings-screen, .home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
         .container {
             width: 970px;
         }
     }
 }
 
 @media (min-width: 1200px) {
-    .settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+    .settings-screen, .home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
         .container {
             width: 1170px;
         }

client/app/assets/less/inc/misc.less

@@ -234,4 +234,9 @@
     .hide-in-percy, .pace {
         visibility: hidden;
     }
+
+    // hide tooltips in Percy
+    .ant-tooltip {
+        display: none !important;
+    }
 }

client/app/assets/less/inc/visualizations/map.less

@@ -6,32 +6,4 @@
     height: 100%;
     z-index: 0;
   }
-
-  .map-custom-control.leaflet-bar {
-    background: #fff;
-    padding: 10px;
-    margin: 10px;
-    position: absolute;
-    z-index: 1;
-
-    &.top-left {
-      left: 0;
-      top: 0;
-    }
-
-    &.top-right {
-      right: 0;
-      top: 0;
-    }
-
-    &.bottom-left {
-      left: 0;
-      bottom: 0;
-    }
-
-    &.bottom-right {
-      right: 0;
-      bottom: 0;
-    }
-  }
 }

client/app/assets/less/main.less

@@ -54,7 +54,6 @@
 @import 'inc/visualizations/box';
 @import 'inc/visualizations/pivot-table';
 @import 'inc/visualizations/map';
-@import 'inc/visualizations/cohort';
 @import 'inc/visualizations/misc';
 
 /** VENDOR OVERRIDES **/

client/app/components/BeaconConsent.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { react2angular } from 'react2angular';
 import Card from 'antd/lib/card';
 import Button from 'antd/lib/button';
 import Typography from 'antd/lib/typography';
@@ -10,7 +9,7 @@ import OrgSettings from '@/services/organizationSettings';
 
 const Text = Typography.Text;
 
-export function BeaconConsent() {
+function BeaconConsent() {
   const [hide, setHide] = useState(false);
 
   if (!clientConfig.showBeaconConsentMessage || hide) {
@@ -76,8 +75,4 @@ export function BeaconConsent() {
   );
 }
 
-export default function init(ngModule) {
-  ngModule.component('beaconConsent', react2angular(BeaconConsent));
-}
-
-init.init = true;
+export default BeaconConsent;

client/app/components/ColorPicker/Input.jsx

@@ -61,6 +61,7 @@ export default function Input({ color, presetColors, presetColumns, onChange, on
       ))}
       <div className="color-picker-input">
         <TextInput
+          data-test="ColorPicker.CustomColor"
           addonBefore={<Typography.Text type="secondary">#</Typography.Text>}
           value={inputValue}
           onChange={e => handleInputChange(e.target.value)}

client/app/components/ColorPicker/Label.jsx

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import { validateColor, getColorName } from './utils';
+import './label.less';
+
+export default function Label({ className, color, presetColors, ...props }) {
+  const name = useMemo(
+    () => getColorName(validateColor(color), presetColors),
+    [color, presetColors],
+  );
+
+  return <span className={cx('color-label', className)} {...props}>{name}</span>;
+}
+
+Label.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+  presetColors: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string), // array of colors (no tooltips)
+    PropTypes.objectOf(PropTypes.string), // color name => color value
+  ]),
+};
+
+Label.defaultProps = {
+  className: null,
+  color: '#FFFFFF',
+  presetColors: null,
+};

client/app/components/ColorPicker/Swatch.jsx

@@ -1,14 +1,15 @@
 import { isString } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Tooltip from 'antd/lib/tooltip';
 
 import './swatch.less';
 
 export default function Swatch({ className, color, title, size, ...props }) {
   const result = (
     <span
-      className={`color-swatch ${className}`}
+      className={cx('color-swatch', className)}
       style={{ backgroundColor: color, width: size }}
       {...props}
     />
@@ -30,7 +31,7 @@ Swatch.propTypes = {
 };
 
 Swatch.defaultProps = {
-  className: '',
+  className: null,
   title: null,
   color: 'transparent',
   size: 12,

client/app/components/ColorPicker/index.jsx

@@ -1,6 +1,7 @@
 import { toString } from 'lodash';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import tinycolor from 'tinycolor2';
 import Popover from 'antd/lib/popover';
 import Card from 'antd/lib/card';
@@ -9,18 +10,16 @@ import Icon from 'antd/lib/icon';
 
 import ColorInput from './Input';
 import Swatch from './Swatch';
+import Label from './Label';
+import { validateColor } from './utils';
 
 import './index.less';
 
-function validateColor(value, fallback = null) {
-  value = tinycolor(value);
-  return value.isValid() ? '#' + value.toHex().toUpperCase() : fallback;
-}
-
 export default function ColorPicker({
-  color, placement, presetColors, presetColumns, triggerSize, interactive, children, onChange,
+  color, placement, presetColors, presetColumns, interactive, children, onChange, triggerProps,
 }) {
   const [visible, setVisible] = useState(false);
+  const validatedColor = useMemo(() => validateColor(color), [color]);
   const [currentColor, setCurrentColor] = useState('');
 
   function handleApply() {
@@ -57,16 +56,18 @@ export default function ColorPicker({
 
   useEffect(() => {
     if (visible) {
-      setCurrentColor(validateColor(color));
+      setCurrentColor(validatedColor);
     }
-  }, [color, visible]);
+  }, [validatedColor, visible]);
 
   return (
     <Popover
+      arrowPointAtCenter
       overlayClassName={`color-picker ${interactive ? 'color-picker-interactive' : 'color-picker-with-actions'}`}
       overlayStyle={{ '--color-picker-selected-color': currentColor }}
       content={(
         <Card
+          data-test="ColorPicker"
           className="color-picker-panel"
           bordered={false}
           title={toString(currentColor).toUpperCase()}
@@ -90,7 +91,14 @@ export default function ColorPicker({
       visible={visible}
       onVisibleChange={setVisible}
     >
-      {children || (<Swatch className="color-picker-trigger" color={validateColor(color)} size={triggerSize} />)}
+      {children || (
+        <Swatch
+          color={validatedColor}
+          size={30}
+          {...triggerProps}
+          className={cx('color-picker-trigger', triggerProps.className)}
+        />
+      )}
     </Popover>
   );
 }
@@ -107,8 +115,8 @@ ColorPicker.propTypes = {
     PropTypes.objectOf(PropTypes.string), // color name => color value
   ]),
   presetColumns: PropTypes.number,
-  triggerSize: PropTypes.number,
   interactive: PropTypes.bool,
+  triggerProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   children: PropTypes.node,
   onChange: PropTypes.func,
 };
@@ -118,11 +126,12 @@ ColorPicker.defaultProps = {
   placement: 'top',
   presetColors: null,
   presetColumns: 8,
-  triggerSize: 30,
   interactive: false,
+  triggerProps: {},
   children: null,
   onChange: () => {},
 };
 
 ColorPicker.Input = ColorInput;
 ColorPicker.Swatch = Swatch;
+ColorPicker.Label = Label;

client/app/components/ColorPicker/label.less

@@ -0,0 +1,7 @@
+.color-label {
+  vertical-align: middle;
+
+  .color-swatch + & {
+    margin-left: 7px;
+  }
+}

client/app/components/ColorPicker/utils.js

@@ -0,0 +1,14 @@
+import { isArray, findKey } from 'lodash';
+import tinycolor from 'tinycolor2';
+
+export function validateColor(value, fallback = null) {
+  value = tinycolor(value);
+  return value.isValid() ? '#' + value.toHex().toUpperCase() : fallback;
+}
+
+export function getColorName(color, presetColors) {
+  if (isArray(presetColors)) {
+    return color;
+  }
+  return findKey(presetColors, v => validateColor(v) === color) || color;
+}

client/app/components/ParameterApplyButton.jsx

@@ -12,7 +12,7 @@ function ParameterApplyButton({ paramCount, onClick }) {
   return (
     <div className="parameter-apply-button" data-show={!!paramCount} data-test="ParameterApplyButton">
       <Badge count={paramCount}>
-        <Tooltip title={`${KeyboardShortcuts.modKey} + Enter`}>
+        <Tooltip title={paramCount ? `${KeyboardShortcuts.modKey} + Enter` : null}>
           <span>
             <Button onClick={onClick}>
               <i className={`fa fa-${icon}`} /> Apply Changes

client/app/components/QuerySelector.jsx

@@ -42,8 +42,8 @@ export function QuerySelector(props) {
   let isStaleSearch = false;
   const debouncedSearch = debounce(_search, SEARCH_DEBOUNCE_DURATION);
   const placeholder = 'Search a query by name';
-  const clearIcon = <i className="fa fa-times" onClick={() => selectQuery(null)} />;
-  const spinIcon = <i className={cx('fa fa-spinner fa-pulse', { hidden: !searching })} />;
+  const clearIcon = <i className="fa fa-times hide-in-percy" onClick={() => selectQuery(null)} />;
+  const spinIcon = <i className={cx('fa fa-spinner fa-pulse hide-in-percy', { hidden: !searching })} />;
 
   // set selected from prop
   useEffect(() => {

client/app/components/app-view/template.html

@@ -13,4 +13,4 @@ <h4>{{ $ctrl.handler.error.message }}</h4>
     </div>
   </div>
 </div>
-<div id="app-content" ng-if="!$ctrl.handler.error" ng-view></div>
+<div id="app-content" ng-if="!$ctrl.handler.error" ng-view autoscroll></div>

client/app/components/empty-state/EmptyState.jsx

@@ -1,7 +1,6 @@
 import { keys, some } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import classNames from 'classnames';
 import CreateDashboardDialog from '@/components/dashboards/CreateDashboardDialog';
 import { currentUser } from '@/services/auth';
@@ -38,7 +37,7 @@ Step.defaultProps = {
   onClick: null,
 };
 
-export function EmptyState({
+function EmptyState({
   icon,
   header,
   description,
@@ -169,8 +168,4 @@ EmptyState.defaultProps = {
   showInviteStep: false,
 };
 
-export default function init(ngModule) {
-  ngModule.component('emptyState', react2angular(EmptyState));
-}
-
-init.init = true;
+export default EmptyState;