feat: allow creating bare apps and upload zip deployments

Author: svedova

src/components/AppName/AppName.spec.tsx

@@ -32,6 +32,7 @@ describe("~/components/AppName/AppName.tsx", () => {
   it("should display the app name with the display name and repo", () => {
     createWrapper({ app });
 
+    expect(() => wrapper.getByTestId("BoltIcon")).toThrow();
     expect(wrapper.getByText("app")).toBeTruthy();
     expect(wrapper.getByText("app").getAttribute("href")).toBe(
       `/apps/${app.id}/environments`
@@ -42,4 +43,16 @@ describe("~/components/AppName/AppName.tsx", () => {
       "https://gitlab.com/stormkit-io/frontend"
     );
   });
+
+  it("should display only the name if an app is bare", () => {
+    createWrapper({ app: { ...app, isBare: true } });
+
+    expect(wrapper.container.textContent).toBe("app");
+    expect(wrapper.getByTestId("BoltIcon")).toBeTruthy();
+    expect(wrapper.getByText("app").getAttribute("href")).toBe(
+      `/apps/${app.id}/environments`
+    );
+
+    expect(() => wrapper.getByText("stormkit-io/frontend")).toThrow();
+  });
 });

src/components/AppName/AppName.tsx

@@ -1,7 +1,9 @@
 import Link from "@mui/material/Link";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import BoltIcon from "@mui/icons-material/Bolt";
 import Dot from "~/components/Dot";
+import IconBg from "~/components/IconBg";
 import { getLogoForProvider, parseRepo } from "~/utils/helpers/providers";
 
 interface Props {
@@ -15,7 +17,25 @@ const providerHosts: Record<Provider, string> = {
   gitlab: "gitlab.com",
 };
 
-export default function AppName({ app, imageSize = 18 }: Props) {
+export default function AppName({ app, imageSize = 20 }: Props) {
+  if (app.isBare) {
+    return (
+      <Typography sx={{ display: "flex", alignItems: "center" }}>
+        <IconBg
+          sx={{
+            width: imageSize,
+            height: imageSize,
+            mr: 1,
+            bgcolor: "text.primary",
+          }}
+        >
+          <BoltIcon sx={{ ml: 0, fontSize: 16, color: "container.paper" }} />
+        </IconBg>
+        <Link href={`/apps/${app.id}/environments`}>{app.displayName}</Link>
+      </Typography>
+    );
+  }
+
   const { repo, provider } = parseRepo(app.repo);
   const providerLogo = getLogoForProvider(provider);
   const linkToRepo = `https://${providerHosts[provider]}/${repo}`;

src/components/Dropzone/Dropzone.spec.tsx

@@ -0,0 +1,70 @@
+import { describe, expect, it, vi, beforeEach, type Mock } from "vitest";
+import { type RenderResult, render } from "@testing-library/react";
+import MyDropzone from "./Dropzone";
+
+interface Props {
+  openDialog?: { mode: string };
+  loading?: boolean;
+  files?: File[];
+  clickToOpen?: boolean;
+  showDropZone?: boolean;
+}
+
+describe("~/components/Dropzone.tsx", () => {
+  let wrapper: RenderResult;
+  let onDrop: Mock;
+
+  const createWrapper = ({
+    showDropZone,
+    clickToOpen,
+    openDialog,
+    files = [],
+  }: Props) => {
+    onDrop = vi.fn();
+    wrapper = render(
+      <MyDropzone
+        openDialog={openDialog}
+        onDrop={onDrop}
+        files={files}
+        showDropZone={showDropZone}
+        clickToOpen={clickToOpen}
+      />
+    );
+  };
+
+  describe("with no files and showDropZone = true ", () => {
+    beforeEach(() => {
+      createWrapper({ showDropZone: true, clickToOpen: true });
+    });
+
+    it("should mount dropzone", () => {
+      expect(wrapper.getByTestId("my-dropzone")).toBeTruthy();
+    });
+
+    it("should display an empty message", () => {
+      expect(wrapper.getByText("No files uploaded yet")).toBeTruthy();
+    });
+
+    it("should display a click here message", () => {
+      expect(wrapper.getByText("Click or drop here")).toBeTruthy();
+    });
+  });
+
+  describe("with no files and showDropZone = false ", () => {
+    beforeEach(() => {
+      createWrapper({ showDropZone: false });
+    });
+
+    it("should mount dropzone", () => {
+      expect(wrapper.getByTestId("my-dropzone")).toBeTruthy();
+    });
+
+    it("should not display an empty message", () => {
+      expect(() => wrapper.getByText("No files uploaded yet")).toThrow();
+    });
+
+    it("should not display a drop here message", () => {
+      expect(() => wrapper.getByText("Drop here")).toThrow();
+    });
+  });
+});

src/components/Dropzone/Dropzone.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import Box from "@mui/material/Box";
+import { Typography } from "@mui/material";
+
+interface Props {
+  props?: { accept?: string };
+  files?: File[];
+  onDrop: (acceptedFiles: File[]) => void;
+  showDropZone?: boolean; // Whether to show the dropzone area or not
+  clickToOpen?: boolean;
+  openDialog?: { mode: string };
+}
+
+export default function MyDropzone({
+  openDialog,
+  showDropZone,
+  clickToOpen,
+  files,
+  onDrop,
+  props = {},
+}: Props) {
+  const [otherProps, setOtherProps] = useState<Record<string, any>>(props);
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    onDrop,
+    noClick: true,
+  });
+
+  useEffect(() => {
+    setOtherProps(
+      openDialog?.mode === "folder"
+        ? {
+            ...otherProps,
+            webkitdirectory: "",
+            directory: "",
+            mozdirectory: "",
+          }
+        : { ...otherProps }
+    );
+  }, [openDialog]);
+
+  useEffect(() => {
+    openDialog && open();
+  }, [otherProps]);
+
+  return (
+    <Box {...getRootProps()} sx={{ position: "relative", py: 12 }}>
+      {(isDragActive || showDropZone) && (
+        <Box
+          onClick={clickToOpen ? open : undefined}
+          sx={{
+            cursor: clickToOpen ? "pointer" : "default",
+            position: "absolute",
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            border: "3px dashed",
+            borderColor: isDragActive
+              ? "container.borderContrast"
+              : "container.border",
+            bgcolor: "container.transparent",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: clickToOpen ? "text.secondary" : "text.primary",
+            ":hover": {
+              color: clickToOpen ? "text.primary" : undefined,
+            },
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: 32,
+            }}
+          >
+            {clickToOpen ? "Click or drop here" : "Drop here"}
+          </Typography>
+          <Typography
+            sx={{
+              color: "text.secondary",
+              position: "absolute",
+              bottom: 0,
+              mb: 2,
+            }}
+          >
+            {files?.length
+              ? `Files: ${files.length}/${files.length}`
+              : "No files uploaded yet"}
+          </Typography>
+        </Box>
+      )}
+      <input
+        {...getInputProps()}
+        {...otherProps}
+        type="file"
+        data-testid="my-dropzone"
+      />
+    </Box>
+  );
+}

src/components/Dropzone/index.ts

@@ -0,0 +1 @@
+export { default } from "./Dropzone";

src/components/IconBg/IconBg.tsx

@@ -1,10 +1,10 @@
-import Box from "@mui/material/Box";
+import Box, { BoxProps } from "@mui/material/Box";
 
-interface Props {
+interface Props extends BoxProps {
   children: React.ReactNode;
 }
 
-export default function IconBg({ children }: Props) {
+export default function IconBg({ children, sx }: Props) {
   return (
     <Box
       component="span"
@@ -17,6 +17,7 @@ export default function IconBg({ children }: Props) {
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
+        ...sx,
       }}
     >
       {children}