From cee4f364a0f69d405ec3596e52f2a4691e654585 Mon Sep 17 00:00:00 2001
From: gearnode <bryan@frimin.fr>
Date: Mon, 17 Mar 2025 13:51:51 +0100
Subject: [PATCH] Allow to create vendor when it not exist

Signed-off-by: gearnode <bryan@frimin.fr>
---
 apps/console/src/pages/VendorListPage.tsx     | 114 ++++++++++++------
 apps/console/src/pages/VendorOverviewPage.tsx |  16 +--
 2 files changed, 85 insertions(+), 45 deletions(-)

diff --git a/apps/console/src/pages/VendorListPage.tsx b/apps/console/src/pages/VendorListPage.tsx
index 5ec7dca70..a766a9fec 100644
--- a/apps/console/src/pages/VendorListPage.tsx
+++ b/apps/console/src/pages/VendorListPage.tsx
@@ -272,44 +272,84 @@ function VendorListContent({
               }}
             />
 
-            {searchTerm.trim() !== "" && filteredVendors.length > 0 && (
-              <div
-                style={{ borderRadius: "0.3rem" }}
-                className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
-              >
-                {filteredVendors.map((vendor: VendorItem) => (
-                  <button
-                    key={vendor.id}
-                    className="w-full px-3 py-2 text-left hover:bg-accent"
-                    onClick={() => {
-                      createVendor({
-                        variables: {
-                          connections: [vendorsConnection.vendors.__id],
-                          input: {
-                            organizationId: data.organization.id,
-                            name: vendor.name,
-                            description: "",
-                            serviceStartAt: new Date().toISOString(),
-                            serviceCriticality: "LOW",
-                            riskTier: "GENERAL",
-                          },
-                        },
-                        onCompleted() {
-                          setSearchTerm("");
-                          setFilteredVendors([]);
-                          toast({
-                            title: "Vendor added",
-                            description:
-                              "The vendor has been added successfully",
-                          });
-                        },
-                      });
-                    }}
+            {searchTerm.trim() !== "" && (
+              <>
+                {filteredVendors.length > 0 ? (
+                  <div
+                    style={{ borderRadius: "0.3rem" }}
+                    className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
                   >
-                    {vendor.name}
-                  </button>
-                ))}
-              </div>
+                    {filteredVendors.map((vendor: VendorItem) => (
+                      <button
+                        key={vendor.id}
+                        className="w-full px-3 py-2 text-left hover:bg-accent"
+                        onClick={() => {
+                          createVendor({
+                            variables: {
+                              connections: [vendorsConnection.vendors.__id],
+                              input: {
+                                organizationId: data.organization.id,
+                                name: vendor.name,
+                                description: "",
+                                serviceStartAt: new Date().toISOString(),
+                                serviceCriticality: "LOW",
+                                riskTier: "GENERAL",
+                              },
+                            },
+                            onCompleted() {
+                              setSearchTerm("");
+                              setFilteredVendors([]);
+                              toast({
+                                title: "Vendor added",
+                                description:
+                                  "The vendor has been added successfully",
+                              });
+                            },
+                          });
+                        }}
+                      >
+                        {vendor.name}
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <div
+                    style={{ borderRadius: "0.3rem" }}
+                    className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] border bg-popover shadow-md z-10"
+                  >
+                    <button
+                      className="w-full px-3 py-2 text-left hover:bg-accent flex items-center gap-2"
+                      onClick={() => {
+                        createVendor({
+                          variables: {
+                            connections: [vendorsConnection.vendors.__id],
+                            input: {
+                              organizationId: data.organization.id,
+                              name: searchTerm.trim(),
+                              description: "",
+                              serviceStartAt: new Date().toISOString(),
+                              serviceCriticality: "LOW",
+                              riskTier: "GENERAL",
+                            },
+                          },
+                          onCompleted() {
+                            setSearchTerm("");
+                            setFilteredVendors([]);
+                            toast({
+                              title: "Vendor created",
+                              description:
+                                "The new vendor has been created successfully",
+                            });
+                          },
+                        });
+                      }}
+                    >
+                      <span className="font-medium">Create new vendor:</span>{" "}
+                      {searchTerm}
+                    </button>
+                  </div>
+                )}
+              </>
             )}
           </div>
         </div>
diff --git a/apps/console/src/pages/VendorOverviewPage.tsx b/apps/console/src/pages/VendorOverviewPage.tsx
index 773ab09ed..325c522be 100644
--- a/apps/console/src/pages/VendorOverviewPage.tsx
+++ b/apps/console/src/pages/VendorOverviewPage.tsx
@@ -127,7 +127,7 @@ function VendorOverviewPageContent({
   });
   const [commit] = useMutation(updateVendorMutation);
   const [, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(
-    vendorOverviewPageQuery,
+    vendorOverviewPageQuery
   );
   const { toast } = useToast();
 
@@ -261,7 +261,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.serviceCriticality === "LOW"
                           ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
                       )}
                     >
                       Low
@@ -274,7 +274,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.serviceCriticality === "MEDIUM"
                           ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
                       )}
                     >
                       Medium
@@ -287,7 +287,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.serviceCriticality === "HIGH"
                           ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
                       )}
                     >
                       High
@@ -315,7 +315,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.riskTier === "CRITICAL"
                           ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
                       )}
                     >
                       Critical
@@ -328,7 +328,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.riskTier === "SIGNIFICANT"
                           ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
                       )}
                     >
                       Significant
@@ -339,7 +339,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.riskTier === "GENERAL"
                           ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
                       )}
                     >
                       General
@@ -420,7 +420,7 @@ function VendorOverviewPageFallback() {
 export default function VendorOverviewPage() {
   const { vendorId } = useParams();
   const [queryRef, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(
-    vendorOverviewPageQuery,
+    vendorOverviewPageQuery
   );
 
   useEffect(() => {