Merge pull request #466 from zenml-io/dev

Dev

Author: Cahllagerfeld

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
         run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.20.0
+          node-version: 18.16.0
       - name: Install yarn
         run: npm install --global yarn
       - name: Build

.gitignore

@@ -110,6 +110,9 @@ build/
 # TernJS port file
 .tern-port
 
+# IntelliJ IDE directories
+.idea/
+
 !.env
 
 build

README.md

@@ -106,7 +106,7 @@ The app takes the following env variables:
 REACT_APP_BASE_API_URL="<YOUR_ZENML_SERVER_DEPOLOYMENT_URL>/api/v1"
 ```
 
-To learn how to get the `YOUR_ZENML_SERVER_DEPOLOYMENT_URL`, read the [deployment guide](https://docs.zenml.io/platform-guide/set-up-your-mlops-platform/deploy-zenml).
+To learn how to get the `YOUR_ZENML_SERVER_DEPOLOYMENT_URL`, read the [deployment guide](https://docs.zenml.io/user-guide/starter-guide/switch-to-production).
 
 Lastly, if you would like to use Docker, then the ZenML team provides [DockerHub] images to serve the ZenML Server and Dashboard in one image:
 
@@ -122,7 +122,7 @@ The ZenML Dashboard is a Javascript React-based application that lives inside th
 
 > **Note** - The ZenML Dashboard is meant to be used with the ZenML Server as a backend and cannot be used standalone.
 
-The dashboard build files come bundled into the [ZenML PyPi package](https://pypi.org/workspace/zenml/) and can be [served locally](https://docs.zenml.io/platform-guide/set-up-your-mlops-platform/deploy-zenml/deploy-with-zenml-cli) and/or [deployed on the cloud](https://docs.zenml.io) through the main ZenML python package.
+The dashboard build files come bundled into the [ZenML PyPi package](https://pypi.org/workspace/zenml/) and can be [served locally](https://docs.zenml.io/user-guide/starter-guide#explore-the-dashboard) and/or [deployed on the cloud](https://docs.zenml.io) through the main ZenML python package.
 
 Basically, each ZenML `Python` package comes with the build files (generated by `yarn build`) of a certain version of this dashboard (all build files of the dashboard can be seen in the [releases](https://github.com/zenml-io/zenml-dashboard/releases) section of this GitHub repo). Therefore, each ZenML PyPi package has bundled in it a corresponding version of this dashboard.
 
@@ -144,7 +144,7 @@ You can deploy this dashboard on supported cloud providers with ZenML python pac
 zenml deploy
 ```
 
