Merge branch 'develop' into delete_runs_notification

src/components/organisms/BrowserContent.tsx

@@ -1,12 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import BrowserNavBar from "../molecules/BrowserNavBar";
 import { BrowserWindow } from "./BrowserWindow";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { BrowserTabs } from "../molecules/BrowserTabs";
 import { useSocketStore } from "../../context/socket";
-import { getCurrentTabs, getCurrentUrl, interpretCurrentRecording } from "../../api/recording";
-import { Box } from '@mui/material';
+import {
+  getCurrentTabs,
+  getCurrentUrl,
+  interpretCurrentRecording,
+} from "../../api/recording";
+import { Box } from "@mui/material";
 import { InterpretationLog } from "../molecules/InterpretationLog";
 
 // TODO: Tab !show currentUrl after recordingUrl global state
@@ -14,107 +18,125 @@ export const BrowserContent = () => {
   const { width } = useBrowserDimensionsStore();
   const { socket } = useSocketStore();
 
-  const [tabs, setTabs] = useState<string[]>(['current']);
+  const [tabs, setTabs] = useState<string[]>(["current"]);
   const [tabIndex, setTabIndex] = React.useState(0);
   const [showOutputData, setShowOutputData] = useState(false);
 
-  const handleChangeIndex = useCallback((index: number) => {
-    setTabIndex(index);
-  }, [tabIndex])
+  const handleChangeIndex = useCallback(
+    (index: number) => {
+      setTabIndex(index);
+    },
+    [tabIndex]
+  );
 
-  const handleCloseTab = useCallback((index: number) => {
-    // the tab needs to be closed on the backend
-    socket?.emit('closeTab', {
-      index,
-      isCurrent: tabIndex === index,
-    });
-    // change the current index as current tab gets closed
-    if (tabIndex === index) {
-      if (tabs.length > index + 1) {
-        handleChangeIndex(index);
+  const handleCloseTab = useCallback(
+    (index: number) => {
+      // the tab needs to be closed on the backend
+      socket?.emit("closeTab", {
+        index,
+        isCurrent: tabIndex === index,
+      });
+      // change the current index as current tab gets closed
+      if (tabIndex === index) {
+        if (tabs.length > index + 1) {
+          handleChangeIndex(index);
+        } else {
+          handleChangeIndex(index - 1);
+        }
       } else {
-        handleChangeIndex(index - 1);
+        handleChangeIndex(tabIndex - 1);
       }
-    } else {
-      handleChangeIndex(tabIndex - 1);
-    }
-    // update client tabs
-    setTabs((prevState) => [
-      ...prevState.slice(0, index),
-      ...prevState.slice(index + 1)
-    ])
-  }, [tabs, socket, tabIndex]);
+      // update client tabs
+      setTabs((prevState) => [
+        ...prevState.slice(0, index),
+        ...prevState.slice(index + 1),
+      ]);
+    },
+    [tabs, socket, tabIndex]
+  );
 
   const handleAddNewTab = useCallback(() => {
     // Adds new tab by pressing the plus button
-    socket?.emit('addTab');
+    socket?.emit("addTab");
     // Adds a new tab to the end of the tabs array and shifts focus
-    setTabs((prevState) => [...prevState, 'new tab']);
+    setTabs((prevState) => [...prevState, "new tab"]);
     handleChangeIndex(tabs.length);
   }, [socket, tabs]);
 
-  const handleNewTab = useCallback((tab: string) => {
-    // Adds a new tab to the end of the tabs array and shifts focus
-    setTabs((prevState) => [...prevState, tab]);
-    // changes focus on the new tab - same happens in the remote browser
-    handleChangeIndex(tabs.length);
-    handleTabChange(tabs.length);
-  }, [tabs]);
+  const handleNewTab = useCallback(
+    (tab: string) => {
+      // Adds a new tab to the end of the tabs array and shifts focus
+      setTabs((prevState) => [...prevState, tab]);
+      // changes focus on the new tab - same happens in the remote browser
+      handleChangeIndex(tabs.length);
+      handleTabChange(tabs.length);
+    },
+    [tabs]
+  );
 
-  const handleTabChange = useCallback((index: number) => {
-    // page screencast and focus needs to be changed on backend
-    socket?.emit('changeTab', index);
-  }, [socket]);
+  const handleTabChange = useCallback(
+    (index: number) => {
+      // page screencast and focus needs to be changed on backend
+      socket?.emit("changeTab", index);
+    },
+    [socket]
+  );
 
   const handleUrlChanged = (url: string) => {
     const parsedUrl = new URL(url);
     if (parsedUrl.hostname) {
-      const host = parsedUrl.hostname.match(/\b(?!www\.)[a-zA-Z0-9]+/g)?.join('.')
+      const host = parsedUrl.hostname
+        .match(/\b(?!www\.)[a-zA-Z0-9]+/g)
+        ?.join(".");
       if (host && host !== tabs[tabIndex]) {
         setTabs((prevState) => [
           ...prevState.slice(0, tabIndex),
           host,
-          ...prevState.slice(tabIndex + 1)
-        ])
+          ...prevState.slice(tabIndex + 1),
+        ]);
       }
     } else {
-      if (tabs[tabIndex] !== 'new tab') {
+      if (tabs[tabIndex] !== "new tab") {
         setTabs((prevState) => [
           ...prevState.slice(0, tabIndex),
-          'new tab',
-          ...prevState.slice(tabIndex + 1)
-        ])
+          "new tab",
+          ...prevState.slice(tabIndex + 1),
+        ]);
       }
     }
