chore: google integration auth notif
This commit is contained in:
RohitR311
@@ -1,238 +1,322 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from "react";
|
||||||
import { GenericModal } from "../atoms/GenericModal";
|
import { GenericModal } from "../atoms/GenericModal";
|
||||||
import { MenuItem, Typography, CircularProgress, Alert, AlertTitle, Chip } from "@mui/material";
|
import {
|
||||||
|
MenuItem,
|
||||||
|
Typography,
|
||||||
|
CircularProgress,
|
||||||
|
Alert,
|
||||||
|
AlertTitle,
|
||||||
|
Chip,
|
||||||
|
} from "@mui/material";
|
||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
import TextField from "@mui/material/TextField";
|
import TextField from "@mui/material/TextField";
|
||||||
import axios from 'axios';
|
import axios from "axios";
|
||||||
import { useGlobalInfoStore } from '../../context/globalInfo';
|
import { useGlobalInfoStore } from "../../context/globalInfo";
|
||||||
import { getStoredRecording } from '../../api/storage';
|
import { getStoredRecording } from "../../api/storage";
|
||||||
import { apiUrl } from '../../apiConfig.js';
|
import { apiUrl } from "../../apiConfig.js";
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
interface IntegrationProps {
|
interface IntegrationProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
handleStart: (data: IntegrationSettings) => void;
|
handleStart: (data: IntegrationSettings) => void;
|
||||||
handleClose: () => void;
|
handleClose: () => void;
|
||||||
}
|
}
|
||||||
export interface IntegrationSettings {
|
export interface IntegrationSettings {
|
||||||
spreadsheetId: string;
|
spreadsheetId: string;
|
||||||
spreadsheetName: string;
|
spreadsheetName: string;
|
||||||
data: string;
|
data: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: IntegrationProps) => {
|
export const IntegrationSettingsModal = ({
|
||||||
const [settings, setSettings] = useState<IntegrationSettings>({
|
isOpen,
|
||||||
spreadsheetId: '',
|
handleStart,
|
||||||
spreadsheetName: '',
|
handleClose,
|
||||||
data: '',
|
}: IntegrationProps) => {
|
||||||
});
|
const [settings, setSettings] = useState<IntegrationSettings>({
|
||||||
|
spreadsheetId: "",
|
||||||
|
spreadsheetName: "",
|
||||||
|
data: "",
|
||||||
|
});
|
||||||
|
|
||||||
const [spreadsheets, setSpreadsheets] = useState<{ id: string, name: string }[]>([]);
|
const [spreadsheets, setSpreadsheets] = useState<
|
||||||
const [loading, setLoading] = useState(false);
|
{ id: string; name: string }[]
|
||||||
const [error, setError] = useState<string | null>(null);
|
>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const { recordingId, notify } = useGlobalInfoStore();
|
const { recordingId, notify } = useGlobalInfoStore();
|
||||||
const [recording, setRecording] = useState<any>(null);
|
const [recording, setRecording] = useState<any>(null);
|
||||||
|
|
||||||
const authenticateWithGoogle = () => {
|
const authenticateWithGoogle = () => {
|
||||||
window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`;
|
window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOAuthCallback = async () => {
|
const handleOAuthCallback = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(`${apiUrl}/auth/google/callback`);
|
const response = await axios.get(`${apiUrl}/auth/google/callback`);
|
||||||
const { google_sheet_email, files } = response.data;
|
const { google_sheet_email, files } = response.data;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setError('Error authenticating with Google');
|
setError("Error authenticating with Google");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchSpreadsheetFiles = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(
|
||||||
|
`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`,
|
||||||
|
{
|
||||||
|
withCredentials: true,
|
||||||
}
|
}
|
||||||
};
|
);
|
||||||
|
setSpreadsheets(response.data);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error(
|
||||||
|
"Error fetching spreadsheet files:",
|
||||||
|
error.response?.data?.message || error.message
|
||||||
|
);
|
||||||
|
notify(
|
||||||
|
"error",
|
||||||
|
`Error fetching spreadsheet files: ${
|
||||||
|
error.response?.data?.message || error.message
|
||||||
|
}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const fetchSpreadsheetFiles = async () => {
|
const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
try {
|
const selectedSheet = spreadsheets.find(
|
||||||
const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, {
|
(sheet) => sheet.id === e.target.value
|
||||||
withCredentials: true,
|
|
||||||
});
|
|
||||||
setSpreadsheets(response.data);
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Error fetching spreadsheet files:', error.response?.data?.message || error.message);
|
|
||||||
notify('error', `Error fetching spreadsheet files: ${error.response?.data?.message || error.message}`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const selectedSheet = spreadsheets.find(sheet => sheet.id === e.target.value);
|
|
||||||
if (selectedSheet) {
|
|
||||||
setSettings({ ...settings, spreadsheetId: selectedSheet.id, spreadsheetName: selectedSheet.name });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateGoogleSheetId = async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.post(
|
|
||||||
`${apiUrl}/auth/gsheets/update`,
|
|
||||||
{ spreadsheetId: settings.spreadsheetId, spreadsheetName: settings.spreadsheetName, robotId: recordingId },
|
|
||||||
{ withCredentials: true }
|
|
||||||
);
|
|
||||||
console.log('Google Sheet ID updated:', response.data);
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Error updating Google Sheet ID:', error.response?.data?.message || error.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeIntegration = async () => {
|
|
||||||
try {
|
|
||||||
await axios.post(
|
|
||||||
`${apiUrl}/auth/gsheets/remove`,
|
|
||||||
{ robotId: recordingId },
|
|
||||||
{ withCredentials: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
setRecording(null);
|
|
||||||
setSpreadsheets([]);
|
|
||||||
setSettings({ spreadsheetId: '', spreadsheetName: '', data: '' });
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Error removing Google Sheets integration:', error.response?.data?.message || error.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Check if we're on the callback URL
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const code = urlParams.get('code');
|
|
||||||
if (code) {
|
|
||||||
handleOAuthCallback();
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchRecordingInfo = async () => {
|
|
||||||
if (!recordingId) return;
|
|
||||||
const recording = await getStoredRecording(recordingId);
|
|
||||||
if (recording) {
|
|
||||||
setRecording(recording);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchRecordingInfo();
|
|
||||||
}, [recordingId]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', marginLeft: '65px' }}>
|
|
||||||
<Typography variant="h6" >Integrate with Google Sheet <Chip label="beta" color="primary" variant="outlined" /></Typography>
|
|
||||||
|
|
||||||
{recording && recording.google_sheet_id ? (
|
|
||||||
<>
|
|
||||||
<Alert severity="info">
|
|
||||||
<AlertTitle>Google Sheet Integrated Successfully.</AlertTitle>
|
|
||||||
Every time this robot creates a successful run, its captured data is appended to your {recording.google_sheet_name} Google Sheet. You can check the data updates <a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`} target="_blank" rel="noreferrer">here</a>.
|
|
||||||
<br />
|
|
||||||
<strong>Note:</strong> The data extracted before integrating with Google Sheets will not be synced in the Google Sheet. Only the data extracted after the integration will be synced.
|
|
||||||
</Alert>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
onClick={removeIntegration}
|
|
||||||
style={{ marginTop: '15px' }}
|
|
||||||
>
|
|
||||||
Remove Integration
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{!recording?.google_sheet_email ? (
|
|
||||||
<>
|
|
||||||
<p>If you enable this option, every time this robot runs a task successfully, its captured data will be appended to your Google Sheet.</p>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
onClick={authenticateWithGoogle}
|
|
||||||
>
|
|
||||||
Authenticate with Google
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{recording.google_sheet_email && (
|
|
||||||
<Typography sx={{ margin: '20px 0px 30px 0px' }}>
|
|
||||||
Authenticated as: {recording.google_sheet_email}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<CircularProgress sx={{ marginBottom: '15px' }} />
|
|
||||||
) : error ? (
|
|
||||||
<Typography color="error">{error}</Typography>
|
|
||||||
) : spreadsheets.length === 0 ? (
|
|
||||||
<>
|
|
||||||
<div style={{ display: 'flex', gap: '10px' }}>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="primary"
|
|
||||||
onClick={fetchSpreadsheetFiles}
|
|
||||||
>
|
|
||||||
Fetch Google Spreadsheets
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
onClick={removeIntegration}
|
|
||||||
>
|
|
||||||
Remove Integration
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<TextField
|
|
||||||
sx={{ marginBottom: '15px' }}
|
|
||||||
select
|
|
||||||
label="Select Google Sheet"
|
|
||||||
required
|
|
||||||
value={settings.spreadsheetId}
|
|
||||||
onChange={handleSpreadsheetSelect}
|
|
||||||
fullWidth
|
|
||||||
>
|
|
||||||
{spreadsheets.map(sheet => (
|
|
||||||
<MenuItem key={sheet.id} value={sheet.id}>
|
|
||||||
{sheet.name}
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</TextField>
|
|
||||||
|
|
||||||
{settings.spreadsheetId && (
|
|
||||||
<Typography sx={{ marginBottom: '10px' }}>
|
|
||||||
Selected Sheet: {spreadsheets.find(s => s.id === settings.spreadsheetId)?.name} (ID: {settings.spreadsheetId})
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
onClick={() => {
|
|
||||||
updateGoogleSheetId();
|
|
||||||
handleStart(settings);
|
|
||||||
}}
|
|
||||||
style={{ marginTop: '10px' }}
|
|
||||||
disabled={!settings.spreadsheetId || loading}
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</GenericModal>
|
|
||||||
);
|
);
|
||||||
|
if (selectedSheet) {
|
||||||
|
setSettings({
|
||||||
|
...settings,
|
||||||
|
spreadsheetId: selectedSheet.id,
|
||||||
|
spreadsheetName: selectedSheet.name,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateGoogleSheetId = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.post(
|
||||||
|
`${apiUrl}/auth/gsheets/update`,
|
||||||
|
{
|
||||||
|
spreadsheetId: settings.spreadsheetId,
|
||||||
|
spreadsheetName: settings.spreadsheetName,
|
||||||
|
robotId: recordingId,
|
||||||
|
},
|
||||||
|
{ withCredentials: true }
|
||||||
|
);
|
||||||
|
console.log("Google Sheet ID updated:", response.data);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error(
|
||||||
|
"Error updating Google Sheet ID:",
|
||||||
|
error.response?.data?.message || error.message
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeIntegration = async () => {
|
||||||
|
try {
|
||||||
|
await axios.post(
|
||||||
|
`${apiUrl}/auth/gsheets/remove`,
|
||||||
|
{ robotId: recordingId },
|
||||||
|
{ withCredentials: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
setRecording(null);
|
||||||
|
setSpreadsheets([]);
|
||||||
|
setSettings({ spreadsheetId: "", spreadsheetName: "", data: "" });
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error(
|
||||||
|
"Error removing Google Sheets integration:",
|
||||||
|
error.response?.data?.message || error.message
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if there is a success message in cookies
|
||||||
|
const status = Cookies.get("robot_auth_status");
|
||||||
|
const message = Cookies.get("robot_auth_message");
|
||||||
|
|
||||||
|
if (status === "success" && message) {
|
||||||
|
notify("success", message);
|
||||||
|
// Clear the cookies after reading
|
||||||
|
Cookies.remove("robot_auth_status");
|
||||||
|
Cookies.remove("robot_auth_message");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if we're on the callback URL
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const code = urlParams.get("code");
|
||||||
|
if (code) {
|
||||||
|
handleOAuthCallback();
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchRecordingInfo = async () => {
|
||||||
|
if (!recordingId) return;
|
||||||
|
const recording = await getStoredRecording(recordingId);
|
||||||
|
if (recording) {
|
||||||
|
setRecording(recording);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchRecordingInfo();
|
||||||
|
}, [recordingId]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
marginLeft: "65px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h6">
|
||||||
|
Integrate with Google Sheet{" "}
|
||||||
|
<Chip label="beta" color="primary" variant="outlined" />
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{recording && recording.google_sheet_id ? (
|
||||||
|
<>
|
||||||
|
<Alert severity="info">
|
||||||
|
<AlertTitle>Google Sheet Integrated Successfully.</AlertTitle>
|
||||||
|
Every time this robot creates a successful run, its captured data
|
||||||
|
is appended to your {recording.google_sheet_name} Google Sheet.
|
||||||
|
You can check the data updates{" "}
|
||||||
|
<a
|
||||||
|
href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
here
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
<br />
|
||||||
|
<strong>Note:</strong> The data extracted before integrating with
|
||||||
|
Google Sheets will not be synced in the Google Sheet. Only the
|
||||||
|
data extracted after the integration will be synced.
|
||||||
|
</Alert>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
color="error"
|
||||||
|
onClick={removeIntegration}
|
||||||
|
style={{ marginTop: "15px" }}
|
||||||
|
>
|
||||||
|
Remove Integration
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{!recording?.google_sheet_email ? (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
If you enable this option, every time this robot runs a task
|
||||||
|
successfully, its captured data will be appended to your
|
||||||
|
Google Sheet.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={authenticateWithGoogle}
|
||||||
|
>
|
||||||
|
Authenticate with Google
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{recording.google_sheet_email && (
|
||||||
|
<Typography sx={{ margin: "20px 0px 30px 0px" }}>
|
||||||
|
Authenticated as: {recording.google_sheet_email}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<CircularProgress sx={{ marginBottom: "15px" }} />
|
||||||
|
) : error ? (
|
||||||
|
<Typography color="error">{error}</Typography>
|
||||||
|
) : spreadsheets.length === 0 ? (
|
||||||
|
<>
|
||||||
|
<div style={{ display: "flex", gap: "10px" }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
onClick={fetchSpreadsheetFiles}
|
||||||
|
>
|
||||||
|
Fetch Google Spreadsheets
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
color="error"
|
||||||
|
onClick={removeIntegration}
|
||||||
|
>
|
||||||
|
Remove Integration
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<TextField
|
||||||
|
sx={{ marginBottom: "15px" }}
|
||||||
|
select
|
||||||
|
label="Select Google Sheet"
|
||||||
|
required
|
||||||
|
value={settings.spreadsheetId}
|
||||||
|
onChange={handleSpreadsheetSelect}
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
{spreadsheets.map((sheet) => (
|
||||||
|
<MenuItem key={sheet.id} value={sheet.id}>
|
||||||
|
{sheet.name}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
|
||||||
|
{settings.spreadsheetId && (
|
||||||
|
<Typography sx={{ marginBottom: "10px" }}>
|
||||||
|
Selected Sheet:{" "}
|
||||||
|
{
|
||||||
|
spreadsheets.find(
|
||||||
|
(s) => s.id === settings.spreadsheetId
|
||||||
|
)?.name
|
||||||
|
}{" "}
|
||||||
|
(ID: {settings.spreadsheetId})
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
updateGoogleSheetId();
|
||||||
|
handleStart(settings);
|
||||||
|
}}
|
||||||
|
style={{ marginTop: "10px" }}
|
||||||
|
disabled={!settings.spreadsheetId || loading}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</GenericModal>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const modalStyle = {
|
export const modalStyle = {
|
||||||
top: '40%',
|
top: "40%",
|
||||||
left: '50%',
|
left: "50%",
|
||||||
transform: 'translate(-50%, -50%)',
|
transform: "translate(-50%, -50%)",
|
||||||
width: '50%',
|
width: "50%",
|
||||||
backgroundColor: 'background.paper',
|
backgroundColor: "background.paper",
|
||||||
p: 4,
|
p: 4,
|
||||||
height: 'fit-content',
|
height: "fit-content",
|
||||||
display: 'block',
|
display: "block",
|
||||||
padding: '20px',
|
padding: "20px",
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user