\n \n );\n};\n\nconst ParamTooltipElement = (paramHelper: ParameterHelper) => {\n // using the same root doesn't seem to work\n const inner = paramTooltipInner(paramHelper);\n const container = document.createElement(\"div\");\n container.className = \"cm-tooltip-cursor cm-tooltip-parameterhelper\";\n const root = createRoot(container);\n root.render(inner);\n return container;\n};\n","import { lazyComponent } from \"@/util/lazy\";\nimport type { default as TAssetEditor } from \"./asset_editor\";\nimport type { default as TDataBindingEditor } from \"./data_binding_editor\";\nimport type { default as THtmlFormTemplateEditor } from \"./html_form_template_editor\";\nimport type { default as THtmlPropertyEditor } from \"./html_property_editor\";\nimport type { default as TImportMapEditor } from \"./import-map-editor\";\nimport type { default as TLazyAssetEditor } from \"./lazy-asset-editor\";\nimport type { default as TModuleEditor } from \"./module_editor\";\nimport type { default as TNativeLibrariesEditor } from \"./native_libraries\";\nimport type { default as TStylePropertyEditor } from \"./style_property_editor\";\nimport type { default as THtmlBodyEditor } from \"./user-email-editor\";\n\nexport const ModuleEditor = lazyComponent(() => import(\"./module_editor\"));\n\nexport const AssetEditor = lazyComponent(() => import(\"./asset_editor\"));\n\nexport const DataBindingEditor = lazyComponent(() => import(\"./data_binding_editor\"));\n\nexport const HtmlFormTemplateEditor = lazyComponent(\n () => import(\"./html_form_template_editor\")\n);\n\nexport const HtmlPropertyEditor = lazyComponent(() => import(\"./html_property_editor\"));\n\nexport const ImportMapEditor = lazyComponent(() => import(\"./import-map-editor\"));\n\nexport const LazyAssetEditor = lazyComponent(() => import(\"./lazy-asset-editor\"));\n\nexport const NativeLibrariesEditor = lazyComponent(() => import(\"./native_libraries\"));\n\nexport const StylePropertyEditor = lazyComponent(() => import(\"./style_property_editor\"));\n\nexport const HtmlBodyEditor = lazyComponent(() => import(\"./user-email-editor\"));\n","import { StateEffect, StateField } from \"@codemirror/state\";\nimport { Decoration, EditorView, WidgetType } from \"@codemirror/view\";\nimport { useConstant } from \"@/util/hooks\";\nimport { useExtension } from \"./hooks\";\n\n/**\n * Places the \"Create Event Handler\" widget at the end of the form class body.\n *\n * The anchor line is computed in the autocompleter worker (see `class_body_scan`), which already\n * re-parses this code about a second after the user stops typing, and arrives here as a StateEffect\n * on that same tick. We hold it as a *document position* rather than a line number so it can be\n * mapped through subsequent edits — otherwise the widget would sit in the wrong place for the second\n * or so between an edit and the next analysis.\n */\n\n/** 1-based line reported by the worker, or null when there's no form class to anchor to. */\nexport const setFormClassBodyEndLine = StateEffect.define();\n\n/** Document position to hang the widget off: the end of the last line of the form class body. */\nexport const classBodyAnchorField = StateField.define({\n create: () => null,\n update(value, tr) {\n for (const effect of tr.effects) {\n if (!effect.is(setFormClassBodyEndLine)) continue;\n const line = effect.value;\n // The worker analysed a snapshot of the document; it may since have shrunk past that line.\n if (line === null || line < 1 || line > tr.state.doc.lines) return null;\n return tr.state.doc.line(line).to;\n }\n if (value !== null && tr.docChanged) {\n // assoc=1: text typed at the anchor pushes it along, so the widget stays below the user's code.\n return tr.changes.mapPos(value, 1);\n }\n return value;\n },\n});\n\n/**\n * CodeMirror owns *where* this sits; React owns what's inside it. The host element is created once per\n * editor and simply re-parented as the decoration comes and goes, so the React tree portalled into it\n * survives scrolling and re-anchoring.\n */\nclass CreateEventHandlerWidget extends WidgetType {\n constructor(readonly host: HTMLElement) {\n super();\n }\n eq(other: CreateEventHandlerWidget) {\n return other.host === this.host;\n }\n toDOM() {\n return this.host;\n }\n // We deliberately keep WidgetType's default `ignoreEvent` (true), which keeps CodeMirror's own\n // handlers off the panel's controls. Overriding it to false would route them into the editor:\n // the keymap is a `domEventHandlers.keydown` on `contentDOM`, which sits below React's root\n // listener, so it would see Enter before the panel's own handler could stop it — and insert a\n // newline into the document on the way to creating the handler.\n}\n\nconst widgetDecorations = (host: HTMLElement) =>\n EditorView.decorations.compute([classBodyAnchorField], (state) => {\n const anchor = state.field(classBodyAnchorField);\n if (anchor === null) return Decoration.none;\n // Block widgets must sit on a line boundary; after mapping, the anchor may be mid-line.\n const at = state.doc.lineAt(Math.max(0, Math.min(anchor, state.doc.length))).to;\n return Decoration.set([\n Decoration.widget({ widget: new CreateEventHandlerWidget(host), block: true, side: 1 }).range(at),\n ]);\n });\n\nconst widgetTheme = EditorView.baseTheme({\n \".cm-create-event-handler\": {\n paddingTop: \"1lh\",\n paddingBottom: \"0.6rem\",\n userSelect: \"none\",\n },\n \".cm-create-event-handler:empty\": {\n display: \"none\",\n },\n \".cm-create-event-handler-body\": {\n fontFamily: \"var(--anvil-ui-font)\",\n whiteSpace: \"normal\",\n wordWrap: \"break-word\",\n overflowWrap: \"anywhere\",\n },\n \".cm-create-event-handler input, .cm-create-event-handler textarea\": {\n userSelect: \"text\",\n },\n});\n\n/**\n * Registers the widget's CodeMirror extensions and returns the host element to portal the panel into.\n */\nexport function useCreateEventHandlerWidget(view: EditorView, enabled: boolean): HTMLElement | null {\n const host = useConstant(() => {\n const el = document.createElement(\"div\");\n el.className = \"cm-create-event-handler\";\n return el;\n });\n\n useExtension(view, () => (enabled ? [classBodyAnchorField, widgetDecorations(host), widgetTheme] : []), [enabled]);\n\n return enabled ? host : null;\n}\n","import { useDispatch, useSelector } from \"react-redux\";\nimport { ChangeDesc, Compartment, EditorState, Facet, StateEffect, StateField } from \"@codemirror/state\";\nimport { Decoration, DecorationSet, EditorView, ViewPlugin } from \"@codemirror/view\";\nimport { CodeNavTarget } from \"@/router/navTypes\";\nimport { AnvilDispatch, AppId, View } from \"@/types\";\nimport { useAppUrl } from \"@/util/hooks\";\nimport { getAppId, getAppPackageName } from \"../../controllers/app\";\nimport { getCodeNames } from \"../../controllers/app/code\";\nimport { navigate } from \"../../router/navigation\";\nimport { CodeRef, References } from \"../autocompletions/types\";\nimport { useExtension } from \"./hooks\";\n\nconst hoverThemeCompartment = new Compartment();\n\nexport function useJumpToDefinition(view: EditorView, tabNavTarget: CodeNavTarget, codeItemId: string) {\n const appId = useSelector(getAppId);\n const appUrl = useAppUrl();\n const appPackageName = useSelector(getAppPackageName);\n const allCodeNames = useSelector(getCodeNames);\n const dispatch = useDispatch();\n\n useExtension(\n view,\n () =>\n appTabDetails.of({\n appId,\n appUrl,\n appPackageName,\n allCodeNames,\n tabNavTarget,\n codeItemId,\n }),\n [appId, appPackageName, allCodeNames, tabNavTarget, codeItemId]\n );\n useExtension(\n view,\n () => [\n hoverThemeCompartment.of([]),\n HoverMarkerField,\n ViewPlugin.define((view) => new JumpToDefinition(view, dispatch)),\n ],\n []\n );\n}\n\nexport const updateReferences = StateEffect.define();\n\ninterface AppDetails {\n appId: AppId | undefined;\n appUrl: string;\n appPackageName: string | undefined;\n allCodeNames: any;\n tabNavTarget: CodeNavTarget;\n codeItemId: string;\n}\n\n/** a facet to hold state from react */\nconst appTabDetails = Facet.define({\n combine: (value) => value[0],\n});\n\nfunction getCodeItemFromRequest(state: EditorState, { def }: { from?: number; to?: number; def: Def }) {\n if (!def.item) {\n return;\n }\n const { allCodeNames } = state.facet(appTabDetails);\n const codeItem = allCodeNames[def.item];\n if (codeItem) {\n return codeItem;\n } else {\n console.log(\"Could not find target item for requestJumpToCode:\", def.item);\n }\n}\n\nfunction codeItemInFile(state: EditorState, codeItem: any) {\n if (!codeItem) {\n return false;\n }\n const { codeItemId } = state.facet(appTabDetails);\n return codeItemId === codeItem.id;\n}\n\nfunction defInFile(state: EditorState, def: Def) {\n if (!def.item) {\n return false;\n }\n const codeItem = getCodeItemFromRequest(state, { def });\n return codeItemInFile(state, codeItem);\n}\n\nfunction wrapWithDelay(fn: (...args: T[]) => void) {\n let called = false;\n let timeout: number | undefined = undefined;\n let resetTimeout: number | undefined = undefined;\n\n function wrapped(...args: T[]) {\n clearTimeout(resetTimeout);\n resetTimeout = setTimeout(() => {\n clearTimeout(timeout);\n timeout = undefined;\n called = false;\n }, 50);\n\n if (called) {\n return fn(...args);\n }\n\n timeout ??= setTimeout(() => {\n called = true;\n fn(...args);\n }, 200);\n }\n\n return wrapped;\n}\n\nclass JumpToDefinition {\n hoverRef: null | CodeRef = null;\n classHover = false;\n wrapMouseMove: () => void;\n dispatch: AnvilDispatch;\n\n constructor(\n readonly view: EditorView,\n dispatch: AnvilDispatch\n ) {\n // use capture event to prevent race condition with codemirror's builtin mousedown event\n // https://anvil.works/forum/t/new-beta-ide-reinstate-control-click-on-functions-to-navigate-to-them/13938\n view.dom.addEventListener(\"mousedown\", this.mousedown.bind(this), true);\n // Safari fires the mouse move on very Cmd keydown so use this delay wrapper\n // otherwise safari feels very slow with Cmd keyboard shortcuts\n this.wrapMouseMove = wrapWithDelay(this.mousemove.bind(this));\n view.dom.addEventListener(\"mousemove\", this.wrapMouseMove);\n this.dispatch = dispatch;\n }\n update() {}\n destroy() {\n this.view.dom.removeEventListener(\"mousedown\", this.mousedown, true);\n this.view.dom.removeEventListener(\"mousemove\", this.wrapMouseMove);\n }\n toggleHoverClass(toggle: boolean) {\n if (toggle === this.classHover) {\n return;\n }\n this.classHover = toggle;\n this.view.dispatch({ effects: hoverThemeCompartment.reconfigure(toggle ? hoverPointerTheme : []) });\n }\n mousemove(e: MouseEvent) {\n if (!((e.ctrlKey || e.metaKey) && !e.altKey)) {\n return this.toggleHoverClass(false);\n }\n const defs = this.view.state.field(HoverMarkerField);\n if (!defs) {\n return this.toggleHoverClass(false);\n }\n this.toggleHoverClass(true);\n }\n mousedown(e: MouseEvent) {\n if (!((e.ctrlKey || e.metaKey) && !e.altKey)) {\n return;\n }\n const defs = this.view.state.field(HoverMarkerField);\n if (!defs) {\n return;\n }\n const pos = this.view.posAtCoords({ x: e.x, y: e.y });\n const range = this.refUnderPos(pos, defs);\n if (range) {\n // jump to code - i.e. navigate\n e.preventDefault();\n e.stopPropagation();\n this.requestJumpToCode(range);\n }\n }\n refUnderPos(pos: number | null, defs: DefRanges) {\n if (!pos) return;\n return defs.getRange(pos);\n }\n requestJumpToCode(range: { from: number; to: number; def: Def }) {\n const state = this.view.state;\n const codeItem = getCodeItemFromRequest(state, range);\n if (!codeItem) {\n return;\n }\n const { line, col } = range.def;\n\n const view: View =\n codeItem.type === \"form\"\n ? { code: [`${line}`, `${col || 0}`] } // TODO: Generate Form view more intelligently. Really just \"add code, subject to default split view restrictions\"\n : { code: [`${line}`, `${col || 0}`] };\n\n this.dispatch(navigate({ type: \"CODE\", codePath: codeItem.codePath, view }));\n }\n}\n\nconst hoverPointerTheme = EditorView.theme({\n \".cm-code-ref-hover > *:hover\": {\n // because code highlighting is the next div\n cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n \".cm-code-ref-hover:hover\": {\n cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n});\n\nconst hoverRange = Decoration.mark({ class: \"cm-code-ref-hover\" });\n\ntype Def = { line: number; col: number; item: string; pos?: number };\nclass DefRanges {\n decos: DecorationSet;\n constructor(readonly ranges: { from: number; to: number; def: Def }[]) {\n this.decos = this.makeDecorations();\n }\n static create(state: EditorState, references: References) {\n return new DefRanges(this.makeRanges(state, references));\n }\n static makeRanges(state: EditorState, references: References) {\n const ranges = [];\n const doc = state.doc;\n const { appPackageName, allCodeNames } = state.facet(appTabDetails);\n const pkgPrefix = (appPackageName || \"main_app_package\") + \".\";\n for (const lineno in references) {\n const codeRefs = references[lineno].filter(\n (codeRef) => codeRef.def && codeRef.def.line\n ) as Required[]; // line starts at 1\n for (const codeRef of codeRefs) {\n try {\n const line = doc.line(parseInt(lineno));\n const from = line.from + codeRef.startCol;\n const to = line.from + codeRef.endCol;\n const codeRefDef = codeRef.def;\n const item = codeRefDef.moduleName?.startsWith(pkgPrefix)\n ? codeRefDef.moduleName.slice(pkgPrefix.length)\n : codeRefDef.moduleName;\n const def: Def = { line: codeRefDef.line, item, col: codeRefDef.col ?? 0 };\n if (defInFile(state, def)) {\n def.pos = doc.line(def.line).from + (def.col ?? 0);\n }\n ranges.push({ from, to, def });\n } catch (e) {\n // We hit errors here when a \"correcting\" parse to address syntax errors changes the line count\n // (eg dummy functions for @decorators without functions). The righteous fix is probably to apply\n // systematic warping to correct for the line number changes introduced during correction, but this\n // at least stops things breaking.\n console.error(\"Range creation failed\", e);\n }\n }\n }\n return ranges;\n }\n makeDecorations() {\n return Decoration.set(\n this.ranges.map(({ from, to }) => hoverRange.range(from, to)),\n true\n );\n }\n getRange(pos: number) {\n return this.ranges.find(({ from, to }) => from <= pos && pos <= to);\n }\n /** remove any ranges which has been changed - if we don't then we risk throwing errors from decorations that can't exist */\n map(state: EditorState, changes: ChangeDesc) {\n const newRanges = this.ranges\n .filter(({ from, to, def: { pos } }) => {\n if (changes.touchesRange(from, to)) return false; // the reference has changed\n if (pos != null && changes.touchesRange(pos)) return false; // we're in the same file and the defintion has changed\n return true;\n })\n .map(({ from, to, def }) => {\n from = changes.mapPos(from, 1);\n to = changes.mapPos(to);\n if (def.pos === undefined) return { from, to, def };\n const pos = changes.mapPos(def.pos);\n if (pos === def.pos) return { from, to, def };\n const L = state.doc.lineAt(pos);\n return { from, to, def: { line: L.number, item: def.item, col: pos - L.from, pos } };\n });\n return new DefRanges(newRanges);\n }\n}\n\n/** updates whenever the doc changes or the annotation hook gives us a new reference */\nconst HoverMarkerField = StateField.define({\n create() {\n return null;\n },\n update(value, tr) {\n for (const effect of tr.effects) {\n if (effect.is(updateReferences)) {\n return DefRanges.create(tr.state, effect.value);\n }\n }\n if (value == null) return value;\n if (tr.docChanged) {\n try {\n value = value.map(tr.state, tr.changes);\n } catch (e) {\n console.warn(e);\n value = null;\n }\n }\n return value;\n },\n provide: (f) => EditorView.decorations.from(f, (val) => (val ? val.decos : Decoration.none)),\n});\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { StateEffect, StateField } from \"@codemirror/state\";\nimport { EditorView, showPanel } from \"@codemirror/view\";\nimport { IconDefinition, faEnvelope, faInfoCircle, faWifi } from \"@fortawesome/pro-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button } from \"@/components/reusable/Button\";\nimport { CopyButton } from \"@/components/reusable/CopyButton\";\nimport { getAppOrigins } from \"@/controllers/app\";\nimport { getEnvironmentOrigins, getPublishInfo } from \"@/controllers/environments\";\nimport { modal } from \"@/controllers/modals\";\nimport { cx } from \"@/theme/styles\";\nimport type { AnvilDispatch } from \"@/types\";\nimport { useStateWithCustomUpdate } from \"@/util/hooks\";\nimport useEvent from \"@/util/useEventCallback\";\nimport type { EmailEndpoint, HttpEndpoint, Route } from \"../autocompletions/types\";\nimport { useExtension, useViewSelector } from \"./hooks\";\n\nexport function useServerPanels(view: EditorView, isServer: boolean) {\n useExtension(view, () => (isServer ? [endpointsState] : []), [isServer]);\n}\n\ninterface InfoPanelDetails {\n httpEndpoints: HttpEndpoint[];\n routes: Route[];\n emailEndpoints: EmailEndpoint[];\n}\n\ninterface InfoPanels {\n httpContainer: HTMLDivElement;\n emailContainer: HTMLDivElement;\n routeContainer: HTMLDivElement;\n}\n\n// create an effect to update the endpoints used by autocompletions\nexport const updateEndpoints = StateEffect.define();\n\nexport const makeServerPanel = () => {\n const panel = document.createElement(\"div\");\n panel.className = \"cm-server-panel\";\n return panel;\n};\n\nconst initEndpoint = (): InfoPanelDetails => ({\n httpEndpoints: [],\n routes: [],\n emailEndpoints: [],\n});\n\n// hold the state of emailEndpoints and httpEndpoints in codeMirror\n// when we have emailEndpoints or httpEndpoints the codeMirror bottom panels are rendered by codemirror\nconst endpointsState = StateField.define({\n create: initEndpoint,\n update(value, tr) {\n for (const e of tr.effects) {\n if (e.is(updateEndpoints)) {\n value = { ...value, ...e.value };\n break;\n }\n }\n return value;\n },\n});\n\ninterface EndpointPanelProps extends React.PropsWithChildren {\n portal?: HTMLDivElement;\n icon: IconDefinition;\n copyText?: string | null;\n localStorageKey: string;\n}\n// React Components live in the React Heirarchy\n// They are rendered within the ModuleEditor, this way they can access Providers like ThemeProvider\n// The actual dom element is attached to the CodeMirror Panel dom element using ReactDOM.createPortal\n\nexport function ServerPanelBody({ icon, children, copyText, localStorageKey }: EndpointPanelProps) {\n const [isExpanded, setIsExpanded] = useStateWithCustomUpdate(false, (v) => {\n localStorage[localStorageKey] = \"true\";\n return v;\n });\n const timeoutRef = useRef(undefined);\n const onEnter = useEvent(() => {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setIsExpanded(true), 150);\n });\n const onLeave = useEvent(() => {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setIsExpanded(false), 300);\n });\n const seen = localStorage[localStorageKey];\n // const seen = false; // for dev\n return (\n \n
\n );\n}\n","import React, { useEffect, useReducer, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faCompressArrowsAlt } from \"@fortawesome/free-solid-svg-icons/faCompressArrowsAlt\";\nimport { faExpandArrowsAlt } from \"@fortawesome/free-solid-svg-icons/faExpandArrowsAlt\";\nimport { faExternalLinkSquare } from \"@fortawesome/pro-light-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { EVENTS, offEvent, onEvent } from \"@/actions\";\nimport {\n getApp,\n getAppId,\n getAppOrigins,\n getAppRuntimeOptions,\n getRunnerOrigin,\n promptIfRuntimeMissing,\n} from \"@/controllers/app\";\nimport { getServerModules } from \"@/controllers/app/code\";\nimport {\n DebuggerEventArg,\n getDebugEnvBreakpointsForRunner,\n getIsRunnerPaused,\n onDebuggerUpdate,\n} from \"@/controllers/debugger\";\nimport { getCategorisedEnvironments } from \"@/controllers/environments\";\nimport { getRunCommitId, getRunRefresh, restartApp, stopApp } from \"@/controllers/ide\";\nimport { confirm } from \"@/controllers/modals\";\nimport { clearRepl, incrementImportTimeTracking, replReturn } from \"@/controllers/repl\";\nimport {\n getRunMode,\n getRunnerViewMaximised,\n maximiseRunner,\n maybeConfigureOrUpgradeOnImportFailure,\n newDebugSession,\n restoreRunner,\n runnerOutput,\n} from \"@/controllers/runner\";\nimport { handleRunnerBgTaskEvent, runnerConnectionStateChanged } from \"@/controllers/runner-bg-tasks\";\nimport { getTableauService } from \"@/controllers/tableau\";\nimport { claimAchievement, getUserUiPrefs } from \"@/controllers/user\";\nimport { navigate } from \"@/router/navigation\";\nimport { cx } from \"@/theme/styles\";\nimport type { AnvilDispatch } from \"@/types\";\nimport { ExternalState, useExternalState } from \"@/util/external-state\";\nimport { useFeatureSupported } from \"@/util/features\";\nimport { useResizeObserverTimeout } from \"@/util/hooks\";\nimport useEffectEvent from \"@/util/useEffectEvent\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { Button } from \"./reusable/Button\";\nimport { NumErrorWarningBtn, RunAppButton } from \"./reusable/ZenModeButtons\";\n\nconst runningReplCommands: { [id: number]: any } = {}; // requestId --> cmdId\nconst outstandingDebuggerRequestCallbacks: { [id: number]: any } = {}; // requestId --> callback\n\nconst useHandleImportError = () => {\n const dispatch = useDispatch();\n const runtimeOptions = useSelector(getAppRuntimeOptions);\n const serverModules = useSelector(getServerModules);\n const supportsCustomPackages = useFeatureSupported(\"custom-packages\");\n const supportsFullPythonRuntime = useFeatureSupported(\"full-python-runtime\");\n\n return useEvent(async (message: any) => {\n const msg = message.msg || \"\";\n const n = msg.match(/\\s'?([^\\s]+?)'?$/);\n const modname = n ? n[1] : null;\n\n if (modname === null) {\n // just report it\n return;\n }\n\n const appIsCustom = runtimeOptions?.server_spec?.base?.startsWith(\"python310-\");\n\n if (!(message.fromServer || (message.traceback && message.traceback[0] && message.traceback[0].fromServer))) {\n // Client error\n message.errorObj = {\n docUrl: \"/client/client-code/using-python-packages-in-client-code\",\n docLinkTitle: \"Not all modules are available in client code.\\nClick for more info\",\n };\n\n // Special case: requests\n if (modname === \"requests\") {\n message.errorObj = {\n docUrl: \"/external-resources/http-apis/making-http-requests\",\n docLinkTitle: \"To make HTTP requests from client code, use the anvil.http module.\",\n };\n } else if (modname === \"anvil.users\") {\n message.errorObj = {\n docUrl: \"/users\",\n docLinkTitle: \"Did you forget to add the Users Service?\",\n };\n }\n\n if (!(supportsCustomPackages || supportsFullPythonRuntime)) {\n // Even though they've tried to import this on the client, prompt to upgrade so they can do it on the server\n dispatch(maybeConfigureOrUpgradeOnImportFailure(modname, false, appIsCustom));\n }\n\n // ...or did they just try to import a server module?\n for (const sm of serverModules || []) {\n if (sm.name === modname || modname.endsWith(sm.name)) {\n message.errorObj = {\n docUrl: \"/server/server-modules#calling-server-functions-from-client-code\",\n docLinkTitle:\n \"Client-side modules can't import Server Modules. Use anvil.server.call() to call server functions.\",\n };\n }\n }\n } else if (msg.includes(\"anvil.js\")) {\n // we'er trying to import anvil.js on the server\n // the custom error message should speak for itself\n // no need for an upgrade prompt\n // TODO maybe put this in the docs and link to it\n } else if (supportsFullPythonRuntime || supportsCustomPackages) {\n // Server import failure for a subscribed user. Probably a typo, perhaps\n // they have a request.\n if (appIsCustom) {\n message.errorObj = {\n docUrl: \"/server/custom-packages#adding-packages\",\n docLinkTitle: \"Need an extra library installed?\\nClick for more info\",\n };\n } else {\n message.errorObj = {\n docUrl: \"/server/custom-packages#available-python-versions\",\n docLinkTitle: \"Try selecting a different Python version.\",\n };\n }\n if (message.type === \"ModuleNotFoundError\") {\n // don't show this for import error's\n // e.g. `from typing import foo` is an ImportError (alert misleading)\n // e.g. `import foobarbaz` is a ModuleNotFoundError (alert beneficial)\n dispatch(maybeConfigureOrUpgradeOnImportFailure(modname, true, appIsCustom));\n }\n } else if (modname === \"requests\") {\n // Special case\n message.errorObj = {\n docUrl: \"/external-resources/http-apis/making-http-requests\",\n docLinkTitle: \"Free Plan users can use the anvil.http module instead of requests.\",\n };\n } else if (modname === \"anvil.users\") {\n message.errorObj = {\n docUrl: \"/users\",\n docLinkTitle: \"Did you forget to add the Users Service?\",\n };\n } else {\n // Server import failure for a non-Pro user. Upsell time!\n message.errorObj = {\n docUrl: \"/server/custom-packages\",\n docLinkTitle: \"Some libraries are only available for paid users.\\nClick for details\",\n };\n\n dispatch(maybeConfigureOrUpgradeOnImportFailure(modname, false, appIsCustom));\n }\n });\n};\n\nconst useHandlePythonError = () => {\n const dispatch = useDispatch();\n const handleImportError = useHandleImportError();\n\n return useEvent(async (message: any) => {\n switch (message.type) {\n case \"anvil.server.ServiceNotAdded\":\n message.errorObj = {\n docUrl: \"/editor/common-errors#service-not-added\",\n docLinkTitle: \"Learn how to add services to your app\",\n };\n break;\n case \"anvil.server.RuntimeUnavailableError\":\n if (message.msg.indexOf(\"Basic Python 2\") === -1) {\n let m = message.msg.match(/Server resources not available for '([^']+)'./);\n if (m) {\n dispatch(promptIfRuntimeMissing(m?.[1], false));\n } else {\n m = message.msg.match(/Could not launch server runtime - image build failed./);\n if (m) {\n if (\n await dispatch(\n confirm(\n \"Server runtime failed to start\",\n \"The server runtime for your app could not be built. Would you like to see the build output?\"\n )\n )\n ) {\n dispatch((_, getState) => {\n const appId = getAppId(getState());\n dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }));\n });\n }\n }\n }\n }\n break;\n\n case \"HttpError\":\n if (message.msg === \"0\") {\n message.errorObj = {\n docUrl: \"/external-resources/http-apis/making-http-requests#browser-restrictions\",\n docLinkTitle: \"This URL may be restricted by your web browser.\\nLearn more\",\n };\n }\n break;\n case \"ImportError\":\n case \"NotImplementedError\":\n case \"NotImplementedImportError\":\n case \"ModuleNotFoundError\":\n await handleImportError(message);\n break;\n }\n });\n};\n\nconst useOnMessage = (runningAppWindow: WindowProxy | null) => {\n const dispatch = useDispatch();\n const runnerOrigin = useSelector(getRunnerOrigin);\n\n const handlePythonError = useHandlePythonError();\n\n return useEvent(async (message: any) => {\n // log.debug(\"Runner msg:\", message);\n const maybeReplReturnOrDebuggerCallback = () => {\n if (runningReplCommands[message.requestId]) {\n dispatch(replReturn(runningReplCommands[message.requestId]));\n delete runningReplCommands[message.requestId];\n } else if (message.requestId in outstandingDebuggerRequestCallbacks) {\n outstandingDebuggerRequestCallbacks[message.requestId]?.(message.result);\n delete outstandingDebuggerRequestCallbacks[message.requestId];\n }\n };\n\n if (message.error) {\n dispatch(runnerOutput(message));\n maybeReplReturnOrDebuggerCallback();\n } else if (\"result\" in message) {\n if (message.result?.clearRepl) {\n dispatch(clearRepl(null, runningReplCommands[message.requestId]));\n dispatch(runnerOutput({ fn: \"clear\" }));\n }\n maybeReplReturnOrDebuggerCallback();\n } else if (message.fn)\n switch (message.fn) {\n case \"getBreakpoints\":\n if (!runnerOrigin) break;\n runningAppWindow?.postMessage(\n {\n id: message.id,\n response: await dispatch(getDebugEnvBreakpointsForRunner()),\n },\n runnerOrigin\n );\n break;\n case \"restartApp\":\n dispatch(restartApp());\n break;\n case \"newAppSession\":\n dispatch(newDebugSession(message.sessionToken));\n break;\n case \"stdout\":\n // TODO: We should probably batch output here, then dispatch everything after ~10 ms.\n dispatch(runnerOutput(message));\n break;\n case \"replStateUpdate\":\n if (message.replStateUpdate?.importTime) {\n dispatch(incrementImportTimeTracking(message.replStateUpdate?.importTime));\n }\n break;\n case \"pythonError\":\n // log.info(\"python error\", message);\n await handlePythonError(message);\n dispatch(runnerOutput(message));\n maybeReplReturnOrDebuggerCallback();\n break;\n case \"debuggerUpdate\":\n dispatch(onDebuggerUpdate(message.update));\n break;\n case \"bgTaskEvent\":\n dispatch(handleRunnerBgTaskEvent(message.event));\n break;\n case \"runnerConnectionState\":\n dispatch(runnerConnectionStateChanged(message.state));\n break;\n case \"claimAchievement\":\n dispatch(claimAchievement(message.achievementId));\n break;\n }\n });\n};\n\nlet lastRequestId = 0;\n\nfunction useMessages(runningAppWindow: WindowProxy | null) {\n const dispatch = useDispatch();\n const runnerOrigin = useSelector(getRunnerOrigin);\n const appOrigins = useSelector(getAppOrigins)!;\n const onMessage = useOnMessage(runningAppWindow);\n\n const onReplCmd = useEvent(({ cmdId, code, extraArgs }: any) => {\n if (!runnerOrigin) return;\n const requestId = ++lastRequestId;\n runningReplCommands[requestId] = cmdId;\n runningAppWindow?.postMessage(\n {\n requestId,\n fn: \"replCommand\",\n args: [code, extraArgs],\n },\n runnerOrigin\n );\n });\n\n const onReplInterrupt = useEvent(() => {\n if (!runnerOrigin) return;\n const requestId = ++lastRequestId;\n runningAppWindow?.postMessage(\n {\n requestId,\n fn: \"replInterrupt\",\n args: [],\n },\n runnerOrigin\n );\n });\n\n const onDebuggerRequest = useEvent(({ request, callback }: DebuggerEventArg) => {\n const requestId = ++lastRequestId;\n outstandingDebuggerRequestCallbacks[requestId] = callback;\n runningAppWindow?.postMessage(\n {\n requestId,\n fn: \"debuggerRequest\",\n args: [request],\n },\n appOrigins.debugOrigin\n );\n });\n\n const onMsg = useEvent((e: MessageEvent) => {\n if (e.source !== runningAppWindow) return;\n onMessage(e.data);\n });\n\n useEffect(() => {\n if (!runningAppWindow) return;\n dispatch(onEvent(EVENTS.RUNNER_REPL_COMMAND, onReplCmd));\n dispatch(onEvent(EVENTS.RUNNER_REPL_INTERRUPT, onReplInterrupt));\n dispatch(onEvent(EVENTS.RUNNER_DEBUGGER_REQUEST, onDebuggerRequest));\n\n window.addEventListener(\"message\", onMsg);\n return () => {\n window.removeEventListener(\"message\", onMsg);\n dispatch(offEvent(EVENTS.RUNNER_REPL_COMMAND, onReplCmd));\n dispatch(offEvent(EVENTS.RUNNER_REPL_INTERRUPT, onReplInterrupt));\n dispatch(offEvent(EVENTS.RUNNER_DEBUGGER_REQUEST, onDebuggerRequest));\n };\n }, [runningAppWindow]);\n}\n\n/** checks whether the NEWTAB was closed by the user */\nfunction useNewTabHeartbeat(runningAppWindow: WindowProxy | null) {\n const runMode = useSelector(getRunMode);\n const heartbeatRef = useRef(undefined);\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (runMode === \"NEWTAB\" && runningAppWindow) {\n heartbeatRef.current = setInterval(() => {\n if (runningAppWindow.closed) {\n dispatch(stopApp());\n clearInterval(heartbeatRef.current);\n }\n }, 1000);\n }\n return () => {\n clearInterval(heartbeatRef.current);\n };\n }, [runningAppWindow, runMode]);\n}\n\nfunction useRefreshNewTab(runningAppWindow: WindowProxy | null, src: string) {\n const setBannerUsed = useBanner(runningAppWindow);\n const runnerOrigin = useSelector(getRunnerOrigin);\n const refresh = useSelector(getRunRefresh);\n const onLocationRefresh = useEvent(() => {\n if (!runnerOrigin) return;\n runningAppWindow?.postMessage(\n {\n requestId: ++lastRequestId,\n fn: \"locationReload\",\n args: [src],\n },\n runnerOrigin\n );\n runningAppWindow?.focus();\n });\n\n useEffect(() => {\n if (refresh == null) return;\n onLocationRefresh();\n setBannerUsed(false);\n }, [refresh]);\n}\n\nfunction useBanner(runningAppWindow: WindowProxy | null) {\n const runnerOrigin = useSelector(getRunnerOrigin);\n const app = useSelector(getApp);\n const commitId = useSelector(getRunCommitId);\n const [bannerUsed, setBannerUsed] = useState(false);\n if (!runningAppWindow && bannerUsed) {\n setBannerUsed(false);\n }\n\n const onPostBannerMessage = useEvent(() => {\n if (!runnerOrigin) return;\n if (!runningAppWindow || bannerUsed) return;\n\n runningAppWindow.postMessage(\n {\n requestId: ++lastRequestId,\n fn: \"appChanged\",\n },\n runnerOrigin\n );\n\n setBannerUsed(true);\n });\n\n useEffect(() => {\n if (app?.commitSha !== commitId) {\n onPostBannerMessage();\n }\n }, [app?.commitSha, commitId]);\n\n return setBannerUsed;\n}\n\nconst newTabWindowAtom = new ExternalState(null);\n\nconst getRunnerUrl = (runnerOrigin: string | undefined, runPath = \"\") => {\n if (!runnerOrigin) return \"\";\n\n const origin = runnerOrigin.endsWith(\"/\") ? runnerOrigin.slice(0, -1) : runnerOrigin;\n if (!runPath) return `${origin}/`;\n if (runPath.startsWith(\"?\") || runPath.startsWith(\"#\")) return `${origin}/${runPath}`;\n return `${origin}/${runPath.replace(/^\\/+/, \"\")}`;\n};\n\nconst useRunnerSrc = () => {\n const runnerOrigin = useSelector(getRunnerOrigin);\n const environments = useSelector(getCategorisedEnvironments);\n const tableauService = useSelector(getTableauService);\n const tableauDashboard = environments?.debug?.url?.tableau_dashboard;\n const userUiPrefs = useSelector(getUserUiPrefs);\n const appId = useSelector(getAppId)!;\n const runPath = userUiPrefs?.appRunPaths?.[appId] || \"\";\n if (tableauService && tableauDashboard) {\n return getRunnerUrl(runnerOrigin, \"/_/tableau\");\n }\n return getRunnerUrl(runnerOrigin, runPath);\n};\n\nexport const useCommunicateWithRunner = (runningAppWindow: WindowProxy | null, src: string) => {\n useMessages(runningAppWindow);\n useNewTabHeartbeat(runningAppWindow);\n useRefreshNewTab(runningAppWindow, src);\n};\n\nexport const useNewTabRunner = () => {\n const src = useRunnerSrc();\n const runMode = useSelector(getRunMode);\n const [newTabWindow, setNewTabWindow] = useExternalState(newTabWindowAtom);\n useCommunicateWithRunner(newTabWindow, src);\n\n const onRunModeChange = useEffectEvent(() => {\n if (runMode === \"NEWTAB\") {\n setNewTabWindow(window.open(src, \"\"));\n } else {\n newTabWindow?.close();\n setNewTabWindow(null);\n }\n });\n\n useEffect(() => {\n onRunModeChange();\n }, [runMode]);\n\n useEffect(() => () => newTabWindow?.close(), []);\n\n return newTabWindow;\n};\n\nexport const RunnerNewTabFocusButton = () => {\n const [runningAppWindow] = useExternalState(newTabWindowAtom);\n const runMode = useSelector(getRunMode);\n if (runMode !== \"NEWTAB\") return null;\n return (\n runningAppWindow?.focus()}>\n Focus running app\n \n );\n};\n\ntype Position = { left: number; top: number };\n// maybe persist this position\nconst initPosition = { left: 0, top: 0 };\n\nconst useDraggableMaximizeButton = () => {\n const [position, setPosition] = useReducer((prev: Position, next: Position) => {\n if (prev.left === next.left && prev.top === next.top) return prev;\n return next;\n }, initPosition);\n\n const [isDragging, setIsDragging] = useState(false);\n const dragItemRef = useRef(null);\n const containerRef = useRef(null);\n\n const onPointerDown = useEvent((e: React.MouseEvent) => {\n setIsDragging(true);\n const onPointerUp = () => {\n setIsDragging(false);\n document.removeEventListener(\"pointerup\", onPointerUp, true);\n };\n document.addEventListener(\"pointerup\", onPointerUp, { capture: true, passive: true });\n });\n\n const onDragStart = useEvent((e: React.DragEvent) => {\n const rect = dragItemRef.current?.getBoundingClientRect();\n if (!rect) return;\n setIsDragging(true);\n e.dataTransfer.setData(\n \"text/plain\",\n JSON.stringify({ offsetX: e.clientX - rect.left, offsetY: e.clientY - rect.top })\n );\n e.dataTransfer.effectAllowed = \"move\";\n });\n\n const onDragOver = useEvent((e: React.DragEvent) => {\n if (!isDragging) return;\n e.preventDefault();\n e.dataTransfer.dropEffect = \"move\";\n });\n\n const onDragEnd = useEvent((e: React.DragEvent) => {\n e.preventDefault();\n setIsDragging(false);\n });\n\n const onDrop = useEvent((e: React.DragEvent) => {\n if (!isDragging) return;\n e.preventDefault();\n setIsDragging(false);\n const containerRect = containerRef.current?.getBoundingClientRect();\n if (!containerRect) return;\n const offsets = JSON.parse(e.dataTransfer.getData(\"text/plain\"));\n let newLeft = e.clientX - containerRect.left - offsets.offsetX;\n let newTop = e.clientY - containerRect.top - offsets.offsetY;\n newLeft = Math.max(0, Math.min(containerRect.width - (dragItemRef.current?.offsetWidth ?? 0), newLeft));\n newTop = Math.max(0, Math.min(containerRect.height - (dragItemRef.current?.offsetHeight ?? 0), newTop));\n setPosition({ left: newLeft, top: newTop });\n });\n\n useResizeObserverTimeout(containerRef, () => {\n if (!containerRef.current || !dragItemRef.current) return;\n\n const containerRect = containerRef.current.getBoundingClientRect();\n const dragItemRect = dragItemRef.current.getBoundingClientRect();\n const newPosition = { ...position };\n if (newPosition.left + dragItemRect.width > containerRect.width) {\n newPosition.left = containerRect.width - dragItemRect.width;\n }\n if (newPosition.top + dragItemRect.height > containerRect.height) {\n newPosition.top = containerRect.height - dragItemRect.height;\n }\n setPosition(newPosition);\n });\n\n return {\n onDrop,\n onDragEnd,\n onDragOver,\n onDragStart,\n isDragging,\n style: position,\n onPointerDown,\n dragItemRef,\n containerRef,\n };\n};\n\nexport const RunnerIframe = () => {\n const dispatch = useDispatch();\n const src = useRunnerSrc();\n const runMode = useSelector(getRunMode);\n const isMaximized = useSelector(getRunnerViewMaximised);\n const [runningAppWindow, setRunningAppWindow] = useState(null);\n useCommunicateWithRunner(runningAppWindow, src);\n const iframeRef = useRef(null);\n\n useEffect(() => {\n if (runMode === \"INLINE\" && iframeRef.current) {\n iframeRef.current.src = src;\n setRunningAppWindow(iframeRef.current.contentWindow);\n }\n }, [src, runMode]);\n\n const runnerMaximised = useSelector(getRunnerViewMaximised);\n const onExpandRunnerClick = useEvent(() => dispatch(runnerMaximised ? restoreRunner() : maximiseRunner()));\n\n const { onDrop, onDragEnd, onDragOver, onDragStart, isDragging, style, onPointerDown, dragItemRef, containerRef } =\n useDraggableMaximizeButton();\n\n const isPaused = useSelector(getIsRunnerPaused);\n\n if (runMode !== \"INLINE\") return null;\n return (\n
\n \n {isPaused && }\n \n \n {isMaximized && }\n
\n \n \n );\n};\n","import React, { useContext, useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faLevelDownAlt } from \"@fortawesome/free-solid-svg-icons/faLevelDownAlt\";\nimport { faTrash } from \"@fortawesome/free-solid-svg-icons/faTrash\";\nimport { faRefresh } from \"@fortawesome/pro-solid-svg-icons\";\nimport { faMagnifyingGlass, faPause } from \"@fortawesome/pro-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { ReplEditor } from \"@/code_mirror/repl\";\nimport { getApp } from \"@/controllers/app\";\nimport { openOrFocusBottomTab } from \"@/controllers/bottom-tabs\";\nimport { getIsRunnerPaused, getPausedServerReplHyperstackId } from \"@/controllers/debugger\";\nimport { restartApp } from \"@/controllers/ide\";\nimport { modal } from \"@/controllers/modals\";\nimport {\n clearRepl,\n dismissReplBanner,\n getPreserveReplLogs,\n replCommand,\n replInterrupt,\n restartRepl,\n setPreserveReplLogs,\n} from \"@/controllers/repl\";\nimport { getDebugSessionToken, getRunMode } from \"@/controllers/runner\";\nimport { recordActivity } from \"@/controllers/util\";\nimport { cx } from \"@/theme/styles\";\nimport { AnvilDispatch, Repl, State } from \"@/types\";\nimport { checkMeta } from \"@/util\";\nimport { useFeatureSupported } from \"@/util/features\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { navigate } from \"../../router/navigation\";\nimport { Button } from \"../reusable/Button\";\nimport { LinkInternal } from \"../reusable/LinkInternal\";\nimport LiveOutput, { liveOutputSearchStore } from \"../reusable/LiveOutput\";\nimport { CheckBox } from \"../reusable/SharedComponents\";\nimport { useTooltip } from \"../reusable/Tooltip\";\nimport UpgradeBadge from \"../reusable/UpgradeBadge\";\nimport { StackFrameContext, StackFrameContextType } from \"./DebugInspector\";\n\ninterface ImportBannerProps {\n repl: Repl;\n}\n\ninterface ReplProps {\n id: string;\n repl: Repl;\n noninteractive?: boolean;\n debug?: boolean;\n}\n\nconst ImportBanner: React.FC = ({ repl }) => {\n const dispatch = useDispatch();\n const app = useSelector(getApp);\n\n const persistentAvailable = useFeatureSupported(\"persistent-server\");\n const showBanner = repl.importTimeTracking?.showImportBanner && !app?.config.runtime_options.server_persist;\n const [importBannerToolTip, importBannerAnchorRef] = useTooltip(\n \"Every server call requires set up including all module imports.\",\n \"top\"\n );\n\n useEffect(() => {\n if (showBanner) {\n dispatch(recordActivity(\"showImportBanner\", { importTime: repl.importTimeTracking?.totalImportTime }));\n }\n }, [showBanner]);\n\n return showBanner ? (\n
\n \n {importBannerToolTip}\n Total import time: {repl.importTimeTracking?.totalImportTime} ms (\n {repl.importTimeTracking?.requestCount} server calls).\n \n \n persistentAvailable\n ? dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }))\n : dispatch(modal(\"upgradePrompt\", { featureId: \"persistent-server\" }))\n }>\n Turn on persistent server to speed up your app.\n \n \n
\n ) : null;\n};\n\n/**\n * isRunning tells the replEditor whether we can/can't execute a command\n * if the last executing command is from the client, but our current context is on the server, then we can execute the command\n */\nexport function useIsRunning(repl: Repl | undefined, dbg: StackFrameContextType[\"dbg\"]) {\n const runningCmdIdx = repl?.runningCmdIdx;\n const isServer = repl?.type === \"server\" || (repl?.type === \"runner\" && dbg?.location);\n return runningCmdIdx != null && !!repl?.output.at(runningCmdIdx)?.onServer === !!isServer;\n}\n\ninterface ReplToolbarProps {\n id: string;\n repl: Repl;\n autoScroll: boolean;\n setAutoScroll: (autoScroll: boolean) => void;\n}\n\nconst ReplToolbar = ({ repl, id, autoScroll, setAutoScroll }: ReplToolbarProps) => {\n const dispatch = useDispatch();\n\n const preserveReplLogs = useSelector(getPreserveReplLogs);\n const [preserveLogs, setPreserveLogs] = useState(preserveReplLogs || false);\n\n const [autoScrollToolTip, autoScrollAnchorRef] = useTooltip(\"Toggle output auto-scroll\", \"top-right\");\n const [refreshToolTip, refreshAnchorRef] = useTooltip(\n repl.type === \"server\" ? \"Restart Server Repl\" : \"Restart App\",\n \"top-right\"\n );\n\n const onUpdatePreserveLogs = useEvent(async () => {\n setPreserveLogs((p) => !p);\n await dispatch(setPreserveReplLogs(repl.id, !preserveLogs));\n });\n\n return (\n
\n {isRunner ? (\n <>\n The app has changed since you ran it.{\" \"}\n dispatch(restartApp())}>\n Click here to restart\n \n .\n \n ) : (\n <>\n The app has changed since you opened this Server Console.{\" \"}\n dispatch(restartRepl(id))}>\n Click here to reload\n \n \n )}\n
\n );\n};\n\nexport default REPL;\n","import React from \"react\";\nimport { join } from \"lodash-es\";\nimport moment from \"moment\";\nimport { modalReturn } from \"@/controllers/modals\";\nimport { ModalComponent } from \".\";\nimport { Heading, Text } from \"../reusable/Text\";\nimport Modal from \"./Modal\";\n\nconst VulnerablePackage = ({ pkg }: { pkg: any }) => {\n return (\n
\n )}\n \n );\n};\n\nexport default ScheduledTaskModal;\n","import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { faAngleDoubleUp } from \"@fortawesome/pro-light-svg-icons/faAngleDoubleUp\";\nimport { faChevronRight } from \"@fortawesome/pro-light-svg-icons/faChevronRight\";\nimport { faCheck } from \"@fortawesome/pro-solid-svg-icons/faCheck\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { every } from \"lodash-es\";\nimport * as api from \"@/api\";\nimport { getAppId } from \"@/controllers/app\";\nimport { getFeatures, getIsIDE, getSubscription, getUser, reloadUser } from \"@/controllers/ide\";\nimport { alert } from \"@/controllers/modals\";\nimport { startUpgrade } from \"@/controllers/payment\";\nimport { restoreRunnerView } from \"@/controllers/runner\";\nimport { startTrial } from \"@/controllers/user\";\nimport { navigate } from \"@/router/navigation\";\nimport { makeStyles, useIsPySpace } from \"@/theme/styles\";\nimport type { AnvilDispatch, GadgetDispatch } from \"@/types\";\nimport { getPlanName } from \"@/util/features\";\nimport { useEffectAsync } from \"@/util/hooks\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { setRightPanelContent } from \"@pyspace/gadget_editor/controllers/gadget\";\nimport type { ModalComponent } from \".\";\nimport { Button } from \"../reusable/Button\";\nimport { HelpLink } from \"../reusable/HelpLink\";\nimport { ModalButton } from \"../reusable/SharedComponents\";\nimport { Heading, Text } from \"../reusable/Text\";\nimport Modal from \"./Modal\";\nimport type { ModalRef } from \"./Modal\";\n\n// There are three Upgrade Prompt modals to choose from:\n//\n// - Open app with feature you don't have access to. For runtime, offer 7 day trial, or show trial requested (or expired? Somehow?). For everything else, door slam.\n// - UpgradePromptOnOpenApp\n// - Runtime uses feature not supported on your plan. Basically always going to be a module import (or an email send?)\n// - UpgradePromptOnRuntimeFeatureRequired\n// - Click a feature explicitly labelled \"BUSINESS PLAN\" etc. Show plan-specific modal. Optionally, specialise this modal depending on which feature was clicked.\n// - UpgradePrompt\nlet useStyles = makeStyles()((theme) => ({\n lowerButtons: {\n marginTop: \"2rem\",\n display: \"flex\",\n justifyContent: \"flex-end\",\n gap: \"1rem\",\n },\n}));\n\ninterface FullRuntimeStatusProps {\n onStartTrial?: () => Promise | void;\n onConfirmTrialRequested: () => void;\n}\n\nconst FullRuntimeStatus = ({ onStartTrial, onConfirmTrialRequested }: FullRuntimeStatusProps) => {\n // This gets triggered when you choose a runtime that you don't have access to on your subscription\n //\n // Cases:\n // - You haven't had a trial --> Option to activate one\n // - You have already had your trial --> Upgrade\n\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const onStartRuntimeTrial = useEvent(() => {\n dispatch(startTrial(\"python3-full\"));\n });\n\n if (user.trial) {\n // User has already started a trial. If we've got here, it must have expired.\n if (user.trial.expired) {\n return (\n
\n Your trial of the Full Python server has expired. To continue using the Full Python server, upgrade\n now!\n
\n );\n } else {\n return (\n
\n \n You have requested a trial of the Full Python server. It will be activated in the next 24 hours.\n \n \n
\n );\n }\n } else {\n // User has never had a trial. Give them the option to start one.\n return (\n
\n To try a Full Python server before upgrading, you can activate a 7-day trial.\n \n \n Trial will activate within 24 hours\n \n
\n );\n }\n};\n\ninterface CustomPackagesStatusProps {\n onStartTrial?: () => Promise | void;\n onInstallPackagesNow: () => void;\n modalRef: React.RefObject;\n}\n\nconst CustomPackagesStatus = ({ onStartTrial, onInstallPackagesNow, modalRef }: CustomPackagesStatusProps) => {\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const onStartRuntimeTrial = useEvent(async () => {\n await onStartTrial?.();\n await dispatch(startTrial(\"custom-packages\"));\n modalRef.current!.returnValue(true);\n });\n\n if (user.trial) {\n // User has already started a trial. If we've got here, it must have expired.\n if (user.trial.expired) {\n return (\n
\n Your trial of custom package installations has expired. To continue using the Full Python server,\n upgrade now!\n
\n );\n } else {\n return (\n
\n \n Trial activated! \n \n \n
\n );\n }\n } else {\n // User has never had a trial. Give them the option to start one.\n return (\n
\n To try installing custom packages before upgrading, you can activate a 7-day trial.\n \n
\n );\n }\n};\n\ninterface UpgradePromptOnOpenAppSpec {\n featureIds: string[];\n}\n\nexport const UpgradePromptOnOpenApp: ModalComponent = ({\n modalId,\n spec: { featureIds },\n}) => {\n // The provided features are guaranteed not to be available on the current subscription.\n // console.log(user.features, featureIds);\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const appId = useSelector(getAppId);\n const subscription = useSelector(getSubscription);\n const features = featureIds.map((id) => user.features[id]);\n\n const modalRef = useRef(null);\n\n const [requiredPlan, setRequiredPlan] = useState(\"paid\");\n\n useEffectAsync(async () => {\n setRequiredPlan((await api.getPlanSupportingAllFeatures(featureIds)) || \"paid\");\n }, []);\n\n if (!every(features)) {\n console.error(`No feature found for one of [${features}].`);\n return No feature found found for one of [{`${features}`}].;\n }\n\n // Steps:\n // 1. Map which plan is required to suit all these features\n // 2. Work out whether all the features required are \"can run without\" features\n // 3. Work out whether \"full Python runtime\" is on the list, because that gets special UI\n // 4. - Show the list of features\n // - If appropriate, show the \"Full Python trial\" UI\n // - Display more or less apocalyptic copy depending on the answer to #2\n\n const canRunWithout = every(featureIds, (fid) => user.features[fid].canRunWithout);\n const fullPythonRequired = featureIds.indexOf(\"full-python-runtime\") > -1;\n const customPackagesRequired = featureIds.indexOf(\"custom-packages\") > -1;\n const isDedicatedPlan = requiredPlan === \"dedicated\";\n const rpName = isDedicatedPlan ? \"Business Plan with Extra Server Resources\" : getPlanName(requiredPlan) + \" Plan\";\n\n const renderFeature = (featureId: string) => {\n const feature = user.features[featureId];\n return (\n <>\n {feature.helpLink ? (\n \n {feature.name}\n \n ) : (\n {feature.name}\n )}\n \n );\n };\n\n return (\n {\n window.location.href = \"mailto:support@anvil.works\";\n },\n }\n : {\n text: \"Upgrade now\",\n defaultButton: true,\n close: true,\n variant: \"primary\",\n clickActionCreator: () =>\n startUpgrade(!subscription?.plan, !!subscription?.trial, false, {\n initialPlan: requiredPlan,\n }),\n },\n { text: \"Not yet\", close: true },\n ]}>\n
\n {featureIds.length === 1 ? (\n <>\n This app uses {renderFeature(featureIds[0])}, available on the {rpName}.\n {isDedicatedPlan && (\n <>\n {\" \"}\n Please contact support@anvil.works to upgrade.\n \n )}\n \n ) : (\n <>\n This app uses:\n
\n {featureIds.map((fid, idx) => (\n
{renderFeature(fid)}
\n ))}\n
\n \n These features are available on the {rpName}.\n {isDedicatedPlan && (\n <>\n {\" \"}\n Please contact support@anvil.works to upgrade.\n \n )}\n \n )}\n \n\n
\n {canRunWithout\n ? `You can run this app, but ${\n featureIds.length === 1 ? \"this feature\" : \"these features\"\n } will not be available.`\n : \"You can look around and edit this app, but it probably won't run correctly.\"}\n
\n\n {fullPythonRequired ? (\n modalRef.current!.returnValue(true)} />\n ) : customPackagesRequired ? (\n {\n dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }));\n modalRef.current!.returnValue(true);\n }}\n />\n ) : null}\n \n );\n};\n\ninterface ConfigureOrUpgradePromptOnRuntimeFeatureRequiredSpec {\n module: string;\n hasRuntime: boolean;\n configured: boolean;\n trialRequested?: boolean;\n}\n\nexport const ConfigureOrUpgradePromptOnRuntimeFeatureRequired: ModalComponent<\n ConfigureOrUpgradePromptOnRuntimeFeatureRequiredSpec,\n boolean | undefined\n> = ({ modalId, spec: { module, hasRuntime, configured, trialRequested = false } }) => {\n const dispatch = useDispatch();\n const user = useSelector(getUser);\n const appId = useSelector(getAppId);\n const subscription = useSelector(getSubscription);\n const { classes } = useStyles();\n const featureId = \"custom-packages\";\n const features = useSelector(getFeatures);\n const feature = features[featureId];\n const plan = getPlanName(feature?.upgradePlan || feature.plan);\n\n const isPySpace = useIsPySpace();\n\n let modalRef = useRef(null);\n const subStateRef = useRef(subscription);\n subStateRef.current = subscription;\n\n const goToSettings = useCallback(() => {\n dispatch(restoreRunnerView());\n dispatch(navigate({ type: \"SETTINGS\", section: \"RUNTIME\" }));\n modalRef.current!.returnValue(true);\n }, [modalRef, appId, subscription]);\n\n const startRuntimeTrial = useCallback(async () => {\n const started = await api.startRuntimeTrial(featureId);\n if (started) {\n await dispatch(reloadUser());\n dispatch(alert(\"Trial activated\", \"Your trial has been successfully activated!\"));\n goToSettings();\n } else {\n dispatch(\n alert(\n \"Something's gone wrong!\",\n \"Sorry, we were unable to begin your trial. Please contact support@anvil.works\"\n )\n );\n }\n modalRef.current!.returnValue(true);\n }, []);\n\n const goToUpgrade = async () => {\n await (startUpgrade(!subscription?.plan, !!subscription?.trial, false, {\n initialPlan: feature?.upgradePlan || feature.plan,\n }) as ReturnType & Promise);\n if (Object.keys(subStateRef.current!).length !== 0) {\n goToSettings();\n }\n };\n\n const goToPySpacePackages = () => {\n dispatch(setRightPanelContent(() => \"packages\"));\n modalRef.current!.returnValue(true);\n };\n\n const buttons = useMemo(() => {\n if (hasRuntime) {\n return (\n <>\n {isPySpace ? (\n \n Go to Packages\n \n ) : (\n \n Go to settings\n \n )}\n modalRef.current!.returnValue(false)}>Cancel\n \n );\n } else {\n return (\n <>\n \n Upgrade\n \n modalRef.current!.returnValue(false)}>Not yet\n \n );\n }\n }, [hasRuntime, appId]);\n\n const title = useMemo(() => {\n return hasRuntime\n ? \"Configure your app\"\n : user?.trial\n ? \"Upgrade to configure your app\"\n : \"Upgrade or Start your 7-day trial\";\n }, [hasRuntime, user?.trial]);\n\n return (\n \n \n The {module} module is not currently installed in the server environment of this app.\n \n {hasRuntime ? (\n configured ? (\n \n Install custom packages in the app settings.{\" \"}\n \n Learn more about custom Python packages\n \n \n ) : (\n \n Enable custom packages by switching to Python 3.10 and installing custom packages in the app\n settings.{\" \"}\n \n Learn more about custom Python packages\n \n \n )\n ) : (\n <>\n {\" \"}\n {configured ? (\n \n To import any third-party python package into your app, upgrade your subscription to the{\" \"}\n {plan} plan and install custom packages in your app.{\" \"}\n \n Learn more about custom Python packages\n \n \n ) : (\n \n Import third-party python packages directly into your app by upgrading to a paid\n subscription. You'll be able to switch the app's python version to Python 3.10 and{\" \"}\n \n install custom packages\n \n \n )}\n {!user?.trial && (\n
\n \n Start a 7-day free trial today\n \n
\n )}\n \n )}\n\n
{buttons}
\n \n );\n};\n\nexport const planInfo = {\n hobby: [\n <>Publish your app on a custom domain,\n <>Scheduled Tasks,\n <>Data File,\n <>No Anvil banners on your app,\n ],\n business: [\n <>Collaborate on private repos,\n <>Handle heavy traffic ,\n <>Add custom domain names to your apps,\n <>Persistent server code for high performance,\n <>Unlimited Custom Domains,\n <>90 days of App Logs,\n ],\n dedicated: [\n <>SQL access to your Data Tables,\n <>Separate server code and database hosting,\n <>Private IP address for firewall access,\n <>Ultra-heavy-duty traffic and storage (pay only for the AWS resources you use),\n <>SQL access to your Data Tables,\n <>Indexes on your Data Tables,\n <>90 days of App Logs,\n ],\n production: [\n <>Priority email support,\n <>High-performance server,\n <>Direct SQL access,\n ],\n enterprise: [\n <>On-site or private cloud installation,\n <>Integrate with Enterprise authentication systems,\n <>Audit capabilities,\n ],\n};\n\ninterface UpgradePromptSpec {\n featureId: string;\n onStartTrial?: () => Promise | void;\n additionalIntroText?: React.ReactNode;\n}\n\nexport const UpgradePrompt: ModalComponent = ({\n modalId,\n spec: { featureId, onStartTrial, additionalIntroText },\n}) => {\n const inIde = useSelector(getIsIDE);\n const subscription = useSelector(getSubscription);\n const features = useSelector(getFeatures);\n const feature = features[featureId];\n const requiredPlan = feature?.upgradePlan || feature.plan;\n const isDedicatedPlan = requiredPlan === \"dedicated\";\n const planName = isDedicatedPlan\n ? \"Business Plan with Extra Server Resources\"\n : getPlanName(requiredPlan) + \" Plan\";\n\n const modalRef = useRef(null);\n\n if (!feature) {\n console.error(`No feature found with ID '${featureId}'.`);\n return No feature found with ID '{featureId}'.;\n }\n\n return (\n {\n window.location.href = \"mailto:support@anvil.works\";\n },\n }\n : {\n text: \"Upgrade now\",\n defaultButton: true,\n close: true,\n variant: \"primary\",\n clickActionCreator: () =>\n startUpgrade(!subscription?.plan, !!subscription?.trial, false, {\n initialPlan: requiredPlan,\n }),\n },\n { text: \"Not yet\", close: true },\n ]}>\n {additionalIntroText}\n \n The {feature.name} feature requires an Anvil {planName}.\n {isDedicatedPlan && (\n <>\n {\" \"}\n Please contact support@anvil.works to upgrade.\n \n )}\n \n {featureId === \"full-python-runtime\" ? (\n modalRef.current!.returnValue(true)} />\n ) : featureId === \"custom-packages\" ? (\n modalRef.current!.returnValue(true)}\n />\n ) : (\n feature.helpLink && (\n \n Learn more about {feature.name}\n \n )\n )}\n\n \n\n An Anvil {planName} gives you:\n\n
\n {(planInfo[feature.upgradePlan as keyof typeof planInfo] ||\n planInfo[feature.plan as keyof typeof planInfo])!.map((pi, idx) => (\n
\n {pi}\n
\n ))}\n
\n \n );\n};\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { faUpload } from \"@fortawesome/free-solid-svg-icons/faUpload\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { LinkInternal } from \"@/components/reusable/LinkInternal\";\nimport { ContentTextInput, ModalButton } from \"@/components/reusable/SharedComponents\";\nimport { addNew, uploadAsset } from \"@/controllers/app/code\";\nimport { alert } from \"@/controllers/modals\";\nimport { cx } from \"@/theme/styles\";\nimport { AnvilDispatch } from \"@/types\";\nimport { Asset, cssify, getThumbnail, useAssets, useThumbnails } from \"@/util/hooks/assets\";\nimport useEvent from \"@/util/useEventCallback\";\nimport { ModalComponent } from \".\";\nimport { Heading, Text } from \"../reusable/Text\";\nimport Modal, { ModalRef } from \"./Modal\";\n\nconst THEME_PREFIX = \"_/theme/\";\nconst MAX_SIZE = 1024 * 1024 * 1.5;\n\ninterface AssetProps {\n display: string;\n value: string | null;\n thumbnail: React.ReactNode;\n isSelected: boolean;\n}\n\nconst SelectableUri = (props: AssetProps & UriProps) => {\n const { display, value, isSelected, modalRef, setSelected, thumbnail, closeOnDoubleClick } = props;\n const linkRef = useRef(null!);\n useEffect(() => {\n if (!isSelected) return;\n let cancelled = false;\n setTimeout(() => {\n if (cancelled) return;\n linkRef.current.scrollIntoView({ block: \"nearest\" });\n }, 150);\n return () => {\n cancelled = true;\n };\n }, [isSelected]);\n\n return (\n {\n if (!closeOnDoubleClick) return;\n modalRef.current?.returnValue(value);\n }}\n onClick={() => setSelected(value)}>\n
\n );\n};\n\nconst PySpaceSecretItemNameBox = (props: SecretItemNameBoxProps) => {\n const { name, isBlank, hasOtherAppValues } = props;\n\n const [tt, anchorRef] = useTooltip(\"Other clones of this app have their own values for this secret\", \"top\");\n\n return (\n
\n \n \n Store secrets and encryption keys with your app. \n \n Learn More\n \n \n \n
\n
\n App Secrets\n \n The Secrets service lets you store secrets and encryption keys with your app without them being\n visible in the source code. They can only be accessed from code running in Server Modules.\n \n
\n
\n {/*todo: unique 'key' for child elements in maps*/}\n Secrets\n \n {appSecrets?.map((itm, idx) => {\n const name = Object.keys(itm)[0];\n const encryptedSecretObj = itm[name].value;\n return (\n \n );\n })}\n
\n \n );\n};\n\nexport default SecretsTab;\n","import React from \"react\";\nimport { cx } from \"@/theme/styles\";\n\ninterface ToolBarProps extends React.PropsWithChildren> {\n leftSide?: null | React.ReactNode;\n allowScroll?: boolean;\n ref?: React.Ref;\n}\n\nconst TabToolbar = ({ ref, className, children, leftSide = null, allowScroll = false, ...restProps }: ToolBarProps) => {\n return (\n \n {children}\n {leftSide && (\n <>\n \n {leftSide}\n \n )}\n \n );\n};\n\nexport default TabToolbar;\n","import React, { Fragment } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport moment from \"moment\";\nimport { Text } from \"@/components/reusable/Text\";\nimport { getAppId } from \"@/controllers/app\";\nimport { getCategorisedEnvironments } from \"@/controllers/environments\";\nimport { cx } from \"@/theme/styles\";\nimport { ScheduledTask } from \"@/types\";\nimport { getScheduledTaskInfo } from \"@/api\";\nimport { timeAgoString } from \"@/util/time\";\n\nconst formatDateTime = (dt: string) => moment.tz(dt, moment.tz.guess()).format(\"ddd Do MMM YYYY[, at] HH:mm z\");\n\ninterface ScheduledTaskLastRunInfoProps {\n task: ScheduledTask;\n simpleOnly?: boolean;\n className?: string;\n}\n\n/** simpleOnly: Only display info for a single environment, otherwise don't display anything */\nconst ScheduledTaskLastRunInfo = ({ task, simpleOnly, className }: ScheduledTaskLastRunInfoProps) => {\n const appId = useSelector(getAppId);\n const environments = useSelector(getCategorisedEnvironments);\n const jobId = task.job_id;\n\n const { data: scheduledTaskInfo } = useQuery({\n queryKey: [\"task-info\", appId, jobId],\n queryFn: () => getScheduledTaskInfo(appId, jobId),\n refetchOnMount: \"always\",\n enabled: !!appId,\n });\n\n if (scheduledTaskInfo?.some((info) => info.suspended_at)) {\n const lastRun = scheduledTaskInfo.find((info) => info.start_time)?.start_time;\n return (\n
\n \n Suspended{lastRun ? ` — last ran ${timeAgoString(lastRun)}` : \"\"}\n \n
\n );\n }\n\n let infoUi = null;\n if (!scheduledTaskInfo?.length || (scheduledTaskInfo.length === 1 && !scheduledTaskInfo[0].start_time)) {\n // No info or never run\n infoUi = This task has never run;\n } else if (scheduledTaskInfo.length === 1) {\n // We know it has a start time, or we'd be in the clause above\n infoUi = (\n \n Last ran {timeAgoString(scheduledTaskInfo[0].start_time)}. Next scheduled for{\" \"}\n {formatDateTime(scheduledTaskInfo[0].next_run)}\n \n );\n } else if (!simpleOnly) {\n // We know we have multiple sets of info for different environments. Display them all.\n infoUi = scheduledTaskInfo.map((info) => (\n \n \n Last ran {timeAgoString(info.start_time)} in '\n {environments?.all.find((e) => e.env_id === info.env_id)?.description}' environment.\n \n \n Next scheduled for {formatDateTime(scheduledTaskInfo[0].next_run)} in '\n {environments?.all.find((e) => e.env_id === info.env_id)?.description}' environment.\n \n \n ));\n }\n\n return infoUi &&