wip: ui improvements

coder · rodrimaia · Apr 26, 2023 · Apr 14, 2023 · Apr 17, 2023 · Apr 17, 2023
commit eaba405757cfca2b4e71caf99c317fe34940d9a7
diff --git a/site/src/components/DividerWithText/DividerWithText.tsx b/site/src/components/DividerWithText/DividerWithText.tsx
@@ -0,0 +1,32 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { FC, PropsWithChildren } from "react"
+
+export const DividerWithText: FC<PropsWithChildren> = ({ children }) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.container}>
+      <div className={classes.border} />
+      <span className={classes.content}>{children}</span>
+      <div className={classes.border} />
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    display: "flex",
+    alignItems: "center",
+  },
+  border: {
+    borderBottom: `2px solid ${theme.palette.divider}`,
+    width: "100%",
+  },
+  content: {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    paddingRight: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    fontSize: theme.typography.h5.fontSize,
+    color: theme.palette.text.secondary,
+  },
+}))
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
@@ -0,0 +1,178 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Stack } from "components/Stack/Stack"
+import { FC, DragEvent, useRef, ReactNode } from "react"
+import UploadIcon from "@material-ui/icons/CloudUploadOutlined"
+import { useClickable } from "hooks/useClickable"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import { combineClasses } from "utils/combineClasses"
+import IconButton from "@material-ui/core/IconButton"
+import RemoveIcon from "@material-ui/icons/DeleteOutline"
+import FileIcon from "@material-ui/icons/FolderOutlined"
+
+const useFileDrop = (
+  callback: (file: File) => void,
+  fileTypeRequired?: string,
+): {
+  onDragOver: (e: DragEvent<HTMLDivElement>) => void
+  onDrop: (e: DragEvent<HTMLDivElement>) => void
+} => {
+  const onDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    const file = e.dataTransfer.files[0]
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- file can be undefined
+    if (!file) {
+      return
+    }
+    if (fileTypeRequired && file.type !== fileTypeRequired) {
+      return
+    }
+    callback(file)
+  }
+
+  return {
+    onDragOver,
+    onDrop,
+  }
+}
+
+export interface FileUploadProps {
+  isUploading: boolean
+  onUpload: (file: File) => void
+  onRemove?: () => void
+  file?: File
+  removeLabel: string
+  title: string
+  description?: ReactNode
+  extension?: string
+  fileTypeRequired?: string
+}
+
+export const FileUpload: FC<FileUploadProps> = ({
+  isUploading,
+  onUpload,
+  onRemove,
+  file,
+  removeLabel,
+  title,
+  description,
+  extension,
+  fileTypeRequired,
+}) => {
+  const styles = useStyles()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const tarDrop = useFileDrop(onUpload, fileTypeRequired)
+  const clickable = useClickable(() => {
+    if (inputRef.current) {
+      inputRef.current.click()
+    }
+  })
+
+  if (!isUploading && file) {
+    return (
+      <Stack
+        className={styles.file}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack direction="row" alignItems="center">
+          <FileIcon />
+          <span>{file.name}</span>
+        </Stack>
+
+        <IconButton title={removeLabel} size="small" onClick={onRemove}>
+          <RemoveIcon />
+        </IconButton>
+      </Stack>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className={combineClasses({
+          [styles.root]: true,
+          [styles.disabled]: isUploading,
+        })}
+        {...clickable}
+        {...tarDrop}
+      >
+        <Stack alignItems="center" spacing={1}>
+          {isUploading ? (
+            <CircularProgress size={32} />
+          ) : (
+            <UploadIcon className={styles.icon} />
+          )}
+
+          <Stack alignItems="center" spacing={0.5}>
+            <span className={styles.title}>{title}</span>
+            <span className={styles.description}>{description}</span>
+          </Stack>
+        </Stack>
+      </div>
+
+      <input
+        type="file"
+        ref={inputRef}
+        className={styles.input}
+        accept={extension}
+        onChange={(event) => {
+          const file = event.currentTarget.files?.[0]
+          if (file) {
+            onUpload(file)
+          }
+        }}
+      />
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.shape.borderRadius,
+    border: `2px dashed ${theme.palette.divider}`,
+    padding: theme.spacing(6),
+    cursor: "pointer",
+
+    "&:hover": {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
+
+  disabled: {
+    pointerEvents: "none",
+    opacity: 0.75,
+  },
+
+  icon: {
+    fontSize: theme.spacing(8),
+  },
+
+  title: {
+    fontSize: theme.spacing(2),
+  },
+
+  description: {
+    color: theme.palette.text.secondary,
+    textAlign: "center",
+    maxWidth: theme.spacing(50),
+  },
+
+  input: {
+    display: "none",
+  },
+
+  file: {
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(2),
+    background: theme.palette.background.paper,
+  },
+}))
diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -0,0 +1,156 @@
+import Box from "@material-ui/core/Box"
+import Button from "@material-ui/core/Button"
+import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import { License } from "api/typesGenerated"
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
+import { Stack } from "components/Stack/Stack"
+import dayjs from "dayjs"
+import { useState } from "react"
+
+type LicenseCardProps = {
+  license: License
+  userLimitActual?: number
+  userLimitLimit?: number
+  onRemove: (licenseId: number) => void
+  isRemoving: boolean
+}
+
+export const LicenseCard = ({
+  license,
+  userLimitActual,
+  userLimitLimit,
+  onRemove,
+  isRemoving,
+}: LicenseCardProps) => {
+  const styles = useStyles()
+
+  const [licenseIDMarkedForRemoval, setLicenseIDMarkedForRemoval] = useState<
+    number | undefined
+  >(undefined)
+
+  return (
+    <Paper
+      variant="outlined"
+      key={license.id}
+      elevation={2}
+      className={styles.licenseCard}
+    >
+      <ConfirmDialog
+        type="info"
+        hideCancel={false}
+        open={licenseIDMarkedForRemoval !== undefined}
+        onConfirm={() => {
+          if (!licenseIDMarkedForRemoval) {
+            return
+          }
+          onRemove(licenseIDMarkedForRemoval)
+          setLicenseIDMarkedForRemoval(undefined)
+        }}
+        onClose={() => setLicenseIDMarkedForRemoval(undefined)}
+        title="Confirm license removal"
+        confirmLoading={isRemoving}
+        confirmText="Remove"
+        description="Are you sure you want to remove this license?"
+      />
+      <Stack
+        direction="column"
+        className={styles.cardContent}
+        justifyContent="space-between"
+      >
+        <Box className={styles.licenseId}>
+          <span>#{license.id}</span>
+        </Box>
+        <Stack className={styles.accountType}>
+          <span>{license.claims.trial ? "Trial" : "Enterprise"}</span>
+        </Stack>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="self-end"
+        >
+          <div className={styles.userLimit}>
+            <span className={styles.userLimitActual}>{userLimitActual}</span>
+            <span className={styles.userLimitLimit}>
+              / {userLimitLimit || "Unlimited"} users
+            </span>
+          </div>
+
+          <Stack direction="column" spacing={0} alignItems="center">
+            <span className={styles.expirationDate}>
+              {dayjs
+                .unix(license.claims.license_expires)
+                .format("MMMM D, YYYY")}
+            </span>
+            <span className={styles.expirationDateLabel}>Valid until</span>
+          </Stack>
+          <div className={styles.actions}>
+            <Button
+              className={styles.removeButton}
+              variant="text"
+              size="small"
+              onClick={() => setLicenseIDMarkedForRemoval(license.id)}
+            >
+              Remove
+            </Button>
+          </div>
+        </Stack>
+      </Stack>
+    </Paper>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  userLimit: {
+    width: "33%",
+  },
+  actions: {
+    width: "33%",
+    textAlign: "right",
+  },
+  userLimitActual: {
+    // fontWeight: 600,
+    paddingRight: "5px",
+    color: theme.palette.primary.main,
+  },
+  userLimitLimit: {
+    color: theme.palette.secondary.main,
+    // fontSize: theme.typography.h5.fontSize,
+    fontWeight: 600,
+  },
+  licenseCard: {
+    padding: theme.spacing(2),
+  },
+  cardContent: {
+    minHeight: 100,
+  },
+  licenseId: {
+    color: theme.palette.secondary.main,
+    fontWeight: 600,
+    // fontSize: theme.typography.h5.fontSize,
+  },
+  accountType: {
+    fontWeight: 600,
+    fontSize: theme.typography.h4.fontSize,
+    justifyContent: "center",
+    alignItems: "center",
+    textTransform: "capitalize",
+  },
+  expirationDate: {
+    // fontWeight: 600,
+    color: theme.palette.primary.main,
+  },
+  expirationDateLabel: {
+    color: theme.palette.secondary.main,
+  },
+  removeButton: {
+    height: "17px",
+    minHeight: "17px",
+    padding: 0,
+    border: "none",
+    color: theme.palette.error.main,
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+}))