ci: move storybook related packages to top level (flyteorg#434)

* ci: move storybook related packages to top level * ci: ensure that lint can be run in PR checks * ci: allow to run tests linux setup Signed-off-by: Nastya Rusina <[email protected]>
eapolinario · May 18, 2022 · 133038a · 133038a
1 parent caaf5c2
commit 133038a
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 414 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -85,6 +85,7 @@ module.exports = {
     'no-await-in-loop': 'off',
     'no-undef-init': 'off',
     'no-unneeded-ternary': 'off',
+    'no-underscore-dangle': 'off',
     'prefer-object-spread': 'off',
     'prefer-template': 'off',
     'default-case': 'off',

diff --git a/package.json b/package.json
@@ -16,11 +16,13 @@
     ],
     "scripts": {
         "start": "yarn workspace @flyteconsole/client-app start",
-        "build:prod": "yarn workspace @flyteconsole/client-app build:prod",
         "start:prod": "yarn workspace @flyteconsole/client-app start:prod",
+        "build:prod": "yarn workspace @flyteconsole/client-app build:prod",
+        "build:storybook": "build-storybook",
+        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
         "storybook": "start-storybook -p 6006",
-        "test": "pushd packages/zapp/console && yarn test && popd",
-        "test-coverage": "pushd packages/zapp/console && yarn test-coverage && popd"
+        "test": "cd packages/zapp/console && yarn test && cd ../../../",
+        "test-coverage": "bash -c 'pushd packages/zapp/console && yarn test-coverage && popd'"
     },
     "husky": {
         "hooks": {
@@ -41,53 +43,8 @@
             "git add"
         ]
     },
-    "dependencies": {
-        "@rjsf/core": "^3.2.1",
-        "@rjsf/material-ui": "^3.2.1",
-        "babel-polyfill": "^6.26.0",
-        "cache": "^2.1.0",
-        "chalk": "^2.0.1",
-        "chart.js": "^3.6.2",
-        "chartjs-plugin-datalabels": "^2.0.0",
-        "cookie-parser": "^1.4.3",
-        "dagre-d3": "^0.6.4",
-        "dotenv": "^5.0.1",
-        "express": "^4.14.0",
-        "express-static-gzip": "^0.3.2",
-        "fuzzysort": "^1.1.1",
-        "js-yaml": "^3.13.1",
-        "lodash": "^4.17.21",
-        "morgan": "^1.8.2",
-        "react-chartjs-2": "^4.0.0",
-        "react-flow-renderer": "10.1.1",
-        "react-ga4": "^1.4.1",
-        "react-responsive": "^4.1.0",
-        "react-transition-group": "^2.3.1",
-        "serve-static": "^1.12.3",
-        "tslib": "^1.9.0"
-    },
+    "dependencies": {},
     "devDependencies": {
-        "@babel/cli": "~7.16.0",
-        "@babel/core": "~7.16.12",
-        "@babel/plugin-proposal-class-properties": "~7.16.7",
-        "@babel/plugin-proposal-decorators": "~7.16.7",
-        "@babel/plugin-proposal-object-rest-spread": "~7.16.7",
-        "@babel/preset-env": "~7.16.11",
-        "@babel/preset-react": "~7.16.7",
-        "@babel/preset-typescript": "~7.16.7",
-        "@commitlint/cli": "^8.3.5",
-        "@commitlint/config-conventional": "^8.3.4",
-        "@date-io/moment": "1.3.9",
-        "@flyteorg/flyteidl": "1.1.0",
-        "@material-ui/core": "^4.0.0",
-        "@material-ui/icons": "^4.0.0",
-        "@material-ui/pickers": "^3.2.2",
-        "@semantic-release/changelog": "^5.0.1",
-        "@semantic-release/commit-analyzer": "^8.0.1",
-        "@semantic-release/git": "^9.0.0",
-        "@semantic-release/github": "^7.0.5",
-        "@semantic-release/npm": "^7.0.5",
-        "@semantic-release/release-notes-generator": "^9.0.1",
         "@storybook/addon-actions": "^6.4.19",
         "@storybook/addon-essentials": "^6.4.19",
         "@storybook/addon-interactions": "^6.4.19",
@@ -96,114 +53,6 @@
         "@storybook/manager-webpack5": "^6.4.19",
         "@storybook/react": "^6.4.19",
         "@storybook/testing-library": "^0.0.9",
-        "@testing-library/jest-dom": "^5.5.0",
-        "@testing-library/react": "^10.0.3",
-        "@testing-library/react-hooks": "^7.0.2",
-        "@types/cheerio": "^0.22.2",
-        "@types/d3-shape": "^1.2.6",
-        "@types/debug": "^0.0.30",
-        "@types/dom-helpers": "^3.4.1",
-        "@types/express": "^4.17.2",
-        "@types/jest": "^26.0.0",
-        "@types/js-yaml": "^3.10.1",
-        "@types/linkify-it": "^2.1.0",
-        "@types/lodash": "^4.14.68",
-        "@types/long": "^3.0.32",
-        "@types/lossless-json": "^1.0.0",
-        "@types/memoize-one": "^4.1.0",
-        "@types/memory-fs": "^0.3.0",
-        "@types/moment-timezone": "^0.5.13",
-        "@types/node": "^14.18.12",
-        "@types/object-hash": "^1.2.0",
-        "@types/pure-render-decorator": "^0.2.27",
-        "@types/react": "^16.9.34",
-        "@types/react-dom": "^16.9.7",
-        "@types/react-hot-loader": "^3.0.3",
-        "@types/react-json-tree": "^0.6.8",
-        "@types/react-responsive": "^3.0.1",
-        "@types/react-router-dom": "^4.3.2",
-        "@types/react-test-renderer": "^16.9.0",
-        "@types/react-virtualized": "^9.21.4",
-        "@types/serve-static": "^1.7.31",
-        "@types/shallowequal": "^0.2.3",
-        "@types/webpack-hot-middleware": "^2.25.6",
-        "@typescript-eslint/eslint-plugin": "^5.15.0",
-        "@typescript-eslint/parser": "^5.15.0",
-        "@xstate/react": "^1.0.0",
-        "autoprefixer": "^8.3.0",
-        "axios": "^0.21.2",
-        "axios-mock-adapter": "^1.16.0",
-        "babel-core": "^7.0.0-0",
-        "babel-jest": "^26.0.0",
-        "babel-loader": "^8.2.3",
-        "camelcase-keys": "^6.1.1",
-        "classnames": "^2.3.1",
-        "compression-webpack-plugin": "^9.2.0",
-        "contrast": "^1.0.1",
-        "copy-to-clipboard": "^3.0.8",
-        "cronstrue": "^1.31.0",
-        "d3-dag": "^0.3.4",
-        "d3-shape": "^1.2.2",
-        "debug": "^3.1.0",
-        "dom-helpers": "^3.4.0",
-        "eslint": "^8.11.0",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.29.4",
-        "eslint-plugin-react-hooks": "^4.3.0",
-        "favicons": "^6.2.0",
-        "favicons-webpack-plugin": "^5.0.2",
-        "fork-ts-checker-webpack-plugin": "^7.2.1",
-        "html-webpack-plugin": "^5.5.0",
-        "husky": "^4.2.5",
-        "intersection-observer": "^0.7.0",
-        "jest": "^26.0.0",
-        "linkify-it": "^2.2.0",
-        "lint-staged": "^7.0.4",
-        "lossless-json": "^1.0.3",
-        "memoize-one": "^5.0.0",
-        "moment": "^2.29.2",
-        "moment-timezone": "^0.5.28",
-        "msw": "^0.24.1",
-        "notistack": "^1.0.10",
-        "object-hash": "^1.3.1",
-        "prettier": "^2.5.1",
-        "protobufjs": "~6.8.0",
-        "query-string": "^6.5.0",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1",
-        "react-hot-loader": "^4.1.2",
-        "react-intersection-observer": "^8.25.1",
-        "react-json-tree": "^0.11.0",
-        "react-loading-skeleton": "^1.1.2",
-        "react-query": "^3.3.0",
-        "react-query-devtools": "^3.0.0-beta",
-        "react-router": "^5.0.1",
-        "react-router-dom": "^5.0.1",
-        "react-test-renderer": "^16.9.0",
-        "react-virtualized": "^9.21.1",
-        "resolve-url-loader": "^5.0.0",
-        "semantic-release": "^17.2.3",
-        "shallowequal": "^1.1.0",
-        "snakecase-keys": "^3.1.0",
-        "source-map-loader": "^3.0.1",
-        "ts-jest": "^26.3.0",
-        "ts-loader": "^9.2.6",
-        "ts-node": "^8.0.2",
-        "typescript": "^4.6.2",
-        "url-search-params": "^0.10.0",
-        "use-react-router": "^1.0.7",
-        "webpack": "^5.68.0",
-        "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "^4.8.1",
-        "webpack-merge": "^5.8.0",
-        "webpack-node-externals": "^3.0.0",
-        "webpack-stats-plugin": "^1.0.3",
-        "xstate": "^4.11.0"
-    },
-    "resolutions": {
-        "micromatch": "^4.0.0"
+        "react-hot-loader": "^4.1.2"
     }
 }
