From d0c75cdeb1c1c8f15192d24b13d6589b61faf286 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 19:59:13 +0530
Subject: [PATCH 01/13] feat: coc action

---
 .../action-settings/clickOnCoordinates.tsx    | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/molecules/action-settings/clickOnCoordinates.tsx

diff --git a/src/components/molecules/action-settings/clickOnCoordinates.tsx b/src/components/molecules/action-settings/clickOnCoordinates.tsx
new file mode 100644
index 00000000..351e4297
--- /dev/null
+++ b/src/components/molecules/action-settings/clickOnCoordinates.tsx
@@ -0,0 +1,39 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { Stack, TextField } from "@mui/material";
+import { WarningText } from '../../atoms/texts';
+import InfoIcon from "@mui/icons-material/Info";
+
+export const ClickOnCoordinatesSettings = forwardRef((props, ref) => {
+  const [settings, setSettings] = React.useState<number[]>([0,0]);
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return settings;
+    }
+  }));
+
+  return (
+    <Stack direction="column">
+      <TextField
+        sx={{marginLeft: '15px', marginRight: '15px'}}
+        type="number"
+        label="X"
+        onChange={(e) => setSettings(prevState => ([Number(e.target.value), prevState[1]]))}
+        required
+        defaultValue={settings[0]}
+      />
+      <TextField
+        sx={{margin: '15px'}}
+        type="number"
+        label="Y"
+        onChange={(e) => setSettings(prevState => ([prevState[0], Number(e.target.value)]))}
+        required
+        defaultValue={settings[1]}
+      />
+      <WarningText>
+        <InfoIcon color='warning'/>
+        The click function will click on the given coordinates.
+        You need to put the coordinates by yourself.
+      </WarningText>
+    </Stack>
+  );
+});

From 4f36f930764a8a842915f94518a731ac22c53385 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 19:59:35 +0530
Subject: [PATCH 02/13] feat: enqueue links

---
 .../action-settings/enqueueLinks.tsx          | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/molecules/action-settings/enqueueLinks.tsx

diff --git a/src/components/molecules/action-settings/enqueueLinks.tsx b/src/components/molecules/action-settings/enqueueLinks.tsx
new file mode 100644
index 00000000..9ccbd5c5
--- /dev/null
+++ b/src/components/molecules/action-settings/enqueueLinks.tsx
@@ -0,0 +1,32 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { Stack, TextField } from "@mui/material";
+import { WarningText } from "../../atoms/texts";
+import WarningIcon from "@mui/icons-material/Warning";
+import InfoIcon from "@mui/icons-material/Info";
+
+export const EnqueueLinksSettings = forwardRef((props, ref) => {
+  const [settings, setSettings] = React.useState<string>('');
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return settings;
+    }
+  }));
+
+  return (
+    <Stack direction="column">
+      <TextField
+        sx={{marginLeft: '15px', marginRight: '15px'}}
+        type="string"
+        label="Selector"
+        required
+        onChange={(e) => setSettings(e.target.value)}
+      />
+      <WarningText>
+        <InfoIcon color='warning'/>
+        Reads elements targeted by the selector and stores their links in a queue.
+        Those pages are then processed using the same workflow as the initial page
+        (in parallel if the maxConcurrency parameter is greater than 1).
+      </WarningText>
+    </Stack>
+  );
+});

From d358a2b2b27bbcaaa0bc10ec31f09c851900245f Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 19:59:47 +0530
Subject: [PATCH 03/13] feat: scrape action

---
 .../molecules/action-settings/scrape.tsx      | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/molecules/action-settings/scrape.tsx

diff --git a/src/components/molecules/action-settings/scrape.tsx b/src/components/molecules/action-settings/scrape.tsx
new file mode 100644
index 00000000..5540fb98
--- /dev/null
+++ b/src/components/molecules/action-settings/scrape.tsx
@@ -0,0 +1,30 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { Stack, TextField } from "@mui/material";
+import { WarningText } from '../../atoms/texts';
+import InfoIcon from "@mui/icons-material/Info";
+
+export const ScrapeSettings = forwardRef((props, ref) => {
+  const [settings, setSettings] = React.useState<string>('');
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return settings;
+    }
+  }));
+
+  return (
+    <Stack direction="column">
+      <TextField
+        sx={{marginLeft: '15px', marginRight: '15px'}}
+        type="string"
+        label="Selector"
+        onChange={(e) => setSettings(e.target.value)}
+      />
+      <WarningText>
+        <InfoIcon color='warning'/>
+        The scrape function uses heuristic algorithm to automatically scrape only important data from the page.
+        If a selector is used it will scrape and automatically parse all available
+        data inside of the selected element(s).
+      </WarningText>
+    </Stack>
+  );
+});

