🚀 allow every content type (#996)

* 🚀 allow every content type * 🚀 content type * 🚀 content type * ci: apply automated fixes * 🚀 file upload * ci: apply automated fixes * fix: style * ci: apply automated fixes * 🤯 * ci: apply automated fixes * 😭 * fix: style * chore: small stuff * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Maximilian Kaske <[email protected]>
openstatusHQ · Sep 8, 2024 · ce39358 · ce39358
1 parent 7cef4a1
commit ce39358
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 52 deletions.
diff --git a/apps/checker/ping.go b/apps/checker/ping.go
@@ -77,7 +77,12 @@ func Ping(ctx context.Context, client *http.Client, inputData request.CheckerReq
 		}
 	}
 	if inputData.Method != http.MethodGet {
-		req.Header.Set("Content-Type", "application/json")
+		head := req.Header
+		_, ok := head["Content-Type"]
+		if !ok {
+			// by default we set the content type to application/json if it's a POST request
+			req.Header.Set("Content-Type", "application/json")
+		}
 	}
 
 	timing := Timing{}
@@ -188,9 +193,16 @@ func SinglePing(ctx context.Context, client *http.Client, inputData request.Ping
 	for key, value := range inputData.Headers {
 		req.Header.Set(key, value)
 	}
+
 	if inputData.Method != http.MethodGet {
-		req.Header.Set("Content-Type", "application/json")
+		head := req.Header
+		_, ok := head["Content-Type"]
+		if !ok {
+			// by default we set the content type to application/json if it's a POST request
+			req.Header.Set("Content-Type", "application/json")
+		}
 	}
+
 	timing := Timing{}
 
 	trace := &httptrace.ClientTrace{

diff --git a/apps/web/src/components/forms/monitor/form.tsx b/apps/web/src/components/forms/monitor/form.tsx
@@ -178,7 +178,13 @@ export function MonitorForm({
         textBodyAssertions,
       } = form.getValues();
 
-      if (body && body !== "") {
+      if (
+        body &&
+        body !== "" &&
+        headers?.some(
+          (h) => h.key === "Content-Type" && h.value === "application/json",
+        )
+      ) {
         const validJSON = validateJSON(body);
         if (!validJSON) {
           return { error: "Not a valid JSON object.", data: undefined };

diff --git a/apps/web/src/components/forms/monitor/section-requests.tsx b/apps/web/src/components/forms/monitor/section-requests.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import { Wand2, X } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { useFieldArray } from "react-hook-form";
 import type { UseFormReturn } from "react-hook-form";
 
 import {
   monitorMethods,
   monitorMethodsSchema,
 } from "@openstatus/db/src/schema";
-import type { InsertMonitor, WorkspacePlan } from "@openstatus/db/src/schema";
+import type { InsertMonitor } from "@openstatus/db/src/schema";
 import {
   Button,
   FormControl,
@@ -31,20 +31,37 @@ import {
   TooltipTrigger,
 } from "@openstatus/ui";
 
+import { toast } from "@/lib/toast";
+import { useRef, useState } from "react";
 import { SectionHeader } from "../shared/section-header";
 
+const contentTypes = [
+  { value: "application/octet-stream", label: "Binary File" },
+  { value: "application/json", label: "JSON" },
+  { value: "application/xml", label: "XML" },
+  { value: "application/yaml", label: "YAML" },
+  { value: "application/edn", label: "EDN" },
+  { value: "application/other", label: "Other" },
+  { value: "none", label: "None" },
+];
+
 interface Props {
   form: UseFormReturn<InsertMonitor>;
 }
 
 // TODO: add Dialog with response informations when pingEndpoint!
 
 export function SectionRequests({ form }: Props) {
-  const { fields, append, remove } = useFieldArray({
+  const { fields, append, prepend, remove, update } = useFieldArray({
     name: "headers",
     control: form.control,
   });
+  const inputRef = useRef<HTMLInputElement>(null);
   const watchMethod = form.watch("method");
+  const [file, setFile] = useState<string | undefined>(undefined);
+  const [content, setContent] = useState<string | undefined>(
+    fields.find((field) => field.key === "Content-Type")?.value,
+  );
 
   const validateJSON = (value?: string) => {
     if (!value) return;
@@ -60,6 +77,30 @@ export function SectionRequests({ form }: Props) {
     }
   };
 
+  const uploadFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files?.[0]) {
+      const file = event.target.files[0];
+
+      // File too big, return error
+      const fileSize = file.size / 1024 / 1024; // in MiB
+      if (fileSize > 10) {
+        // Display error message
+        toast.error("File size is too big. Max 10MB allowed.");
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result && typeof event.target.result === "string") {
+          form.setValue("body", event.target?.result);
+          setFile(file.name);
+        }
+      };
+
+      reader.readAsDataURL(file);
+    }
+  };
+
   const onPrettifyJSON = () => {
     const body = form.getValues("body");
     const obj = validateJSON(body);
@@ -86,6 +127,7 @@ export function SectionRequests({ form }: Props) {
                 onValueChange={(value) => {
                   field.onChange(monitorMethodsSchema.parse(value));
                   form.resetField("body", { defaultValue: "" });
+                  setContent(undefined);
                 }}
                 defaultValue={field.value}
               >
@@ -113,18 +155,12 @@ export function SectionRequests({ form }: Props) {
             <FormItem className="sm:col-span-6">
               <FormLabel>URL</FormLabel>
               <FormControl>
-                {/* <InputWithAddons
-                  leading="https://"
-                  placeholder="documenso.com/api/health"
-                  {...field}
-                /> */}
                 <Input
                   className="bg-muted"
                   placeholder="https://documenso.com/api/health"
                   {...field}
                 />
               </FormControl>
-              {/* <FormMessage /> */}
             </FormItem>
           )}
         />
@@ -160,7 +196,9 @@ export function SectionRequests({ form }: Props) {
                 size="icon"
                 variant="ghost"
                 type="button"
-                onClick={() => remove(Number(field.id))}
+                onClick={() => {
+                  remove(index);
+                }}
               >
                 <X className="h-4 w-4" />
               </Button>
@@ -183,43 +221,113 @@ export function SectionRequests({ form }: Props) {
             control={form.control}
             name="body"
             render={({ field }) => (
-              <FormItem>
+              <FormItem className="space-y-1.5">
                 <div className="flex items-end justify-between">
-                  <FormLabel>Body</FormLabel>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
+                  <FormLabel className="flex items-center space-x-2">
+                    Body
+                    <Select
+                      defaultValue={content}
+                      onValueChange={(value) => {
+                        setContent(value);
+
+                        if (content === "application/octet-stream") {
+                          form.setValue("body", "");
+                          setFile(undefined);
+                        }
+
+                        const contentIndex = fields.findIndex(
+                          (field) => field.key === "Content-Type",
+                        );
+
+                        if (contentIndex >= 0) {
+                          if (value === "none") {
+                            remove(contentIndex);
+                          } else {
+                            update(contentIndex, {
+                              key: "Content-Type",
+                              value,
+                            });
+                          }
+                        } else {
+                          prepend({ key: "Content-Type", value });
+                        }
+                      }}
+                    >
+                      <SelectTrigger
+                        variant={"ghost"}
+                        className="ml-1 h-7 text-muted-foreground text-xs"
+                      >
+                        <SelectValue placeholder="Content-Type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {contentTypes.map((type) => (
+                          <SelectItem key={type.value} value={type.value}>
+                            {type.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormLabel>
+                  {watchMethod === "POST" &&
+                    fields.some(
+                      (field) =>
+                        field.key === "Content-Type" &&
+                        field.value === "application/json",
+                    ) && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="h-7 w-7"
+                              onClick={onPrettifyJSON}
+                            >
+                              <Wand2 className="h-3 w-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Prettify JSON</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
+                </div>
+                <div className="space-y-2">
+                  <FormControl>
+                    {content === "application/octet-stream" ? (
+                      <>
                         <Button
                           type="button"
-                          variant="ghost"
-                          size="icon"
-                          onClick={onPrettifyJSON}
+                          variant="outline"
+                          onClick={() => inputRef.current?.click()}
+                          className="max-w-56"
                         >
-                          <Wand2 className="h-4 w-4" />
+                          <span className="truncate">
+                            {file || form.getValues("body") || "Upload file"}
+                          </span>
                         </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Prettify JSON</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                        <input
+                          type="file"
+                          onChange={uploadFile}
+                          ref={inputRef}
+                          hidden
+                        />
+                      </>
+                    ) : (
+                      <>
+                        <Textarea
+                          rows={8}
+                          placeholder='{ "hello": "world" }'
+                          {...field}
+                        />
+                        <FormDescription>Write your payload.</FormDescription>
+                      </>
+                    )}
+                  </FormControl>
+                  <FormMessage />
                 </div>
-                <FormControl>
-                  {/* FIXME: cannot enter 'Enter' */}
-                  <Textarea
-                    rows={8}
-                    placeholder='{ "hello": "world" }'
-                    {...field}
-                  />
-                </FormControl>
-                <FormDescription>
-                  Write your json payload. We automatically append{" "}
-                  <code>
-                    &quot;Content-Type&quot;: &quot;application/json&quot;
-                  </code>{" "}
-                  to the request header.
-                </FormDescription>
-                <FormMessage />
               </FormItem>
             )}
           />

diff --git a/packages/db/src/schema/monitors/validation.ts b/packages/db/src/schema/monitors/validation.ts
@@ -57,6 +57,7 @@ const headersSchema = z
   .optional();
 
 export const insertMonitorSchema = createInsertSchema(monitor, {
+  name: z.string().min(1, "Name must be at least 1 character long"),
   periodicity: monitorPeriodicitySchema.default("10m"),
   url: z.string().url(), // find a better way to not always start with "https://" including the `InputWithAddons`
   status: monitorStatusSchema.default("active"),

diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
@@ -5,23 +5,40 @@ import { Check, ChevronDown } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../lib/utils";
+import { cva, VariantProps } from "class-variance-authority";
 
 const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
+const selectVariants = cva(
+  "flex w-full h-10 items-center justify-between px-3 rounded-md border border-input ring-offset-background py-2 text-sm placeholder:text-muted-foreground focus:ring-ring focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+
+        ghost: "border-none space-x-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+export interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
+    VariantProps<typeof selectVariants> {}
+
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+  SelectTriggerProps
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
+    className={cn(selectVariants({ variant: props.variant }), className)}
     {...props}
   >
     {children}
@@ -43,7 +60,7 @@ const SelectContent = React.forwardRef<
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
+        className
       )}
       position={position}
       {...props}
@@ -52,7 +69,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
@@ -82,7 +99,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
+      className
     )}
     {...props}
   >