diff --git a/packages/plugins/components/package.json b/packages/plugins/components/package.json
@@ -20,13 +20,13 @@
         "@material-ui/icons": "^4.0.0"
     },
     "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
     },
     "devDependencies": {
-        "@types/react": "^17.0.39",
-        "@types/react-dom": "^17.0.11",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "@types/react": "^16.9.34",
+        "@types/react-dom": "^16.9.7",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
     }
 }
diff --git a/packages/zapp/console/package.json b/packages/zapp/console/package.json
@@ -12,10 +12,8 @@
         "prebuild": "yarn run clean",
         "build": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --config webpack.dev.config.ts --mode=development",
         "build:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' NODE_ENV=production webpack --config webpack.prod.config.ts --mode=production --progress",
-        "build:storybook": "build-storybook",
         "start": "webpack serve --open --config webpack.dev.config.ts --hot",
         "start:prod": "NODE_ENV=production node -r dotenv/config index.js",
-        "storybook": "pushd ../../../ && start-storybook -p 6006 && popd",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
         "format": "prettier --ignore-path .eslintignore --write \"**/*.+(js|jsx|ts|tsx|json)\"",
         "fix": "yarn lint --fix && yarn format",
@@ -51,7 +49,6 @@
         "react-chartjs-2": "^4.0.0",
         "react-flow-renderer": "10.1.1",
         "react-ga4": "^1.4.1",