From 9d6562117e75faa8fbbbdeaee3dd2acc6fd1f133 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:00:03 +0530
Subject: [PATCH 04/13] feat: scrape schema action

---
 .../action-settings/scrapeSchema.tsx          | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/molecules/action-settings/scrapeSchema.tsx

diff --git a/src/components/molecules/action-settings/scrapeSchema.tsx b/src/components/molecules/action-settings/scrapeSchema.tsx
new file mode 100644
index 00000000..3914a01a
--- /dev/null
+++ b/src/components/molecules/action-settings/scrapeSchema.tsx
@@ -0,0 +1,25 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { WarningText } from "../../atoms/texts";
+import InfoIcon from "@mui/icons-material/Info";
+import { KeyValueForm } from "../KeyValueForm";
+
+export const ScrapeSchemaSettings = forwardRef((props, ref) => {
+  const keyValueFormRef = useRef<{getObject: () => object}>(null);
+
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      const settings = keyValueFormRef.current?.getObject() as Record<string,string>
+      return settings;
+    }
+  }));
+
+  return (
+    <div>
+      <WarningText>
+        <InfoIcon color='warning'/>
+        The interpreter scrapes the data from a webpage into a "curated" table.
+      </WarningText>
+      <KeyValueForm ref={keyValueFormRef}/>
+    </div>
+);
+});

From 1a68b49e2c84ff0e91f1e8597531be07800252a2 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:00:17 +0530
Subject: [PATCH 05/13] feat: screenshot action

---
 .../molecules/action-settings/screenshot.tsx  | 126 ++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 src/components/molecules/action-settings/screenshot.tsx

