Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Run Action & Syncs from the UI #1985

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Run Action & Syncs from the UI #1985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f682b8
run sync/action from the ui
khaliqgant Apr 11, 2024
6503aa5
allow json input
khaliqgant Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
125 changes: 123 additions & 2 deletions packages/webapp/src/pages/Integration/EndpointReference.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { AdjustmentsHorizontalIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
import { Loading, Tooltip, useModal, Modal } from '@geist-ui/core';
import { PlayCircleIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
import { Prism } from '@mantine/prism';
import Button from '../../components/ui/button/Button';
import CopyButton from '../../components/ui/button/CopyButton';
Expand Down Expand Up @@ -35,8 +36,13 @@ export default function EndpointReference(props: EndpointReferenceProps) {
const [language, setLanguage] = useState<Language>(Language.Node);
const [syncSnippet, setSyncSnippet] = useState('');
const [jsonResponseSnippet, setJsonResponseSnippet] = useState('');
const [flowResponse, setFlowResponse] = useState<object>();
const [flowReturnLoading, setFlowReturnLoading] = useState(false);
const [jsonString, setJsonString] = useState('');
const { setVisible, bindings } = useModal();

const connectionId = '<CONNECTION-ID>';
const connectionIds = integration.connections.map((connection) => connection.connection_id);

const baseUrl = useStore((state) => state.baseUrl);

Expand Down Expand Up @@ -68,8 +74,116 @@ export default function EndpointReference(props: EndpointReferenceProps) {
setSubTab(SubTabs.Flow);
};

const handleJsonChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setJsonString(event.target.value);
};

const handleRun = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const selectedConnectionId = (e.target as HTMLFormElement).connection.value;

setFlowReturnLoading(true);
if (activeFlow?.type === 'sync') {
const response = await fetch(`${baseUrl}/records?model=${activeFlow?.models[0].name}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Connection-Id': selectedConnectionId,
'Provider-Config-Key': integration.unique_key,
Authorization: `Bearer ${account.secret_key}`
}
});
const data = await response.json();
setFlowResponse(data);
} else {
if (jsonString) {
try {
JSON.parse(jsonString);
} catch {
setFlowResponse({ error: 'Invalid JSON' });
setFlowReturnLoading(false);
return;
}
}
const input = jsonString ? JSON.parse(jsonString) : {};
const response = await fetch(`${baseUrl}/action/trigger`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Connection-Id': selectedConnectionId,
'Provider-Config-Key': integration.unique_key,
Authorization: `Bearer ${account.secret_key}`
},
body: JSON.stringify({ action_name: activeFlow?.name, input })
});
const data = await response.json();
setFlowResponse(data);
}
setFlowReturnLoading(false);
};

return (
<div className="text-white">
<Modal {...bindings} wrapClassName="!h-[600px] !w-[550px] !max-w-[550px] !bg-[#0E1014] no-border-modal">
<div className="flex justify-between text-sm">
<div>
<Modal.Content className="overflow-scroll h-full max-w-[550px] !text-sm text-white font-mono">
<>
<div className="flex items-center">
<form className="flex space-x-2" onSubmit={handleRun}>
<select
id="connection"
name="connection"
className="bg-pure-black border-none text-text-light-gray block w-full appearance-none py-2 text-base shadow-sm"
>
<option key="" value="" disabled>
Connection
</option>
{connectionIds.map((id: string) => (
<option key={id} value={id}>
{id}
</option>
))}
</select>
{activeFlow?.input && Object.keys(activeFlow?.input).length > 0 && (
<textarea
id="jsonInput"
name="jsonInput"
value={jsonString}
onChange={handleJsonChange}
className="bg-pure-black border-none text-text-light-gray block w-full appearance-none py-2 text-base shadow-sm"
placeholder="Enter your JSON here..."
/>
)}
<button type="submit" className="bg-accent-blue bg-white text-black text-sm font-bold py-2 px-4 rounded-md mt-2">
Run
</button>
</form>
</div>
{flowReturnLoading ? (
<div className="!h-[400px] w-full">
<Loading spaceRatio={2.5} className="top-10" />
</div>
) : (
<Prism noCopy language="json" className="max-h-[400px] transparent-code" colorScheme="dark">
{flowResponse ? JSON.stringify(flowResponse, null, 2) : ''}
</Prism>
)}
</>
</Modal.Content>
</div>
</div>
<Modal.Action
placeholder={null}
passive
className="!flex !justify-end !text-sm !bg-[#0E1014] !border-0 !h-[100px]"
onClick={() => setVisible(false)}
>
<Button className="!text-text-light-gray" variant="zombieGray">
Close
</Button>
</Modal.Action>
</Modal>
<div className="flex flex-col z-10 mt-4 text-gray-400">
<span className="flex items-center">
<EndpointLabel endpoint={activeFlow?.endpoints[0] as string | FlowEndpoint} type={activeFlow?.type as string} />
Expand Down Expand Up @@ -138,7 +252,14 @@ export default function EndpointReference(props: EndpointReferenceProps) {
cURL
</Button>
</div>
<CopyButton dark text={syncSnippet} />
<div className="flex items-center space-x-2">
<CopyButton dark text={syncSnippet} />
{connectionIds.length > 0 && (
<Tooltip text="Trigger" type="dark">
<PlayCircleIcon className="flex h-6 w-6 text-gray-400 cursor-pointer" onClick={() => setVisible(true)} />
</Tooltip>
)}
</div>
</div>
<Prism noCopy language="typescript" className="p-3 transparent-code" colorScheme="dark">
{syncSnippet}
Expand Down
1 change: 1 addition & 0 deletions packages/webapp/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export enum AuthModes {
export interface Connection {
id: number;
connectionId: string;
connection_id: string;
provider: string;
providerConfigKey: string;
creationDate: string;
Expand Down