feat(frontend): improve commit UX

This commit changes multiple things to make manual commiting easier:

- Allows to hide pending commit drawer so multiple commits now possible
- Add drag-n-drop support to a commit modal window so you can append existing commits

frontend/src/components/CommitCard.tsx

@@ -16,7 +16,7 @@ import { Card, CardProps } from "react-daisyui";
 export type ICommitCardProps = CardProps & {
     commit: ICommit;
     onActivate?: (commit: ICommit) => void;
-    onDeleteRequested?: (id: string) => void;
+    onDeleteRequested?: (section: ISection) => void;
 };
 
 export default (props: ICommitCardProps) => {
@@ -33,14 +33,17 @@ export default (props: ICommitCardProps) => {
                     onClick={(e) => {
                         e.stopPropagation();
                         if (props.onDeleteRequested)
-                            return props.onDeleteRequested(props.commit.id);
+                            return props.onDeleteRequested(
+                                props.commit.section
+                            );
                     }}
                     className="px-1"
                     icon={faTrashCan}
                 />
             </div>
             <Card.Body className="font-bold">
-                {props.commit.packages.length} packages
+                {props.commit.packages.length} package
+                {props.commit.packages.length == 1 ? "" : "s"}
             </Card.Body>
             <span className="space-x-4">
                 <FontAwesomeIcon className="px-1" icon={faCodeBranch} />

frontend/src/components/CommitDrawer.tsx

@@ -0,0 +1,54 @@
+import { Button, Drawer, DrawerProps, Menu } from "react-daisyui";
+import CommitCard from "./CommitCard";
+
+type CommitDrawerProps = DrawerProps & {
+    isOpen: boolean;
+    commits: ICommit[];
+    onPush: (commits: ICommit[]) => void;
+    onCardActivate: (commit: ICommit) => void;
+    onCardDelete: (section: ISection) => void;
+};
+
+export default (props: CommitDrawerProps) => {
+    return (
+        <Drawer
+            {...props}
+            open={props.commits.length > 0 && props.isOpen}
+            contentClassName="fm-content h-full"
+            className="h-full"
+            side={
+                <div>
+                    <label
+                        htmlFor="my-drawer-2"
+                        className="drawer-overlay"
+                    ></label>
+                    <Menu className="h-screen p-4 w-100 space-y-4 bg-accent">
+                        <li className="text-3xl font-bold text-white">
+                            Pending commits
+                        </li>
+                        {props.commits?.map((value) => {
+                            return (
+                                <Menu.Item>
+                                    <CommitCard
+                                        onActivate={props.onCardActivate}
+                                        commit={value}
+                                        onDeleteRequested={props.onCardDelete}
+                                    />
+                                </Menu.Item>
+                            );
+                        })}
+                        <div className="grow"></div>
+                        <Button
+                            color="ghost"
+                            className="text-white"
+                            onClick={(e) => props.onPush(props.commits)}
+                        >
+                            Push commits
+                        </Button>
+                    </Menu>
+                </div>
+            }
+            end={true}
+        />
+    );
+};

frontend/src/components/CommitModal.tsx

@@ -13,34 +13,32 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import * as uuid from "uuid";
 import { forwardRef, useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import SectionSelect from "./SectionSelect";
+import Dropzone from "react-dropzone";
 
 export type CommitModalProps = ModalProps & {
     isNew?: boolean;
     commit?: ICommit;
     sections?: ISection[];
     onCommitSubmit?: (commit: ICommit) => void;
-    onCommitDelete?: (id: string) => void;
+    onCommitDelete?: (section: ISection) => void;
+    onPackageDrop?: (files: File[]) => void;
 };
 
 export default forwardRef<HTMLDialogElement, CommitModalProps>(
     (props: CommitModalProps, ref) => {
         const [commit, setCommit] = useState<ICommit>(
-            props.commit || { id: uuid.v4(), section: {}, packages: [] }
+            props.commit || { section: {}, packages: [] }
         );
 
         useEffect(
-            () =>
-                setCommit(
-                    props.commit || { id: uuid.v4(), section: {}, packages: [] }
-                ),
+            () => setCommit(props.commit || { section: {}, packages: [] }),
             [props.commit]
         );
 
-        const { id, section, packages } = commit;
+        const { section, packages } = commit;
 
         const { branch, repository, architecture } = section;
 
@@ -55,57 +53,66 @@ export default forwardRef<HTMLDialogElement, CommitModalProps>(
                 <Modal.Header className="text-3xl font-bold">
                     Commit
                 </Modal.Header>
-                <Modal.Body>
-                    <Form>
-                        <Form.Label title="Section" />
-                        <SectionSelect
-                            sections={props.sections || []}
-                            selectedSection={section}
-                            className="w-full"
-                            onSelected={(section) => {
-                                setCommit({ ...commit, section: section });
-                            }}
-                        />
-                        <Form.Label title="Packages" />
+                <Dropzone noClick={true} onDrop={props.onPackageDrop}>
+                    {({ getRootProps, getInputProps }) => (
+                        <Modal.Body {...getRootProps()}>
+                            <input {...getInputProps()} />
+                            <Form>
+                                <Form.Label title="Section" />
+                                <SectionSelect
+                                    sections={props.sections || []}
+                                    selectedSection={section}
+                                    className="w-full"
+                                    onSelected={(section) => {
+                                        setCommit({
+                                            ...commit,
+                                            section: section
+                                        });
+                                    }}
+                                />
+                                <Form.Label title="Packages" />
 
-                        <Table
-                            zebra={true}
-                            size="xs"
-                            className="overflow-x-auto"
-                        >
-                            <Table.Head>
-                                <span>Name</span>
-                                <span />
-                            </Table.Head>
-                            <Table.Body>
-                                {props.commit?.packages.map((value) => {
-                                    return (
-                                        <Table.Row>
-                                            <span className="flex items-center">
-                                                <FontAwesomeIcon
-                                                    icon={faCube}
-                                                    className="px-2 max-h-6"
-                                                />
-                                                {value.signatureFile !==
-                                                    undefined && (
-                                                    <FontAwesomeIcon
-                                                        icon={faSignature}
-                                                        color="green"
-                                                        className="px-2 max-h-6"
-                                                    />
-                                                )}
-
-                                                {value.name}
-                                            </span>
-                                            <span></span>
-                                        </Table.Row>
-                                    );
-                                })}
-                            </Table.Body>
-                        </Table>
-                    </Form>
-                </Modal.Body>
+                                <Table
+                                    zebra={true}
+                                    size="xs"
+                                    className="overflow-x-auto"
+                                >
+                                    <Table.Head>
+                                        <span>Name</span>
+                                        <span />
+                                    </Table.Head>
+                                    <Table.Body>
+                                        {props.commit?.packages.map((value) => {
+                                            return (
+                                                <Table.Row>
+                                                    <span className="flex items-center">
+                                                        <FontAwesomeIcon
+                                                            icon={faCube}
+                                                            className="px-2 max-h-6"
+                                                        />
+                                                        {value.signatureFile !==
+                                                            undefined && (
+                                                            <FontAwesomeIcon
+                                                                icon={
+                                                                    faSignature
+                                                                }
+                                                                color="green"
+                                                                className="px-2 max-h-6"
+                                                            />
+                                                        )}
 
+                                                        {value.name}
+                                                    </span>
+                                                    <span></span>
+                                                </Table.Row>
+                                            );
+                                        })}
+                                    </Table.Body>
+                                </Table>
+                            </Form>
+                        </Modal.Body>
+                    )}
+                </Dropzone>
                 <Form className="mt-6">
                     <span className="flex space-x-4 justify-end">
                         {props.isNew && (
@@ -118,7 +125,7 @@ export default forwardRef<HTMLDialogElement, CommitModalProps>(
                                 }
                                 onClick={(e) => {
                                     if (props.onCommitDelete)
-                                        props.onCommitDelete(commit.id);
+                                        props.onCommitDelete(commit.section);
                                 }}
                                 type="button"
                                 color="error"

frontend/src/definitions/commit.d.ts

@@ -5,7 +5,6 @@
  *
  */
 interface ICommit {
-    id: string;
     section: ISection;
     packages: IPackageUpload[];
 }