Inline secret creation

packages/schemas/src/v3/connection.schema.ts

@@ -62,6 +62,7 @@ const schema = {
             "type": "string",
             "pattern": "^[\\w.-]+$"
           },
+          "default": [],
           "examples": [
             [
               "my-org-name"

packages/schemas/src/v3/github.schema.ts

@@ -58,6 +58,7 @@ const schema = {
         "type": "string",
         "pattern": "^[\\w.-]+$"
       },
+      "default": [],
       "examples": [
         [
           "my-org-name"

packages/web/package.json

@@ -50,6 +50,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.0",

packages/web/src/actions.ts

@@ -201,6 +201,22 @@ export const createSecret = async (key: string, value: string, domain: string):
             }
         }));
 
+export const checkIfSecretExists = async (key: string, domain: string): Promise<boolean | ServiceError> =>
+    withAuth((session) =>
+        withOrgMembership(session, domain, async ({ orgId }) => {
+            const secret = await prisma.secret.findUnique({
+                where: {
+                    orgId_key: {
+                        orgId,
+                        key,
+                    }
+                }
+            });
+
+            return !!secret;
+        })
+    );
+
 export const deleteSecret = async (key: string, domain: string): Promise<{ success: boolean } | ServiceError> =>
     withAuth((session) =>
         withOrgMembership(session, domain, async ({ orgId }) => {
@@ -441,7 +457,7 @@ export const flagRepoForIndex = async (repoId: number, domain: string): Promise<
 
             await prisma.repo.update({
                 where: {
-                    id: repoId, 
+                    id: repoId,
                 },
                 data: {
                     repoIndexingStatus: RepoIndexingStatus.NEW,

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

@@ -14,15 +14,17 @@ import {
     jsonSchemaLinter,
     stateExtensions
 } from "codemirror-json-schema";
-import { useMemo, useRef } from "react";
+import { useRef, forwardRef, useImperativeHandle, Ref, ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Schema } from "ajv";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export type QuickActionFn<T> = (previous: T) => T;
 export type QuickAction<T> = {
     name: string;
     fn: QuickActionFn<T>;
+    description?: string | ReactNode;
 };
 
 interface ConfigEditorProps<T> {
@@ -46,80 +48,74 @@ const customAutocompleteStyle = EditorView.baseTheme({
     }
 });
 
+export function onQuickAction<T>(
+    action: QuickActionFn<T>,
+    config: string,
+    view: EditorView,
+    options?: {
+        focusEditor?: boolean;
+        moveCursor?: boolean;
+    }
+) {
+    const {
+        focusEditor = false,
+        moveCursor = true,
+    } = options ?? {};
 
-export function ConfigEditor<T>({
-    value,
-    onChange,
-    actions,
-    schema,
-}: ConfigEditorProps<T>) {
-    const editorRef = useRef<ReactCodeMirrorRef>(null);
-    const keymapExtension = useKeymapExtension(editorRef.current?.view);
-    const { theme } = useThemeNormalized();
+    let previousConfig: T;
+    try {
+        previousConfig = JSON.parse(config) as T;
+    } catch {
+        return;
+    }
 
-    const isQuickActionsDisabled = useMemo(() => {
-        try {
-            JSON.parse(value);
-            return false;
-        } catch {
-            return true;
-        }
-    }, [value]);
-
-    const onQuickAction = (action: QuickActionFn<T>) => {
-        let previousConfig: T;
-        try {
-            previousConfig = JSON.parse(value) as T;
-        } catch {
-            return;
-        }
+    const nextConfig = action(previousConfig);
+    const next = JSON.stringify(nextConfig, null, 2);
 
-        const nextConfig = action(previousConfig);
-        const next = JSON.stringify(nextConfig, null, 2);
+    if (focusEditor) {
+        view.focus();
+    }
 
-        const cursorPos = next.lastIndexOf(`""`) + 1;
+    const cursorPos = next.lastIndexOf(`""`) + 1;
+    view.dispatch({
+        changes: {
+            from: 0,
+            to: config.length,
+            insert: next,
+        }
+    });
 
-        editorRef.current?.view?.focus();
-        editorRef.current?.view?.dispatch({
-            changes: {
-                from: 0,
-                to: value.length,
-                insert: next,
-            }
-        });
-        editorRef.current?.view?.dispatch({
+    if (moveCursor) {
+        view.dispatch({
             selection: { anchor: cursorPos, head: cursorPos }
         });
     }
+}
+
+export const isConfigValidJson = (config: string) => {
+    try {
+        JSON.parse(config);
+        return true;
+    } catch (_e) {
+        return false;
+    }
+}
+
+const ConfigEditor = <T,>(props: ConfigEditorProps<T>, forwardedRef: Ref<ReactCodeMirrorRef>) => {
+    const { value, onChange, actions, schema } = props;
+
+    const editorRef = useRef<ReactCodeMirrorRef>(null);
+    useImperativeHandle(
+        forwardedRef,
+        () => editorRef.current as ReactCodeMirrorRef
+    );
+
+    const keymapExtension = useKeymapExtension(editorRef.current?.view);
+    const { theme } = useThemeNormalized();
 
     return (
-        <>
-            <div className="flex flex-row items-center flex-wrap w-full">
-                {actions.map(({ name, fn }, index) => (
-                    <div
-                        key={index}
-                        className="flex flex-row items-center"
-                    >
-                        <Button
-                            variant="ghost"
-                            className="disabled:opacity-100 disabled:pointer-events-auto disabled:cursor-not-allowed"
-                            disabled={isQuickActionsDisabled}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                onQuickAction(fn);
-                            }}
-                        >
-                            {name}
-                        </Button>
-                        {index !== actions.length - 1 && (
-                            <Separator
-                                orientation="vertical" className="h-4 mx-1"
-                            />
-                        )}
-                    </div>
-                ))}
-            </div>
-            <ScrollArea className="rounded-md border p-1 overflow-auto flex-1 h-64">
+        <div className="border rounded-md">
+            <ScrollArea className="p-1 overflow-auto flex-1 h-56">
                 <CodeMirror
                     ref={editorRef}
                     value={value}
@@ -144,6 +140,56 @@ export function ConfigEditor<T>({
                     theme={theme === "dark" ? "dark" : "light"}
                 />
             </ScrollArea>
-        </>
+            <Separator />
+            <div className="flex flex-row items-center flex-wrap w-full p-1">
+                <TooltipProvider>
+                    {actions.map(({ name, fn, description }, index) => (
+                        <div
+                            key={index}
+                            className="flex flex-row items-center"
+                        >
+                            <Tooltip
+                                delayDuration={100}
+                            >
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="disabled:opacity-100 disabled:pointer-events-auto disabled:cursor-not-allowed text-sm font-mono tracking-tight"
+                                        size="sm"
+                                        disabled={!isConfigValidJson(value)}
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            if (editorRef.current?.view) {
+                                                onQuickAction(fn, value, editorRef.current.view, {
+                                                    focusEditor: true,
+                                                });
+                                            }
+                                        }}
+                                    >
+                                        {name}
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent
+                                    hidden={!description}
+                                    className="max-w-xs"
+                                >
+                                    {description}
+                                </TooltipContent>
+                            </Tooltip>
+                            {index !== actions.length - 1 && (
+                                <Separator
+                                    orientation="vertical" className="h-4 mx-1"
+                                />
+                            )}
+                        </div>
+                    ))}
+                </TooltipProvider>
+            </div>
+        </div>
     )
-}
+};
+
+// @see: https://stackoverflow.com/a/78692562
+export default forwardRef(ConfigEditor) as <T>(
+    props: ConfigEditorProps<T> & { ref?: Ref<ReactCodeMirrorRef> },
+) => ReturnType<typeof ConfigEditor>;