Fix/regration-fixes-24.3 (#933)

* link open in a new tab

* fixed double toast

* added const

* javiers new icon

* epbg img fix

* pkg update

* changed import

* formated

Co-authored-by: Leon <>

ui-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up9/mizu-common",
-  "version": "1.0.138",
+  "version": "1.0.139",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",

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

@@ -7,7 +7,9 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { UI } from "../..";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
+import { Select } from "../UI/Select";
+
 
 const modalStyle = {
   position: 'absolute',
@@ -42,7 +44,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
         const data = await getOasByService(selectedService);
         setSelectedServiceSpec(data);
       } catch (e) {
-        toast.error("Error occurred while fetching service OAS spec");
+        toast.error("Error occurred while fetching service OAS spec", { containerId: TOAST_CONTAINER_ID });
         console.error(e);
       }
     }
@@ -111,7 +113,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
           </div>
           <div className={style.selectContainer} >
             <FormControl>
-                <UI.Select
+              <Select
                 labelId="service-select-label"
                 id="service-select"
                 value={selectedServiceName}
@@ -129,7 +131,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
                     {service}
                   </MenuItem>
                 ))}
-                </UI.Select>
+              </Select>
             </FormControl>
           </div>
           <div className={style.borderLine}></div>

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

@@ -12,6 +12,7 @@ import TrafficViewerApi from "./TrafficViewerApi";
 import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
 import queryAtom from "../../recoil/query/atom";
 import useWindowDimensions, { useRequestTextByWidth } from "../../hooks/WindowDimensionsHook";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 
 const useStyles = makeStyles(() => ({
     entryTitle: {
@@ -125,7 +126,7 @@ export const EntryDetailed = () => {
                         pauseOnHover: true,
                         draggable: true,
                         progress: undefined,
-                    });
+                    }, { containerId: TOAST_CONTAINER_ID });
                 }
                 console.error(error);
             }

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

@@ -4,7 +4,7 @@ import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
 import styles from './EntryListItem.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
 import Protocol, {ProtocolInterface} from "../../UI/Protocol"
-import eBPFLogo from '../../assets/ebpf.png';
+import eBPFLogo from 'assets/ebpf.png';
 import {Summary} from "../../UI/Summary";
 import Queryable from "../../UI/Queryable";
 import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"

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

@@ -9,7 +9,6 @@ import playIcon from 'assets/run.svg';
 import pauseIcon from 'assets/pause.svg';
 import variables from '../../variables.module.scss';
 import { toast, ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 import debounce from 'lodash/debounce';
 import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import entriesAtom from "../../recoil/entries";
@@ -20,6 +19,7 @@ import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
 import TrafficViewerApi from "./TrafficViewerApi";
 import { StatusBar } from "../UI/StatusBar";
 import tappingStatusAtom from "../../recoil/tappingStatus/atom";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
 
 const useLayoutStyles = makeStyles(() => ({
   details: {
@@ -194,7 +194,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
             pauseOnHover: true,
             draggable: true,
             progress: undefined,
-          });
+          }, { containerId: TOAST_CONTAINER_ID });
           break;
         case "queryMetadata":
           setQueriedCurrent(queriedCurrent + message.data.current);
@@ -349,7 +349,6 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
         setAddressesWithTLS={setAddressesWithTLS}
         userDismissedTLSWarning={userDismissedTLSWarning}
         setUserDismissedTLSWarning={setUserDismissedTLSWarning} />
-      <ToastContainer/>
     </div>
   );
 };
@@ -362,6 +361,16 @@ const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus
     <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
       isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
       setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView} />
+    <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID}
+      position="bottom-right"
+      autoClose={5000}
+      hideProgressBar={false}
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover />
   </RecoilRoot>
 }
 

ui-common/src/components/UI/InformationIcon.tsx

@@ -11,7 +11,7 @@ export interface InformationIconProps{
 
 export const InformationIcon: React.FC<InformationIconProps> = ({link,style}) => {
     return <React.Fragment>
-        <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.flex} title="documentation">
+        <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.flex} title="documentation" target="_blank">
             <img className="headerIcon"  src={infoImg} alt="Info icon"/>
         </a>
     </React.Fragment>

ui-common/src/components/UI/assets/info.svg

@@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill="#627EF7" d="M12 4.707c-2.938-1.83-7.416-2.567-12-2.707v17.714c3.937.12 7.795.681 10.667 1.995.846.388 1.817.388 2.667 0 2.872-1.314 6.729-1.875 10.666-1.995v-17.714c-4.584.14-9.062.877-12 2.707zm-10 13.104v-13.704c5.157.389 7.527 1.463 9 2.334v13.168c-1.525-.546-4.716-1.505-9-1.798zm20 0c-4.283.293-7.475 1.252-9 1.799v-13.171c1.453-.861 3.83-1.942 9-2.332v13.704z"/>
+<path d="M19 21H6.14286C5.07143 21 4 20.32 4 18.96C4 17.6 5.07143 16.92 6.14286 16.92H19V4H6.14286C5.07143 4 4 5.02 4 6.04V18.96M16.8571 17.6V20.32V17.6Z" stroke="#627EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="8" y="7" width="7" height="2" fill="#627EF7"/>
+<rect x="8" y="11" width="4" height="2" fill="#627EF7"/>
 </svg>

ui-common/src/configs/Consts.ts

@@ -0,0 +1 @@
+export const TOAST_CONTAINER_ID = "Common";

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.138",
+    "@up9/mizu-common": "1.0.139",
     "axios": "^0.25.0",
     "core-js": "^3.20.2",
     "craco-babel-loader": "^1.0.3",

ui/src/components/ServiceMapModal/ServiceMapModal.tsx

@@ -11,6 +11,7 @@ import ServiceMapOptions from './ServiceMapOptions'
 import { useCommonStyles } from "../../helpers/commonStyle";
 import refresh from "../assets/refresh.svg";
 import close from "../assets/close.svg";
+import { TOAST_CONTAINER_ID } from "../../consts";
 
 interface GraphData {
     nodes: Node[];
@@ -140,7 +141,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
             setGraphData(newGraphData)
 
         } catch (ex) {
-            toast.error("An error occurred while loading Mizu Service Map, see console for mode details");
+            toast.error("An error occurred while loading Mizu Service Map, see console for mode details", { containerId: TOAST_CONTAINER_ID });
             console.error(ex);
         } finally {
             setIsLoading(false)

ui/src/consts.ts

@@ -1 +1,2 @@
 export const adminUsername = "admin";
+export const TOAST_CONTAINER_ID = "Community";

ui/src/index.tsx

@@ -1,14 +1,15 @@
 import ReactDOM from 'react-dom';
 import './index.sass';
 import {ToastContainer} from "react-toastify";
-import 'react-toastify/dist/ReactToastify.css';
+import 'react-toastify/dist/ReactToastify.min.css';
 import {RecoilRoot} from "recoil";
 import App from './App';
+import { TOAST_CONTAINER_ID } from './consts';
 
 ReactDOM.render( <>
     <RecoilRoot>
         <App/>
-        <ToastContainer
+        <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID} 
             position="bottom-right"
             autoClose={5000}
             hideProgressBar={false}