Restyle Separate visualizations into their own package

client/app/components/ApplicationArea/Router.jsx

@@ -9,9 +9,7 @@ import url from "@/services/url";
 import ErrorMessage from "./ErrorMessage";
 
 function generateRouteKey() {
-  return Math.random()
-    .toString(32)
-    .substr(2);
+  return Math.random().toString(32).substr(2);
 }
 
 export function stripBase(href) {
@@ -73,15 +71,15 @@ export default function Router({ routes, onRouteChange }) {
 
         router
           .resolve({ pathname })
-          .then(route => {
+          .then((route) => {
             if (!isAbandoned && currentPathRef.current === pathname) {
               setCurrentRoute({ ...route, key: generateRouteKey() });
             }
           })
-          .catch(error => {
+          .catch((error) => {
             if (!isAbandoned && currentPathRef.current === pathname) {
               setCurrentRoute({
-                render: currentRoute => <ErrorMessage {...currentRoute.routeParams} />,
+                render: (currentRoute) => <ErrorMessage {...currentRoute.routeParams} />,
                 routeParams: { error },
               });
             }
@@ -108,7 +106,7 @@ export default function Router({ routes, onRouteChange }) {
   }
 
   return (
-    <ErrorBoundary ref={errorHandlerRef} renderError={error => <ErrorMessage error={error} />}>
+    <ErrorBoundary ref={errorHandlerRef} renderError={(error) => <ErrorMessage error={error} />}>
       {currentRoute.render(currentRoute)}
     </ErrorBoundary>
   );

client/app/components/ApplicationArea/routeWithApiKeySession.jsx

@@ -56,7 +56,7 @@ ApiKeySessionWrapper.defaultProps = {
 export default function routeWithApiKeySession({ render, getApiKey, ...rest }) {
   return {
     ...rest,
-    render: currentRoute => (
+    render: (currentRoute) => (
       <ApiKeySessionWrapper apiKey={getApiKey(currentRoute)} currentRoute={currentRoute} renderChildren={render} />
     ),
   };

client/app/components/ApplicationArea/routeWithUserSession.jsx

@@ -50,7 +50,7 @@ function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
     <React.Fragment>
       <ApplicationHeader />
       <React.Fragment key={currentRoute.key}>
-        <ErrorBoundary renderError={error => <ErrorMessage error={error} />}>
+        <ErrorBoundary renderError={(error) => <ErrorMessage error={error} />}>
           <ErrorBoundaryContext.Consumer>
             {({ handleError }) =>
               renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
@@ -75,7 +75,7 @@ UserSessionWrapper.defaultProps = {
 export default function routeWithUserSession({ render, bodyClass, ...rest }) {
   return {
     ...rest,
-    render: currentRoute => (
+    render: (currentRoute) => (
       <UserSessionWrapper bodyClass={bodyClass} currentRoute={currentRoute} renderChildren={render} />
     ),
   };

client/app/components/Parameters.jsx

@@ -13,7 +13,7 @@ import "./Parameters.less";
 
 function updateUrl(parameters) {
   const params = extend({}, location.search);
-  parameters.forEach(param => {
+  parameters.forEach((param) => {
     extend(params, param.toUrlParams());
   });
   location.setSearch(params, true);
@@ -47,7 +47,7 @@ export default class Parameters extends React.Component {
     }
   }
 
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps) => {
     const { parameters, disableUrlUpdate } = this.props;
     const parametersChanged = prevProps.parameters !== parameters;
     const disableUrlUpdateChanged = prevProps.disableUrlUpdate !== disableUrlUpdate;
@@ -59,7 +59,7 @@ export default class Parameters extends React.Component {
     }
   };
 
-  handleKeyDown = e => {
+  handleKeyDown = (e) => {
     // Cmd/Ctrl/Alt + Enter
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey || e.altKey)) {
       e.stopPropagation();
@@ -94,8 +94,8 @@ export default class Parameters extends React.Component {
   applyChanges = () => {
     const { onValuesChange, disableUrlUpdate } = this.props;
     this.setState(({ parameters }) => {
-      const parametersWithPendingValues = parameters.filter(p => p.hasPendingValue);
-      forEach(parameters, p => p.applyPendingValue());
+      const parametersWithPendingValues = parameters.filter((p) => p.hasPendingValue);
+      forEach(parameters, (p) => p.applyPendingValue());
       if (!disableUrlUpdate) {
         updateUrl(parameters);
       }
@@ -106,7 +106,7 @@ export default class Parameters extends React.Component {
 
   showParameterSettings = (parameter, index) => {
     const { onParametersEdit } = this.props;
-    EditParameterSettingsDialog.showModal({ parameter }).onClose(updated => {
+    EditParameterSettingsDialog.showModal({ parameter }).onClose((updated) => {
       this.setState(({ parameters }) => {
         const updatedParameter = extend(parameter, updated);
         parameters[index] = createParameter(updatedParameter, updatedParameter.parentQueryId);

client/app/components/dashboards/TextboxDialog.jsx

@@ -27,7 +27,7 @@ function TextboxDialog({ dialog, isNew, ...props }) {
   }, 200);
 
   const handleInputChange = useCallback(
-    event => {
+    (event) => {
       setText(event.target.value);
       updatePreview();
     },

client/app/components/dashboards/dashboard-widget/TextboxWidget.jsx

@@ -13,7 +13,7 @@ function TextboxWidget(props) {
   const editTextBox = () => {
     TextboxDialog.showModal({
       text: widget.text,
-    }).onClose(newText => {
+    }).onClose((newText) => {
       widget.text = newText;
       setText(newText);
       return widget.save();

client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx

@@ -25,8 +25,8 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
   const widgetQueryResult = widget.getQueryResult();
   const isQueryResultEmpty = !widgetQueryResult || !widgetQueryResult.isEmpty || widgetQueryResult.isEmpty();
 
-  const downloadLink = fileType => widgetQueryResult.getLink(widget.getQuery().id, fileType);
-  const downloadName = fileType => widgetQueryResult.getName(widget.getQuery().name, fileType);
+  const downloadLink = (fileType) => widgetQueryResult.getLink(widget.getQuery().id, fileType);
+  const downloadName = (fileType) => widgetQueryResult.getName(widget.getQuery().name, fileType);
   return compact([
     <Menu.Item key="download_csv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
@@ -128,7 +128,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
   const updatedAt = invoke(widgetQueryResult, "getUpdatedAt");
   const [refreshClickButtonId, setRefreshClickButtonId] = useState();
 
-  const refreshWidget = buttonId => {
+  const refreshWidget = (buttonId) => {
     if (!refreshClickButtonId) {
       setRefreshClickButtonId(buttonId);
       onRefresh().finally(() => setRefreshClickButtonId(null));
@@ -227,7 +227,7 @@ class VisualizationWidget extends React.Component {
     EditParameterMappingsDialog.showModal({
       dashboard,
       widget,
-    }).onClose(valuesChanged => {
+    }).onClose((valuesChanged) => {
       // refresh widget if any parameter value has been updated
       if (valuesChanged) {
         onRefresh();

client/app/components/visualizations/EditVisualizationDialog.jsx

@@ -21,7 +21,7 @@ import { Renderer, Editor } from "@/components/visualizations/visualizationCompo
 import "./EditVisualizationDialog.less";
 
 function updateQueryVisualizations(query, visualization) {
-  const index = findIndex(query.visualizations, v => v.id === visualization.id);
+  const index = findIndex(query.visualizations, (v) => v.id === visualization.id);
   if (index > -1) {
     query.visualizations[index] = visualization;
   } else {
@@ -39,11 +39,11 @@ function saveVisualization(visualization) {
   }
 
   return Visualization.save(visualization)
-    .then(result => {
+    .then((result) => {
       notification.success("Visualization saved");
       return result;
     })
-    .catch(error => {
+    .catch((error) => {
       notification.error("Visualization could not be saved");
       return Promise.reject(error);
     });
@@ -139,7 +139,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
       options: visualizationOptions,
       query_id: query.id,
     });
-    saveVisualization(visualizationData).then(savedVisualization => {
+    saveVisualization(visualizationData).then((savedVisualization) => {
       updateQueryVisualizations(query, savedVisualization);
       dialog.close(savedVisualization);
     });
@@ -153,7 +153,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
   // When editing existing visualization chart type selector is disabled, so add only existing visualization's
   // descriptor there (to properly render the component). For new visualizations show all types except of deprecated
   const availableVisualizations = isNew
-    ? filter(sortBy(registeredVisualizations, ["name"]), vis => !vis.isDeprecated)
+    ? filter(sortBy(registeredVisualizations, ["name"]), (vis) => !vis.isDeprecated)
     : pick(registeredVisualizations, [type]);
 
   return (
@@ -180,7 +180,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
               disabled={!isNew}
               value={type}
               onChange={onTypeChanged}>
-              {map(availableVisualizations, vis => (
+              {map(availableVisualizations, (vis) => (
                 <Select.Option key={vis.type} data-test={"VisualizationType." + vis.type}>
                   {vis.name}
                 </Select.Option>
@@ -194,7 +194,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
               id="visualization-name"
               className="w-100"
               value={name}
-              onChange={event => onNameChanged(event.target.value)}
+              onChange={(event) => onNameChanged(event.target.value)}
             />
           </div>
           <div data-test="VisualizationEditor">

client/app/components/visualizations/VisualizationRenderer.jsx

@@ -13,8 +13,8 @@ function combineFilters(localFilters, globalFilters) {
     return localFilters;
   }
 
-  return map(localFilters, localFilter => {
-    const globalFilter = find(globalFilters, f => f.name === localFilter.name);
+  return map(localFilters, (localFilter) => {
+    const globalFilter = find(globalFilters, (f) => f.name === localFilter.name);
     if (globalFilter) {
       return {
         ...localFilter,
@@ -44,7 +44,7 @@ export default function VisualizationRenderer(props) {
   }, [props.filters]);
 
   const cleanColumnNames = useMemo(
-    () => map(data.columns, col => ({ ...col, name: getColumnCleanName(col.friendly_name) })),
+    () => map(data.columns, (col) => ({ ...col, name: getColumnCleanName(col.friendly_name) })),
     [data.columns]
   );
 

client/app/config/index.js

@@ -48,12 +48,12 @@ function registerExtensions() {
   const modules = context
     .keys()
     .map(context)
-    .map(module => module.default);
+    .map((module) => module.default);
 
   return modules
     .filter(isFunction)
-    .filter(f => f.init)
-    .map(f => f());
+    .filter((f) => f.init)
+    .map((f) => f());
 }
 
 requireImages();

client/app/pages/queries/VisualizationEmbed.jsx

@@ -159,12 +159,12 @@ function VisualizationEmbed({ queryId, visualizationId, apiKey, onError }) {
   useEffect(() => {
     let isCancelled = false;
     Query.get({ id: queryId })
-      .then(result => {
+      .then((result) => {
         if (!isCancelled) {
           setQuery(result);
         }
       })
-      .catch(error => onErrorRef.current(error));
+      .catch((error) => onErrorRef.current(error));
 
     return () => {
       isCancelled = true;
@@ -177,10 +177,10 @@ function VisualizationEmbed({ queryId, visualizationId, apiKey, onError }) {
       setRefreshStartedAt(moment());
       query
         .getQueryResultPromise()
-        .then(result => {
+        .then((result) => {
           setQueryResults(result);
         })
-        .catch(err => {
+        .catch((err) => {
           setError(err.getError());
         })
         .finally(() => setRefreshStartedAt(null));
@@ -203,7 +203,7 @@ function VisualizationEmbed({ queryId, visualizationId, apiKey, onError }) {
 
   const showQueryDescription = has(location.search, "showDescription");
   visualizationId = parseInt(visualizationId, 10);
-  const visualization = find(query.visualizations, vis => vis.id === visualizationId);
+  const visualization = find(query.visualizations, (vis) => vis.id === visualizationId);
 
   if (!visualization) {
     // call error handler async, otherwise it will destroy the component on render phase
@@ -266,6 +266,6 @@ VisualizationEmbed.defaultProps = {
 
 export default routeWithApiKeySession({
   path: "/embed/query/:queryId/visualization/:visualizationId",
-  render: pageProps => <VisualizationEmbed {...pageProps} />,
+  render: (pageProps) => <VisualizationEmbed {...pageProps} />,
   getApiKey: () => location.search.api_key,
 });

client/app/services/widget.js

@@ -147,12 +147,12 @@ class Widget {
 
       this.queryResult
         .toPromise()
-        .then(result => {
+        .then((result) => {
           this.loading = false;
           this.data = result;
           return result;
         })
-        .catch(error => {
+        .catch((error) => {
           this.loading = false;
           this.data = error;
           return error;
@@ -173,7 +173,7 @@ class Widget {
       url = `${url}/${this.id}`;
     }
 
-    return axios.post(url, data).then(data => {
+    return axios.post(url, data).then((data) => {
       each(data, (v, k) => {
         this[k] = v;
       });
@@ -202,8 +202,8 @@ class Widget {
 
     const localTypes = [Widget.MappingType.WidgetLevel, Widget.MappingType.StaticValue];
     return map(
-      filter(params, param => localTypes.indexOf(mappings[param.name].type) >= 0),
-      param => {
+      filter(params, (param) => localTypes.indexOf(mappings[param.name].type) >= 0),
+      (param) => {
         const mapping = mappings[param.name];
         const result = cloneParameter(param);
         result.title = mapping.title || param.title;
@@ -227,7 +227,7 @@ class Widget {
     const existingParams = {};
     // textboxes does not have query
     const params = this.getQuery() ? this.getQuery().getParametersDefs(false) : [];
-    each(params, param => {
+    each(params, (param) => {
       existingParams[param.name] = true;
       if (!isObject(this.options.parameterMappings[param.name])) {
         // "migration" for old dashboards: parameters with `global` flag
@@ -244,15 +244,15 @@ class Widget {
 
     // Remove mappings for parameters that do not exists anymore
     const removedParams = difference(keys(this.options.parameterMappings), keys(existingParams));
-    each(removedParams, name => {
+    each(removedParams, (name) => {
       delete this.options.parameterMappings[name];
     });
 
     return this.options.parameterMappings;
   }
 
   getLocalParameters() {
-    return filter(this.getParametersDefs(), param => !this.isStaticParam(param));
+    return filter(this.getParametersDefs(), (param) => !this.isStaticParam(param));
   }
 }