mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 21:47:20 +00:00
da20214938
This adds a new ListItem component and FileUploader component and updates the Custom settings and scripts page to use this new ListItem component. This List component centralises where the markup and styles live. We still need to update the bootstrap list item and eula upload list item but will do that in the future. - [x] Manual QA for all new/changed functionality
79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import classnames from "classnames";
|
|
|
|
import Button from "components/buttons/Button";
|
|
import Card from "components/Card";
|
|
import { GraphicNames } from "components/graphics";
|
|
import Graphic from "components/Graphic";
|
|
|
|
const baseClass = "file-uploader";
|
|
|
|
type ISupportedGraphicNames = Extract<
|
|
GraphicNames,
|
|
| "file-configuration-profile"
|
|
| "file-sh"
|
|
| "file-py"
|
|
| "file-script"
|
|
| "file-pdf"
|
|
| "file-pkg"
|
|
| "file-p7m"
|
|
| "file-pem"
|
|
>;
|
|
|
|
interface IFileUploaderProps {
|
|
graphicName: ISupportedGraphicNames;
|
|
message: string;
|
|
additionalInfo?: string;
|
|
/** Controls the loading spinner on the upload button */
|
|
isLoading?: boolean;
|
|
/** A comma seperated string of one or more file types accepted to upload.
|
|
* This is the same as the html accept attribute.
|
|
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
|
|
*/
|
|
accept?: string;
|
|
className?: string;
|
|
onFileUpload: (files: FileList | null) => void;
|
|
}
|
|
|
|
/**
|
|
* A component that encapsulates the UI for uploading a file.
|
|
*/
|
|
const FileUploader = ({
|
|
graphicName,
|
|
message,
|
|
additionalInfo,
|
|
isLoading = false,
|
|
accept,
|
|
className,
|
|
onFileUpload,
|
|
}: IFileUploaderProps) => {
|
|
const classes = classnames(baseClass, className);
|
|
|
|
return (
|
|
<Card color="gray" className={classes}>
|
|
<Graphic name={graphicName} />
|
|
<p className={`${baseClass}__message`}>{message}</p>
|
|
{additionalInfo && (
|
|
<p className={`${baseClass}__additional-info`}>{additionalInfo}</p>
|
|
)}
|
|
<Button
|
|
className={`${baseClass}__upload-button`}
|
|
variant="brand"
|
|
isLoading={isLoading}
|
|
>
|
|
<label htmlFor="upload-profile">Upload</label>
|
|
</Button>
|
|
<input
|
|
accept={accept}
|
|
id="upload-profile"
|
|
type="file"
|
|
onChange={(e) => {
|
|
onFileUpload(e.target.files);
|
|
e.target.value = "";
|
|
}}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default FileUploader;
|