Mirkan1/cypress

.circleci/Dockerfile.cypress

@@ -1,12 +1,18 @@
 FROM cypress/browsers:chrome67
+# FROM cypress/browsers:node16.13.0-chrome95-ff94
+
+# Install libnss3
+RUN apt-get update && apt-get install libgtk2.0-0t64 libgtk-3-0t64 libgbm-dev libnotify-dev libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb \
+    && rm -rf /var/lib/apt/lists/*
 
 ENV APP /usr/src/app
 WORKDIR $APP
 
 COPY package.json $APP/package.json
-RUN npm run cypress:install > /dev/null
+COPY viz-lib $APP/viz-lib
+COPY plywood $APP/plywood
+COPY client $APP/client
 
-COPY client/cypress $APP/client/cypress
-COPY cypress.json $APP/cypress.json
+COPY . $APP
 
 RUN ./node_modules/.bin/cypress verify

Dockerfile

@@ -1,18 +1,21 @@
-FROM node:14.17 AS frontend-builder
+FROM node:16.20 AS frontend-builder
 
 # Controls whether to build the frontend assets
 ARG skip_frontend_build
 
+RUN useradd -m -d /frontend datareporter
+USER datareporter
+
 WORKDIR /frontend
-COPY bin/build_frontend.sh .
-COPY client/ /frontend/client
-COPY viz-lib/ /frontend/viz-lib
-COPY plywood/server/ /frontend/plywood/server/
-RUN if [ "x$skip_frontend_build" = "x" ] ; then \
-    echo "Building frontend";\
-    ./build_frontend.sh;\
+COPY --chown=datareporter client /frontend/client
+COPY --chown=datareporter viz-lib/ /frontend/viz-lib
+COPY --chown=datareporter plywood/server /frontend/plywood/server/
+COPY --chown=datareporter plywood/server/client /frontend/plywood/server/client
+
+# install node dependencies
+RUN if [ "x$skip_frontend_build" = "x" ]; then \
+    cd client && npm i && npm run build;\
   else \
-    echo "Skipping frontend build" &&\
     mkdir -p /frontend/client/dist &&\
     touch /frontend/client/dist/multi_org.html &&\
     touch /frontend/client/dist/index.html;\
@@ -22,7 +25,7 @@ FROM python:3.8-slim-buster
 
 EXPOSE 5000
 
-RUN useradd --create-home redash
+RUN useradd --create-home datareporter
 
 # Ubuntu packages
 RUN apt-get update && \
@@ -80,14 +83,15 @@ ARG POETRY_OPTIONS="--no-root --no-interaction --no-ansi"
 ARG install_groups="main,all_ds,dev"
 RUN /etc/poetry/bin/poetry install --only $install_groups $POETRY_OPTIONS
 
-COPY --chown=redash . /app
-COPY --chown=redash --from=frontend-builder /frontend/client/dist /app/client/dist
-RUN chown redash:redash -R /app
-RUN find /app
-USER redash
+COPY --chown=datareporter . /app
+COPY --chown=datareporter --from=frontend-builder /frontend/client/dist /app/client/dist
+RUN chown datareporter:datareporter -R /app
+USER datareporter
+
 ENV PROTOCOL_BUFFERS_PYTHON_IMPLEMENTATION=python
 # The version is being set arbitrarily by the builder
 ARG version
 ENV DATAREPORTER_VERSION=$version
+
 ENTRYPOINT ["/app/bin/docker-entrypoint"]
-CMD ["server"]
+CMD ["server"]

SETUP.md

@@ -33,16 +33,14 @@ nvm use v14 > /dev/null
 ```
 
 * Build UI - Required to build ui for
-    * Enter project root directory
-    * `cd client`
-    * `npm install` Installs all node dependencies to for redash
-    * `npm run build` Builds front end to the folder `client/dist/`
+  * `cd client` Enter project root directory
+  * `npm install` Installs all node dependencies to for redash
+  * `npm run build` Builds front end to the folder `client/dist/`
 
 * Build Plywood
-    * Enter project root directory
-    * `cd plywood/server`
-    * `npm install` Installs all node dependencies to for plywood
-    * `npm run build` Builds plywood server end to the folder `plywood/server/dist/`
+  * `cd plywood/server` Enter project root directory
+  * `npm install` Installs all node dependencies to for plywood
+  * `npm run build` Builds plywood server end to the folder `plywood/server/dist/`
 
 * Setup docker compose
     * `make up` or `docker compose up --build`  to start required services like postgres app server
@@ -61,7 +59,7 @@ nvm use v14 > /dev/null
 
 ## Local Development
 
-Consider using [pyenv](https://github.com/pyenv/pyenv#installation) for installing local Python pyenv app. Datareporter container images are shipped with Python 3.8.7, [ubuntu guide](https://www.dedicatedcore.com/blog/install-pyenv-ubuntu/)
+Consider using [pyenv](https://github.com/pyenv/pyenv#installation) for installing local Python pyenv app. Data Reporter container images are shipped with Python 3.8.7, [ubuntu guide](https://www.dedicatedcore.com/blog/install-pyenv-ubuntu/)
 ```
 # install necessary python version
 pyenv install 3.8.7
@@ -94,17 +92,22 @@ Then run the tests:
 docker compose run --rm server tests
 ```
 In order to test viz-lib folder you need to install dependencies and run tests because you cant have 2 react versions in the same project. To do that run below commands in the viz-lib folder:
+```sh
+npm install antd@^4 react@^16.8 react-dom@^16.8 && npm run test
 ```
-npm install antd@^3 react@^16.8 react-dom@^16.8 && npm run test
+
+### Running cypress
+```sh
+bash bin/restart_cypress.sh
 ```
 
 ### Components
-#### Datareporter server
+#### Data Reporter server
 * **directory**: `redash`
 * **debug**: Please follow the instruction from [redash](https://redash.io/help/open-source/dev-guide/debugging)
 * **changes:**
   * All changes are immediately visible as the python application is interpreted and it's running directly from source code.
-#### Datareporter frontend
+#### Data Reporter frontend
   * **submodules** - for debug and changes they follow root fronted app:
     * Lib viz
       * **directory:** `viz-lib`
@@ -114,7 +117,7 @@ npm install antd@^3 react@^16.8 react-dom@^16.8 && npm run test
   * **debug:** Can be debugged from browser open application at `http://localhost:8080` || `5000` and use browser debugger.
   * **changes:**
     * By default, changes are not reflected. You need go into `client` directory and start `npm run watch`.
-    That will start watched for source code changes for Datareporter frontend and all submodules.
+    That will start watched for source code changes for Data Reporter frontend and all submodules.
     * At liniux system you may face problem of too many file system watchers. That will result in error message
     ```Error: ENOSPC: System limit for number of file watchers reached, watch ```
     To solve it you need to increase the number of available watches by :

bin/restart_cypress.sh

@@ -0,0 +1,10 @@
+# check if we are in client folder, use dirname
+if [ "$(basename $(pwd))" != "client" ]; then
+  cd client
+fi
+if [ ! -d "node_modules" ]; then
+  npm install
+fi
+npm run cypress build
+npm run cypress start
+npm run cypress open

bin/restart_server.sh

@@ -12,6 +12,7 @@ if [ "$state" = "yes" ] || [ "$state" = "first" ]; then
     docker rm datareporter-server-1
     docker rmi datareporter-server
     docker-compose up -d
+    docker compose run --rm server create_db
     docker-compose stop server && docker-compose run --rm --service-ports server debug && docker-compose start server
 
 else
@@ -24,4 +25,4 @@ else
     docker-compose up -d
     docker-compose stop server && docker-compose run --rm --service-ports server debug && docker-compose start server
 
-fi
+fi

bin/server_tests.sh

@@ -0,0 +1,6 @@
+
+# First lets ensure that the "tests" database is created:
+docker-compose run --rm postgres psql -h postgres -U postgres -c "create database tests"
+
+# Then run the tests:
+docker-compose run --rm server tests

client/.babelrc

@@ -1,23 +1,30 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "exclude": [
-        "@babel/plugin-transform-async-to-generator",
-        "@babel/plugin-transform-arrow-functions"
-      ],
-      "useBuiltIns": "usage"
-    }],
+    [
+      "@babel/preset-env",
+      {
+        "exclude": ["@babel/plugin-transform-async-to-generator", "@babel/plugin-transform-arrow-functions"],
+        "corejs": "2",
+        "useBuiltIns": "usage"
+      }
+    ],
     "@babel/preset-react",
     "@babel/preset-typescript",
     "@babel/preset-flow"
   ],
   "plugins": [
-    "babel-plugin-flow-to-typescript",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-object-assign",
-    ["babel-plugin-transform-builtin-extend", {
-      "globals": ["Error"]
-    }],
-    "@babel/plugin-transform-runtime"
-  ]
+    [
+      "babel-plugin-transform-builtin-extend",
+      {
+        "globals": ["Error"]
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  }
 }

client/.eslintrc.js

@@ -5,10 +5,11 @@ module.exports = {
     "react-app",
     "plugin:compat/recommended",
     "prettier",
+    "plugin:jsx-a11y/recommended",
     // Remove any typescript-eslint rules that would conflict with prettier
     "prettier/@typescript-eslint",
   ],
-  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint"],
+  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint", "jsx-a11y"],
   settings: {
     "import/resolver": "webpack",
   },
@@ -19,7 +20,35 @@ module.exports = {
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
-    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/anchor-is-valid": [
+      // TMP
+      "off",
+      {
+        components: ["Link"],
+        aspects: ["noHref", "invalidHref", "preferButton"],
+      },
+    ],
+    "jsx-a11y/no-redundant-roles": "error",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/click-events-have-key-events": "off", // TMP
+    "jsx-a11y/no-static-element-interactions": "off", // TMP
+    "jsx-a11y/no-noninteractive-element-interactions": "off", // TMP
+    "no-console": ["warn", { allow: ["warn", "error"] }],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "antd",
+            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+          },
+          {
+            name: "antd/lib",
+            message: "Please use 'import XXX from antd/lib/XXX' import instead.",
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {
@@ -34,6 +63,8 @@ module.exports = {
         // Do not complain about useless contructors in declaration files
         "no-useless-constructor": "off",
         "@typescript-eslint/no-useless-constructor": "error",
+        // Many API fields and generated types use camelcase
+        "@typescript-eslint/camelcase": "off",
       },
     },
   ],

client/app/assets/less/ant.less

@@ -16,7 +16,6 @@
 @import "~antd/lib/pagination/style/index";
 @import "~antd/lib/table/style/index";
 @import "~antd/lib/popover/style/index";
-@import "~antd/lib/icon/style/index";
 @import "~antd/lib/tag/style/index";
 @import "~antd/lib/grid/style/index";
 @import "~antd/lib/switch/style/index";
@@ -226,6 +225,16 @@
     }
   }
 
+  &-tbody > tr&-row {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      & > td {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+
   // Custom styles
 
   &-headerless &-tbody > tr:first-child > td {
@@ -392,6 +401,18 @@
         left: 0;
       }
     }
+
+    &:focus,
+    &:focus-within {
+      color: @menu-highlight-color;
+    }
+  }
+}
+
+.@{dropdown-prefix-cls}-menu-item {
+  &:focus,
+  &:focus-within {
+    background-color: @item-hover-bg;
   }
 }
 
@@ -402,3 +423,18 @@
 .@{checkbox-prefix-cls} + span {
   padding-right: 0;
 }
+
+// make sure Multiple select has room for icons
+.@{select-prefix-cls}-multiple {
+  &.@{select-prefix-cls}-show-arrow,
+  &.@{select-prefix-cls}-show-search,
+  &.@{select-prefix-cls}-loading {
+    .@{select-prefix-cls}-selector {
+      padding-right: 30px;
+    }
+  }
+}
+
+.ant-btn-icon-only.ant-btn-sm {
+  width: auto!important;
+}

client/app/assets/less/icons.less

@@ -13,7 +13,6 @@
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
-  speak: never;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;