-The above command deploys the dashboard in the [same process as the ZenML Server](https://docs.zenml.io/platform-guide/set-up-your-mlops-platform/deploy-zenml), and automates a lot of the nitty gritties for you.
+The above command deploys the dashboard in the [same process as the ZenML Server](https://docs.zenml.io/user-guide/starter-guide/switch-to-production), and automates a lot of the nitty gritties for you.
 
 However, the option to deploy standalone is also available. `yarn build` creates a build directory with a production build of the dashboard. Set up your favorite HTTP server so that a visitor to your site is served index.html. Here are [8 ways to deploy a React app for free](https://blog.logrocket.com/8-ways-deploy-react-app-free/) as a starting point.
 

package.json

@@ -1,20 +1,13 @@
 {
   "name": "web",
-  "version": "0.1.0",
+  "version": "0.10.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.5",
-    "@stripe/react-stripe-js": "^1.1.2",
-    "@stripe/stripe-js": "^1.9.0",
     "@table-library/react-table-library": "^4.0.23",
-    "@testing-library/dom": "^7.21.7",
     "@testing-library/jest-dom": "^5.11.2",
-    "@testing-library/react": "^10.4.7",
-    "@testing-library/user-event": "^12.1.0",
     "@types/classnames": "^2.2.10",
-    "@types/country-list": "^2.1.0",
     "@types/dagre": "^0.7.48",
-    "@types/jest": "^26.0.8",
     "@types/node": "^14.0.27",
     "@types/papaparse": "^5.3.7",
     "@types/react": "^16.9.44",
@@ -23,20 +16,15 @@
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
-    "@types/react-scroll": "^1.5.5",
     "@types/react-syntax-highlighter": "^11.0.4",
     "@types/react-vis": "^1.11.11",
     "@types/redux-logger": "^3.0.8",
-    "@types/styled-components": "^5.1.26",
     "axios": "^0.19.2",
     "axios-mock-adapter": "^1.18.2",
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
-    "country-list": "^2.2.0",
     "dagre": "^0.8.5",
     "date-fns": "^2.15.0",
-    "eslint-import-resolver-babel-module": "^5.1.2",
-    "eslint-plugin-react-hooks": "^4.0.8",
     "framer-motion": "^2.3.0",
     "i18next": "^19.6.3",
     "i18next-browser-languagedetector": "^5.0.0",
@@ -45,7 +33,6 @@
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
-    "node-sass": "^4.14.1",
     "papaparse": "^5.4.1",
     "query-string": "^6.13.1",
     "react": "^16.13.1",
@@ -64,21 +51,18 @@
     "react-select": "^5.7.0",
     "react-syntax-highlighter": "^13.3.1",
     "react-tooltip": "^4.2.10",
-    "react-tooltip-lite": "^1.12.0",
     "react-vis": "^1.11.12",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
-    "redux-saga-test-plan": "^4.0.0-rc.3",
     "reselect": "^4.0.0",
-    "styled-components": "^5.3.6",
     "typescript": "^3.9.7"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --maxWorkers=4",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
+    "test": "react-scripts --openssl-legacy-provider test --maxWorkers=4",
     "eject": "react-scripts eject",
     "lint": "eslint './src/**/*.ts*'",
     "fix-lint": "eslint './src/**/*.ts*' --fix",
@@ -107,17 +91,12 @@
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
     "autoprefixer": "^10.4.8",
-    "babel-plugin-inline-react-svg": "^1.1.1",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
-    "eslint-plugin-redux-saga": "^1.1.3",
     "husky": "^8.0.0",
-    "postcss": "^8.4.16",
     "prettier": "^2.0.5",
-    "react-hooks-testing-library": "^0.6.0",
-    "react-test-renderer": "^16.13.1"
+    "sass": "^1.66.1"
   },
   "engines": {
     "npm": ">=6.14.17",

src/api/connectors/getConnectorByIdApi.spec.ts

@@ -16,10 +16,9 @@ const pipelineId = 'runId';
 
 describe('getconnectorByIdApi', () => {
   it('calls fetch api with correct params', () => {
-    // getconnectorByIdApi({ authenticationToken, pipelineId });
     expect(mockFetchApiWithAuthRequest).toHaveBeenCalledWith({
       method: httpMethods.get,
-      url: apiUrl(endpoints.connectors.get(pipelineId)),
+      url: apiUrl(endpoints.Connectors.get(pipelineId)),
       authenticationToken,
     });
   });

src/api/connectors/getConnectorComponentsApi.ts

@@ -12,7 +12,7 @@ const getConnectorComponentsApi = ({
   size,
   name,
   filtersParam,
-  // id,
+
   authenticationToken,
 }: {
   connector_id?: string;
@@ -23,7 +23,7 @@ const getConnectorComponentsApi = ({
   size: number;
   name?: string;
   filtersParam?: object;
-  // id?: any;
+
   authenticationToken: string;
 }): Promise<any> =>
   fetchApiWithAuthRequest({
@@ -36,7 +36,6 @@ const getConnectorComponentsApi = ({
       size,
       name,
       ...filtersParam,
-      // id,
     },
     method: httpMethods.get,
     authenticationToken,

src/api/connectors/getConnectorsTypesApi.ts

@@ -12,7 +12,7 @@ const getConnectorsTypesApi = ({
   size,
   connector_type,
   filtersParam,
-  // id,
+
   authenticationToken,
 }: {
   component_id?: any;
@@ -23,7 +23,7 @@ const getConnectorsTypesApi = ({
   size: number;
   connector_type?: string;
   filtersParam?: object;
-  // id?: any;
+
   authenticationToken: string;
 }): Promise<any> =>
   fetchApiWithAuthRequest({
@@ -36,7 +36,6 @@ const getConnectorsTypesApi = ({
       size,
       connector_type,
       ...filtersParam,
-      // id,
     },
     method: httpMethods.get,
     authenticationToken,

src/api/connectors/getMyConnectorsApi.spec.ts

@@ -15,10 +15,9 @@ const authenticationToken = 'token';
 
 describe('getMyconnectorsApi', () => {
   it('calls fetch api with correct params', () => {
-    // getMyconnectorsApi({ authenticationToken });
     expect(mockFetchApiWithAuthRequest).toHaveBeenCalledWith({
       method: httpMethods.get,
-      url: apiUrl(endpoints.connectors.my),
+      url: apiUrl(endpoints.Connectors.my),
       authenticationToken,
     });
   });

src/api/connectors/getMyConnectorsApi.ts

@@ -12,7 +12,7 @@ const getMyConnectorsApi = ({
   size,
   name,
   filtersParam,
-  // id,
+
   authenticationToken,
 }: {
   component_id?: any;
@@ -23,7 +23,7 @@ const getMyConnectorsApi = ({
   size: number;
   name?: string;
   filtersParam?: object;
-  // id?: any;
+
   authenticationToken: string;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
@@ -36,7 +36,6 @@ const getMyConnectorsApi = ({
       size,
       name,
       ...filtersParam,
-      // id,
     },
     method: httpMethods.get,
     authenticationToken,

src/api/constants.ts

@@ -8,6 +8,3 @@ export const httpMethods = {
 
 export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL as string;
 export const HUB_API_URL = process.env.REACT_APP_HUB_API_URL as string;
-
-// https://appserver.zenml.io/api/v1
-// http://localhost:8080/api/v1