feat: Scan on demand can be executed now from the UI

components/providers/table/data-table-row-actions.tsx

@@ -77,7 +77,6 @@ export function DataTableRowActions<ProviderProps>({
               <DropdownItem
                 key="new"
                 description="Check the connection to the provider"
-                shortcut="⌘N"
                 textValue="Check Connection"
                 startContent={<AddNoteBulkIcon className={iconClasses} />}
               >
@@ -86,7 +85,6 @@ export function DataTableRowActions<ProviderProps>({
               <DropdownItem
                 key="edit"
                 description="Allows you to edit the provider"
-                shortcut="⌘⇧E"
                 textValue="Edit Provider"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
                 onClick={() => setIsEditOpen(true)}
@@ -101,7 +99,6 @@ export function DataTableRowActions<ProviderProps>({
                 color="danger"
                 description="Delete the provider permanently"
                 textValue="Delete Provider"
-                shortcut="⌘⇧D"
                 startContent={
                   <DeleteDocumentBulkIcon
                     className={clsx(iconClasses, "!text-danger")}

components/scans/forms/index.ts

@@ -0,0 +1,2 @@
+export * from "./scan-on-demand-form";
+export * from "./schedule-form";

components/scans/forms/scan-on-demand-form.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { RocketIcon } from "lucide-react";
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { scanOnDemand } from "@/actions/scans";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { onDemandScanFormSchema } from "@/types";
+
+export const ScanOnDemandForm = ({
+  providerId,
+  scanName,
+  scannerArgs,
+  setIsOpen,
+}: {
+  providerId: string;
+  scanName?: string;
+  scannerArgs?: { checksToExecute: string[] };
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = onDemandScanFormSchema();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      providerId: providerId,
+      scanName: scanName,
+      scannerArgs: scannerArgs,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    // Loop through form values and add to formData, converting objects to JSON strings
+    Object.entries(values).forEach(
+      ([key, value]) =>
+        value !== undefined &&
+        formData.append(
+          key,
+          typeof value === "object" ? JSON.stringify(value) : value,
+        ),
+    );
+
+    const data = await scanOnDemand(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The scan was launched successfully.",
+      });
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <input type="hidden" name="providerId" value={providerId} />
+
+        <div>
+          <CustomInput
+            control={form.control}
+            name="scanName"
+            type="text"
+            label="Scan Name"
+            labelPlacement="outside"
+            placeholder={scanName}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.scanName}
+          />
+        </div>
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            disabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Save"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <RocketIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Start now</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/scans/forms/schedule-form.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { updateProvider } from "@/actions/providers";
+import { SaveIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { scheduleScanFormSchema } from "@/types";
+
+export const ScheduleForm = ({
+  providerId,
+  scheduleDate,
+  setIsOpen,
+}: {
+  providerId: string;
+  scheduleDate: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = scheduleScanFormSchema();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      providerId: providerId,
+      scheduleDate: scheduleDate,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+    const data = await updateProvider(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The scan was scheduled successfully.",
+      });
+      setIsOpen(false); // Close the modal on success
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <input type="hidden" name="providerId" value={providerId} />
+        <CustomInput
+          control={form.control}
+          name="scheduleDate"
+          type="date"
+          label="Schedule Date"
+          labelPlacement="inside"
+          variant="bordered"
+          isRequired={false}
+          isInvalid={!!form.formState.errors.scheduleDate}
+        />
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            disabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Save"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Schedule</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/scans/table/data-table-row-actions.tsx

@@ -78,7 +78,6 @@ export function DataTableRowActions<ProviderProps>({
               <DropdownItem
                 key="new"
                 description="Check the connection to the provider"
-                shortcut="⌘N"
                 textValue="Check Connection"
                 startContent={<AddNoteBulkIcon className={iconClasses} />}
               >
@@ -88,7 +87,6 @@ export function DataTableRowActions<ProviderProps>({
               <DropdownItem
                 key="edit"
                 description="Allows you to edit the provider"
-                shortcut="⌘⇧E"
                 textValue="Edit Provider"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
                 onClick={() => setIsEditOpen(true)}
@@ -103,7 +101,6 @@ export function DataTableRowActions<ProviderProps>({
                 color="danger"
                 description="Delete the provider permanently"
                 textValue="Delete Provider"
-                shortcut="⌘⇧D"
                 startContent={
                   <DeleteDocumentBulkIcon
                     className={clsx(iconClasses, "!text-danger")}

components/scans/table/provider-scans/data-table-row-actions.tsx

@@ -1,27 +1,20 @@
 "use client";
 
 import {
-  Button,
   Dropdown,
   DropdownItem,
   DropdownMenu,
   DropdownSection,
   DropdownTrigger,
 } from "@nextui-org/react";
-import {
-  AddNoteBulkIcon,
-  DeleteDocumentBulkIcon,
-  EditDocumentBulkIcon,
-} from "@nextui-org/shared-icons";
 import { Row } from "@tanstack/react-table";
-import clsx from "clsx";
+import { CalendarClockIcon, RocketIcon } from "lucide-react";
 import { useState } from "react";
 
 import { AddIcon } from "@/components/icons";
 import { CustomAlertModal, CustomButton } from "@/components/ui/custom";
 
-// import { EditForm } from "../forms";
-// import { DeleteForm } from "../forms/delete-form";
+import { ScanOnDemandForm, ScheduleForm } from "../../forms";
 
 interface DataTableRowActionsProps<ProviderProps> {
   row: Row<ProviderProps>;
@@ -32,34 +25,41 @@ const iconClasses =
 export function DataTableRowActions<ProviderProps>({
   row,
 }: DataTableRowActionsProps<ProviderProps>) {
-  const [isEditOpen, setIsEditOpen] = useState(false);
-  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isScanOnDemandOpen, setIsScanOnDemandOpen] = useState(false);
+  const [isScanScheduleOpen, setIsScanScheduleOpen] = useState(false);
+
   const providerId = (row.original as { id: string }).id;
+  const scanName = (row.original as any).attributes?.name;
   return (
     <>
-      {/* <CustomAlertModal
-        isOpen={isEditOpen}
-        onOpenChange={setIsEditOpen}
-        title="Edit Provider"
-        description={"Edit the provider details"}
+      <CustomAlertModal
+        isOpen={isScanOnDemandOpen}
+        onOpenChange={setIsScanOnDemandOpen}
+        title="Start Scan On Demand"
+        description={"Start a scan on demand for this provider"}
       >
-        <EditForm
+        <ScanOnDemandForm
           providerId={providerId}
-          providerAlias={providerAlias}
-          setIsOpen={setIsEditOpen}
+          scanName={scanName}
+          setIsOpen={setIsScanOnDemandOpen}
         />
-      </CustomAlertModal> */}
-      {/* <CustomAlertModal
-        isOpen={isDeleteOpen}
-        onOpenChange={setIsDeleteOpen}
-        title="Are you absolutely sure?"
-        description="This action cannot be undone. This will permanently delete your provider account and remove your data from the server."
+      </CustomAlertModal>
+
+      <CustomAlertModal
+        isOpen={isScanScheduleOpen}
+        onOpenChange={setIsScanScheduleOpen}
+        title="Schedule Scan"
+        description={"Schedule a scan for this provider"}
       >
-        <DeleteForm providerId={providerId} setIsOpen={setIsDeleteOpen} />
-      </CustomAlertModal> */}
+        <ScheduleForm
+          providerId={providerId}
+          scheduleDate={""}
+          setIsOpen={setIsScanScheduleOpen}
+        />
+      </CustomAlertModal>
 
       <div className="relative flex items-center justify-end gap-2">
-        <Dropdown className="shadow-xl" placement="bottom">
+        <Dropdown className="shadow-xl" placement="bottom-start">
           <DropdownTrigger>
             <CustomButton
               className="w-full"
@@ -71,53 +71,35 @@ export function DataTableRowActions<ProviderProps>({
             >
               Start
             </CustomButton>
-            {/* <Button radius="full" size="sm" variant="light">
-              bueno
-            </Button> */}
           </DropdownTrigger>
           <DropdownMenu
             closeOnSelect
-            aria-label="Actions"
+            aria-label="Launch Scan"
             color="default"
             variant="flat"
           >
-            <DropdownSection title="Actions">
+            <DropdownSection title="Start Scan On Demand">
               <DropdownItem
-                key="new"
-                description="Check the connection to the provider"
-                shortcut="⌘N"
-                textValue="Check Connection"
-                startContent={<AddNoteBulkIcon className={iconClasses} />}
+                key="scanNow"
+                color="primary"
+                description="Allows you to start a scan on demand"
+                textValue="Start now"
+                startContent={<RocketIcon className={iconClasses} />}
+                onClick={() => setIsScanOnDemandOpen(true)}
               >
-                {/* <CheckConnectionProvider id={providerId} /> */}
-              </DropdownItem>
-              <DropdownItem
-                key="edit"
-                description="Allows you to edit the provider"
-                shortcut="⌘⇧E"
-                textValue="Edit Provider"
-                startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onClick={() => setIsEditOpen(true)}
-              >
-                Edit Provider
+                Start now
               </DropdownItem>
             </DropdownSection>
-            <DropdownSection title="Danger zone">
+            <DropdownSection title="Schedule Scan">
               <DropdownItem
-                key="delete"
-                className="text-danger"
-                color="danger"
-                description="Delete the provider permanently"
-                textValue="Delete Provider"
-                shortcut="⌘⇧D"
-                startContent={
-                  <DeleteDocumentBulkIcon
-                    className={clsx(iconClasses, "!text-danger")}
-                  />
-                }
-                onClick={() => setIsDeleteOpen(true)}
+                key="schedule"
+                color="primary"
+                description="Schedule a scan for this provider"
+                textValue="Schedule Scan"
+                startContent={<CalendarClockIcon className={iconClasses} />}
+                onClick={() => setIsScanScheduleOpen(true)}
               >
-                Delete Provider
+                Schedule Scan
               </DropdownItem>
             </DropdownSection>
           </DropdownMenu>

components/ui/entities/snippet-label.tsx

@@ -12,19 +12,21 @@ export const SnippetLabel: React.FC<SnippetLabelProps> = ({
   ...props
 }) => {
   return (
-    <Snippet
-      className="m-0 flex items-center bg-transparent py-0"
-      color="default"
-      size="sm"
-      radius="lg"
-      hideSymbol
-      copyIcon={<CopyIcon size={16} />}
-      checkIcon={<DoneIcon size={16} />}
-      {...props}
-    >
-      <p className="no-scrollbar text-md mb-1 w-32 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm font-semibold">
-        {label}
-      </p>
-    </Snippet>
+    label !== "" && (
+      <Snippet
+        className="m-0 flex items-center bg-transparent py-0"
+        color="default"
+        size="sm"
+        radius="lg"
+        hideSymbol
+        copyIcon={<CopyIcon size={16} />}
+        checkIcon={<DoneIcon size={16} />}
+        {...props}
+      >
+        <p className="no-scrollbar text-md mb-1 w-32 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm font-semibold">
+          {label}
+        </p>
+      </Snippet>
+    )
   );
 };