diff --git a/src/hooks/useExtensionState.ts b/src/hooks/useExtensionState.ts index 25a5dd9..9eb5b34 100644 --- a/src/hooks/useExtensionState.ts +++ b/src/hooks/useExtensionState.ts @@ -12,7 +12,7 @@ export type State = { activeAppName: RetoolApp["name"] | undefined; // activeApp: RetoolApp | undefined; workflow: { - url: string; + id: string; apiKey: string; }; apps: RetoolApp[]; @@ -35,8 +35,8 @@ const initialState: State = { isEditing: false, activeAppName: INSPECTOR_APP["name"], workflow: { - url: "", - apiKey: "", + id: "13d34554-9891-40c0-a032-fda523774e97", + apiKey: "retool_wk_bde9d74b27644cf3a0691211ff18dee2", }, apps: [INSPECTOR_APP, ...DEMO_APPS], }; diff --git a/src/hooks/useRetoolUrl.ts b/src/hooks/useRetoolAppUrl.ts similarity index 75% rename from src/hooks/useRetoolUrl.ts rename to src/hooks/useRetoolAppUrl.ts index e022544..cdd7ad7 100644 --- a/src/hooks/useRetoolUrl.ts +++ b/src/hooks/useRetoolAppUrl.ts @@ -1,8 +1,8 @@ import type { RetoolApp } from "@/types/extension"; -function useRetoolUrl(domain: string): (app: RetoolApp) => string; -function useRetoolUrl(domain: string, app?: RetoolApp): string; -function useRetoolUrl(domain: string, app?: RetoolApp) { +function useRetoolAppUrl(domain: string): (app: RetoolApp) => string; +function useRetoolAppUrl(domain: string, app?: RetoolApp): string; +function useRetoolAppUrl(domain: string, app?: RetoolApp) { if (!app) { return (app: RetoolApp) => composeAppUrl(domain, app); } else { @@ -28,4 +28,4 @@ function composeAppUrl(domain: string, app: RetoolApp) { return `${url.toString()}#${hashParams.toString()}`; } -export { useRetoolUrl }; +export { useRetoolAppUrl }; diff --git a/src/hooks/useRetoolWorkflowUrl.ts b/src/hooks/useRetoolWorkflowUrl.ts new file mode 100644 index 0000000..313d3cb --- /dev/null +++ b/src/hooks/useRetoolWorkflowUrl.ts @@ -0,0 +1,3 @@ +export function useRetoolWorkflowUrl(id: string) { + return `https://api.retool.com/v1/workflows/${id}/startTrigger`; +} diff --git a/src/lib/WorkflowDataFetcher.ts b/src/lib/WorkflowDataFetcher.ts index 2eb5b43..b478575 100644 --- a/src/lib/WorkflowDataFetcher.ts +++ b/src/lib/WorkflowDataFetcher.ts @@ -1,18 +1,17 @@ import type { RetoolApp } from "@/types/extension"; -export async function WorkflowDataFetcher( +export async function getWorkflowApps( apiKey: string, - url: string + id: string ): Promise<{ apps: RetoolApp[] }> { - return fetch(url, { + const url = `https://api.retool.com/v1/workflows/${id}/startTrigger`; + const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", "X-Workflow-Api-Key": apiKey, }, - }).then((res) => { - const json = res.json(); - console.log(json); - return json; }); + + return await res.json(); } diff --git a/src/pages/Options/Tabs/JSONTab.tsx b/src/pages/Options/Tabs/JSONTab.tsx index e98343a..b9b8787 100644 --- a/src/pages/Options/Tabs/JSONTab.tsx +++ b/src/pages/Options/Tabs/JSONTab.tsx @@ -1,14 +1,14 @@ -import JsonView from "@uiw/react-json-view"; -import { githubLightTheme } from "@uiw/react-json-view/githubLight"; import React from "react"; import { Card, Col, Row } from "react-bootstrap"; import Container from "react-bootstrap/Container"; import { useExtensionState } from "@/hooks/useExtensionState"; +import { SimpleJsonView } from "../components/SimpleJsonView"; + function JSONTab() { const state = useExtensionState(); - + console.log(state); return (
@@ -18,14 +18,7 @@ function JSONTab() { Stored Apps and Settings - +
diff --git a/src/pages/Options/Tabs/WorkflowTab.tsx b/src/pages/Options/Tabs/WorkflowTab.tsx index dc7c5f1..b30986e 100644 --- a/src/pages/Options/Tabs/WorkflowTab.tsx +++ b/src/pages/Options/Tabs/WorkflowTab.tsx @@ -1,4 +1,3 @@ -import JsonView from "@uiw/react-json-view"; import React, { useEffect, useState } from "react"; import { Alert, Col, Row } from "react-bootstrap"; import Button from "react-bootstrap/Button"; @@ -8,40 +7,44 @@ import Form from "react-bootstrap/Form"; import useSWR from "swr"; import { useExtensionState } from "@/hooks/useExtensionState"; -import { WorkflowDataFetcher } from "@/lib/WorkflowDataFetcher"; +import { getWorkflowApps } from "@/lib/WorkflowDataFetcher"; + +import { SimpleJsonView } from "../components/SimpleJsonView"; import type { RetoolApp } from "@/types/extension"; function WorkflowTab() { - const { apiKey, url } = useExtensionState((s) => s.workflow); + const workflow = useExtensionState((s) => s.workflow); const updateWorkflow = useExtensionState((s) => s.updateWorkflow); - const [useWorkflowProvider, setUseWorkflowProvider] = useState(false); + const [useProvider, setUseProvider] = useState(false); + const [isLoading, setIsLoading] = useState(false); const [workflowData, setWorkflowData] = useState([]); const [workflowError, setWorkflowError] = useState(); - useEffect(() => { - const fetch = async () => { - setIsLoading(true); - try { - const reply = await WorkflowDataFetcher(apiKey, url); - if (reply.apps) { - setWorkflowData(reply.apps); - } - console.log(reply); - } catch (e) { - setWorkflowError((e as Error).message); + const fetchRemoteApps = async () => { + setIsLoading(true); + try { + const reply = await getWorkflowApps(workflow.apiKey, workflow.id); + if (reply.apps) { + setWorkflowData(reply.apps); } - setIsLoading(false); - }; - if (url && apiKey) fetch(); - }, [apiKey, url]); + } catch (e) { + setWorkflowError((e as Error).message); + } + setIsLoading(false); + }; + + useEffect(() => { + if (useProvider && workflow.id && workflow.apiKey) fetchRemoteApps(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [useProvider, workflow]); return (
-

Workflow Apps List

+

Remote Apps List

@@ -69,11 +72,11 @@ function WorkflowTab() { input field, into a dynamic list fetched from a Retool Workflow.

- Workflow URL + Workflow ID updateWorkflow({ url: e.target.value })} + value={workflow.id} + disabled={!useProvider} + onChange={(e) => updateWorkflow({ id: e.target.value })} /> Supply a Retool workflow URL that returns a 200{" "} @@ -84,48 +87,32 @@ function WorkflowTab() { Workflow API Key updateWorkflow({ apiKey: e.target.value })} /> Copy this value from Retool - - + + +
+ - - - -
- Last updated 3 mins ago -
- {!useWorkflowProvider ? ( - ❌ Disabled - ) : isLoading ? ( - 🚀 Fetching... - ) : workflowError ? ( - - 💣 Error! {workflowError} - - ) : workflowData.length > 0 ? ( - - ✅ Success. Loaded{" "} - {workflowData.length} app names. - - ) : ( - - 🔦 No results returned. - - )} -
@@ -140,17 +127,25 @@ function WorkflowTab() {
- {workflowData.length === 0 ? ( - + {isLoading ? ( +

Loading...

) : ( - No Apps Returned From Workflow + <> + {workflowData.length > 0 ? ( + + ) : ( + + No Apps Returned From Workflow + + )} + )}
Last update: 3 mins ago
- {!useWorkflowProvider ? ( + {!useProvider ? ( ❌ Disabled ) : isLoading ? ( 🚀 Fetching... @@ -173,8 +168,6 @@ function WorkflowTab() { - - 3 ); diff --git a/src/pages/Options/components/AppCard.tsx b/src/pages/Options/components/AppCard.tsx index f7d6d87..6b5c305 100644 --- a/src/pages/Options/components/AppCard.tsx +++ b/src/pages/Options/components/AppCard.tsx @@ -7,7 +7,7 @@ import { Badge, Button, Card, Col, Row } from "react-bootstrap"; import { useDomain } from "@/hooks/useDomain"; import { useEditMode } from "@/hooks/useEditMode"; import { useExtensionState } from "@/hooks/useExtensionState"; -import { useRetoolUrl } from "@/hooks/useRetoolUrl"; +import { useRetoolAppUrl } from "@/hooks/useRetoolAppUrl"; import type { RetoolApp, UrlParam } from "@/types/extension"; @@ -33,7 +33,7 @@ function AppCard({ app, isActive, ...props }: Props) { const { domain } = useDomain(); const setActiveApp = useExtensionState((s) => s.setActiveApp); - const appUrl = useRetoolUrl(domain, app); + const appUrl = useRetoolAppUrl(domain, app); return ( diff --git a/src/pages/Options/components/RetoolAppUrl2.tsx b/src/pages/Options/components/RetoolAppUrl2.tsx index 024b593..4a4dc2e 100644 --- a/src/pages/Options/components/RetoolAppUrl2.tsx +++ b/src/pages/Options/components/RetoolAppUrl2.tsx @@ -3,12 +3,12 @@ import { githubLightTheme } from "@uiw/react-json-view/githubLight"; import React, { useMemo } from "react"; import { Button, Form, InputGroup } from "react-bootstrap"; -import { useRetoolUrl } from "@/hooks/useRetoolUrl"; +import { useRetoolAppUrl } from "@/hooks/useRetoolAppUrl"; import type { RetoolApp } from "@/types/extension"; function RetoolAppUrl2({ app, domain }: { app: RetoolApp; domain: string }) { - const url = useRetoolUrl(domain, app); + const url = useRetoolAppUrl(domain, app); const jsonUrl = useMemo(() => new URL(url), [url]); return ( diff --git a/src/pages/Options/components/SimpleJsonView.tsx b/src/pages/Options/components/SimpleJsonView.tsx new file mode 100644 index 0000000..6a91d5e --- /dev/null +++ b/src/pages/Options/components/SimpleJsonView.tsx @@ -0,0 +1,20 @@ +import JsonView from "@uiw/react-json-view"; +import { githubLightTheme } from "@uiw/react-json-view/githubLight"; +import React from "react"; + +type Props = { + value: object | undefined; +}; + +export function SimpleJsonView({ value }: Props) { + return ( + + ); +} diff --git a/src/pages/Panel/components/Panel.tsx b/src/pages/Panel/components/Panel.tsx index a933d2e..2928568 100644 --- a/src/pages/Panel/components/Panel.tsx +++ b/src/pages/Panel/components/Panel.tsx @@ -4,14 +4,14 @@ import React from "react"; import { useActiveApp } from "@/hooks/useActiveApp"; import { useDomain } from "@/hooks/useDomain"; -import { useRetoolUrl } from "@/hooks/useRetoolUrl"; +import { useRetoolAppUrl } from "@/hooks/useRetoolAppUrl"; import UnsetSettingError from "./UnsetSettingError"; function Panel() { const { domain } = useDomain(); const app = useActiveApp(); - const appUrl = useRetoolUrl(domain); + const appUrl = useRetoolAppUrl(domain); if (!domain || domain === "") { return ;