feat(ui): Show dropdowns for secret plugin options

For plugin options of the type 'SECRET', show a dropdown with all
secrets available in the context of the repository. If no secrets are
available, or if the selected secret does not exist, show an error
message.

Signed-off-by: Martin Nonnenmacher <[email protected]>

Author: mnonnenmacher

ui/src/components/form/plugin-multi-select-field.tsx

@@ -27,7 +27,7 @@ import {
   UseFormReturn,
 } from 'react-hook-form';
 
-import { PreconfiguredPluginDescriptor } from '@/api/requests';
+import { PreconfiguredPluginDescriptor, Secret } from '@/api/requests';
 import { OptionalInput } from '@/components/form/optional-input.tsx';
 import { Badge } from '@/components/ui/badge.tsx';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -41,6 +41,13 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input.tsx';
 import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select.tsx';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 
@@ -54,6 +61,7 @@ type PluginMultiSelectFieldProps<
   label?: string;
   description?: React.ReactNode;
   plugins: readonly PreconfiguredPluginDescriptor[];
+  secrets: readonly Secret[];
   className?: string;
 };
 
@@ -67,6 +75,7 @@ export const PluginMultiSelectField = <
   label,
   description,
   plugins,
+  secrets,
   className,
 }: PluginMultiSelectFieldProps<TFieldValues, TName>) => {
   return (
@@ -149,7 +158,7 @@ export const PluginMultiSelectField = <
                       control={form.control}
                       key={option.name}
                       name={
-                        `${configName}.${plugin.id}.options.${option.name}` as Path<TFieldValues>
+                        `${configName}.${plugin.id}.${option.type === 'SECRET' ? 'secrets' : 'options'}.${option.name}` as Path<TFieldValues>
                       }
                       render={({ field }) => (
                         <FormItem className='flex flex-col space-y-1'>
@@ -169,6 +178,47 @@ export const PluginMultiSelectField = <
                                 onCheckedChange={field.onChange}
                                 disabled={option.isFixed}
                               />
+                            ) : option.type == 'SECRET' ? (
+                              secrets.length === 0 ? (
+                                <FormMessage className='font-semibold text-red-600'>
+                                  No secrets available. Create a new secret to
+                                  be able to use this option.
+                                </FormMessage>
+                              ) : (
+                                <Select
+                                  onValueChange={field.onChange}
+                                  defaultValue={undefined}
+                                  value={field.value}
+                                  disabled={option.isFixed}
+                                >
+                                  <SelectTrigger>
+                                    <SelectValue placeholder='Select a secret' />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {secrets.map((secret) => (
+                                      <SelectItem
+                                        key={secret.name}
+                                        value={secret.name}
+                                      >
+                                        {secret.name}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                  {field.value &&
+                                    !secrets.some(
+                                      (secret) => secret.name === field.value
+                                    ) && (
+                                      <FormMessage className='font-semibold text-red-600'>
+                                        The selected secret '{field.value}' does
+                                        not exist. The value could come from a
+                                        previous run or could be a default value
+                                        set by an administrator. Select a valid
+                                        secret or create a new secret with this
+                                        name.
+                                      </FormMessage>
+                                    )}
+                                </Select>
+                              )
                             ) : option.isRequired ? (
                               <Input
                                 {...field}

ui/src/routes/organizations/$orgId/products/$productId/repositories/$repoId/-components/advisor-fields.tsx

@@ -19,7 +19,7 @@
 
 import { UseFormReturn } from 'react-hook-form';
 
-import { PreconfiguredPluginDescriptor } from '@/api/requests';
+import { PreconfiguredPluginDescriptor, Secret } from '@/api/requests';
 import { PluginMultiSelectField } from '@/components/form/plugin-multi-select-field.tsx';
 import {
   AccordionContent,
@@ -41,13 +41,15 @@ type AdvisorFieldsProps = {
   value: string;
   onToggle: () => void;
   advisorPlugins: PreconfiguredPluginDescriptor[];
+  secrets: Secret[];
 };
 
 export const AdvisorFields = ({
   form,
   value,
   onToggle,
   advisorPlugins,
+  secrets,
 }: AdvisorFieldsProps) => {
   return (
     <div className='flex flex-row align-middle'>
@@ -95,6 +97,7 @@ export const AdvisorFields = ({
             label='Enabled advisors'
             description={<>Select the advisors enabled for this run.</>}
             plugins={advisorPlugins}
+            secrets={secrets}
           />
         </AccordionContent>
       </AccordionItem>

ui/src/routes/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/create-run/index.tsx

@@ -69,7 +69,7 @@ import {
 const CreateRunPage = () => {
   const navigate = useNavigate();
   const params = Route.useParams();
-  const { ortRun, plugins } = Route.useLoaderData();
+  const { ortRun, plugins, secrets } = Route.useLoaderData();
   const [isTest, setIsTest] = useState(false);
 
   const advisorPlugins =
@@ -427,6 +427,7 @@ const CreateRunPage = () => {
                 value='advisor'
                 onToggle={() => toggleAccordionOpen('advisor')}
                 advisorPlugins={advisorPlugins}
+                secrets={secrets}
               />
               <ScannerFields
                 form={form}
@@ -534,7 +535,7 @@ export const Route = createFileRoute(
   // the query will not be run. This corresponds to the "New run" case, where a new
   // ORT Run is created from scratch, using all defaults.
   loader: async ({ params, deps: { rerunIndex } }) => {
-    const [ortRun, plugins] = await Promise.all([
+    const [ortRun, plugins, secrets] = await Promise.all([
       rerunIndex !== undefined
         ? RepositoriesService.getApiV1RepositoriesByRepositoryIdRunsByOrtRunIndex(
             {
@@ -546,11 +547,15 @@ export const Route = createFileRoute(
       RepositoriesService.getApiV1RepositoriesByRepositoryIdPlugins({
         repositoryId: Number.parseInt(params.repoId),
       }),
+      RepositoriesService.getApiV1RepositoriesByRepositoryIdAvailableSecrets({
+        repositoryId: Number.parseInt(params.repoId),
+      }),
     ]);
 
     return {
       ortRun,
       plugins,
+      secrets,
     };
   },
   component: CreateRunPage,