New test case filter selector

.gitignore

@@ -80,3 +80,4 @@ fabric.properties
 
 .vscode
 
+ui/src/yarn-error.log

ui/src/.editorconfig

@@ -3,3 +3,5 @@ trim_trailing_whitespace = true
 charset = utf-8
 indent_style = space
 insert_final_newline = true
+tab_width = 2
+indent_size = 2

ui/src/.storybook/main.js

@@ -4,7 +4,14 @@ module.exports = {
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
-    "@storybook/addon-postcss",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
     "@storybook/addon-links",
     "@storybook/addon-essentials",
   ]

ui/src/.storybook/preview.js

@@ -1,4 +1,5 @@
 import '../src/index.css';
+import 'tailwindcss/tailwind.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -8,4 +9,14 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}
+
+const withTailwindWrapper=(Story,context)=> (
+  <div className="tailwind">
+    <div className="font-sans">
+      <Story {...context} />
+    </div>
+  </div>
+);
+
+export const decorators = [withTailwindWrapper];

ui/src/package.json

@@ -6,11 +6,16 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/react-fontawesome": "^0.1.2",
+    "@headlessui/react": "^1.4.1",
+    "@heroicons/react": "^1.0.4",
     "@tinymce/tinymce-react": "^3.12.6",
     "bootstrap": "^4.1.2",
     "bootstrap-fileinput": "^5.2.2",
     "bootstrap-icons": "^1.5.0",
+    "clsx": "^1.1.1",
+    "color": "^4.0.1",
     "d3": "^5.9.2",
+    "formik": "^2.2.9",
     "gijgo": "^1.9.13",
     "highcharts-react-official": "^2.1.3",
     "jquery": "^3.3.1",
@@ -21,21 +26,25 @@
     "qs": "^6.7.0",
     "query-string": "^6.5.0",
     "react": "^16.14.0",
-    "react-axios": "^2.0.3",
     "react-date-picker": "^7.3.0",
     "react-dom": "^16.14.0",
     "react-highcharts": "^16.0.2",
-    "react-router-dom": "^4.3.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "react-select": "^2.0.0",
     "react-spinners": "^0.5.4",
+    "recoil": "^0.4.1",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.88.1"
+    "semantic-ui-react": "^0.88.1",
+    "tslib": "^2.3.1",
+    "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "start:dev": "BASE_API_URL=http://localhost:81/api/ yarn start",
-    "build": "react-scripts build",
+    "start": "craco start",
+    "start:dev": "REACT_APP_BASE_API_URL=http://localhost:81/api/ yarn start",
+    "start:server": "(cd ../../ && docker-compose -f docker-compose-api.yml up)",
+    "build": "craco build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint": "yarn eslint . --cache --cache-strategy content",
@@ -91,24 +100,25 @@
     "trailingComma": "all",
     "arrowParens": "avoid",
     "semi": true,
-    "jsxBracketSameLine": false,
     "endOfLine": "lf"
   },
   "devDependencies": {
-    "@craco/craco": "^6.2.0",
-    "@storybook/addon-actions": "^6.3.4",
-    "@storybook/addon-essentials": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
+    "@craco/craco": "^6.3.0",
+    "@storybook/addon-actions": "^6.3.10",
+    "@storybook/addon-essentials": "^6.3.10",
+    "@storybook/addon-links": "^6.3.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/node-logger": "^6.3.4",
-    "@storybook/react": "^6.3.4",
+    "@storybook/builder-webpack5": "^6.3.10",
+    "@storybook/manager-webpack5": "^6.3.10",
+    "@storybook/node-logger": "^6.3.10",
+    "@storybook/react": "^6.3.10",
+    "@types/react-router": "^5.1.16",
     "autoprefixer": "^9",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "postcss": "^7",
-    "prettier": "^2.3.2",
-    "storybook": "^6.3.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.4.0",
+    "storybook": "^6.3.10",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "typescript": "^4.3.3"
+    "typescript": "^4.4.3"
   }
 }

ui/src/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: ["tailwindcss", "autoprefixer"],
+  plugins: [require("tailwindcss"), require("autoprefixer")],
 };

ui/src/src/App.css

@@ -35,11 +35,18 @@
 }
 
 .tree-side{
-    height: 100vh;
-    overflow-y: scroll;
+    height: 100%;
+    overflow-y: auto;
     z-index: 0;
 }
 
+.tailwind .list-group-item {
+    background: transparent;
+}
+.tailwind .list-group-item.active {
+    background: #2E5BFF;
+}
+
 .testcase-side{
     height: 100vh;
     overflow-y: scroll;
@@ -123,7 +130,6 @@ code {
 
 .bg-green {
     background-color: #135f38!important;
-    #background-color: #13515f!important;
 }
 
 .edit-icon-visible {

ui/src/src/App.js

@@ -1,10 +1,14 @@
 import React, { Component } from "react";
+import "tailwindcss/tailwind.css";
+import "./App.css";
 import Header from "./common/Header";
 import Main from "./common/Main";
 import Footer from "./common/Footer";
-import "./App.css";
+
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStroopwafel } from "@fortawesome/free-solid-svg-icons";
+import { RecoilRoot } from "recoil";
+import { BrowserRouter } from "react-router-dom";
 
 library.add(faStroopwafel);
 
@@ -35,19 +39,22 @@ class App extends Component {
 
   render() {
     return (
-      <div>
-        <Header project={this.state.project} session={this.state.session} onSessionChange={this.onSessionChange} />
-        <div className="container-fluid">
-          <Main
-            onProjectChange={this.onProjectChange}
-            session={this.state.session}
-            onSessionChange={this.onSessionChange}
-          />
-        </div>
-        <Footer />
-      </div>
+      <BrowserRouter>
+        <RecoilRoot>
+          <div>
+            <Header project={this.state.project} session={this.state.session} onSessionChange={this.onSessionChange} />
+            <div className="container-fluid">
+              <Main
+                onProjectChange={this.onProjectChange}
+                session={this.state.session}
+                onSessionChange={this.onSessionChange}
+              />
+            </div>
+            <Footer />
+          </div>
+        </RecoilRoot>
+      </BrowserRouter>
     );
   }
 }
-
 export default App;

ui/src/src/audit/EventsWidget.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-direct-mutation-state */
-import React, { Component } from "react";
+import { Component, memo } from "react";
 import * as Utils from "../common/Utils";
 import { FadeLoader } from "react-spinners";
 import Backend from "../services/backend";
@@ -82,4 +82,4 @@ class EventsWidget extends Component {
   }
 }
 
-export default EventsWidget;
+export default memo(EventsWidget);

ui/src/src/common/Header.js

@@ -5,7 +5,7 @@
 /* eslint-disable react/no-direct-mutation-state */
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { withRouter } from "react-router";
+import { useHistory } from "react-router";
 import * as UserSession from "../user/UserSession";
 import * as Utils from "../common/Utils";
 import Backend from "../services/backend";
@@ -218,4 +218,8 @@ class Header extends Component {
   }
 }
 
-export default withRouter(Header);
+// eslint-disable-next-line import/no-anonymous-default-export
+export default props => {
+  const history = useHistory();
+  return <Header {...props} history={history} />;
+};