feat(scans): improve scan launch provider selection (#7164)

ui/components/scans/launch-workflow/launch-scan-workflow-form.tsx

@@ -26,6 +26,7 @@ export const LaunchScanWorkflow = ({
 }: {
   providers: ProviderInfo[];
 }) => {
+  console.log("providers from launch scan workflow", providers);
   const formSchema = onDemandScanFormSchema();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -80,10 +81,7 @@ export const LaunchScanWorkflow = ({
         className="flex flex-col space-y-4"
       >
         <div className="grid grid-cols-12 gap-6">
-          <div className="col-span-4">
-            <p className="pb-1 text-sm font-medium text-default-700">
-              Launch Scan
-            </p>
+          <div className="col-span-3">
             <SelectScanProvider
               providers={providers}
               control={form.control}
@@ -98,15 +96,16 @@ export const LaunchScanWorkflow = ({
                   animate={{ opacity: 1, x: 0 }}
                   exit={{ opacity: 0, x: -50 }}
                   transition={{ duration: 0.3 }}
-                  className="col-span-2"
+                  className="col-span-2 self-end"
                 >
                   <CustomInput
                     control={form.control}
                     name="scanName"
                     type="text"
-                    label="Scan Name (optional)"
+                    label="Scan label (optional)"
                     labelPlacement="outside"
-                    placeholder="Scan Name"
+                    placeholder="Scan label"
+                    size="sm"
                     variant="bordered"
                     isRequired={false}
                     isInvalid={!!form.formState.errors.scanName}
@@ -119,15 +118,15 @@ export const LaunchScanWorkflow = ({
                   transition={{ duration: 0.3 }}
                   className="col-span-4 flex items-end gap-4"
                 >
-                  <div className="flex flex-row items-center gap-4">
+                  <div className="flex flex-row items-end gap-4">
                     <CustomButton
                       type="submit"
                       ariaLabel="Start scan now"
                       variant="solid"
                       color="action"
-                      size="lg"
+                      size="sm"
                       isLoading={isLoading}
-                      startContent={!isLoading && <RocketIcon size={24} />}
+                      startContent={!isLoading && <RocketIcon size={16} />}
                     >
                       {isLoading ? <>Loading</> : <span>Start now</span>}
                     </CustomButton>
@@ -136,8 +135,8 @@ export const LaunchScanWorkflow = ({
                       className="w-fit border-gray-200 bg-transparent"
                       ariaLabel="Clear form"
                       variant="bordered"
-                      size="md"
-                      radius="lg"
+                      size="sm"
+                      radius="sm"
                     >
                       Cancel
                     </CustomButton>

ui/components/scans/launch-workflow/select-scan-provider.tsx

@@ -3,10 +3,7 @@
 import { Select, SelectItem } from "@nextui-org/react";
 import { Control, FieldPath, FieldValues } from "react-hook-form";
 
-import { AWSProviderBadge } from "@/components/icons/providers-badge/AWSProviderBadge";
-import { AzureProviderBadge } from "@/components/icons/providers-badge/AzureProviderBadge";
-import { GCPProviderBadge } from "@/components/icons/providers-badge/GCPProviderBadge";
-import { KS8ProviderBadge } from "@/components/icons/providers-badge/KS8ProviderBadge";
+import { EntityInfoShort } from "@/components/ui/entities";
 import { FormControl, FormField, FormMessage } from "@/components/ui/form";
 
 interface SelectScanProviderProps<
@@ -32,21 +29,6 @@ export const SelectScanProvider = <
   control,
   name,
 }: SelectScanProviderProps<TFieldValues, TName>) => {
-  const renderBadge = (providerType: string) => {
-    switch (providerType) {
-      case "aws":
-        return <AWSProviderBadge width={25} height={25} />;
-      case "azure":
-        return <AzureProviderBadge width={25} height={25} />;
-      case "gcp":
-        return <GCPProviderBadge width={25} height={25} />;
-      case "kubernetes":
-        return <KS8ProviderBadge width={25} height={25} />;
-      default:
-        return null;
-    }
-  };
-
   return (
     <FormField
       control={control}
@@ -60,8 +42,11 @@ export const SelectScanProvider = <
               labelPlacement="outside"
               classNames={{
                 selectorIcon: "right-2",
+                label: "tracking-tight font-light !text-default-500 text-xs",
+                value: "text-default-500 text-xs",
               }}
-              size="md"
+              label="Select a cloud provider to launch a scan"
+              size="lg"
               selectedKeys={field.value ? new Set([field.value]) : new Set()}
               onSelectionChange={(keys) => {
                 const selectedValue = Array.from(keys)[0]?.toString();
@@ -73,8 +58,18 @@ export const SelectScanProvider = <
                 );
                 return selectedItem ? (
                   <div className="flex items-center gap-2">
-                    {renderBadge(selectedItem.providerType)}
-                    {selectedItem.alias}
+                    <EntityInfoShort
+                      cloudProvider={
+                        selectedItem.providerType as
+                          | "aws"
+                          | "azure"
+                          | "gcp"
+                          | "kubernetes"
+                      }
+                      entityAlias={selectedItem.alias}
+                      entityId={selectedItem.uid}
+                      hideCopyButton
+                    />
                   </div>
                 ) : (
                   "Choose a cloud provider"
@@ -88,8 +83,18 @@ export const SelectScanProvider = <
                   aria-label={item.alias}
                 >
                   <div className="flex items-center gap-2">
-                    {renderBadge(item.providerType)}
-                    {item.alias}
+                    <EntityInfoShort
+                      cloudProvider={
+                        item.providerType as
+                          | "aws"
+                          | "azure"
+                          | "gcp"
+                          | "kubernetes"
+                      }
+                      entityAlias={item.alias}
+                      entityId={item.uid}
+                      hideCopyButton
+                    />
                   </div>
                 </SelectItem>
               ))}

ui/components/ui/custom/custom-input.tsx

@@ -99,6 +99,10 @@ export const CustomInput = <T extends FieldValues>({
           <FormControl>
             <Input
               id={name}
+              classNames={{
+                label: "tracking-tight font-light !text-default-500 text-xs",
+                input: "text-default-500 text-xs",
+              }}
               isRequired={inputIsRequired}
               label={inputLabel}
               labelPlacement={labelPlacement}