feat(ui): Expose package configuration providers in runs

Show package configuration provider fields in the create-run evaluator and
reporter settings. Hide the reporter field when the evaluator is
enabled because the backend uses the evaluator providers in that case.

As for analyzer / package curation providers, order of the package
configuration providers matters, so use the same drag-and-drop logic here.

Note that as the package configuration providers are added, the
`isSuperuser` guard is only applied to the "Keep worker alive" part of the
evaluator configuration.

Resolves #5238.

Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.io>

Author: Etsija

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}

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

@@ -92,6 +92,10 @@ const CreateRunPage = () => {
     plugins?.data?.filter(
       (plugin) => plugin.type === 'PACKAGE_CURATION_PROVIDER'
     ) || [];
+  const packageConfigurationProviderPlugins =
+    plugins?.data?.filter(
+      (plugin) => plugin.type === 'PACKAGE_CONFIGURATION_PROVIDER'
+    ) || [];
 
   type AccordionSection =
     | 'analyzer'
@@ -137,7 +141,8 @@ const CreateRunPage = () => {
   const formSchema = createRunFormSchema(
     advisorPlugins,
     scannerPlugins,
-    packageCurationProviderPlugins
+    packageCurationProviderPlugins,
+    packageConfigurationProviderPlugins
   );
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -147,7 +152,8 @@ const CreateRunPage = () => {
       advisorPlugins,
       scannerPlugins,
       isSuperuser,
-      packageCurationProviderPlugins
+      packageCurationProviderPlugins,
+      packageConfigurationProviderPlugins
     ),
   });
 
@@ -488,13 +494,23 @@ const CreateRunPage = () => {
                 value='evaluator'
                 onToggle={() => toggleAccordionOpen('evaluator')}
                 isSuperuser={isSuperuser}
+                packageConfigurationProviderPlugins={
+                  packageConfigurationProviderPlugins
+                }
+                secrets={secrets.data || []}
+                isRerun={ortRun?.data != null}
               />
               <ReporterFields
                 form={form}
                 value='reporter'
                 onToggle={() => toggleAccordionOpen('reporter')}
                 reporterPlugins={reporterPlugins}
                 isSuperuser={isSuperuser}
+                packageConfigurationProviderPlugins={
+                  packageConfigurationProviderPlugins
+                }
+                secrets={secrets.data || []}
+                isRerun={ortRun?.data != null}
               />
               <NotifierFields
                 form={form}