diff --git a/src/components/molecules/action-settings/screenshot.tsx b/src/components/molecules/action-settings/screenshot.tsx
new file mode 100644
index 00000000..bae4ad3e
--- /dev/null
+++ b/src/components/molecules/action-settings/screenshot.tsx
@@ -0,0 +1,126 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { InputLabel, MenuItem, TextField, Select, FormControl } from "@mui/material";
+import { ScreenshotSettings as Settings } from "../../../shared/types";
+import styled from "styled-components";
+import { SelectChangeEvent } from "@mui/material/Select/Select";
+import { Dropdown } from "../../atoms/DropdownMui";
+
+export const ScreenshotSettings = forwardRef((props, ref) => {
+  const [settings, setSettings] = React.useState<Settings>({ });
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return settings;
+    }
+  }));
+
+  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value, type } = event.target;
+    let parsedValue: any = value;
+    if (type === "number") {
+      parsedValue = parseInt(value);
+    };
+    setSettings({
+      ...settings,
+      [id]: parsedValue,
+    });
+  };
+
+  const handleSelect = (event: SelectChangeEvent) => {
+    const { name, value } = event.target;
+    let parsedValue: any = value;
+    if (value === "true" || value === "false") {
+      parsedValue = value === "true";
+    };
+    setSettings({
+      ...settings,
+      [name]: parsedValue,
+    });
+  };
+
+  return (
+    <SettingsWrapper>
+      <Dropdown
+        id="type"
+        label="type"
+        value={settings.type || "png"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="jpeg">jpeg</MenuItem>
+        <MenuItem value="png">png</MenuItem>
+      </Dropdown>
+      { settings.type === "jpeg" ?
+        <TextField
+          type="number"
+          id="quality"
+          label="quality"
+          size='small'
+          InputProps={{ inputProps: { min: 0, max: 100 } }}
+          onChange={handleInput}
+        /> : null
+      }
+      <TextField
+        type="number"
+        id = "timeout"
+        label="timeout"
+        size='small'
+        onChange={handleInput}
+        defaultValue='30000'
+      />
+      <Dropdown
+        id="animations"
+        label="animations"
+        value={settings.animations || 'allow'}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="disabled">disabled</MenuItem>
+        <MenuItem value="allow">allow</MenuItem>
+      </Dropdown>
+      { settings.type === "png" ?
+        <Dropdown
+          id="omitBackground"
+          label="omitBackground"
+          value={settings.omitBackground?.toString() || "false"}
+          handleSelect={handleSelect}
+        >
+          <MenuItem value="true">true</MenuItem>
+          <MenuItem value="false">false</MenuItem>
+        </Dropdown>
+        : null
+      }
+      <Dropdown
+        id="caret"
+        label="caret"
+        value={settings.caret || "hide"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="hide">hide</MenuItem>
+        <MenuItem value="initial">initial</MenuItem>
+      </Dropdown>
+      <Dropdown
+        id="fullPage"
+        label="fullPage"
+        value={settings.fullPage?.toString() || "false"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="true">true</MenuItem>
+        <MenuItem value="false">false</MenuItem>
+      </Dropdown>
+      <Dropdown
+        id="scale"
+        label="scale"
+        value={settings.scale || "device"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="css">css</MenuItem>
+        <MenuItem value="device">device</MenuItem>
+      </Dropdown>
+    </SettingsWrapper>
+  );
+});
+
+const SettingsWrapper = styled.div`
+  margin-left: 15px;
+  * {
+    margin-bottom: 10px;
+  }
+`;

From 8540a9dcaf74e3b611f754874b862229cee8ebd6 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:00:32 +0530
Subject: [PATCH 06/13] feat: script action

---
 .../molecules/action-settings/script.tsx      | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/molecules/action-settings/script.tsx

diff --git a/src/components/molecules/action-settings/script.tsx b/src/components/molecules/action-settings/script.tsx
new file mode 100644
index 00000000..d3fc963a
--- /dev/null
+++ b/src/components/molecules/action-settings/script.tsx
@@ -0,0 +1,63 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import Editor from 'react-simple-code-editor';
+// @ts-ignore
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/themes/prism.css';
+import styled from "styled-components";
+import InfoIcon from '@mui/icons-material/Info';
+import { WarningText } from "../../atoms/texts";
+
+export const ScriptSettings = forwardRef((props, ref) => {
+  const [code, setCode] = React.useState('');
+
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return code;
+    }
+  }));
+
+  return (
+    <EditorWrapper>
+      <WarningText>
+        <InfoIcon color='warning'/>
+        Allows to run an arbitrary asynchronous function evaluated at the server
+        side accepting the current page instance argument.
+      </WarningText>
+      <StyledEditor
+        placeholder="Type some code…"
+        value={code}
+        onValueChange={code => setCode(code)}
+        highlight={code => highlight(code, languages.js)}
+        padding={10}
+        style={{
+          fontFamily: '"Fira code", "Fira Mono", monospace',
+          fontSize: 12,
+          background: '#f0f0f0',
+        }}
+      />
+    </EditorWrapper>
+  );
+});
+
+const EditorWrapper = styled.div`
+  flex: 1;
+  overflow: auto;
+    /** hard-coded height */
+  height: 100%;
+  width: 100%;
+`;
+
+const StyledEditor = styled(Editor)`
+  white-space: pre;
+  caret-color: #fff;
+  min-width: 100%;
+  min-height: 100%;
+  float: left;
+  & > textarea,
+  & > pre {
+    outline: none;
+    white-space: pre !important;
+  }
+`;

From 524c52cb876d7be937325f3193ae7496417836bf Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:00:45 +0530
Subject: [PATCH 07/13] feat: scroll action

---
 .../molecules/action-settings/scroll.tsx      | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/molecules/action-settings/scroll.tsx

diff --git a/src/components/molecules/action-settings/scroll.tsx b/src/components/molecules/action-settings/scroll.tsx
new file mode 100644
index 00000000..e115404f
--- /dev/null
+++ b/src/components/molecules/action-settings/scroll.tsx
@@ -0,0 +1,21 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { TextField } from "@mui/material";
+
+export const ScrollSettings = forwardRef((props, ref) => {
+  const [settings, setSettings] = React.useState<number>(0);
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return settings;
+    }
+  }));
+
+  return (
+    <TextField
+      sx={{marginLeft: '15px'}}
+      type="number"
+      label="Number of pages"
+      required
+      onChange={(e) => setSettings(parseInt(e.target.value))}
+    />
+  );
+});

From 2e6f47069f3cc9774380328b3b8c1a369c0ba85f Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:01:06 +0530
Subject: [PATCH 08/13] chore: lint

---
 .../molecules/action-settings/clickOnCoordinates.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/molecules/action-settings/clickOnCoordinates.tsx b/src/components/molecules/action-settings/clickOnCoordinates.tsx
