🔨 Move the code from ui directory to ui-common (#1242)

* Move the code from `ui` directory to `ui-common`

* Remove `ui` directory

* Rename `ui-common` to `ui`

* Fix the UI build

* Fix CI

.github/workflows/build.yml

@@ -45,7 +45,7 @@ jobs:
 
       - name: Check modified files
         id: modified_files
-        run: devops/check_modified_files.sh agent/ shared/ tap/ ui/ ui-common/ Dockerfile
+        run: devops/check_modified_files.sh agent/ shared/ tap/ ui/ Dockerfile
 
       - name: Set up Docker Buildx
         if: steps.modified_files.outputs.matched == 'true'

.github/workflows/linter.yml

@@ -114,25 +114,13 @@ jobs:
         with:
           node-version: 16
 
-      - name: ESLint prerequisites ui
+      - name: Install dependencies
         run: |
           sudo npm install -g eslint
           cd ui
-          npm run prestart
           npm i
 
-      - name: ESLint ui
+      - name: Lint
         run: |
           cd ui
           npm run eslint
-
-      - name: ESLint prerequisites ui-common
-        run: |
-          sudo npm install -g eslint
-          cd ui-common
-          npm i
-
-      - name: ESLint ui-common
-        run: |
-          cd ui-common
-          npm run eslint

.gitignore

@@ -53,7 +53,6 @@ tap/extensions/*/expect
 **/node_modules/**
 **/dist/**
 *.editorconfig
-ui/up9-kubeshark-common-0.0.0.tgz
 
 # Ignore *.log files
 *.log

Dockerfile

@@ -1,23 +1,12 @@
 ARG BUILDARCH=amd64
 ARG TARGETARCH=amd64
 
-### Front-end common
-FROM node:16 AS front-end-common
-
-WORKDIR /app/ui-build
-COPY ui-common/package.json .
-COPY ui-common/package-lock.json .
-RUN npm i
-COPY ui-common .
-RUN npm pack
-
 ### Front-end
 FROM node:16 AS front-end
 
 WORKDIR /app/ui-build
 
 COPY ui/package.json ui/package-lock.json ./
-COPY --from=front-end-common ["/app/ui-build/up9-kubeshark-common-0.0.0.tgz", "."]
 RUN npm i
 COPY ui .
 RUN npm run build

devops/ui-common-pack.sh

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# exit when any command fails
-set -e
-
-dst_folder=$1
-echo "dst folder: $dst_folder";
-
-cd $dst_folder/../ui-common
-npm i
-npm pack
-mv up9-kubeshark-common-0.0.0.tgz $dst_folder

ui-common/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

ui-common/README.md

@@ -1,30 +0,0 @@
-# kubeshark-common
-
-> Made with create-react-library
-
-[![NPM](https://img.shields.io/npm/v/liraz-test.svg)](https://www.npmjs.com/package/liraz-test) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
-## Install
-
-```bash
-npm install --save @up9/kubeshark-common
-```
-
-## Usage
-
-```tsx
-import React, { Component } from 'react'
-
-import MyComponent from 'l@up9/kubeshark-common'
-import '@up9/kubeshark-common/dist/index.css'
-
-class Example extends Component {
-  render() {
-    return <MyComponent />
-  }
-}
-```
-
-## License
-
-MIT © [](https://github.com/)

ui-common/package.json

@@ -1,101 +0,0 @@
-{
-  "name": "@up9/kubeshark-common",
-  "version": "0.0.0",
-  "description": "Made with create-react-library",
-  "author": "",
-  "license": "MIT",
-  "repository": "/kubeshark-common",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.tsx",
-  "engines": {
-    "node": ">=10"
-  },
-  "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "prepare": "run-s build",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
-    "test:lint": "eslint .",
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build",
-    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0"
-  },
-  "peerDependencies": {
-    "@craco/craco": "^6.4.3",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.54",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
-    "recoil": "^0.7.2",
-    "sass": "^1.52.3"
-  },
-  "dependencies": {
-    "@craco/craco": "^6.4.3",
-    "@elastic/eui": "^60.2.0",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.2",
-    "@mui/lab": "^5.0.0-alpha.84",
-    "@mui/material": "^5.8.2",
-    "@mui/styles": "^5.8.0",
-    "@types/lodash": "^4.14.182",
-    "@uiw/react-textarea-code-editor": "^1.6.0",
-    "ace-builds": "^1.6.0",
-    "axios": "^0.27.2",
-    "core-js": "^3.22.7",
-    "highlight.js": "^11.5.1",
-    "json-beautify": "^1.1.1",
-    "jsonpath": "^1.1.1",
-    "marked": "^4.0.16",
-    "material-ui-popup-state": "^2.0.1",
-    "mobx": "^6.6.0",
-    "moment": "^2.29.3",
-    "node-fetch": "^3.2.4",
-    "numeral": "^2.0.6",
-    "protobuf-decoder": "^0.1.2",
-    "react-ace": "^9.0.0",
-    "react-graph-vis": "^1.0.7",
-    "react-lowlight": "^3.0.0",
-    "react-router-dom": "^6.3.0",
-    "react-scrollable-feed-virtualized": "^1.4.9",
-    "react-syntax-highlighter": "^15.5.0",
-    "react-toastify": "^8.2.0",
-    "recharts": "^2.1.10",
-    "redoc": "^2.0.0-rc.71",
-    "styled-components": "^5.3.5",
-    "use-file-picker": "^1.4.2",
-    "web-vitals": "^2.1.4",
-    "xml-formatter": "^2.6.1"
-  },
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@svgr/rollup": "^6.2.1",
-    "@types/ace": "^0.0.48",
-    "cross-env": "^7.0.3",
-    "env-cmd": "^10.1.0",
-    "gh-pages": "^4.0.0",
-    "microbundle-crl": "^0.13.11",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup-plugin-import-css": "^3.0.3",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-sass": "^1.2.12",
-    "rollup-plugin-scss": "^3.0.0",
-    "typescript": "^4.5.3"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "files": [
-    "src/*.scss",
-    "dist"
-  ]
-}

ui-common/src/helpers/commonStyle.ts

@@ -1,66 +0,0 @@
-import makeStyles from '@mui/styles/makeStyles';
-
-// @ts-ignore
-export const useCommonStyles = makeStyles(() => ({
-    button: {
-        backgroundColor: "#326de6",
-        color: "white",
-        fontWeight: "600 !important",
-        fontSize: 12,
-        padding: "9px 12px",
-        borderRadius: "6px ! important",
-        "&:hover": {
-            backgroundColor: "#326de6",
-        },
-        "&:disabled": {
-            backgroundColor: "rgba(0, 0, 0, 0.26)"
-        }
-    },
-    outlinedButton: {
-        backgroundColor: "transparent",
-        color: "#326de6",
-        fontWeight: "600 !important",
-        fontSize: 12,
-        padding: "8px 12px",
-        border: "1px #326de6 solid",
-        borderRadius: "6px ! important",
-        "&:hover": {
-            backgroundColor: "transparent",
-        },
-    },
-    clickedButton: {
-        color: "white",
-        backgroundColor: "#326de6",
-        "&:hover": {
-            backgroundColor: "#326de6",
-        },
-    },
-    imagedButton: {
-        padding: "1px 14px"
-    },
-
-    textField: {
-        outline: 0,
-        background: "white",
-        borderRadius: "4px",
-        padding: "8px 10px",
-        border: "1px #9D9D9D solid",
-        fontSize: "14px",
-        color: "#494677",
-        height: "30px",
-        boxSizing: "border-box"
-    },
-    modal: {
-        position: 'absolute',
-        top: '40%',
-        left: '50%',
-        transform: 'translate(-50%, -40%)',
-        width: "CLAMP(600px,50%, 800px)",
-        bgcolor: 'background.paper',
-        borderRadius: '5px',
-        boxShadow: 24,
-        outline: "none",
-        p: 4,
-        color: '#000',
-    }
-}));

ui-common/src/index.tsx

@@ -1,11 +0,0 @@
-import TrafficViewer from './components/TrafficViewer/TrafficViewer';
-import * as UI from "./components/UI"
-import { StatusBar } from './components/UI';
-import useWS, { DEFAULT_LEFTOFF } from './hooks/useWS';
-import OasModal from './components/modals/OasModal/OasModal';
-import { ServiceMapModal } from './components/modals/ServiceMapModal/ServiceMapModal';
-import { TrafficStatsModal } from './components/modals/TrafficStatsModal/TrafficStatsModal';
-
-export { CodeEditorWrap as QueryForm } from './components/Filters/Filters';
-export { UI, StatusBar, OasModal, ServiceMapModal, TrafficStatsModal, TrafficViewer }
-export { useWS, DEFAULT_LEFTOFF }

ui-common/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

ui-common/src/variables.module.scss

@@ -1,32 +0,0 @@
-$main-background-color: white;
-$header-background-color: #F7F9FC;
-$data-background-color: #E9EBF8;
-$font-color: #0C0B1A;
-$secondary-font-color: rgba(0,0,0,0.5);
-$blue-color: #326de6;
-$light-blue-color: #BCCEFD;
-$success-color: #27AE60;
-$failure-color: #EB5757;
-
-$header-section-color : #fbfcfe;
-$content-section-color: #f8f9fc;
-
-$blue-gray: #494677;
-$light-gray: #8F9BB2;
-
-$text-font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif;
-
-:export {
-  mainBackgroundColor: $main-background-color;
-  headerBackgroundColor: $header-background-color;
-  fontColor: $font-color;
-  secondaryFontColor: $secondary-font-color;
-  blueColor: $blue-color;
-  lightBlueColor: $light-blue-color;
-  successColor: $success-color;
-  failureColor: $failure-color;
-  blueGray: $blue-gray;
-  lightGray: $light-gray;
-  contentSectionColor: $content-section-color;
-  textFontFamily: $text-font-family
-}

ui-common/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "esnext",
-    "lib": ["dom", "esnext","dom.iterable"],
-    "moduleResolution": "node",
-    "jsx": "react",
-    "sourceMap": true,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "downlevelIteration": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "example"]
-}
-

ui/.env.basic

@@ -1 +0,0 @@
-REACT_APP_OVERRIDE_IS_ENTERPRISE="false"

ui/.env.dev.basic

@@ -1,3 +0,0 @@
-REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws"
-REACT_APP_OVERRIDE_API_URL="http://localhost:8899/"
-REACT_APP_OVERRIDE_IS_ENTERPRISE="false"

ui/.gitignore

@@ -1,30 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-/.idea/
-*.pyc
-*.iml
-/results/
-.idea
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-/build-ent
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

ui/README.md

@@ -1,2 +0,0 @@
-# kubeshark UI
-web app traffic viewer

ui/package.json

@@ -1,22 +1,47 @@
 {
-  "name": "kubeshark-ui",
-  "version": "0.1.0",
-  "private": true,
+  "name": "kubeshark",
+  "version": "0.0.0",
+  "description": "Made with create-react-library",
+  "author": "",
+  "license": "MIT",
+  "repository": "/kubeshark-common",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.tsx",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject",
+    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0"
+  },
+  "peerDependencies": {
+    "@craco/craco": "^6.4.3",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^12.20.54",
+    "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^17.0.2",
+    "recoil": "^0.7.2",
+    "sass": "^1.52.3"
+  },
   "dependencies": {
     "@craco/craco": "^6.4.3",
-    "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^60.2.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.2",
+    "@mui/lab": "^5.0.0-alpha.84",
     "@mui/material": "^5.8.2",
     "@mui/styles": "^5.8.0",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.54",
+    "@types/lodash": "^4.14.182",
     "@uiw/react-textarea-code-editor": "^1.6.0",
-    "@up9/kubeshark-common": "file:up9-kubeshark-common-0.0.0.tgz",
+    "ace-builds": "^1.6.0",
     "axios": "^0.27.2",
     "core-js": "^3.22.7",
-    "craco-babel-loader": "^1.0.3",
     "highlight.js": "^11.5.1",
     "json-beautify": "^1.1.1",
     "jsonpath": "^1.1.1",
@@ -26,38 +51,38 @@
     "moment": "^2.29.3",
     "node-fetch": "^3.2.4",
     "numeral": "^2.0.6",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
+    "protobuf-decoder": "^0.1.2",
+    "react-ace": "^9.0.0",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
     "react-router-dom": "^6.3.0",
     "react-scrollable-feed-virtualized": "^1.4.9",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^8.2.0",
+    "recharts": "^2.1.10",
     "redoc": "^2.0.0-rc.71",
-    "sass": "^1.52.3",
     "styled-components": "^5.3.5",
-    "typescript": "^4.5.3",
+    "use-file-picker": "^1.4.2",
     "web-vitals": "^2.1.4",
     "xml-formatter": "^2.6.1"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@svgr/rollup": "^6.2.1",
+    "@types/ace": "^0.0.48",
+    "cross-env": "^7.0.3",
     "env-cmd": "^10.1.0",
-    "npm-link-shared": "^0.5.6",
-    "react-app-rewire-alias": "^1.1.7",
-    "react-dev-utils": "^12.0.1",
-    "react-error-overlay": "6.0.9",
-    "recoil": "^0.7.2"
-  },
-  "scripts": {
-    "prestart": "../devops/ui-common-pack.sh $PWD",
-    "start": "craco start",
-    "start-dev": "./node_modules/.bin/env-cmd -f .env.dev.basic craco start",
-    "build": "./node_modules/.bin/env-cmd -f .env.basic craco build",
-    "test": "craco test",
-    "eject": "craco eject",
-    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0"
+    "gh-pages": "^4.0.0",
+    "microbundle-crl": "^0.13.11",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.6.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-sass": "^1.2.12",
+    "rollup-plugin-scss": "^3.0.0",
+    "typescript": "^4.5.3"
   },
   "eslintConfig": {
     "extends": [
@@ -65,6 +90,10 @@
       "react-app/jest"
     ]
   },
+  "files": [
+    "src/*.scss",
+    "dist"
+  ],
   "browserslist": {
     "production": [
       ">0.2%",

ui/src/App.tsx

@@ -1,15 +1,15 @@
 import './App.sass';
 import { Header } from "./components/Header/Header";
 import { TrafficPage } from "./components/Pages/TrafficPage/TrafficPage";
-import { ServiceMapModal } from '@up9/kubeshark-common';
+import { ServiceMapModal } from './components/modals/ServiceMapModal/ServiceMapModal';
 import { useRecoilState } from "recoil";
 import serviceMapModalOpenAtom from "./recoil/serviceMapModalOpen";
 import oasModalOpenAtom from './recoil/oasModalOpen/atom';
 import trafficStatsModalOpenAtom from "./recoil/trafficStatsModalOpen";
-import { OasModal } from '@up9/kubeshark-common';
+import { OasModal } from './components/modals/OasModal/OasModal';
 import Api from './helpers/api';
 import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material';
-import { TrafficStatsModal } from '@up9/kubeshark-common';
+import { TrafficStatsModal } from './components/modals/TrafficStatsModal/TrafficStatsModal';
 
 const api = Api.getInstance()
 

ui/src/components/EntriesList/EntriesList.tsx

@@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from './EntriesList.module.sass';
 import ScrollableFeedVirtualized from "react-scrollable-feed-virtualized";
 import { EntryItem } from "../EntryListItem/EntryListItem";
-import down from "assets/downImg.svg";
-import spinner from 'assets/spinner.svg';
+import down from "./assets/downImg.svg";
+import spinner from "./assets/spinner.svg";
 import { RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import entriesAtom from "../../recoil/entries";
 import queryAtom from "../../recoil/query";

ui/src/components/EntryListItem/EntryListItem.tsx

@@ -4,15 +4,15 @@ import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import styles from './EntryListItem.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode/StatusCode";
 import Protocol, {ProtocolInterface} from "../UI/Protocol/Protocol"
-import eBPFLogo from 'assets/lock.svg';
+import eBPFLogo from "./assets/lock.svg";
 import {Summary} from "../UI/Summary/Summary";
 import Queryable from "../UI/Queryable/Queryable";
-import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
-import ingoingIconFailure from "assets/ingoing-traffic-failure.svg"
-import ingoingIconNeutral from "assets/ingoing-traffic-neutral.svg"
-import outgoingIconSuccess from "assets/outgoing-traffic-success.svg"
-import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
-import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
+import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg"
+import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
+import ingoingIconNeutral from "./assets/ingoing-traffic-neutral.svg"
+import outgoingIconSuccess from "./assets/outgoing-traffic-success.svg"
+import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
+import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
 import {useRecoilState} from "recoil";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 

ui/src/components/Filters/Filters.tsx

@@ -4,8 +4,8 @@ import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider, debounce}
 import CodeEditor from '@uiw/react-textarea-code-editor';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import { SyntaxHighlighter } from "../UI/SyntaxHighlighter";
-import filterUIExample1 from "assets/filter-ui-example-1.png"
-import filterUIExample2 from "assets/filter-ui-example-2.png"
+import filterUIExample1 from "./assets/filter-ui-example-1.png"
+import filterUIExample2 from "./assets/filter-ui-example-2.png"
 import variables from '../../variables.module.scss';
 import { useRecoilState, useRecoilValue } from "recoil";
 import queryAtom from "../../recoil/query";

ui/src/components/Header/Header.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import {AuthPresentation} from "../AuthPresentation/AuthPresentation";
-import logo from '../assets/Kubeshark-logo.svg';
+import logo from './assets/Kubeshark-logo.svg';
 import './Header.sass';
-import {UI} from "@up9/kubeshark-common"
+import * as UI from "../UI"
 
 
 export const Header: React.FC = () => {

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -5,12 +5,12 @@ import debounce from 'lodash/debounce';
 import { useRecoilState } from "recoil";
 import { useCommonStyles } from "../../../helpers/commonStyle"
 import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
-import { TrafficViewer } from "@up9/kubeshark-common"
-import "@up9/kubeshark-common/dist/index.css"
+import { TrafficViewer } from "../../TrafficViewer/TrafficViewer"
+import "../../../index.sass"
 import oasModalOpenAtom from "../../../recoil/oasModalOpen/atom";
-import serviceMap from "../../assets/serviceMap.svg";
-import services from "../../assets/services.svg";
-import trafficStatsIcon from "../../assets/trafficStats.svg";
+import serviceMap from "./assets/serviceMap.svg";
+import services from "./assets/services.svg";
+import trafficStatsIcon from "./assets/trafficStats.svg";
 import trafficStatsModalOpenAtom from "../../../recoil/trafficStatsModalOpen";
 import { REPLAY_ENABLED } from "../../../consts";
 

ui/src/components/TrafficViewer/TrafficViewer.tsx

@@ -5,8 +5,8 @@ import makeStyles from '@mui/styles/makeStyles';
 import TrafficViewerStyles from "./TrafficViewer.module.sass";
 import styles from '../EntriesList/EntriesList.module.sass';
 import { EntryDetailed } from "../EntryDetailed/EntryDetailed";
-import playIcon from 'assets/run.svg';
-import pauseIcon from 'assets/pause.svg';
+import playIcon from "./assets/run.svg";
+import pauseIcon from "./assets/pause.svg";
 import variables from '../../variables.module.scss';
 import { ToastContainer } from 'react-toastify';
 import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";

ui/src/components/UI/CollapsibleContainer/CollapsibleContainer.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import collapsedImg from "assets/collapsed.svg";
-import expandedImg from "assets/expanded.svg";
+import collapsedImg from "./assets/collapsed.svg";
+import expandedImg from "./assets/expanded.svg";
 import styles from "./CollapsibleContainer.module.sass";
 
 interface Props {

ui/src/components/UI/FancyTextDisplay/FancyTextDisplay.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import duplicateImg from "assets/duplicate.svg";
+import duplicateImg from "./assets/duplicate.svg";
 import styles from './FancyTextDisplay.module.sass';
 
 interface Props {

ui/src/components/UI/KeyValueTable/KeyValueTable.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { useEffect, useState } from "react";
 import styles from "./KeyValueTable.module.sass"
-import deleteIcon from "delete.svg"
-import deleteIconActive from "delete-active.svg"
+import deleteIcon from "./assets/delete.svg"
+import deleteIconActive from "./assets/delete-active.svg"
 import HoverImage from "../HoverImage/HoverImage";
 
 interface KeyValueTableProps {

ui/src/components/UI/NoDataMessage/NoDataMessage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import circleImg from 'assets/dotted-circle.svg';
-import styles from './NoDataMessage.module.sass'
+import circleImg from "./assets/dotted-circle.svg";
+import styles from "./NoDataMessage.module.sass"
 
 export interface Props {
     messageText: string;

ui/src/components/UI/SearchableDropdown/SearchableDropdown.tsx

@@ -4,7 +4,7 @@ import { Autocomplete } from "@mui/material";
 import { Checkbox, TextField } from "@mui/material";
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import DefaultIconDown from "assets/DefaultIconDown.svg";
+import DefaultIconDown from "./assets/DefaultIconDown.svg";
 import styles from "./SearchableDropdown.module.sass";
 
 interface SearchableDropdownProps {