resolving the selected repos bug

Author: MonsefRH

frontend/src/components/VulnerabilityScanner/SelectedReposVulnerabilityScanner.jsx

@@ -1,13 +1,59 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { toast } from "react-toastify";
 import { ShieldCheckIcon, ArrowPathIcon, ListBulletIcon } from "@heroicons/react/24/outline";
 
 const SelectedReposVulnerabilityScanner = ({ setResult, isLoading, setIsLoading, userId }) => {
-  const [selectedRepos, setSelectedRepos] = useState([]);
+  const [repos, setRepos] = useState([]);
+  const [selectedRepo, setSelectedRepo] = useState("");
+  const [reposLoading, setReposLoading] = useState(false);
+  const [reposError, setReposError] = useState("");
+
+  useEffect(() => {
+    const fetchRepos = async () => {
+      setReposLoading(true);
+      setReposError("");
+      try {
+        const response = await fetch("http://127.0.0.1:5000/github/repos", {
+          method: "GET",
+          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+        });
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || "Trouble while retrieving repos.");
+        }
+        const data = await response.json();
+        const selectedRepos = data.filter((repo) => repo.is_selected);
+        setRepos(selectedRepos);
+        if (selectedRepos.length > 0) {
+          setSelectedRepo(selectedRepos[0].full_name);
+        }
+        toast.success("Selected repos loaded!", {
+          toastId: "selected-repos-loaded",
+          position: "top-right",
+          autoClose: 3000,
+          theme: "light",
+        });
+      } catch (err) {
+        setReposError("Impossible to retrieve the selected repos");
+        toast.error(err.message, {
+          position: "top-right",
+          autoClose: 3000,
+          theme: "light",
+        });
+      } finally {
+        setReposLoading(false);
+      }
+    };
+    fetchRepos();
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("lastSelectedRepo", selectedRepo);
+  }, [selectedRepo]);
 
   const scanSelectedRepos = async () => {
-    if (selectedRepos.length === 0) {
-      toast.warn("Please select at least one repository to scan!", {
+    if (!selectedRepo) {
+      toast.warn("Please select a repository to scan!", {
         position: "top-right",
         autoClose: 3000,
         theme: "light",
@@ -17,14 +63,21 @@ const SelectedReposVulnerabilityScanner = ({ setResult, isLoading, setIsLoading,
 
     setIsLoading(true);
     try {
-      const response = await fetch("http://127.0.0.1:5000/scan-selected-repos", {
+      const repoData = repos.find((r) => r.full_name === selectedRepo);
+      if (!repoData) {
+        throw new Error("Selected repository not found");
+      }
+
+      const formData = new FormData();
+      formData.append("input_type", "repo");
+      formData.append("repo_url", repoData.html_url);
+
+      const response = await fetch("http://127.0.0.1:5000/semgrep", {
         method: "POST",
         headers: {
-          "Content-Type": "application/json",
           Authorization: `Bearer ${localStorage.getItem("token")}`,
-          "X-User-ID": userId,
         },
-        body: JSON.stringify({ repositories: selectedRepos }),
+        body: formData,
       });
 
       if (!response.ok) {
@@ -33,7 +86,7 @@ const SelectedReposVulnerabilityScanner = ({ setResult, isLoading, setIsLoading,
       }
 
       const data = await response.json();
-      setResult(data);
+      setResult({ repo: repoData.full_name, data });
       toast.success("Vulnerability scan completed successfully", {
         position: "top-right",
         autoClose: 3000,
@@ -56,21 +109,48 @@ const SelectedReposVulnerabilityScanner = ({ setResult, isLoading, setIsLoading,
         <ListBulletIcon className="h-7 w-7 text-red-400" />
         Vulnerability Scanner - Selected Repositories
       </h2>
-      <div className="mb-6">
-        <p className="text-gray-600 mb-4">
-          Select repositories from your account to scan for vulnerabilities:
-        </p>
-        <div className="bg-gray-100 p-4 rounded-lg">
-          <p className="text-gray-500 text-center">
-            Repository selection interface will be implemented here
-          </p>
+      {reposLoading ? (
+        <div className="flex justify-center items-center py-4">
+          <ArrowPathIcon className="h-6 w-6 text-blue-500 animate-spin" />
+          <span className="ml-2 text-gray-400">Loading Repos...</span>
+        </div>
+      ) : reposError ? (
+        <div className="flex justify-center items-center py-4 text-red-400">
+          <p>{reposError}</p>
         </div>
-      </div>
+      ) : repos.length > 0 ? (
+        <div className="mb-6">
+          <label htmlFor="repo-select" className="text-gray-600 mb-2 block">
+            Select a repository to scan:
+          </label>
+          <select
+            id="repo-select"
+            value={selectedRepo}
+            onChange={(e) => setSelectedRepo(e.target.value)}
+            disabled={isLoading}
+            className={`w-full bg-gray-700 text-gray-100 border border-gray-600 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition duration-200 ${
+              isLoading ? "opacity-50" : ""
+            }`}
+          >
+            <option value="">Select a repository</option>
+            {repos.map((repo) => (
+              <option key={repo.full_name} value={repo.full_name}>
+                {repo.full_name}
+              </option>
+            ))}
+          </select>
+        </div>
+      ) : (
+        <p className="text-gray-400">
+          There are no selected repos yet, go to dashboard to select one
+        </p>
+      )}
       <button
+        type="button"
         onClick={scanSelectedRepos}
-        disabled={isLoading || selectedRepos.length === 0}
+        disabled={isLoading || !selectedRepo}
         className={`w-full sm:w-auto bg-red-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-700 transition-colors duration-200 flex items-center justify-center gap-2 ${
-          isLoading || selectedRepos.length === 0 ? "opacity-50 cursor-not-allowed" : ""
+          isLoading || !selectedRepo ? "opacity-50 cursor-not-allowed" : ""
         }`}
       >
         {isLoading ? (
@@ -81,7 +161,7 @@ const SelectedReposVulnerabilityScanner = ({ setResult, isLoading, setIsLoading,
         ) : (
           <>
             <ShieldCheckIcon className="h-5 w-5" />
-            Scan Selected Repositories
+            Scan Selected Repository
           </>
         )}
       </button>