-
   };
 
-  const tabHasBeenClosedHandler = useCallback((index: number) => {
-    handleCloseTab(index);
-  }, [handleCloseTab])
+  const tabHasBeenClosedHandler = useCallback(
+    (index: number) => {
+      handleCloseTab(index);
+    },
+    [handleCloseTab]
+  );
 
   useEffect(() => {
     if (socket) {
-      socket.on('newTab', handleNewTab);
-      socket.on('tabHasBeenClosed', tabHasBeenClosedHandler);
+      socket.on("newTab", handleNewTab);
+      socket.on("tabHasBeenClosed", tabHasBeenClosedHandler);
     }
     return () => {
       if (socket) {
-        socket.off('newTab', handleNewTab);
-        socket.off('tabHasBeenClosed', tabHasBeenClosedHandler);
+        socket.off("newTab", handleNewTab);
+        socket.off("tabHasBeenClosed", tabHasBeenClosedHandler);
       }
-    }
-  }, [socket, handleNewTab])
+    };
+  }, [socket, handleNewTab]);
 
   useEffect(() => {
-    getCurrentTabs().then((response) => {
-      if (response) {
-        setTabs(response);
-      }
-    }).catch((error) => {
-      console.log("Fetching current url failed");
-    })
-  }, [])
+    getCurrentTabs()
+      .then((response) => {
+        if (response) {
+          setTabs(response);
+        }
+      })
+      .catch((error) => {
+        console.log("Fetching current url failed");
+      });
+  }, [handleUrlChanged]);
 
   return (
     <div id="browser">
@@ -134,7 +156,6 @@ export const BrowserContent = () => {
       <BrowserWindow />
     </div>
   );
-}
+};
 
-const BrowserContentWrapper = styled.div`
-`;
+const BrowserContentWrapper = styled.div``;

src/components/organisms/MainMenu.tsx

@@ -3,7 +3,7 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { Paper, Button } from "@mui/material";
-import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, Link, CloudQueue } from "@mui/icons-material";
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Code } from "@mui/icons-material";
 import { apiUrl } from "../../apiConfig";
 
 interface MainMenuProps {
@@ -87,8 +87,8 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
         </Tabs>
         <hr />
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
-          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
-            API Docs
+          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Code />}>
+            Website To API
           </Button>
           <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
             Join Maxun Cloud
