Fix upload modal

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/pages/ControlOverviewPage.tsx

@@ -48,7 +48,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import {
   Popover,
   PopoverContent,
@@ -218,6 +217,7 @@ const uploadEvidenceMutation = graphql`
       evidenceEdge @appendEdge(connections: $connections) {
         node {
           id
+          filename
           fileUrl
           mimeType
           size
@@ -450,13 +450,11 @@ function ControlOverviewPageContent({
     name: string;
   } | null>(null);
 
-  const [isUploadEvidenceOpen, setIsUploadEvidenceOpen] = useState(false);
   const [taskForEvidence, setTaskForEvidence] = useState<{
     id: string;
     name: string;
   } | null>(null);
-  const [evidenceName, setEvidenceName] = useState("");
+  const hiddenFileInputRef = useRef<HTMLInputElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [draggedOverTaskId, setDraggedOverTaskId] = useState<string | null>(
     null
@@ -702,15 +700,24 @@ function ControlOverviewPageContent({
 
   const handleUploadEvidence = (taskId: string, taskName: string) => {
     setTaskForEvidence({ id: taskId, name: taskName });
-    setIsUploadEvidenceOpen(true);
+    // Instead of opening a modal, directly trigger the file input click
+    if (hiddenFileInputRef.current) {
+      hiddenFileInputRef.current.click();
+    }
   };
 
-  const confirmUploadEvidence = (event: React.FormEvent) => {
+  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
+    if (!e.target.files || e.target.files.length === 0 || !taskForEvidence)
+      return;
 
-    if (!taskForEvidence || !fileInputRef.current?.files?.[0]) return;
+    const file = e.target.files[0];
 
-    const file = fileInputRef.current.files[0];
+    // Show toast for upload started
+    toast({
+      title: "Upload started",
+      description: `Uploading ${file.name}...`,
+      variant: "default",
+    });
 
     // Get the evidence connection ID for this task
     const evidenceConnectionId = getEvidenceConnectionId(taskForEvidence.id);
@@ -719,7 +726,7 @@ function ControlOverviewPageContent({
       variables: {
         input: {
           taskId: taskForEvidence.id,
-          name: evidenceName || file.name,
+          name: file.name,
           file: null,
         },
         connections: evidenceConnectionId ? [evidenceConnectionId] : [],
@@ -733,11 +740,10 @@ function ControlOverviewPageContent({
           description: "Evidence has been uploaded successfully.",
           variant: "default",
         });
-        setIsUploadEvidenceOpen(false);
         setTaskForEvidence(null);
-        setEvidenceName("");
+        // Reset the file input
-        if (fileInputRef.current) {
+        if (hiddenFileInputRef.current) {
-          fileInputRef.current.value = "";
+          hiddenFileInputRef.current.value = "";
         }
       },
       onError: (error) => {
@@ -1625,6 +1631,15 @@ function ControlOverviewPageContent({
           </div>
         </div>
 
+        {/* Hidden file input for direct uploads */}
+        <input
+          type="file"
+          ref={hiddenFileInputRef}
+          onChange={handleFileSelected}
+          style={{ display: "none" }}
+          accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"
+        />
+
         {/* Delete Task Confirmation Dialog */}
         <Dialog open={isDeleteTaskOpen} onOpenChange={setIsDeleteTaskOpen}>
           <DialogContent>
@@ -1649,71 +1664,6 @@ function ControlOverviewPageContent({
           </DialogContent>
         </Dialog>
 
-        {/* Upload Evidence Dialog */}
-        <Dialog
-          open={isUploadEvidenceOpen}
-          onOpenChange={setIsUploadEvidenceOpen}
-        >
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle>Upload Evidence</DialogTitle>
-              <DialogDescription>
-                Upload evidence for the task &quot;{taskForEvidence?.name}
-                &quot;.
-              </DialogDescription>
-            </DialogHeader>
-            <form onSubmit={confirmUploadEvidence}>
-              <div className="space-y-6 py-4">
-                <div className="space-y-2">
-                  <Label htmlFor="evidence-name">
-                    Evidence Name (Optional)
-                  </Label>
-                  <Input
-                    id="evidence-name"
-                    placeholder="Enter a name for this evidence"
-                    value={evidenceName}
-                    onChange={(e) => setEvidenceName(e.target.value)}
-                    className="w-full"
-                  />
-                </div>
-                <div className="space-y-3">
-                  <Label htmlFor="evidence-file">File</Label>
-                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 transition-colors hover:border-blue-400 bg-gray-50">
-                    <div className="flex flex-col items-center justify-center gap-3">
-                      <Upload className="w-10 h-10 text-blue-500" />
-                      <div className="text-center">
-                        <p className="text-sm font-medium text-gray-700">
-                          Drag and drop your file here, or click to browse
-                        </p>
-                        <p className="text-xs text-gray-500 mt-1">
-                          Supported file types: PDF, images, documents
-                        </p>
-                      </div>
-                      <Input
-                        id="evidence-file"
-                        type="file"
-                        ref={fileInputRef}
-                        required
-                        className="w-full opacity-0 absolute inset-0 cursor-pointer"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <DialogFooter>
-                <Button
-                  variant="outline"
-                  type="button"
-                  onClick={() => setIsUploadEvidenceOpen(false)}
-                >
-                  Cancel
-                </Button>
-                <Button type="submit">Upload</Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
-
         {/* Add the Preview Modal */}
         <Dialog open={isPreviewModalOpen} onOpenChange={setIsPreviewModalOpen}>
           <DialogContent className="sm:max-w-4xl">

apps/console/src/pages/__generated__/ControlOverviewPageUploadEvidenceMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f1cdd20d14ca9fefe868019e5aa43741>>
+ * @generated SignedSource<<313084c3c2422d51df42fe4d6b848d49>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -25,6 +25,7 @@ export type ControlOverviewPageUploadEvidenceMutation$data = {
       readonly node: {
         readonly createdAt: string;
         readonly fileUrl: string;
+        readonly filename: string;
         readonly id: string;
         readonly mimeType: string;
         readonly size: number;
@@ -79,6 +80,13 @@ v3 = {
           "name": "id",
           "storageKey": null
         },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "filename",
+          "storageKey": null
+        },
         {
           "alias": null,
           "args": null,
@@ -186,16 +194,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "76c2ba38a9ba243840027c997b01b51b",
+    "cacheID": "5edaf64bde176530d9952e3e8aeb15af",
     "id": null,
     "metadata": {},
     "name": "ControlOverviewPageUploadEvidenceMutation",
     "operationKind": "mutation",
-    "text": "mutation ControlOverviewPageUploadEvidenceMutation(\n  $input: UploadEvidenceInput!\n) {\n  uploadEvidence(input: $input) {\n    evidenceEdge {\n      node {\n        id\n        fileUrl\n        mimeType\n        size\n        state\n        createdAt\n      }\n    }\n  }\n}\n"
+    "text": "mutation ControlOverviewPageUploadEvidenceMutation(\n  $input: UploadEvidenceInput!\n) {\n  uploadEvidence(input: $input) {\n    evidenceEdge {\n      node {\n        id\n        filename\n        fileUrl\n        mimeType\n        size\n        state\n        createdAt\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "b43bb6fc3d2a70fd8f81ccfb2532f067";
+(node as any).hash = "51f35fe735a747ddaeb0f0cfa298f7e2";
 
 export default node;