-        "react-responsive": "^4.1.0",
         "react-transition-group": "^2.3.1",
         "serve-static": "^1.12.3",
         "tslib": "^1.9.0"
@@ -78,14 +75,6 @@
         "@semantic-release/github": "^7.0.5",
         "@semantic-release/npm": "^7.0.5",
         "@semantic-release/release-notes-generator": "^9.0.1",
-        "@storybook/addon-actions": "^6.4.19",
-        "@storybook/addon-essentials": "^6.4.19",
-        "@storybook/addon-interactions": "^6.4.19",
-        "@storybook/addon-links": "^6.4.19",
-        "@storybook/builder-webpack5": "^6.4.19",
-        "@storybook/manager-webpack5": "^6.4.19",
-        "@storybook/react": "^6.4.19",
-        "@storybook/testing-library": "^0.0.9",
         "@testing-library/jest-dom": "^5.5.0",
         "@testing-library/react": "^10.0.3",
         "@testing-library/react-hooks": "^7.0.2",
@@ -108,11 +97,7 @@
         "@types/pure-render-decorator": "^0.2.27",
         "@types/react": "^16.9.34",
         "@types/react-dom": "^16.9.7",
-        "@types/react-hot-loader": "^3.0.3",
-        "@types/react-json-tree": "^0.6.8",
-        "@types/react-responsive": "^3.0.1",
         "@types/react-router-dom": "^4.3.2",
-        "@types/react-test-renderer": "^16.9.0",
         "@types/react-virtualized": "^9.21.4",
         "@types/serve-static": "^1.7.31",
         "@types/shallowequal": "^0.2.3",
@@ -166,13 +151,11 @@
         "react-dom": "^16.13.1",
         "react-hot-loader": "^4.1.2",
         "react-intersection-observer": "^8.25.1",
-        "react-json-tree": "^0.11.0",
         "react-loading-skeleton": "^1.1.2",
         "react-query": "^3.3.0",
         "react-query-devtools": "^3.0.0-beta",
         "react-router": "^5.0.1",
         "react-router-dom": "^5.0.1",
-        "react-test-renderer": "^16.9.0",
         "react-virtualized": "^9.21.1",
         "resolve-url-loader": "^5.0.0",
         "semantic-release": "^17.2.3",

diff --git a/packages/zapp/console/src/components/common/ContentContainer.tsx b/packages/zapp/console/src/components/common/ContentContainer.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import { contentContainerId } from 'common/constants';
@@ -7,9 +8,6 @@ import {
   navbarGridHeight,
   sideNavGridWidth,
 } from 'common/layout';
-import * as React from 'react';
-import { detailsPanelWidth } from './constants';
-import { DetailsPanel } from './DetailsPanel';
 import { ErrorBoundary } from './ErrorBoundary';
 
 enum ContainerClasses {
@@ -36,9 +34,6 @@ const useStyles = makeStyles((theme: Theme) => {
         margin: '0 auto',
         maxWidth: theme.spacing(maxContainerGridWidth),
       },
-      [`&.${ContainerClasses.WithDetailsPanel}`]: {
-        paddingRight: 0,
-      },
       [`&.${ContainerClasses.WithSideNav}`]: {
         marginLeft: theme.spacing(sideNavGridWidth),
       },
@@ -73,26 +68,19 @@ export const ContentContainer: React.FC<ContentContainerProps> = (props) => {
     noMargin = false,
     className: additionalClassName,
     children,
-    detailsPanel = false,
     sideNav = false,
     ...restProps
   } = props;
 
   const className = classnames(styles.root, additionalClassName, {
     [ContainerClasses.Centered]: center,
     [ContainerClasses.NoMargin]: noMargin,
-    [ContainerClasses.WithDetailsPanel]: detailsPanel,
     [ContainerClasses.WithSideNav]: sideNav,
   });
 
-  const marginRight = detailsPanel ? detailsPanelWidth : 'auto';
-
   return (
-    <>
-      <div {...restProps} className={className} id={contentContainerId} style={{ marginRight }}>
-        <ErrorBoundary>{children}</ErrorBoundary>
-      </div>
-      {detailsPanel && <DetailsPanel />}
-    </>
+    <div {...restProps} className={className} id={contentContainerId}>
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </div>
   );
 };
diff --git a/packages/zapp/console/src/components/common/test/ContentContainer.spec.tsx b/packages/zapp/console/src/components/common/test/ContentContainer.spec.tsx