@@ -103,7 +103,7 @@ const buttonStyles = {
   justifyContent: 'flex-start',
   textAlign: 'left',
   fontSize: 'medium',
-  padding: '6px 16px 6px 22px', 
+  padding: '6px 16px 6px 22px',
   minHeight: '48px',
   minWidth: '100%',
   display: 'flex',

src/components/organisms/Recordings.tsx

@@ -5,6 +5,8 @@ import { RunSettings, RunSettingsModal } from "../molecules/RunSettings";
 import { ScheduleSettings, ScheduleSettingsModal } from "../molecules/ScheduleSettings";
 import { IntegrationSettings, IntegrationSettingsModal } from "../molecules/IntegrationSettings";
 import { RobotSettings, RobotSettingsModal } from "../molecules/RobotSettings";
+import { RobotEditModal } from '../molecules/RobotEdit';
+import { RobotDuplicationModal } from '../molecules/RobotDuplicate';
 
 interface RecordingsProps {
   handleEditRecording: (id: string, fileName: string) => void;
@@ -18,10 +20,14 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
   const [scheduleSettingsAreOpen, setScheduleSettingsAreOpen] = useState(false);
   const [integrateSettingsAreOpen, setIntegrateSettingsAreOpen] = useState(false);
   const [robotSettingsAreOpen, setRobotSettingsAreOpen] = useState(false);
+  const [robotEditAreOpen, setRobotEditAreOpen] = useState(false);
+  const [robotDuplicateAreOpen, setRobotDuplicateAreOpen] = useState(false);
   const [params, setParams] = useState<string[]>([]);
   const [selectedRecordingId, setSelectedRecordingId] = useState<string>('');
   const handleIntegrateRecording = (id: string, settings: IntegrationSettings) => {};
   const handleSettingsRecording = (id: string, settings: RobotSettings) => {};
+  const handleEditRobot = (id: string, settings: RobotSettings) => {};
+  const handleDuplicateRobot = (id: string, settings: RobotSettings) => {};
 
   const handleSettingsAndIntegrate = (id: string, name: string, params: string[]) => {
     if (params.length === 0) {
@@ -75,6 +81,32 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
     }
   }
 
+  const handleEditRobotOption = (id: string, name: string, params: string[]) => {
+    if (params.length === 0) {
+      setRobotEditAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    } else {
+      setParams(params);
+      setRobotEditAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    }
+  }
+
+  const handleDuplicateRobotOption = (id: string, name: string, params: string[]) => {
+    if (params.length === 0) {
+      setRobotDuplicateAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    } else {
+      setParams(params);
+      setRobotDuplicateAreOpen(true);
+      setRecordingInfo(id, name);
+      setSelectedRecordingId(id);
+    }
+  }
+
   const handleClose = () => {
     setParams([]);
     setRunSettingsAreOpen(false);
@@ -103,6 +135,20 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
     setSelectedRecordingId('');
   }
 
+  const handleRobotEditClose = () => {
+    setParams([]);
+    setRobotEditAreOpen(false);
+    setRecordingInfo('', '');
+    setSelectedRecordingId('');
+  }
+
+  const handleRobotDuplicateClose = () => {
+    setParams([]);
+    setRobotDuplicateAreOpen(false);
+    setRecordingInfo('', '');
+    setSelectedRecordingId('');
+  }
+
   return (
     <React.Fragment>
       <RunSettingsModal isOpen={runSettingsAreOpen}
@@ -123,6 +169,14 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
         handleClose={handleRobotSettingsClose}
         handleStart={(settings) => handleSettingsRecording(selectedRecordingId, settings)}
       />
+      <RobotEditModal isOpen={robotEditAreOpen} 
+        handleClose={handleRobotEditClose}
+        handleStart={(settings) => handleEditRobot(selectedRecordingId,settings)} 
+      />
+      <RobotDuplicationModal isOpen={robotDuplicateAreOpen}
+        handleClose={handleRobotDuplicateClose}
+        handleStart={(settings) => handleDuplicateRobot(selectedRecordingId, settings)}
+      />
       <Grid container direction="column" sx={{ padding: '30px' }}>
         <Grid item xs>
           <RecordingsTable
@@ -131,6 +185,8 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
             handleScheduleRecording={handleSettingsAndSchedule}
             handleIntegrateRecording={handleSettingsAndIntegrate}
             handleSettingsRecording={handleRobotSettings}
+            handleEditRobot={handleEditRobotOption}
+            handleDuplicateRobot={handleDuplicateRobotOption}
           />
         </Grid>
       </Grid>