ui: Add support to package configuration providers to ORT run create form

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

@@ -19,6 +19,8 @@
 
 import { UseFormReturn } from 'react-hook-form';
 
+import { PreconfiguredPluginDescriptor, Secret } from '@/api';
+import { PluginMultiSelectField } from '@/components/form/plugin-multi-select-field.tsx';
 import {
   AccordionContent,
   AccordionItem,
@@ -31,7 +33,6 @@ import {
   FormItem,
   FormLabel,
 } from '@/components/ui/form';
-import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { CreateRunFormValues } from '@/routes/organizations/$orgId/products/$productId/repositories/$repoId/_repo-layout/create-run/-components';
 
@@ -40,13 +41,19 @@ type EvaluatorFieldsProps = {
   value: string;
   onToggle: () => void;
   isSuperuser: boolean;
+  packageConfigurationProviderPlugins: PreconfiguredPluginDescriptor[];
+  secrets: Secret[];
+  isRerun: boolean;
 };
 
 export const EvaluatorFields = ({
   form,
   value,
   onToggle,
   isSuperuser,
+  packageConfigurationProviderPlugins,
+  secrets,
+  isRerun,
 }: EvaluatorFieldsProps) => {
   return (
     <div className='flex flex-row align-middle'>
@@ -60,19 +67,32 @@ export const EvaluatorFields = ({
                 className='my-4 mr-4 data-[state=checked]:bg-green-500'
                 checked={field.value}
                 onCheckedChange={field.onChange}
-                id='evaluator-enabled-switch'
               />
-              {!isSuperuser && (
-                <Label htmlFor='evaluator-enabled-switch'>Evaluator</Label>
-              )}
             </>
           </FormControl>
         )}
       />
-      {isSuperuser && (
-        <AccordionItem value={value} className='flex-1'>
-          <AccordionTrigger onClick={onToggle}>Evaluator</AccordionTrigger>
-          <AccordionContent>
+      <AccordionItem value={value} className='flex-1'>
+        <AccordionTrigger onClick={onToggle}>Evaluator</AccordionTrigger>
+        <AccordionContent className='flex flex-col gap-6'>
+          <PluginMultiSelectField
+            form={form}
+            name='jobConfigs.evaluator.packageConfigurationProviders'
+            configName='jobConfigs.evaluator.packageConfigurationProviderConfig'
+            label='Package configuration providers'
+            description={
+              <>
+                Configure the package configuration providers to use. Providers
+                higher in the list take precedence over lower providers. Change
+                the order of providers via drag & drop.
+              </>
+            }
+            plugins={packageConfigurationProviderPlugins}
+            secrets={secrets}
+            enableReordering
+            showSelectedPluginsFirst={isRerun}
+          />
+          {isSuperuser && (
             <FormField
               control={form.control}
               name='jobConfigs.evaluator.keepAliveWorker'
@@ -95,9 +115,9 @@ export const EvaluatorFields = ({
                 </FormItem>
               )}
             />
-          </AccordionContent>
-        </AccordionItem>
-      )}
+          )}
+        </AccordionContent>
+      </AccordionItem>
     </div>
   );
 };

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

@@ -19,8 +19,9 @@
 
 import { UseFormReturn } from 'react-hook-form';
 
-import { PreconfiguredPluginDescriptor } from '@/api';
+import { PreconfiguredPluginDescriptor, Secret } from '@/api';
 import { MultiSelectField } from '@/components/form/multi-select-field';
+import { PluginMultiSelectField } from '@/components/form/plugin-multi-select-field.tsx';
 import {
   AccordionContent,
   AccordionItem,
@@ -42,6 +43,9 @@ type ReporterFieldsProps = {
   onToggle: () => void;
   reporterPlugins: PreconfiguredPluginDescriptor[];
   isSuperuser: boolean;
+  packageConfigurationProviderPlugins: PreconfiguredPluginDescriptor[];
+  secrets: Secret[];
+  isRerun: boolean;
 };
 
 export const ReporterFields = ({
@@ -50,12 +54,16 @@ export const ReporterFields = ({
   onToggle,
   reporterPlugins,
   isSuperuser,
+  packageConfigurationProviderPlugins,
+  secrets,
+  isRerun,
 }: ReporterFieldsProps) => {
   const reporterOptions = reporterPlugins.map((plugin) => ({
     id: plugin.id,
     label: plugin.displayName,
     summary: plugin.summary,
   }));
+  const evaluatorEnabled = form.watch('jobConfigs.evaluator.enabled');
 
   return (
     <div className='flex flex-row align-middle'>
@@ -74,7 +82,7 @@ export const ReporterFields = ({
       />
       <AccordionItem value={value} className='flex-1'>
         <AccordionTrigger onClick={onToggle}>Reporter</AccordionTrigger>
-        <AccordionContent>
+        <AccordionContent className='flex flex-col gap-6'>
           <MultiSelectField
             form={form}
             name='jobConfigs.reporter.formats'
@@ -84,6 +92,25 @@ export const ReporterFields = ({
             }
             options={reporterOptions}
           />
+          {!evaluatorEnabled && (
+            <PluginMultiSelectField
+              form={form}
+              name='jobConfigs.reporter.packageConfigurationProviders'
+              configName='jobConfigs.reporter.packageConfigurationProviderConfig'
+              label='Package configuration providers'
+              description={
+                <>
+                  Configure the package configuration providers to use.
+                  Providers higher in the list take precedence over lower
+                  providers. Change the order of providers via drag & drop.
+                </>
+              }
+              plugins={packageConfigurationProviderPlugins}
+              secrets={secrets}
+              enableReordering
+              showSelectedPluginsFirst={isRerun}
+            />
+          )}
           {form.watch('jobConfigs.reporter.formats').includes('WebApp') && (
             <FormField
               control={form.control}