Merge branch 'develop' into ui-fix

2024-11-23 19:11:54 +05:30
parent 5354282aef 600c36d9e9
commit 965044a173
43 changed files with 2277 additions and 1147 deletions
--- a/src/components/organisms/ApiKey.tsx
+++ b/src/components/organisms/ApiKey.tsx
@@ -36,6 +36,10 @@ const ApiKeyManager = () => {
  const [copySuccess, setCopySuccess] = useState<boolean>(false);
  const { notify } = useGlobalInfoStore();

+  
+
+  
+
  useEffect(() => {
    const fetchApiKey = async () => {
      try {
@@ -49,6 +53,7 @@ const ApiKeyManager = () => {
    };

    fetchApiKey();
+    
  }, []);

  const generateApiKey = async () => {
@@ -56,6 +61,7 @@ const ApiKeyManager = () => {
    try {
      const { data } = await axios.post(`${apiUrl}/auth/generate-api-key`);
      setApiKey(data.api_key);
+     
      notify('success', `Generated API Key successfully`);
    } catch (error: any) {
      notify('error', `Failed to generate API Key - ${error.message}`);
--- a/src/components/organisms/BrowserContent.tsx
+++ b/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``;
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -8,6 +8,7 @@ import { useActionContext } from '../../context/browserActions';
 import { useBrowserSteps, TextStep } from '../../context/browserSteps';
 import { useGlobalInfoStore } from '../../context/globalInfo';

+
 interface ElementInfo {
    tagName: string;
    hasOnlyText?: boolean;
@@ -316,7 +317,7 @@ export const BrowserWindow = () => {
        }
    }, [paginationMode, resetPaginationSelector]);

-
+  
    return (
        <div onClick={handleClick} style={{ width: '900px' }} id="browser-window">
            {
--- a/src/components/organisms/MainMenu.tsx
+++ b/src/components/organisms/MainMenu.tsx
@@ -2,8 +2,13 @@ import React from 'react';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
+
 import { Paper, Button, useTheme } from "@mui/material";
-import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, CloudQueue } from "@mui/icons-material";
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, CloudQueue,Code, } from "@mui/icons-material";
+
+
+import { apiUrl } from "../../apiConfig";
+

 interface MainMenuProps {
  value: string;
@@ -79,8 +84,10 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
        </Tabs>
        <hr />
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
+
          <Button href="/api-docs" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
            API Docs
+
          </Button>
          <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
            Join Maxun Cloud
--- a/src/components/organisms/ProxyForm.tsx
+++ b/src/components/organisms/ProxyForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { styled } from '@mui/system';
-import { TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab, Table, TableContainer, TableHead, TableRow, TableBody, TableCell, Paper } from '@mui/material';
+import { Alert, AlertTitle, TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab, Table, TableContainer, TableHead, TableRow, TableBody, TableCell, Paper } from '@mui/material';
 import { sendProxyConfig, getProxyConfig, testProxyConfig, deleteProxyConfig } from '../../api/proxy';
 import { useGlobalInfoStore } from '../../context/globalInfo';

@@ -145,22 +145,22 @@ const ProxyForm: React.FC = () => {
                {tabIndex === 0 && (
                    isProxyConfigured ? (
                        <Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
-                                <TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
-                                    <Table>
-                                        <TableHead>
-                                            <TableRow>
-                                                <TableCell><strong>Proxy URL</strong></TableCell>
-                                                <TableCell><strong>Requires Authentication</strong></TableCell>
-                                            </TableRow>
-                                        </TableHead>
-                                        <TableBody>
-                                            <TableRow>
-                                                <TableCell>{proxy.proxy_url}</TableCell>
-                                                <TableCell>{proxy.auth ? 'Yes' : 'No'}</TableCell>
-                                            </TableRow>
-                                        </TableBody>
-                                    </Table>
-                                </TableContainer>
+                            <TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
+                                <Table>
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell><strong>Proxy URL</strong></TableCell>
+                                            <TableCell><strong>Requires Authentication</strong></TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        <TableRow>
+                                            <TableCell>{proxy.proxy_url}</TableCell>
+                                            <TableCell>{proxy.auth ? 'Yes' : 'No'}</TableCell>
+                                        </TableRow>
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
                            <Button variant="outlined" color="primary" onClick={testProxy}>
                                Test Proxy
                            </Button>
@@ -231,18 +231,34 @@ const ProxyForm: React.FC = () => {
                        </Box>
                    ))}
                {tabIndex === 1 && (
-                    <Box sx={{ maxWidth: 600, width: '100%', textAlign: 'center', marginTop: '20px' }}>
+                    <Box sx={{ maxWidth: 400, width: '100%', textAlign: 'center', marginTop: '20px' }}>
                        <>
                            <Typography variant="body1" gutterBottom component="div">
                                Coming Soon - In Open Source (Basic Rotation) & Cloud (Advanced Rotation). If you don't want to manage the infrastructure, join our cloud waitlist to get early access.
                            </Typography>
                            <Button variant="contained" color="primary" sx={{ marginTop: '20px' }}>
-                                <a style={{color: 'white', textDecoration: 'none'}} href="https://forms.gle/hXjgqDvkEhPcaBW76">Join Maxun Cloud Waitlist</a>
+                                <a style={{ color: 'white', textDecoration: 'none' }} href="https://forms.gle/hXjgqDvkEhPcaBW76">Join Maxun Cloud Waitlist</a>
                            </Button>
                        </>
                    </Box>
                )}
            </FormContainer>
+            <Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '230px', width: '450px', border: '1px solid #ff00c3' }}>
+            <AlertTitle>If your proxy requires a username and password, always provide them separately from the proxy URL. </AlertTitle>
+                <br />
+                <b>The right way</b>
+                <br />
+                Proxy URL: http://proxy.com:1337
+                <br />
+                Username: myusername
+                <br />
+                Password: mypassword
+                <br />
+                <br />
+                <b>The wrong way</b>
+                <br />
+                Proxy URL: http://myusername:mypassword@proxy.com:1337
+            </Alert>
        </>
    );
 };
--- a/src/components/organisms/Recordings.tsx
+++ b/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>