passed containerId in the object config (#935)

* passed containerId in the object config

* pkg version

* tmp: run acceptance tests, revert before merge

* reverte

Co-authored-by: Leon <>

ui-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up9/mizu-common",
-  "version": "1.0.139",
+  "version": "1.0.141",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "node-sass": "^6.0.0",
-    "react":"^17.0.2",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "recoil": "^0.5.2",
     "react-copy-to-clipboard": "^5.0.3",
@@ -77,7 +77,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-sass": "^1.2.10",
     "rollup-plugin-scss": "^3.0.0",
-    "react":"^17.0.2",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.2.4"
   },
@@ -90,4 +90,4 @@
   "files": [
     "dist"
   ]
-}
+}

ui-common/src/components/TrafficViewer/EntryDetailed.tsx

@@ -118,15 +118,11 @@ export const EntryDetailed = () => {
             } catch (error) {
                 if (error.response?.data?.type) {
                     toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
-                        position: "bottom-right",
                         theme: "colored",
                         autoClose: error.response.data.autoClose,
-                        hideProgressBar: false,
-                        closeOnClick: true,
-                        pauseOnHover: true,
-                        draggable: true,
                         progress: undefined,
-                    }, { containerId: TOAST_CONTAINER_ID });
+                        containerId: TOAST_CONTAINER_ID
+                    });
                 }
                 console.error(error);
             }

ui-common/src/components/TrafficViewer/TrafficViewer.tsx

@@ -186,15 +186,12 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus,
           break;
         case "toast":
           toast[message.data.type](message.data.text, {
-            position: "bottom-right",
             theme: "colored",
             autoClose: message.data.autoClose,
-            hideProgressBar: false,
-            closeOnClick: true,
             pauseOnHover: true,
-            draggable: true,
             progress: undefined,
-          }, { containerId: TOAST_CONTAINER_ID });
+            containerId: TOAST_CONTAINER_ID
+          });
           break;
         case "queryMetadata":
           setQueriedCurrent(queriedCurrent + message.data.current);

ui-common/src/components/UI/SyntaxHighlighter/index.module.sass

@@ -0,0 +1,39 @@
+.highlighterContainer
+    &.fitScreen
+        pre
+            max-height: 90vh
+            overflow: auto
+
+    pre
+        code
+            font-size: 0.75rem
+
+            &:first-child
+                margin-right: 0.75rem
+                background: #F7F9FC
+
+                .react-syntax-highlighter-line-number
+                    color: rgb(98, 126, 247)
+
+
+
+            &:last-child
+                display: block
+
+    code.hljs
+        white-space: pre-wrap
+
+    code.hljs:before
+        counter-reset: listing
+
+.hljsMarkerLine
+    counter-increment: listing
+
+.hljsMarkerLine:before
+    content: counter(listing) "  "
+    display: inline-block
+    width: 3rem
+    padding-left: auto
+    margin-left: auto
+    text-align: right
+    opacity: .5

ui-common/src/components/UI/SyntaxHighlighter/index.scss

@@ -1,49 +0,0 @@
-.highlighterContainer {
-    &.fitScreen {
-        pre {
-            max-height: 90vh;
-            overflow: auto;
-        }
-    }
-
-    pre {
-        code {
-            font-size: 0.75rem;
-
-            &:first-child {
-                margin-right: 0.75rem;
-                background: #F7F9FC;
-
-                .react-syntax-highlighter-line-number {
-                    color: rgb(98, 126, 247);
-                }
-            }
-
-            &:last-child {
-                display: block;
-            }
-        }
-    }
-}
-
-code.hljs {
-    white-space: pre-wrap;
-}
-
-code.hljs:before {
-    counter-reset: listing;
-}
-
-code.hljs .hljs-marker-line {
-    counter-increment: listing;
-}
-
-code.hljs .hljs-marker-line:before {
-    content: counter(listing) "  ";
-    display: inline-block;
-    width: 3rem;
-    padding-left: auto;
-    margin-left: auto;
-    text-align: right;
-    opacity: .5;
-}

ui-common/src/components/UI/SyntaxHighlighter/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Lowlight from 'react-lowlight'
 import 'highlight.js/styles/atom-one-light.css'
-import './index.scss';
+import styles from './index.module.sass';
 
 import xml from 'highlight.js/lib/languages/xml'
 import json from 'highlight.js/lib/languages/json'
@@ -37,11 +37,11 @@ export const SyntaxHighlighter: React.FC<Props> = ({
     const markers = showLineNumbers ? code.split("\n").map((item, i) => {
         return {
             line: i + 1,
-            className: 'hljs-marker-line'
+            className: styles.hljsMarkerLine
         }
     }) : [];
 
-    return <div style={{fontSize: ".75rem"}}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
+    return <div style={{fontSize: ".75rem"}} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
 };
 
 export default SyntaxHighlighter;

ui/package.json

@@ -13,7 +13,7 @@
     "@types/jest": "^26.0.22",
     "@types/node": "^12.20.10",
     "@uiw/react-textarea-code-editor": "^1.4.12",
-    "@up9/mizu-common": "1.0.139",
+    "@up9/mizu-common": "1.0.141",
     "axios": "^0.25.0",
     "core-js": "^3.20.2",
     "craco-babel-loader": "^1.0.3",
@@ -75,4 +75,4 @@
       "last 1 safari version"
     ]
   }
-}
+}