Mar 8, 2024 · Mar 7, 2024 · Mar 8, 2024
diff --git a/site/src/components/FileUpload/FileUpload.stories.tsx b/site/src/components/FileUpload/FileUpload.stories.tsx
 import Link from "@mui/material/Link";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FileUpload } from "./FileUpload";

 const meta: Meta<typeof FileUpload> = {
  title: "components/FileUpload",
  component: FileUpload,
  args: {
    title: "Upload template",
    description: (
      <>
        The template has to be a .tar or .zip file. You can also use our{" "}
        <Link href="/starter-templates">starter templates</Link> to getting
        started with Coder.
      </>
    ),
  },
 };

 export default meta;
 type Story = StoryObj<typeof FileUpload>;

 export const Default: Story = {};

 export const Uploading: Story = {
  args: {
    isUploading: true,
  },
 };

 export const WithFile: Story = {
  args: {
    file: new File([], "template.zip"),
  },
 };
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
        {...fileDrop}
      >
        <Stack alignItems="center" spacing={1}>
          {isUploading ? (
            <CircularProgress size={32} />
          ) : (
            <UploadIcon css={styles.icon} />
          )}
          <div css={styles.iconWrapper}>
            {isUploading ? (
              <CircularProgress size={32} />
            ) : (
              <UploadIcon css={styles.icon} />
            )}
          </div>

          <Stack alignItems="center" spacing={0.5}>
            <span css={styles.title}>{title}</span>
    opacity: 0.75,
  },

  // Used to maintain the size of icon and spinner
  iconWrapper: {
    width: 64,
    height: 64,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },

  icon: {
    fontSize: 64,
  },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,35 @@
		import Link from "@mui/material/Link";
		import type { Meta, StoryObj } from "@storybook/react";
		import { FileUpload } from "./FileUpload";

		const meta: Meta<typeof FileUpload> = {
		title: "components/FileUpload",
		component: FileUpload,
		args: {
		title: "Upload template",
		description: (
		<>
		The template has to be a .tar or .zip file. You can also use our{" "}
		<Link href="/starter-templates">starter templates</Link> to getting
		started with Coder.
		</>
		),
		},
		};

		export default meta;
		type Story = StoryObj<typeof FileUpload>;

		export const Default: Story = {};

		export const Uploading: Story = {
		args: {
		isUploading: true,
		},
		};

		export const WithFile: Story = {
		args: {
		file: new File([], "template.zip"),
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,11 +64,13 @@ export const FileUpload: FC<FileUploadProps> = ({
		{...fileDrop}
		>
		<Stack alignItems="center" spacing={1}>
		{isUploading ? (
		<CircularProgress size={32} />
		) : (
		<UploadIcon css={styles.icon} />
		)}
		<div css={styles.iconWrapper}>
		{isUploading ? (
		<CircularProgress size={32} />
		) : (
		<UploadIcon css={styles.icon} />
		)}
		</div>

		<Stack alignItems="center" spacing={0.5}>
		<span css={styles.title}>{title}</span>
Expand DownExpand Up		@@ -155,6 +157,15 @@ const styles = {
		opacity: 0.75,
		},

		// Used to maintain the size of icon and spinner
		iconWrapper: {
		width: 64,
		height: 64,
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		},

		icon: {
		fontSize: 64,
		},
Expand Down