diff --git a/cypress/e2e/laboratory-preflight-script.cy.ts b/cypress/e2e/laboratory-preflight-script.cy.ts index c278a6ec27..551f66e6f9 100644 --- a/cypress/e2e/laboratory-preflight-script.cy.ts +++ b/cypress/e2e/laboratory-preflight-script.cy.ts @@ -1,7 +1,7 @@ import { dedent } from '../support/testkit'; const selectors = { - buttonPreflightScript: '[aria-label*="Preflight Script"]', + buttonPreflight: '[aria-label*="Preflight Script"]', buttonModalCy: 'preflight-script-modal-button', buttonToggleCy: 'toggle-preflight-script', buttonHeaders: '[data-name="headers"]', @@ -27,7 +27,7 @@ beforeEach(() => { cy.setCookie('sRefreshToken', refreshToken); data.slug = slug; cy.visit(`/${slug}/laboratory`); - cy.get(selectors.buttonPreflightScript).click(); + cy.get(selectors.buttonPreflight).click(); }); }); }); @@ -60,7 +60,7 @@ describe('Laboratory > Preflight Script', () => { it('regression: loads even if local storage is set to {}', () => { window.localStorage.setItem('hive:laboratory:environment', '{}'); cy.visit(`/${data.slug}/laboratory`); - cy.get(selectors.buttonPreflightScript).click(); + cy.get(selectors.buttonPreflight).click(); }); it('mini script editor is read only', () => { cy.dataCy('toggle-preflight-script').click(); diff --git a/packages/web/app/preflight-worker-embed.html b/packages/web/app/preflight-worker-embed.html index b808dba547..8b8a3b00ba 100644 --- a/packages/web/app/preflight-worker-embed.html +++ b/packages/web/app/preflight-worker-embed.html @@ -8,6 +8,6 @@ I like turtles Wheatherboi - + diff --git a/packages/web/app/src/lib/preflight-sandbox/allowed-globals.ts b/packages/web/app/src/lib/preflight/allowed-globals.ts similarity index 100% rename from packages/web/app/src/lib/preflight-sandbox/allowed-globals.ts rename to packages/web/app/src/lib/preflight/allowed-globals.ts diff --git a/packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx b/packages/web/app/src/lib/preflight/graphiql-plugin.tsx similarity index 89% rename from packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx rename to packages/web/app/src/lib/preflight/graphiql-plugin.tsx index 05039ed020..e71b18fb8f 100644 --- a/packages/web/app/src/lib/preflight-sandbox/graphiql-plugin.tsx +++ b/packages/web/app/src/lib/preflight/graphiql-plugin.tsx @@ -38,12 +38,9 @@ import { cn } from '../utils'; import labApiDefinitionRaw from './lab-api-declaration?raw'; import { IFrameEvents, LogMessage } from './shared-types'; -export type PreflightScriptResultData = Omit< - IFrameEvents.Outgoing.EventData.Result, - 'type' | 'runId' ->; +export type PreflightResultData = Omit; -export const preflightScriptPlugin: GraphiQLPlugin = { +export const preflightPlugin: GraphiQLPlugin = { icon: () => ( ), title: 'Preflight Script', - content: PreflightScriptContent, + content: PreflightContent, }; const classes = { @@ -111,7 +108,7 @@ const monacoProps = { }, } satisfies Record<'script' | 'env', ComponentPropsWithoutRef>; -const UpdatePreflightScriptMutation = graphql(` +const UpdatePreflightMutation = graphql(` mutation UpdatePreflightScript($input: UpdatePreflightScriptInput!) { updatePreflightScript(input: $input) { ok { @@ -130,7 +127,7 @@ const UpdatePreflightScriptMutation = graphql(` } `); -const PreflightScript_TargetFragment = graphql(` +const Preflight_TargetFragment = graphql(` fragment PreflightScript_TargetFragment on Target { id preflightScript { @@ -147,14 +144,16 @@ export const enum PreflightWorkerState { ready, } -export function usePreflightScript(args: { - target: FragmentType | null; +export function usePreflight(args: { + target: FragmentType | null; }) { const iframeRef = useRef(null); const prompt = usePromptManager(); - const target = useFragment(PreflightScript_TargetFragment, args.target); - const [isPreflightScriptEnabled, setIsPreflightScriptEnabled] = useLocalStorageJson( + const target = useFragment(Preflight_TargetFragment, args.target); + const [isPreflightEnabled, setIsPreflightEnabled] = useLocalStorageJson( + // todo: ability to pass historical keys for seamless gradual migration to new key names. + // 'hive:laboratory:isPreflightEnabled', 'hive:laboratory:isPreflightScriptEnabled', z.boolean().default(false), ); @@ -175,8 +174,8 @@ export function usePreflightScript(args: { async function execute( script = target?.preflightScript?.sourceCode ?? '', isPreview = false, - ): Promise { - const resultEnvironmentVariablesDecoded: PreflightScriptResultData['environmentVariables'] = + ): Promise { + const resultEnvironmentVariablesDecoded: PreflightResultData['environmentVariables'] = Kit.tryOr( () => JSON.parse(latestEnvironmentVariablesRef.current), // todo: find a better solution than blowing away the user's @@ -192,14 +191,14 @@ export function usePreflightScript(args: { // () => ({}), ); - const result: PreflightScriptResultData = { + const result: PreflightResultData = { request: { headers: [], }, environmentVariables: resultEnvironmentVariablesDecoded, }; - if (isPreview === false && !isPreflightScriptEnabled) { + if (isPreview === false && !isPreflightEnabled) { return result; } @@ -422,9 +421,9 @@ export function usePreflightScript(args: { return { execute, abort, - isPreflightScriptEnabled, - setIsPreflightScriptEnabled, - script: target?.preflightScript?.sourceCode ?? '', + isPreflightEnabled, + setIsPreflightEnabled, + content: target?.preflightScript?.sourceCode ?? '', environmentVariables, setEnvironmentVariables, state, @@ -447,15 +446,15 @@ export function usePreflightScript(args: { } as const; } -type PreflightScriptObject = ReturnType; +type PreflightObject = ReturnType; -const PreflightScriptContext = createContext(null); -export const PreflightScriptProvider = PreflightScriptContext.Provider; +const PreflightContext = createContext(null); +export const PreflightProvider = PreflightContext.Provider; -function PreflightScriptContent() { - const preflightScript = useContext(PreflightScriptContext); - if (preflightScript === null) { - throw new Error('PreflightScriptContent used outside PreflightScriptContext.Provider'); +function PreflightContent() { + const preflight = useContext(PreflightContext); + if (preflight === null) { + throw new Error('PreflightContent used outside PreflightContext.Provider'); } const [showModal, toggleShowModal] = useToggle(); @@ -463,11 +462,11 @@ function PreflightScriptContent() { from: '/authenticated/$organizationSlug/$projectSlug/$targetSlug', }); - const [, mutate] = useMutation(UpdatePreflightScriptMutation); + const [, mutate] = useMutation(UpdatePreflightMutation); const { toast } = useToast(); - const handleScriptChange = useCallback(async (newValue = '') => { + const handleContentChange = useCallback(async (newValue = '') => { const { data, error } = await mutate({ input: { selector: params, @@ -494,24 +493,24 @@ function PreflightScriptContent() { return ( <> - - preflightScript.execute(value, true).catch(err => { + preflight.execute(value, true).catch(err => { console.error(err); }) } - state={preflightScript.state} - abortScriptRun={preflightScript.abort} - logs={preflightScript.logs} - clearLogs={preflightScript.clearLogs} - onScriptValueChange={handleScriptChange} - envValue={preflightScript.environmentVariables} - onEnvValueChange={preflightScript.setEnvironmentVariables} + state={preflight.state} + abortScriptRun={preflight.abort} + logs={preflight.logs} + clearLogs={preflight.clearLogs} + content={preflight.content} + onContentChange={handleContentChange} + envValue={preflight.environmentVariables} + onEnvValueChange={preflight.setEnvironmentVariables} />
Preflight Script @@ -536,13 +535,11 @@ function PreflightScriptContent() { size="sm" variant="outline" className="mt-3" - onClick={() => - preflightScript.setIsPreflightScriptEnabled(!preflightScript.isPreflightScriptEnabled) - } + onClick={() => preflight.setIsPreflightEnabled(!preflight.isPreflightEnabled)} data-cy="toggle-preflight-script" > - {preflightScript.isPreflightScriptEnabled ? 'On' : 'Off'} + {preflight.isPreflightEnabled ? 'On' : 'Off'}
@@ -554,7 +551,7 @@ function PreflightScriptContent() { Read-only view of the script
- {preflightScript.isPreflightScriptEnabled ? null : ( + {preflight.isPreflightEnabled ? null : (
Preflight Script is disabled and will not be executed @@ -563,7 +560,7 @@ function PreflightScriptContent() { )} preflightScript.setEnvironmentVariables(value ?? '')} + value={preflight.environmentVariables} + onChange={value => preflight.setEnvironmentVariables(value ?? '')} {...monacoProps.env} className={classes.monacoMini} wrapperProps={{ @@ -604,28 +601,28 @@ function PreflightScriptContent() { ); } -function PreflightScriptModal({ +function PreflightModal({ isOpen, toggle, - scriptValue, + content, executeScript, state, abortScriptRun, logs, clearLogs, - onScriptValueChange, + onContentChange, envValue, onEnvValueChange, }: { isOpen: boolean; toggle: () => void; - scriptValue?: string; + content?: string; executeScript: (script: string) => void; state: PreflightWorkerState; abortScriptRun: () => void; logs: Array; clearLogs: () => void; - onScriptValueChange: (value: string) => void; + onContentChange: (value: string) => void; envValue: string; onEnvValueChange: (value: string) => void; }) { @@ -653,7 +650,7 @@ function PreflightScriptModal({ }, []); const handleSubmit = useCallback(() => { - onScriptValueChange(scriptEditorRef.current?.getValue() ?? ''); + onContentChange(scriptEditorRef.current?.getValue() ?? ''); onEnvValueChange(envEditorRef.current?.getValue() ?? ''); toggle(); }, []); @@ -729,7 +726,7 @@ function PreflightScriptModal({
(() => { return async (params, opts) => { @@ -324,17 +324,17 @@ function LaboratoryPageContent(props: { mockEndpoint; return new Repeater(async (push, stop) => { - let hasFinishedPreflightScript = false; + let isFinishedPreflight = false; // eslint-disable-next-line @typescript-eslint/no-floating-promises stop.then(() => { - if (!hasFinishedPreflightScript) { - preflightScript.abort(); + if (!isFinishedPreflight) { + preflight.abort(); } }); - let preflightData: PreflightScriptResultData; + let preflightData: PreflightResultData; try { - preflightData = await preflightScript.execute(); + preflightData = await preflight.execute(); } catch (err: unknown) { if (err instanceof Error === false) { throw err; @@ -353,7 +353,7 @@ function LaboratoryPageContent(props: { stop(error); return; } finally { - hasFinishedPreflightScript = true; + isFinishedPreflight = true; } const headers = { @@ -396,8 +396,8 @@ function LaboratoryPageContent(props: { }, [ target?.graphqlEndpointUrl, actualSelectedApiEndpoint, - preflightScript.execute, - preflightScript.isPreflightScriptEnabled, + preflight.execute, + preflight.isPreflightEnabled, ]); const FullScreenIcon = isFullScreen ? ExitFullScreenIcon : EnterFullScreenIcon; @@ -450,7 +450,7 @@ function LaboratoryPageContent(props: { return ( <> - {preflightScript.iframeElement} + {preflight.iframeElement}
Laboratory @@ -589,7 +589,7 @@ function LaboratoryPageContent(props: { `} {!query.fetching && !query.stale && ( - +
- {preflightScript.isPreflightScriptEnabled ? ( - + {preflight.isPreflightEnabled ? ( + ) : null}
-
+ )} void }) { +function PreflightLogs(props: { logs: LogRecord[]; onClear: () => void }) { const [isOpen, setIsOpen] = useState(false); const consoleRef = useRef(null); useEffect(() => {