Separate visualizations into their own package (#4837)

* Add visualizations project settings

* Move visualizations to redash-visualizations

* Delete shared components

* Remove antd from deps

* Remove p-r-5 from table utils

* Remove visualization deps from package.json

* Rename package and change its version

* Test preinstall script

* Update Dockerfile build for frontend

* Test adding dockerignore

* Update jest tests

* Add step for jest tests

* Include viz-lib on dev commands

* User prettier v1 for now

* Delete unused libs on the app

* Add readme draft (to be finished)

* Add getOptions to Editor

* Add required libraries and finish basic example

* Bump version

.circleci/config.yml

@@ -76,7 +76,12 @@ jobs:
       - run: sudo pip3 install -r requirements_bundles.txt
       - run: npm ci
       - run: npm run bundle
-      - run: npm test
+      - run:
+          name: Run App Tests
+          command: npm test
+      - run:
+          name: Run Visualizations Tests
+          command: (cd viz-lib && npm test)
       - run: npm run lint
   frontend-e2e-tests:
     environment:

.dockerignore

@@ -1,6 +1,7 @@
 client/.tmp/
 client/dist/
 node_modules/
+viz-lib/node_modules/
 .tmp/
 .venv/
 venv/

Dockerfile

@@ -2,7 +2,8 @@ FROM node:12 as frontend-builder
 
 WORKDIR /frontend
 COPY package.json package-lock.json /frontend/
-RUN npm ci
+COPY viz-lib /frontend/viz-lib
+RUN npm ci --unsafe-perm
 
 COPY client /frontend/client
 COPY webpack.config.js /frontend/

client/app/components/ApplicationArea/Router.jsx

@@ -2,7 +2,7 @@ import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
 import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import UniversalRouter from "universal-router";
-import ErrorBoundary from "@/components/ErrorBoundary";
+import ErrorBoundary from "@redash/viz/lib/components/ErrorBoundary";
 import location from "@/services/location";
 import url from "@/services/url";
 

client/app/components/ApplicationArea/routeWithApiKeySession.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext } from "react";
 import PropTypes from "prop-types";