index 351e4297..c68a53b0 100644
--- a/src/components/molecules/action-settings/clickOnCoordinates.tsx
+++ b/src/components/molecules/action-settings/clickOnCoordinates.tsx
@@ -4,7 +4,7 @@ import { WarningText } from '../../atoms/texts';
 import InfoIcon from "@mui/icons-material/Info";
 
 export const ClickOnCoordinatesSettings = forwardRef((props, ref) => {
-  const [settings, setSettings] = React.useState<number[]>([0,0]);
+  const [settings, setSettings] = React.useState<number[]>([0, 0]);
   useImperativeHandle(ref, () => ({
     getSettings() {
       return settings;
@@ -14,7 +14,7 @@ export const ClickOnCoordinatesSettings = forwardRef((props, ref) => {
   return (
     <Stack direction="column">
       <TextField
-        sx={{marginLeft: '15px', marginRight: '15px'}}
+        sx={{ marginLeft: '15px', marginRight: '15px' }}
         type="number"
         label="X"
         onChange={(e) => setSettings(prevState => ([Number(e.target.value), prevState[1]]))}
@@ -22,7 +22,7 @@ export const ClickOnCoordinatesSettings = forwardRef((props, ref) => {
         defaultValue={settings[0]}
       />
       <TextField
-        sx={{margin: '15px'}}
+        sx={{ margin: '15px' }}
         type="number"
         label="Y"
         onChange={(e) => setSettings(prevState => ([prevState[0], Number(e.target.value)]))}
@@ -30,7 +30,7 @@ export const ClickOnCoordinatesSettings = forwardRef((props, ref) => {
         defaultValue={settings[1]}
       />
       <WarningText>
-        <InfoIcon color='warning'/>
+        <InfoIcon color='warning' />
         The click function will click on the given coordinates.
         You need to put the coordinates by yourself.
       </WarningText>

From 947c73c521df83b4cb5089ac26a4bd01554443d7 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:01:25 +0530
Subject: [PATCH 09/13] chore: lint

---
 src/components/molecules/action-settings/enqueueLinks.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/action-settings/enqueueLinks.tsx b/src/components/molecules/action-settings/enqueueLinks.tsx
index 9ccbd5c5..2c383d47 100644
--- a/src/components/molecules/action-settings/enqueueLinks.tsx
+++ b/src/components/molecules/action-settings/enqueueLinks.tsx
@@ -15,14 +15,14 @@ export const EnqueueLinksSettings = forwardRef((props, ref) => {
   return (
     <Stack direction="column">
       <TextField
-        sx={{marginLeft: '15px', marginRight: '15px'}}
+        sx={{ marginLeft: '15px', marginRight: '15px' }}
         type="string"
         label="Selector"
         required
         onChange={(e) => setSettings(e.target.value)}
       />
       <WarningText>
-        <InfoIcon color='warning'/>
+        <InfoIcon color='warning' />
         Reads elements targeted by the selector and stores their links in a queue.
         Those pages are then processed using the same workflow as the initial page
         (in parallel if the maxConcurrency parameter is greater than 1).

From 2ab0e04b858c4ef76c6866e8eb97d517843f4a07 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:01:55 +0530
Subject: [PATCH 10/13] chore: lint

---
 src/components/molecules/action-settings/scrape.tsx    |  4 ++--
 .../molecules/action-settings/scrapeSchema.tsx         | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/molecules/action-settings/scrape.tsx b/src/components/molecules/action-settings/scrape.tsx
index 5540fb98..80608b1e 100644
--- a/src/components/molecules/action-settings/scrape.tsx
+++ b/src/components/molecules/action-settings/scrape.tsx
@@ -14,13 +14,13 @@ export const ScrapeSettings = forwardRef((props, ref) => {
   return (
     <Stack direction="column">
       <TextField
-        sx={{marginLeft: '15px', marginRight: '15px'}}
+        sx={{ marginLeft: '15px', marginRight: '15px' }}
         type="string"
         label="Selector"
         onChange={(e) => setSettings(e.target.value)}
       />
       <WarningText>
-        <InfoIcon color='warning'/>
+        <InfoIcon color='warning' />
         The scrape function uses heuristic algorithm to automatically scrape only important data from the page.
         If a selector is used it will scrape and automatically parse all available
         data inside of the selected element(s).
diff --git a/src/components/molecules/action-settings/scrapeSchema.tsx b/src/components/molecules/action-settings/scrapeSchema.tsx
index 3914a01a..3f60c787 100644
--- a/src/components/molecules/action-settings/scrapeSchema.tsx
+++ b/src/components/molecules/action-settings/scrapeSchema.tsx
@@ -4,11 +4,11 @@ import InfoIcon from "@mui/icons-material/Info";
 import { KeyValueForm } from "../KeyValueForm";
 
 export const ScrapeSchemaSettings = forwardRef((props, ref) => {
-  const keyValueFormRef = useRef<{getObject: () => object}>(null);
+  const keyValueFormRef = useRef<{ getObject: () => object }>(null);
 
   useImperativeHandle(ref, () => ({
     getSettings() {
-      const settings = keyValueFormRef.current?.getObject() as Record<string,string>
+      const settings = keyValueFormRef.current?.getObject() as Record<string, string>
       return settings;
     }
   }));
@@ -16,10 +16,10 @@ export const ScrapeSchemaSettings = forwardRef((props, ref) => {
   return (
     <div>
       <WarningText>
-        <InfoIcon color='warning'/>
+        <InfoIcon color='warning' />
         The interpreter scrapes the data from a webpage into a "curated" table.
       </WarningText>
-      <KeyValueForm ref={keyValueFormRef}/>
+      <KeyValueForm ref={keyValueFormRef} />
     </div>
-);
+  );
 });

From 94239b1346542318d8b5eab6b6468dd8c28784be Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:02:44 +0530
Subject: [PATCH 11/13] chore: lint

---
 src/components/molecules/action-settings/screenshot.tsx | 8 ++++----
 src/components/molecules/action-settings/script.tsx     | 2 +-
 src/components/molecules/action-settings/scroll.tsx     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/molecules/action-settings/screenshot.tsx b/src/components/molecules/action-settings/screenshot.tsx
index bae4ad3e..8e412afa 100644
--- a/src/components/molecules/action-settings/screenshot.tsx
+++ b/src/components/molecules/action-settings/screenshot.tsx
@@ -6,7 +6,7 @@ import { SelectChangeEvent } from "@mui/material/Select/Select";
 import { Dropdown } from "../../atoms/DropdownMui";
 
 export const ScreenshotSettings = forwardRef((props, ref) => {
-  const [settings, setSettings] = React.useState<Settings>({ });
+  const [settings, setSettings] = React.useState<Settings>({});
   useImperativeHandle(ref, () => ({
     getSettings() {
       return settings;
@@ -48,7 +48,7 @@ export const ScreenshotSettings = forwardRef((props, ref) => {
         <MenuItem value="jpeg">jpeg</MenuItem>
         <MenuItem value="png">png</MenuItem>
       </Dropdown>
-      { settings.type === "jpeg" ?
+      {settings.type === "jpeg" ?
         <TextField
           type="number"
           id="quality"
@@ -60,7 +60,7 @@ export const ScreenshotSettings = forwardRef((props, ref) => {
       }
       <TextField
         type="number"
-        id = "timeout"
+        id="timeout"
         label="timeout"
         size='small'
         onChange={handleInput}
@@ -75,7 +75,7 @@ export const ScreenshotSettings = forwardRef((props, ref) => {
         <MenuItem value="disabled">disabled</MenuItem>
         <MenuItem value="allow">allow</MenuItem>
       </Dropdown>
-      { settings.type === "png" ?
+      {settings.type === "png" ?
         <Dropdown
           id="omitBackground"
           label="omitBackground"
diff --git a/src/components/molecules/action-settings/script.tsx b/src/components/molecules/action-settings/script.tsx
index d3fc963a..2cece263 100644
--- a/src/components/molecules/action-settings/script.tsx
+++ b/src/components/molecules/action-settings/script.tsx
@@ -21,7 +21,7 @@ export const ScriptSettings = forwardRef((props, ref) => {
   return (
     <EditorWrapper>
       <WarningText>
-        <InfoIcon color='warning'/>
+        <InfoIcon color='warning' />
         Allows to run an arbitrary asynchronous function evaluated at the server
         side accepting the current page instance argument.
       </WarningText>
diff --git a/src/components/molecules/action-settings/scroll.tsx b/src/components/molecules/action-settings/scroll.tsx
index e115404f..2e5743af 100644
--- a/src/components/molecules/action-settings/scroll.tsx
+++ b/src/components/molecules/action-settings/scroll.tsx
@@ -11,7 +11,7 @@ export const ScrollSettings = forwardRef((props, ref) => {
 
   return (
     <TextField
-      sx={{marginLeft: '15px'}}
+      sx={{ marginLeft: '15px' }}
       type="number"
       label="Number of pages"
       required

From 23ebb866bc20ba2233f6142fbef92570ac5f7081 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:03:10 +0530
Subject: [PATCH 12/13] feat: action imports

---
 .../molecules/action-settings/index.ts          | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/components/molecules/action-settings/index.ts

diff --git a/src/components/molecules/action-settings/index.ts b/src/components/molecules/action-settings/index.ts
new file mode 100644
index 00000000..32906db7
--- /dev/null
+++ b/src/components/molecules/action-settings/index.ts
@@ -0,0 +1,17 @@
+import { ScrollSettings } from './scroll';
+import { ScreenshotSettings } from "./screenshot";
+import { ScrapeSettings } from "./scrape";
+import { ScrapeSchemaSettings } from "./scrapeSchema";
+import { ScriptSettings } from "./script";
+import { EnqueueLinksSettings } from "./enqueueLinks";
+import { ClickOnCoordinatesSettings } from "./clickOnCoordinates";
+
+export {
+  ScrollSettings,
+  ScreenshotSettings,
+  ScrapeSettings,
+  ScrapeSchemaSettings,
+  ScriptSettings,
+  EnqueueLinksSettings,
+  ClickOnCoordinatesSettings,
+};

From 0e9d0c02dd0d7c8a83d5a75f254cbafd091fcded Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 22 Jun 2024 20:03:55 +0530
Subject: [PATCH 13/13] feat: action settings

---
 src/components/molecules/ActionSettings.tsx | 79 +++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/components/molecules/ActionSettings.tsx

diff --git a/src/components/molecules/ActionSettings.tsx b/src/components/molecules/ActionSettings.tsx
new file mode 100644
index 00000000..816c3e76
--- /dev/null
+++ b/src/components/molecules/ActionSettings.tsx
@@ -0,0 +1,79 @@
+import React, { useRef } from 'react';
+import styled from "styled-components";
+import { Button } from "@mui/material";
+import { ActionDescription } from "../organisms/RightSidePanel";
+import * as Settings from "./action-settings";
+import { useSocketStore } from "../../context/socket";
+
+interface ActionSettingsProps {
+  action: string;
+}
+
+export const ActionSettings = ({ action }: ActionSettingsProps) => {
+
+  const settingsRef = useRef<{ getSettings: () => object }>(null);
+  const { socket } = useSocketStore();
+
+  const DisplaySettings = () => {
+    switch (action) {
+      case "screenshot":
+        return <Settings.ScreenshotSettings ref={settingsRef} />;
+      case 'scroll':
+        return <Settings.ScrollSettings ref={settingsRef} />;
+      case 'scrape':
+        return <Settings.ScrapeSettings ref={settingsRef} />;
+      case 'scrapeSchema':
+        return <Settings.ScrapeSchemaSettings ref={settingsRef} />;
+      case 'script':
+        return <Settings.ScriptSettings ref={settingsRef} />;
+      case 'enqueueLinks':
+        return <Settings.EnqueueLinksSettings ref={settingsRef} />;
+      case 'mouse.click':
+        return <Settings.ClickOnCoordinatesSettings ref={settingsRef} />;
+      default:
+        return null;
+    }
+  }
+
+  const handleSubmit = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    //get the data from settings
+    const settings = settingsRef.current?.getSettings();
+    //Send notification to the server and generate the pair
+    socket?.emit(`action`, {
+      action,
+      settings
+    });
+  }
+
+  return (
+    <div>
+      <ActionDescription>Action settings:</ActionDescription>
+      <ActionSettingsWrapper action={action}>
+        <form onSubmit={handleSubmit}>
+          <DisplaySettings />
+          <Button
+            variant="outlined"
+            type="submit"
+            sx={{
+              display: "table-cell",
+              float: "right",
+              marginRight: "15px",
+              marginTop: "20px",
+            }}
+          >
+            Add Action
+          </Button>
+        </form>
+      </ActionSettingsWrapper>
+    </div>
+  );
+};
+
+const ActionSettingsWrapper = styled.div<{ action: string }>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ action }) => action === 'script' ? 'stretch' : 'center'};;
+  justify-content: center;
+  margin-top: 20px;
+`;