UI/feature flag for replay modal (#1186)

* context added

* import added

* chnages

* ui enabled

* moved to Consts

* changes to recoil

* change

* new useEffect

Co-authored-by: Leon <>

ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as ReplayIcon } from './replay.svg';
 import styles from './EntryViewer.module.sass';
 import { Tabs } from "../../UI";
 import replayRequestModalOpenAtom from "../../../recoil/replayRequestModalOpen";
+import entryDetailedConfigAtom, { EntryDetailedConfig } from "../../../recoil/entryDetailedConfig";
 
 const enabledProtocolsForReplay = ["http"]
 
@@ -16,10 +17,11 @@ export enum TabsEnum {
 
 export const AutoRepresentation: React.FC<any> = ({ representation, color, openedTab = TabsEnum.Request, isDisplayReplay = false }) => {
     const entryData = useRecoilValue(entryDataAtom)
+    const { isReplayEnabled } = useRecoilValue<EntryDetailedConfig>(entryDetailedConfigAtom)
     const setIsOpenRequestModal = useSetRecoilState(replayRequestModalOpenAtom)
     const isReplayDisplayed = useCallback(() => {
-        return enabledProtocolsForReplay.find(x => x === entryData.protocol.name) && isDisplayReplay
-    }, [entryData.protocol.name, isDisplayReplay])
+        return enabledProtocolsForReplay.find(x => x === entryData.protocol.name) && isDisplayReplay && isReplayEnabled
+    }, [entryData.protocol.name, isDisplayReplay, isReplayEnabled])
 
     const { request, response } = JSON.parse(representation);
 
@@ -31,12 +33,10 @@ export const AutoRepresentation: React.FC<any> = ({ representation, color, opene
             }]
 
         if (response) {
-            arr.push(
-                {
+            arr.push({
                 tab: 'Response',
                 badge: null
-                }
-            );
+            });
         }
 
         return arr

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

@@ -22,6 +22,7 @@ import leftOffTopAtom from "../../recoil/leftOffTop";
 import { DEFAULT_LEFTOFF, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS } from '../../hooks/useWS';
 import ReplayRequestModalContainer from "../modals/ReplayRequestModal/ReplayRequestModal";
 import replayRequestModalOpenAtom from "../../recoil/replayRequestModalOpen";
+import entryDetailedConfigAtom, { EntryDetailedConfig } from "../../recoil/entryDetailedConfig";
 
 const useLayoutStyles = makeStyles(() => ({
   details: {
@@ -51,18 +52,22 @@ interface TrafficViewerProps {
   webSocketUrl: string,
   shouldCloseWebSocket: boolean,
   setShouldCloseWebSocket: (flag: boolean) => void,
-  isDemoBannerView: boolean
+  isDemoBannerView: boolean,
+  entryDetailedConfig: EntryDetailedConfig
 }
 
 export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   trafficViewerApiProp,
-                                                              actionButtons, isShowStatusBar, webSocketUrl,
-                                                              shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
-                                                            }) => {
+  webSocketUrl,
+  actionButtons,
+  isShowStatusBar, isDemoBannerView,
+  shouldCloseWebSocket, setShouldCloseWebSocket,
+  entryDetailedConfig }) => {
 
   const classes = useLayoutStyles();
   const setEntries = useSetRecoilState(entriesAtom);
   const setFocusedEntryId = useSetRecoilState(focusedEntryIdAtom);
+  const setEntryDetailedConfigAtom = useSetRecoilState(entryDetailedConfigAtom)
   const query = useRecoilValue(queryAtom);
   const setTrafficViewerApiState = useSetRecoilState(trafficViewerApiAtom as RecoilState<TrafficViewerApi>)
   const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
@@ -183,6 +188,10 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    setEntryDetailedConfigAtom(entryDetailedConfig)
+  }, [entryDetailedConfig, setEntryDetailedConfigAtom])
+
   const getConnectionIndicator = () => {
     switch (wsReadyState) {
       case WebSocket.OPEN:
@@ -266,15 +275,9 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
 };
 
 const MemorizedTrafficViewer = React.memo(TrafficViewer)
-const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({
-                                                                trafficViewerApiProp,
-                                                                actionButtons, isShowStatusBar = true,
-                                                                webSocketUrl, shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
-                                                              }) => {
+const TrafficViewerContainer: React.FC<TrafficViewerProps> = (props) => {
   return <RecoilRoot>
-    <MemorizedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
-                          shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
-                          isDemoBannerView={isDemoBannerView}/>
+    <MemorizedTrafficViewer  {...props} />
     <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID}
       position="bottom-right"
       autoClose={5000}

ui-common/src/recoil/entryDetailedConfig/atom.ts

@@ -0,0 +1,12 @@
+import { atom } from "recoil";
+
+const entryDetailedConfigAtom = atom({
+    key: "entryDetailedConfigAtom",
+    default: null
+});
+
+export type EntryDetailedConfig = {
+    isReplayEnabled: boolean
+}
+
+export default entryDetailedConfigAtom;

ui-common/src/recoil/entryDetailedConfig/index.ts

@@ -0,0 +1,3 @@
+import atom from "./atom"
+export type { EntryDetailedConfig } from "./atom"
+export default atom

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

@@ -12,6 +12,7 @@ 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";
 
 const api = Api.getInstance();
 
@@ -72,7 +73,9 @@ export const TrafficPage: React.FC = () => {
   return (
     <>
       <TrafficViewer webSocketUrl={MizuWebsocketURL} shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket}
-        trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen || trafficStatsModalOpen)} isDemoBannerView={false} />
+        trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen || trafficStatsModalOpen)} isDemoBannerView={false} entryDetailedConfig={{
+          isReplayEnabled: REPLAY_ENABLED
+        }} />
     </>
   );
 };

ui/src/consts.ts

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