-import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
+import { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
 import { Auth } from "@/services/auth";
 
 // This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object

client/app/components/ApplicationArea/routeWithUserSession.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import ErrorBoundary, { ErrorBoundaryContext } from "@/components/ErrorBoundary";
+import ErrorBoundary, { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
 import { Auth } from "@/services/auth";
 import organizationStatus from "@/services/organizationStatus";
 import ApplicationHeader from "./ApplicationHeader";

client/app/components/Parameters.jsx

@@ -1,7 +1,7 @@
 import { size, filter, forEach, extend } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
-import { SortableContainer, SortableElement, DragHandle } from "@/components/sortable";
+import { SortableContainer, SortableElement, DragHandle } from "@redash/viz/lib/components/sortable";
 import location from "@/services/location";
 import { Parameter, createParameter } from "@/services/parameters";
 import ParameterApplyButton from "@/components/ParameterApplyButton";

client/app/components/QueryLink.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { VisualizationType } from "@/visualizations/prop-types";
+import { VisualizationType } from "@redash/viz/lib";
 import VisualizationName from "@/components/visualizations/VisualizationName";
 
 import "./QueryLink.less";

client/app/components/dashboards/TextboxDialog.jsx

@@ -7,7 +7,7 @@ import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import Tooltip from "antd/lib/tooltip";
 import Divider from "antd/lib/divider";
-import HtmlContent from "@/components/HtmlContent";
+import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
 import notification from "@/services/notification";
 

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { markdown } from "markdown";
 import Menu from "antd/lib/menu";
-import HtmlContent from "@/components/HtmlContent";
+import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import TextboxDialog from "@/components/dashboards/TextboxDialog";
 import Widget from "./Widget";
 

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

@@ -4,10 +4,10 @@ import { compact, isEmpty, invoke } from "lodash";
 import { markdown } from "markdown";
 import cx from "classnames";
 import Menu from "antd/lib/menu";
+import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import { currentUser } from "@/services/auth";
 import recordEvent from "@/services/recordEvent";
 import { formatDateTime } from "@/lib/utils";
-import HtmlContent from "@/components/HtmlContent";
 import Parameters from "@/components/Parameters";
 import TimeAgo from "@/components/TimeAgo";
 import Timer from "@/components/Timer";

client/app/components/visualizations/EditVisualizationDialog.jsx

@@ -10,12 +10,13 @@ import notification from "@/services/notification";
 import Visualization from "@/services/visualization";
 import recordEvent from "@/services/recordEvent";
 import getQueryResultData from "@/lib/getQueryResultData";
-import { VisualizationType } from "@/visualizations/prop-types";
-import { Renderer, Editor } from "@/components/visualizations/visualizationComponents";
-import registeredVisualizations, {
+import {
+  registeredVisualizations,
   getDefaultVisualization,
   newVisualization,
-} from "@/visualizations/registeredVisualizations";
+  VisualizationType,
+} from "@redash/viz/lib";
+import { Renderer, Editor } from "@/components/visualizations/visualizationComponents";
 
 import "./EditVisualizationDialog.less";
 

client/app/components/visualizations/VisualizationName.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { VisualizationType } from "@/visualizations/prop-types";
-import registeredVisualizations from "@/visualizations/registeredVisualizations";
+import { VisualizationType, registeredVisualizations } from "@redash/viz/lib";
 
 import "./VisualizationName.less";
 

client/app/components/visualizations/VisualizationRenderer.jsx

@@ -3,7 +3,7 @@ import React, { useState, useMemo, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import getQueryResultData from "@/lib/getQueryResultData";
 import Filters, { FiltersType, filterData } from "@/components/Filters";
-import { VisualizationType } from "@/visualizations/prop-types";
+import { VisualizationType } from "@redash/viz/lib";
 import { Renderer } from "@/components/visualizations/visualizationComponents";
 
 function combineFilters(localFilters, globalFilters) {

client/app/components/visualizations/visualizationComponents.jsx

@@ -1,12 +1,11 @@
 import React from "react";
 import { pick } from "lodash";
 import HelpTrigger from "@/components/HelpTrigger";
-import { Renderer as VisRenderer, Editor as VisEditor } from "@/visualizations";
-import { updateVisualizationsSettings } from "@/visualizations/visualizationsSettings";
+import { Renderer as VisRenderer, Editor as VisEditor, updateVisualizationsSettings } from "@redash/viz/lib";
 import { clientConfig } from "@/services/auth";
 
-import countriesDataUrl from "@/visualizations/choropleth/maps/countries.geo.json";
-import subdivJapanDataUrl from "@/visualizations/choropleth/maps/japan.prefectures.geo.json";
+import countriesDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/countries.geo.json";
+import subdivJapanDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/japan.prefectures.geo.json";
 
 function wrapComponentWithSettings(WrappedComponent) {
   return function VisualizationComponent(props) {

client/app/config/index.js

@@ -7,7 +7,7 @@ import url from "@/services/url";
 import "@/assets/images/avatar.svg";
 
 // Register visualizations
-import "@/visualizations";
+import "@redash/viz/lib";
 
 import "./antd-spinner";
 

client/app/pages/queries/VisualizationEmbed.jsx

@@ -8,19 +8,19 @@ import Dropdown from "antd/lib/dropdown";
 import Icon from "antd/lib/icon";
 import Menu from "antd/lib/menu";
 import Tooltip from "antd/lib/tooltip";
+import HtmlContent from "@redash/viz/lib/components/HtmlContent";
 import routeWithApiKeySession from "@/components/ApplicationArea/routeWithApiKeySession";
 import { Query } from "@/services/query";
 import location from "@/services/location";
 import { formatDateTime } from "@/lib/utils";
-import HtmlContent from "@/components/HtmlContent";
 import Parameters from "@/components/Parameters";
 import { Moment } from "@/components/proptypes";
 import TimeAgo from "@/components/TimeAgo";
 import Timer from "@/components/Timer";
 import QueryResultsLink from "@/components/EditVisualizationButton/QueryResultsLink";
 import VisualizationName from "@/components/visualizations/VisualizationName";
 import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
-import { VisualizationType } from "@/visualizations/prop-types";
+import { VisualizationType } from "@redash/viz/lib";
 import logoUrl from "@/assets/images/redash_icon_small.png";
 
 function VisualizationEmbedHeader({ queryName, queryDescription, visualization }) {

client/app/services/widget.js

@@ -4,7 +4,7 @@ import { each, pick, extend, isObject, truncate, keys, difference, filter, map,
 import location from "@/services/location";
 import { cloneParameter } from "@/services/parameters";
 import dashboardGridOptions from "@/config/dashboard-grid-options";
-import registeredVisualizations from "@/visualizations/registeredVisualizations";
+import { registeredVisualizations } from "@redash/viz/lib";
 import { Query } from "./query";
 
 export const WidgetTypeEnum = {