Skip to content

Commit 8f6052c

Browse files
brendan-kellambrendan-kellam
authored
fix (#219)
1 parent bdab90b commit 8f6052c

File tree

6 files changed

+57
-31
lines changed

6 files changed

+57
-31
lines changed

‎packages/web/src/app/[domain]/components/configEditor.tsx‎

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,8 @@ import { useThemeNormalized } from "@/hooks/useThemeNormalized";
66
import { json, jsonLanguage, jsonParseLinter } from "@codemirror/lang-json";
77
import { linter } from "@codemirror/lint";
88
import { EditorView, hoverTooltip } from "@codemirror/view";
9-
import CodeMirror, { ReactCodeMirrorRef } from "@uiw/react-codemirror";
10-
import {
11-
handleRefresh,
12-
jsonCompletion,
13-
jsonSchemaHover,
14-
jsonSchemaLinter,
15-
stateExtensions
16-
} from "codemirror-json-schema";
17-
import { useRef, forwardRef, useImperativeHandle, Ref, ReactNode, useState } from "react";
9+
import CodeMirror, { Extension, ReactCodeMirrorRef } from "@uiw/react-codemirror";
10+
import { useRef, forwardRef, useImperativeHandle, Ref, ReactNode, useState, useEffect } from "react";
1811
import { Button } from "@/components/ui/button";
1912
import { Separator } from "@/components/ui/separator";
2013
import { Schema } from "ajv";
@@ -94,7 +87,7 @@ export function onQuickAction<T>(
9487
const cursorPos = next.lastIndexOf(selectionText);
9588
if (cursorPos >= 0) {
9689
view.dispatch({
97-
selection: {
90+
selection: {
9891
anchor: cursorPos,
9992
head: cursorPos + selectionText.length
10093
}
@@ -120,7 +113,6 @@ const ConfigEditor = <T,>(props: ConfigEditorProps<T>, forwardedRef: Ref<ReactCo
120113
const editorRef = useRef<ReactCodeMirrorRef>(null);
121114
const [isViewMoreActionsEnabled, setIsViewMoreActionsEnabled] = useState(false);
122115
const [height, setHeight] = useState(224);
123-
124116
useImperativeHandle(
125117
forwardedRef,
126118
() => editorRef.current as ReactCodeMirrorRef
@@ -129,6 +121,51 @@ const ConfigEditor = <T,>(props: ConfigEditorProps<T>, forwardedRef: Ref<ReactCo
129121
const keymapExtension = useKeymapExtension(editorRef.current?.view);
130122
const { theme } = useThemeNormalized();
131123

124+
// ⚠️ DISGUSTING HACK AHEAD ⚠️
125+
// Background: When navigating to the /connections/:id?tab=settings page, we were hitting a 500 error with the following
126+
// message server side:
127+
//
128+
// > Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function
129+
// > (for composite components) but got: undefined. You likely forgot to export your component from the file it's
130+
// > defined in, or you might have mixed up default and named imports.
131+
//
132+
// Why was this happening? We have no idea, but we isolated it to the extensions exported by the `codemirror-json-schema`
133+
// package. The solution that worked was to dynamically import the package inside of the useEffect and load the extensions
134+
// async.
135+
//
136+
// So, yeah. - Brendan
137+
const [jsonSchemaExtensions, setJsonSchemaExtensions] = useState<Extension[]>([]);
138+
useEffect(() => {
139+
const loadExtensions = async () => {
140+
const {
141+
handleRefresh,
142+
jsonCompletion,
143+
jsonSchemaHover,
144+
jsonSchemaLinter,
145+
stateExtensions
146+
} = await import('codemirror-json-schema');
147+
return [
148+
linter(jsonParseLinter(), {
149+
delay: 300,
150+
}),
151+
linter(jsonSchemaLinter(), {
152+
needsRefresh: handleRefresh,
153+
}),
154+
jsonLanguage.data.of({
155+
autocomplete: jsonCompletion(),
156+
}),
157+
hoverTooltip(jsonSchemaHover()),
158+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
159+
stateExtensions(schema as any),
160+
]
161+
}
162+
163+
loadExtensions().then((extensions) => {
164+
console.debug('Loaded json schema extensions');
165+
setJsonSchemaExtensions(extensions);
166+
});
167+
}, [schema]);
168+
132169
return (
133170
<div className="border rounded-md">
134171
<div className="flex flex-row items-center flex-wrap p-1">
@@ -211,19 +248,8 @@ const ConfigEditor = <T,>(props: ConfigEditorProps<T>, forwardedRef: Ref<ReactCo
211248
extensions={[
212249
keymapExtension,
213250
json(),
214-
linter(jsonParseLinter(), {
215-
delay: 300,
216-
}),
217-
linter(jsonSchemaLinter(), {
218-
needsRefresh: handleRefresh,
219-
}),
220-
jsonLanguage.data.of({
221-
autocomplete: jsonCompletion(),
222-
}),
223-
hoverTooltip(jsonSchemaHover()),
224-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
225-
stateExtensions(schema as any),
226251
customAutocompleteStyle,
252+
...jsonSchemaExtensions,
227253
]}
228254
theme={theme === "dark" ? "dark" : "light"}
229255
/>

‎packages/web/src/app/[domain]/components/editorContextMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const EditorContextMenu = ({
126126
}
127127
}
128128
)
129-
}, [captureEvent, path, repoName, selection.from, selection.to, toast, view, revisionName]);
129+
}, [selection.from, selection.to, domain, repoName, revisionName, path, toast, captureEvent, view]);
130130

131131
return (
132132
<div

‎packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { getDisplayTime } from "@/lib/utils";
24
import Image from "next/image";
35
import { StatusIcon } from "../../components/statusIcon";

‎packages/web/src/app/[domain]/connections/[id]/page.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default async function ConnectionManagementPage({ params, searchParams }:
4242

4343
const currentTab = searchParams.tab || "overview";
4444

45+
4546
return (
4647
<Tabs value={currentTab} className="w-full">
4748
<Header className="mb-6" withTopMargin={false}>
@@ -85,12 +86,7 @@ export default async function ConnectionManagementPage({ params, searchParams }:
8586
</TabsContent>
8687
<TabsContent
8788
value="settings"
88-
// @note: There was some bugginess with the ConfigEditor ref not being set again
89-
// after the parent component was unmounted and remounted. This workarouns makes it
90-
// s.t., hide the settings tab when it is inactive, instead of unmounting it.
91-
// @see: https://github.com/radix-ui/primitives/issues/2359#issuecomment-2481321719
92-
className="flex flex-col gap-6 data-[state=inactive]:hidden"
93-
forceMount={true}
89+
className="flex flex-col gap-6"
9490
>
9591
<DisplayNameSetting connectionId={connection.id} name={connection.name} />
9692
<ConfigSetting

‎packages/web/src/app/[domain]/connections/components/connectionIcon.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { cn, CodeHostType, getCodeHostIcon } from "@/lib/utils";
24
import { useMemo } from "react";
35
import Image from "next/image";

‎packages/web/src/app/[domain]/search/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import useCaptureEvent from "@/hooks/useCaptureEvent";
1010
import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
1111
import { useSearchHistory } from "@/hooks/useSearchHistory";
1212
import { Repository, SearchQueryParams, SearchResultFile } from "@/lib/types";
13-
import { createPathWithQueryParams, measureSync } from "@/lib/utils";
13+
import { createPathWithQueryParams } from "@/lib/utils";
1414
import { SymbolIcon } from "@radix-ui/react-icons";
1515
import { useQuery } from "@tanstack/react-query";
1616
import { useRouter } from "next/navigation";

0 commit comments

Comments
 (0)