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.

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,17 @@ type EvaluatorFieldsProps = {
   value: string;
   onToggle: () => void;
   isSuperuser: boolean;
+  packageConfigurationProviderPlugins: PreconfiguredPluginDescriptor[];
+  secrets: Secret[];
 };
 
 export const EvaluatorFields = ({
   form,
   value,
   onToggle,
   isSuperuser,
+  packageConfigurationProviderPlugins,
+  secrets,
 }: EvaluatorFieldsProps) => {
   return (
     <div className='flex flex-row align-middle'>
@@ -60,19 +65,26 @@ 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.</>
+            }
+            plugins={packageConfigurationProviderPlugins}
+            secrets={secrets}
+          />
+          {isSuperuser && (
             <FormField
               control={form.control}
               name='jobConfigs.evaluator.keepAliveWorker'
@@ -95,9 +107,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,8 @@ type ReporterFieldsProps = {
   onToggle: () => void;
   reporterPlugins: PreconfiguredPluginDescriptor[];
   isSuperuser: boolean;
+  packageConfigurationProviderPlugins: PreconfiguredPluginDescriptor[];
+  secrets: Secret[];
 };
 
 export const ReporterFields = ({
@@ -50,12 +53,15 @@ export const ReporterFields = ({
   onToggle,
   reporterPlugins,
   isSuperuser,
+  packageConfigurationProviderPlugins,
+  secrets,
 }: 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 +80,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 +90,19 @@ 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.</>
+              }
+              plugins={packageConfigurationProviderPlugins}
+              secrets={secrets}
+            />
+          )}
           {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,21 @@ const CreateRunPage = () => {
                 value='evaluator'
                 onToggle={() => toggleAccordionOpen('evaluator')}
                 isSuperuser={isSuperuser}
+                packageConfigurationProviderPlugins={
+                  packageConfigurationProviderPlugins
+                }
+                secrets={secrets.data || []}
               />
               <ReporterFields
                 form={form}
                 value='reporter'
                 onToggle={() => toggleAccordionOpen('reporter')}
                 reporterPlugins={reporterPlugins}
                 isSuperuser={isSuperuser}
+                packageConfigurationProviderPlugins={
+                  packageConfigurationProviderPlugins
+                }
+                secrets={secrets.data || []}
               />
               <NotifierFields
                 form={form}