822 lines
36 KiB
TypeScript
822 lines
36 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
MenuItem,
|
|
Typography,
|
|
CircularProgress,
|
|
Alert,
|
|
AlertTitle,
|
|
Button,
|
|
TextField,
|
|
IconButton,
|
|
Box,
|
|
Chip,
|
|
Card,
|
|
CardContent,
|
|
CardActions,
|
|
Switch,
|
|
FormControlLabel,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
} from "@mui/material";
|
|
import {
|
|
Add as AddIcon,
|
|
Delete as DeleteIcon,
|
|
Edit as EditIcon,
|
|
Science as ScienceIcon,
|
|
} from "@mui/icons-material";
|
|
import axios from "axios";
|
|
import { useGlobalInfoStore } from "../../../context/globalInfo";
|
|
import { getStoredRecording } from "../../../api/storage";
|
|
import { apiUrl } from "../../../apiConfig.js";
|
|
import { v4 as uuid } from "uuid";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate, useParams, useLocation } from "react-router-dom";
|
|
import {
|
|
addWebhook,
|
|
updateWebhook,
|
|
removeWebhook,
|
|
getWebhooks,
|
|
testWebhook,
|
|
WebhookConfig,
|
|
} from "../../../api/webhook";
|
|
import { RobotConfigPage } from "./RobotConfigPage";
|
|
|
|
interface IntegrationProps {
|
|
handleStart: (data: IntegrationSettings) => void;
|
|
robotPath?: string;
|
|
preSelectedIntegrationType?: "googleSheets" | "airtable" | "webhook" | null;
|
|
}
|
|
|
|
export interface IntegrationSettings {
|
|
spreadsheetId?: string;
|
|
spreadsheetName?: string;
|
|
airtableBaseId?: string;
|
|
airtableBaseName?: string;
|
|
airtableTableName?: string;
|
|
airtableTableId?: string;
|
|
webhooks?: WebhookConfig[];
|
|
data: string;
|
|
integrationType: "googleSheets" | "airtable" | "webhook";
|
|
}
|
|
|
|
export const RobotIntegrationPage = ({
|
|
handleStart,
|
|
robotPath = "robots",
|
|
preSelectedIntegrationType = null,
|
|
}: IntegrationProps) => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const pathSegments = location.pathname.split('/');
|
|
const robotsIndex = pathSegments.findIndex(segment => segment === 'robots' || segment === 'prebuilt-robots');
|
|
const integrateIndex = pathSegments.findIndex(segment => segment === 'integrate');
|
|
|
|
const robotIdFromUrl = robotsIndex !== -1 && robotsIndex + 1 < pathSegments.length
|
|
? pathSegments[robotsIndex + 1]
|
|
: null;
|
|
|
|
const integrationType = integrateIndex !== -1 && integrateIndex + 1 < pathSegments.length
|
|
? pathSegments[integrateIndex + 1] as "googleSheets" | "airtable" | "webhook"
|
|
: preSelectedIntegrationType || null;
|
|
|
|
const [settings, setSettings] = useState<IntegrationSettings>({
|
|
spreadsheetId: "",
|
|
spreadsheetName: "",
|
|
airtableBaseId: "",
|
|
airtableBaseName: "",
|
|
airtableTableName: "",
|
|
airtableTableId: "",
|
|
webhooks: [],
|
|
data: "",
|
|
integrationType: integrationType || "airtable",
|
|
});
|
|
|
|
const [spreadsheets, setSpreadsheets] = useState<{ id: string; name: string }[]>([]);
|
|
const [airtableBases, setAirtableBases] = useState<{ id: string; name: string }[]>([]);
|
|
const [airtableTables, setAirtableTables] = useState<{ id: string; name: string }[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [showWebhookForm, setShowWebhookForm] = useState(false);
|
|
const [editingWebhook, setEditingWebhook] = useState<string | null>(null);
|
|
const [newWebhook, setNewWebhook] = useState<WebhookConfig>({
|
|
id: "",
|
|
url: "",
|
|
events: ["run_completed"],
|
|
active: true,
|
|
});
|
|
const [urlError, setUrlError] = useState<string | null>(null);
|
|
|
|
const { recordingId: recordingIdFromStore, notify, setRerenderRobots, setRecordingId } = useGlobalInfoStore();
|
|
|
|
const recordingId = robotIdFromUrl || recordingIdFromStore;
|
|
|
|
useEffect(() => {
|
|
if (robotIdFromUrl && robotIdFromUrl !== recordingIdFromStore) {
|
|
setRecordingId(robotIdFromUrl);
|
|
}
|
|
}, [robotIdFromUrl, recordingIdFromStore, setRecordingId]);
|
|
|
|
const [recording, setRecording] = useState<any>(null);
|
|
const [selectedIntegrationType, setSelectedIntegrationType] = useState<
|
|
"googleSheets" | "airtable" | "webhook" | null
|
|
>(integrationType);
|
|
|
|
const authenticateWithGoogle = () => {
|
|
if (!recordingId) {
|
|
console.error("Cannot authenticate: recordingId is null");
|
|
return;
|
|
}
|
|
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
|
const redirectUrl = `${window.location.origin}${basePath}/${recordingId}/integrate/googleSheets`;
|
|
window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}&redirectUrl=${encodeURIComponent(redirectUrl)}`;
|
|
};
|
|
|
|
const authenticateWithAirtable = () => {
|
|
if (!recordingId) {
|
|
console.error("Cannot authenticate: recordingId is null");
|
|
return;
|
|
}
|
|
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
|
const redirectUrl = `${window.location.origin}${basePath}/${recordingId}/integrate/airtable`;
|
|
window.location.href = `${apiUrl}/auth/airtable?robotId=${recordingId}&redirectUrl=${encodeURIComponent(redirectUrl)}`;
|
|
};
|
|
|
|
const validateWebhookData = (
|
|
url: string,
|
|
events: string[],
|
|
excludeId?: string
|
|
) => {
|
|
if (!url) {
|
|
setUrlError("Please provide webhook URL");
|
|
return false;
|
|
}
|
|
try {
|
|
new URL(url);
|
|
} catch {
|
|
setUrlError("Please provide a valid URL");
|
|
return false;
|
|
}
|
|
const existingWebhook = settings.webhooks?.find(
|
|
(webhook) => webhook.url === url && webhook.id !== excludeId
|
|
);
|
|
if (existingWebhook) {
|
|
setUrlError("This webhook URL is already in use");
|
|
return false;
|
|
}
|
|
if (!events || events.length === 0) {
|
|
setUrlError("Please select at least one event");
|
|
return false;
|
|
}
|
|
setUrlError(null);
|
|
return true;
|
|
};
|
|
|
|
const fetchWebhooks = async () => {
|
|
try {
|
|
setLoading(true);
|
|
if (!recordingId) return;
|
|
const response = await getWebhooks(recordingId);
|
|
if (response.ok && response.webhooks) {
|
|
setSettings((prev) => ({ ...prev, webhooks: response.webhooks }));
|
|
}
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error fetching webhooks:", error);
|
|
}
|
|
};
|
|
|
|
const addWebhookSetting = async () => {
|
|
if (!validateWebhookData(newWebhook.url, newWebhook.events)) {
|
|
if (!newWebhook.url) notify("error", "Please provide webhook URL");
|
|
else if (!newWebhook.events || newWebhook.events.length === 0) notify("error", "Please select at least one event");
|
|
return;
|
|
}
|
|
if (!recordingId) return;
|
|
try {
|
|
setLoading(true);
|
|
const webhookWithId = { ...newWebhook, id: uuid() };
|
|
const response = await addWebhook(webhookWithId, recordingId);
|
|
if (response.ok) {
|
|
setSettings((prev) => ({ ...prev, webhooks: [...(prev.webhooks || []), webhookWithId] }));
|
|
setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
|
|
setShowWebhookForm(false);
|
|
notify("success", "Webhook added successfully");
|
|
} else {
|
|
notify("error", response.message || "Failed to add webhook");
|
|
}
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
notify("error", "Failed to add webhook");
|
|
console.error("Error adding webhook:", error);
|
|
}
|
|
};
|
|
|
|
const updateWebhookSetting = async () => {
|
|
if (!validateWebhookData(newWebhook.url, newWebhook.events, editingWebhook || undefined)) return;
|
|
if (!recordingId || !editingWebhook) return;
|
|
try {
|
|
setLoading(true);
|
|
const response = await updateWebhook({ ...newWebhook, id: editingWebhook }, recordingId);
|
|
if (response.ok) {
|
|
setSettings((prev) => ({
|
|
...prev,
|
|
webhooks: (prev.webhooks || []).map((webhook) =>
|
|
webhook.id === editingWebhook ? { ...newWebhook, id: editingWebhook } : webhook
|
|
),
|
|
}));
|
|
setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
|
|
setEditingWebhook(null);
|
|
setShowWebhookForm(false);
|
|
notify("success", "Webhook updated successfully");
|
|
} else {
|
|
notify("error", response.message || "Failed to update webhook");
|
|
}
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
notify("error", "Failed to update webhook");
|
|
console.error("Error updating webhook:", error);
|
|
}
|
|
};
|
|
|
|
const deleteWebhookSetting = async (webhookId: string) => {
|
|
if (!recordingId) return;
|
|
try {
|
|
setLoading(true);
|
|
const response = await removeWebhook(webhookId, recordingId);
|
|
if (response.ok) {
|
|
setSettings((prev) => ({ ...prev, webhooks: (prev.webhooks || []).filter((webhook) => webhook.id !== webhookId) }));
|
|
if (recordingId) {
|
|
const updatedRecording = await getStoredRecording(recordingId);
|
|
setRecording(updatedRecording);
|
|
}
|
|
setRerenderRobots(true);
|
|
notify("success", "Webhook removed successfully");
|
|
} else {
|
|
notify("error", response.error || "Failed to remove webhook");
|
|
}
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
notify("error", "Failed to remove webhook");
|
|
console.error("Error removing webhook:", error);
|
|
}
|
|
};
|
|
|
|
const testWebhookSetting = async (webhookId: string) => {
|
|
if (!recordingId) return;
|
|
const webhook = settings.webhooks?.find(w => w.id === webhookId);
|
|
if (!webhook) return;
|
|
try {
|
|
setLoading(true);
|
|
const response = await testWebhook(webhook, recordingId);
|
|
if (response.ok) {
|
|
notify("success", "Test webhook sent successfully");
|
|
} else {
|
|
notify("error", response.message || "Failed to test webhook");
|
|
}
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
notify("error", "Failed to test webhook");
|
|
console.error("Error testing webhook:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setSelectedIntegrationType(integrationType);
|
|
setSettings(prev => ({ ...prev, integrationType: integrationType || "airtable" }));
|
|
}, [integrationType]);
|
|
|
|
useEffect(() => {
|
|
const fetchRecording = async () => {
|
|
if (recordingId) {
|
|
try {
|
|
const recordingData = await getStoredRecording(recordingId);
|
|
setRecording(recordingData);
|
|
} catch (error) {
|
|
console.error("Failed to fetch recording:", error);
|
|
}
|
|
}
|
|
};
|
|
fetchRecording();
|
|
if (selectedIntegrationType === "webhook") {
|
|
fetchWebhooks();
|
|
}
|
|
}, [recordingId, selectedIntegrationType]);
|
|
|
|
const handleCancel = () => {
|
|
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
|
navigate(basePath);
|
|
};
|
|
|
|
const fetchSpreadsheetFiles = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, { withCredentials: true });
|
|
setSpreadsheets(response.data);
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error fetching spreadsheet files:", error);
|
|
notify("error", t("integration_settings.google.errors.fetch_error", {
|
|
message: 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 {
|
|
setLoading(true);
|
|
await axios.post(`${apiUrl}/auth/gsheets/update`, {
|
|
spreadsheetId: settings.spreadsheetId,
|
|
spreadsheetName: settings.spreadsheetName,
|
|
robotId: recordingId,
|
|
}, { withCredentials: true });
|
|
if (recordingId) {
|
|
const updatedRecording = await getStoredRecording(recordingId);
|
|
setRecording(updatedRecording);
|
|
}
|
|
setRerenderRobots(true);
|
|
notify("success", t("integration_settings.google.notifications.sheet_selected"));
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error updating Google Sheet ID:", error);
|
|
notify("error", t("integration_settings.google.errors.update_error", {
|
|
message: error.response?.data?.message || error.message,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const removeGoogleSheetsIntegration = async () => {
|
|
try {
|
|
setLoading(true);
|
|
await axios.post(`${apiUrl}/auth/gsheets/remove`, { robotId: recordingId }, { withCredentials: true });
|
|
setSpreadsheets([]);
|
|
setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" });
|
|
if (recordingId) {
|
|
const updatedRecording = await getStoredRecording(recordingId);
|
|
setRecording(updatedRecording);
|
|
}
|
|
setRerenderRobots(true);
|
|
notify("success", t("integration_settings.google.notifications.integration_removed"));
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error removing Google Sheets integration:", error);
|
|
notify("error", t("integration_settings.google.errors.remove_error", {
|
|
message: error.response?.data?.message || error.message,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const fetchAirtableBases = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await axios.get(`${apiUrl}/auth/airtable/bases?robotId=${recordingId}`, { withCredentials: true });
|
|
setAirtableBases(response.data);
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error fetching Airtable bases:", error);
|
|
notify("error", t("integration_settings.airtable.errors.fetch_error", {
|
|
message: error.response?.data?.message || error.message,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const fetchAirtableTables = async (baseId: string, recordingId: string) => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await axios.get(`${apiUrl}/auth/airtable/tables?robotId=${recordingId}&baseId=${baseId}`, { withCredentials: true });
|
|
setAirtableTables(response.data);
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error fetching Airtable tables:", error);
|
|
notify("error", t("integration_settings.airtable.errors.fetch_tables_error", {
|
|
message: error.response?.data?.message || error.message,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleAirtableBaseSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selectedBase = airtableBases.find((base) => base.id === e.target.value);
|
|
if (selectedBase) {
|
|
setSettings((prevSettings) => ({ ...prevSettings, airtableBaseId: selectedBase.id, airtableBaseName: selectedBase.name }));
|
|
if (recordingId) await fetchAirtableTables(selectedBase.id, recordingId);
|
|
}
|
|
};
|
|
|
|
const handleAirtabletableSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selectedTable = airtableTables.find((table) => table.id === e.target.value);
|
|
if (selectedTable) {
|
|
setSettings((prevSettings) => ({ ...prevSettings, airtableTableId: e.target.value, airtableTableName: selectedTable?.name || "" }));
|
|
}
|
|
};
|
|
|
|
const updateAirtableBase = async () => {
|
|
try {
|
|
setLoading(true);
|
|
await axios.post(`${apiUrl}/auth/airtable/update`, {
|
|
baseId: settings.airtableBaseId,
|
|
baseName: settings.airtableBaseName,
|
|
robotId: recordingId,
|
|
tableName: settings.airtableTableName,
|
|
tableId: settings.airtableTableId,
|
|
}, { withCredentials: true });
|
|
if (recordingId) {
|
|
const updatedRecording = await getStoredRecording(recordingId);
|
|
setRecording(updatedRecording);
|
|
}
|
|
setRerenderRobots(true);
|
|
notify("success", t("integration_settings.airtable.notifications.base_selected"));
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error updating Airtable base:", error);
|
|
notify("error", t("integration_settings.airtable.errors.update_error", {
|
|
message: error.response?.data?.message || error.message,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const removeAirtableIntegration = async () => {
|
|
try {
|
|
setLoading(true);
|
|
await axios.post(`${apiUrl}/auth/airtable/remove`, { robotId: recordingId }, { withCredentials: true });
|
|
setAirtableBases([]);
|
|
setAirtableTables([]);
|
|
setSettings({ ...settings, airtableBaseId: "", airtableBaseName: "", airtableTableName: "", airtableTableId: "" });
|
|
if (recordingId) {
|
|
const updatedRecording = await getStoredRecording(recordingId);
|
|
setRecording(updatedRecording);
|
|
}
|
|
setRerenderRobots(true);
|
|
notify("success", t("integration_settings.airtable.notifications.integration_removed"));
|
|
setLoading(false);
|
|
} catch (error: any) {
|
|
setLoading(false);
|
|
console.error("Error removing Airtable integration:", error);
|
|
notify("error", t("integration_settings.airtable.errors.remove_error", {
|
|
message: error.response?.data?.message || error.message,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const renderGoogleSheetsIntegration = () => (
|
|
<>
|
|
<Typography variant="h6">
|
|
{t("integration_settings.google.title")}
|
|
</Typography>
|
|
{recording?.google_sheet_id ? (
|
|
<>
|
|
<Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
|
|
<AlertTitle>{t("integration_settings.google.alerts.success.title")}</AlertTitle>
|
|
{t("integration_settings.google.alerts.success.content", { sheetName: recording.google_sheet_name })}
|
|
<a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`} target="_blank" rel="noreferrer" style={{ marginLeft: "4px", fontWeight: "bold" }}>
|
|
{t("integration_settings.google.alerts.success.here")}
|
|
</a>
|
|
</Alert>
|
|
<Button variant="outlined" color="error" onClick={removeGoogleSheetsIntegration} style={{ marginTop: "15px" }} disabled={loading}>
|
|
{loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.remove_integration")}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
{!recording?.google_sheet_email ? (
|
|
<>
|
|
<p>{t("integration_settings.google.descriptions.sync_info")}</p>
|
|
<Button variant="contained" color="primary" onClick={authenticateWithGoogle} disabled={loading}>
|
|
{loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.authenticate")}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Typography sx={{ margin: "20px 0px 30px 0px" }}>
|
|
{t("integration_settings.google.descriptions.authenticated_as", { email: recording.google_sheet_email })}
|
|
</Typography>
|
|
{loading ? (
|
|
<CircularProgress sx={{ marginBottom: "15px" }} />
|
|
) : error ? (
|
|
<Typography color="error">{error}</Typography>
|
|
) : spreadsheets.length === 0 ? (
|
|
<Button variant="outlined" color="primary" onClick={fetchSpreadsheetFiles} disabled={loading}>
|
|
{t("integration_settings.google.buttons.fetch_sheets")}
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.google.fields.select_sheet")} required value={settings.spreadsheetId} onChange={handleSpreadsheetSelect} fullWidth>
|
|
{spreadsheets.map((sheet) => (<MenuItem key={sheet.id} value={sheet.id}>{sheet.name}</MenuItem>))}
|
|
</TextField>
|
|
<Button variant="contained" color="primary" onClick={updateGoogleSheetId} style={{ marginTop: "10px" }} disabled={!settings.spreadsheetId || loading}>
|
|
{loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.submit")}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const renderAirtableIntegration = () => (
|
|
<>
|
|
<Typography variant="h6">
|
|
{t("integration_settings.airtable.title")}
|
|
</Typography>
|
|
{recording?.airtable_base_id ? (
|
|
<>
|
|
<Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
|
|
<AlertTitle>{t("integration_settings.airtable.alerts.success.title")}</AlertTitle>
|
|
{t("integration_settings.airtable.alerts.success.content", { baseName: recording.airtable_base_name, tableName: recording.airtable_table_name })}
|
|
<a href={`https://airtable.com/${recording.airtable_base_id}`} target="_blank" rel="noreferrer" style={{ marginLeft: "4px", fontWeight: "bold" }}>
|
|
{t("integration_settings.airtable.alerts.success.here")}
|
|
</a>
|
|
</Alert>
|
|
<Button variant="outlined" color="error" onClick={removeAirtableIntegration} style={{ marginTop: "15px" }} disabled={loading}>
|
|
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.remove_integration")}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
{!recording?.airtable_access_token ? (
|
|
<>
|
|
<p>{t("integration_settings.airtable.descriptions.sync_info")}</p>
|
|
<Button variant="contained" color="primary" onClick={authenticateWithAirtable} disabled={loading}>
|
|
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.authenticate")}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Typography sx={{ margin: "20px 0px 30px 0px" }}>
|
|
{t("integration_settings.airtable.descriptions.authenticated_as")}
|
|
</Typography>
|
|
{loading ? (
|
|
<CircularProgress sx={{ marginBottom: "15px" }} />
|
|
) : error ? (
|
|
<Typography color="error">{error}</Typography>
|
|
) : airtableBases.length === 0 ? (
|
|
<Box sx={{ display: "flex", gap: "15px", alignItems: "center", marginBottom: "20px" }}>
|
|
<Button variant="outlined" color="primary" onClick={fetchAirtableBases} disabled={loading}>
|
|
{t("integration_settings.airtable.buttons.fetch_bases")}
|
|
</Button>
|
|
<Button variant="outlined" color="error" onClick={removeAirtableIntegration} disabled={loading}>
|
|
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.remove_integration")}
|
|
</Button>
|
|
</Box>
|
|
) : (
|
|
<>
|
|
<TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.airtable.fields.select_base")} required value={settings.airtableBaseId} onChange={handleAirtableBaseSelect} fullWidth>
|
|
{airtableBases.map((base) => (<MenuItem key={base.id} value={base.id}>{base.name}</MenuItem>))}
|
|
</TextField>
|
|
<TextField sx={{ marginBottom: "15px" }} select label={t("integration_settings.airtable.fields.select_table")} required value={settings.airtableTableId} onChange={handleAirtabletableSelect} fullWidth>
|
|
{airtableTables.map((table) => (<MenuItem key={table.id} value={table.id}>{table.name}</MenuItem>))}
|
|
</TextField>
|
|
<Button variant="contained" color="primary" onClick={updateAirtableBase} style={{ marginTop: "10px" }} disabled={!settings.airtableBaseId || loading}>
|
|
{loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.submit")}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const getIntegrationTitle = () => {
|
|
switch (selectedIntegrationType) {
|
|
case "googleSheets":
|
|
return "Google Sheets Integration";
|
|
case "airtable":
|
|
return "Airtable Integration";
|
|
case "webhook":
|
|
return "Webhook Integration";
|
|
default:
|
|
return "Integration";
|
|
}
|
|
};
|
|
|
|
const editWebhookSetting = (webhook: WebhookConfig) => {
|
|
setNewWebhook(webhook);
|
|
setEditingWebhook(webhook.id);
|
|
setShowWebhookForm(true);
|
|
};
|
|
|
|
const resetWebhookForm = () => {
|
|
setNewWebhook({ id: "", url: "", events: ["run_completed"], active: true });
|
|
setShowWebhookForm(false);
|
|
setEditingWebhook(null);
|
|
setUrlError(null);
|
|
};
|
|
|
|
const toggleWebhookStatusSetting = async (webhookId: string) => {
|
|
if (!recordingId) return;
|
|
try {
|
|
const webhook = settings.webhooks?.find((w) => w.id === webhookId);
|
|
if (!webhook) return;
|
|
const updatedWebhook = { ...webhook, active: !webhook.active };
|
|
const response = await updateWebhook(updatedWebhook, recordingId);
|
|
if (response.ok) {
|
|
const updatedWebhooks = (settings.webhooks || []).map((w) => w.id === webhookId ? updatedWebhook : w);
|
|
setSettings({ ...settings, webhooks: updatedWebhooks });
|
|
if (recordingId) {
|
|
const updatedRecording = await getStoredRecording(recordingId);
|
|
setRecording(updatedRecording);
|
|
}
|
|
setRerenderRobots(true);
|
|
notify("success", `Webhook ${updatedWebhook.active ? "enabled" : "disabled"}`);
|
|
} else {
|
|
notify("error", response.message || "Failed to update webhook");
|
|
}
|
|
} catch (error: any) {
|
|
console.error("Error toggling webhook status:", error);
|
|
notify("error", "Failed to update webhook");
|
|
}
|
|
};
|
|
|
|
const formatEventName = (event: string) => {
|
|
switch (event) {
|
|
case "run_completed": return "Run finished";
|
|
case "run_failed": return "Run failed";
|
|
default: return event;
|
|
}
|
|
};
|
|
|
|
const formatLastCalled = (lastCalledAt?: string | null) => {
|
|
if (!lastCalledAt) return "Not called yet";
|
|
const date = new Date(lastCalledAt);
|
|
const now = new Date();
|
|
const diffMs = now.getTime() - date.getTime();
|
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
|
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
|
const diffMinutes = Math.floor(diffMs / (1000 * 60));
|
|
if (diffMinutes < 1) return "Just now";
|
|
else if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
|
|
else if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
|
|
else if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
|
|
else return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
|
|
};
|
|
|
|
// --- MAIN RENDER ---
|
|
if (!selectedIntegrationType && !integrationType) {
|
|
return (
|
|
<RobotConfigPage title="Integration Settings" onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} backToSelectionText={"← " + t("right_panel.buttons.back")} onBackToSelection={() => navigate(`/${robotPath}/${recordingId}/integrate`)}>
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "20px", width: "100%" }}>
|
|
<div style={{ display: "flex", gap: "20px" }}>
|
|
<Button variant="outlined" onClick={() => {
|
|
if (!recordingId) return;
|
|
setSelectedIntegrationType("googleSheets");
|
|
setSettings({ ...settings, integrationType: "googleSheets" });
|
|
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
|
navigate(`${basePath}/${recordingId}/integrate/googleSheets`);
|
|
}} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
|
<img src="https://ik.imagekit.io/ys1blv5kv/gsheet.svg" alt="Google Sheets" style={{ margin: "6px" }} />
|
|
Google Sheets
|
|
</Button>
|
|
<Button variant="outlined" onClick={() => {
|
|
if (!recordingId) return;
|
|
setSelectedIntegrationType("airtable");
|
|
setSettings({ ...settings, integrationType: "airtable" });
|
|
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
|
navigate(`${basePath}/${recordingId}/integrate/airtable`);
|
|
}} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
|
<img src="https://ik.imagekit.io/ys1blv5kv/airtable.svg" alt="Airtable" style={{ margin: "6px" }} />
|
|
Airtable
|
|
</Button>
|
|
<Button variant="outlined" onClick={() => {
|
|
if (!recordingId) return;
|
|
setSelectedIntegrationType("webhook");
|
|
setSettings({ ...settings, integrationType: "webhook" });
|
|
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
|
navigate(`${basePath}/${recordingId}/integrate/webhook`);
|
|
}} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
|
<img src="/svg/webhook.svg" alt="Webhook" style={{ margin: "6px" }} />
|
|
Webhooks
|
|
</Button>
|
|
<Button variant="outlined" onClick={() => { window.open("https://docs.maxun.dev/mcp/setup", "_blank", "noopener,noreferrer"); }} style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}>
|
|
<img src="/svg/mcp.svg" alt="MCP" style={{ margin: "6px" }} />
|
|
MCP
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</RobotConfigPage>
|
|
);
|
|
}
|
|
|
|
const handleBack = () => {
|
|
if (!recordingId) return;
|
|
setSelectedIntegrationType(null);
|
|
const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
|
|
navigate(`${basePath}/${recordingId}/integrate`);
|
|
};
|
|
|
|
return (
|
|
<RobotConfigPage title={getIntegrationTitle()} onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} onBackToSelection={handleBack} backToSelectionText={"← " + t("right_panel.buttons.back")}>
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
|
|
<div style={{ width: "100%" }}>
|
|
{(selectedIntegrationType === "googleSheets" || integrationType === "googleSheets") && (
|
|
<>{renderGoogleSheetsIntegration()}</>
|
|
)}
|
|
|
|
{(selectedIntegrationType === "airtable" || integrationType === "airtable") && (
|
|
<>{renderAirtableIntegration()}</>
|
|
)}
|
|
|
|
{(selectedIntegrationType === "webhook" || integrationType === "webhook") && (
|
|
<>
|
|
<Typography variant="h6" sx={{ marginBottom: "20px" }}>Integrate using Webhooks</Typography>
|
|
{settings.webhooks && settings.webhooks.length > 0 && (
|
|
<TableContainer component={Paper} sx={{ marginBottom: "30px", width: "100%" }}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell><strong>Webhook URL</strong></TableCell>
|
|
<TableCell><strong>Call when</strong></TableCell>
|
|
<TableCell><strong>Last called</strong></TableCell>
|
|
<TableCell><strong>Status</strong></TableCell>
|
|
<TableCell><strong>Actions</strong></TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{settings.webhooks.map((webhook) => (
|
|
<TableRow key={webhook.id}>
|
|
<TableCell>{webhook.url}</TableCell>
|
|
<TableCell><Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>{webhook.events.map((event) => (<Chip key={event} label={formatEventName(event)} size="small" variant="outlined"/>))}</Box></TableCell>
|
|
<TableCell>{formatLastCalled(webhook.lastCalledAt)}</TableCell>
|
|
<TableCell><Switch checked={webhook.active} onChange={() => toggleWebhookStatusSetting(webhook.id)} size="small"/></TableCell>
|
|
<TableCell><Box sx={{ display: "flex", gap: "8px" }}>
|
|
<IconButton size="small" onClick={() => testWebhookSetting(webhook.id)} disabled={loading || !webhook.active} title="Test"><ScienceIcon fontSize="small" /></IconButton>
|
|
<IconButton size="small" onClick={() => editWebhookSetting(webhook)} disabled={loading} title="Edit"><EditIcon fontSize="small" /></IconButton>
|
|
<IconButton size="small" onClick={() => deleteWebhookSetting(webhook.id)} disabled={loading} title="Delete"><DeleteIcon fontSize="small" /></IconButton>
|
|
</Box></TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
{!showWebhookForm && (
|
|
<Box sx={{ marginBottom: "20px", width: "100%" }}>
|
|
<Box sx={{ display: "flex", gap: "15px", alignItems: "center", marginBottom: "15px" }}>
|
|
<TextField label="Webhook URL" placeholder="https://your-api.com/webhook/endpoint" sx={{ flex: 1 }} value={newWebhook.url} onChange={(e) => { setNewWebhook({ ...newWebhook, url: e.target.value }); if (urlError) setUrlError(null); }} error={!!urlError} helperText={urlError} required aria-describedby="webhook-url-help"/>
|
|
<TextField select label="When" value={newWebhook.events[0] || "run_completed"} onChange={(e) => setNewWebhook({ ...newWebhook, events: [e.target.value] })} sx={{ minWidth: "200px" }} required>
|
|
<MenuItem value="run_completed">Run finished</MenuItem>
|
|
<MenuItem value="run_failed">Run failed</MenuItem>
|
|
</TextField>
|
|
</Box>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
|
<Typography variant="body2" color="textSecondary" sx={{ marginTop: "10px" }}>Refer to the <a href="https://docs.maxun.dev/api/webhooks" style={{ color: "#ff00c3", textDecoration: "none" }}>API documentation</a> for examples and details.</Typography>
|
|
<Button variant="contained" startIcon={<AddIcon />} onClick={addWebhookSetting} disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}>Add New Webhook</Button>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
{showWebhookForm && (
|
|
<Card sx={{ width: "100%", marginBottom: "20px" }}>
|
|
<CardContent>
|
|
<Typography variant="h6" sx={{ marginBottom: "20px" }}>{editingWebhook ? "Edit Webhook" : "Add New Webhook"}</Typography>
|
|
<TextField fullWidth label="Webhook URL" value={newWebhook.url} onChange={(e) => { setNewWebhook({ ...newWebhook, url: e.target.value }); if (urlError) setUrlError(null); }} sx={{ marginBottom: "15px" }} placeholder="https://your-api.com/webhook/endpoint" required error={!!urlError} helperText={urlError}/>
|
|
<TextField fullWidth select label="Call when" value={newWebhook.events} onChange={(e) => setNewWebhook({ ...newWebhook, events: typeof e.target.value === "string" ? [e.target.value] : e.target.value })}
|
|
SelectProps={{ multiple: true, renderValue: (selected) => (<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>{(selected as string[]).map((value) => (<Chip key={value} label={formatEventName(value)} size="small"/>))}</Box>),}} sx={{ marginBottom: "20px" }} required>
|
|
<MenuItem value="run_completed">Run finished</MenuItem>
|
|
<MenuItem value="run_failed">Run failed</MenuItem>
|
|
</TextField>
|
|
<FormControlLabel control={<Switch checked={newWebhook.active} onChange={(e) => setNewWebhook({ ...newWebhook, active: e.target.checked })}/>} label="Active" sx={{ marginBottom: "10px" }}/>
|
|
</CardContent>
|
|
<CardActions>
|
|
<Button variant="contained" color="primary" onClick={editingWebhook ? updateWebhookSetting : addWebhookSetting} disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}>
|
|
{loading ? (<CircularProgress size={24} />) : editingWebhook ? ("Update Webhook") : ("Add Webhook")}
|
|
</Button>
|
|
<Button variant="outlined" onClick={resetWebhookForm} disabled={loading}>Cancel</Button>
|
|
</CardActions>
|
|
</Card>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</RobotConfigPage>
|
|
);
|
|
};
|