feat: display evidence requirement descriptions in submission form (#237)

Pass full EvidenceRequirement[] to EvidenceSubmissionForm so the type
selector shows human-readable descriptions instead of raw type strings.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: saltpy-cs

src/views/workflow-executions/partials/EvidenceSubmissionForm.vue

@@ -17,6 +17,8 @@
           id="evidenceType"
           v-model="evidenceForm.type"
           :options="availableEvidenceTypes"
+          optionLabel="label"
+          optionValue="value"
           placeholder="Select evidence type"
           class="w-full"
         />
@@ -106,6 +108,7 @@ import { ref, computed } from 'vue';
 import type {
   StepExecution,
   EvidenceType,
+  EvidenceRequirement,
   StepExecutionEvidenceSubmit,
 } from '@/types/workflows';
 import Label from '@/volt/Label.vue';
@@ -117,7 +120,7 @@ import Message from '@/volt/Message.vue';
 
 const props = defineProps<{
   step: StepExecution;
-  evidenceRequirements: string[];
+  evidenceRequirements: EvidenceRequirement[];
 }>();
 
 const emit = defineEmits<{
@@ -140,21 +143,26 @@ const selectedFiles = ref<File[]>([]);
 const isSubmitting = ref(false);
 const submitError = ref('');
 
-// Get evidence types from requirements, or allow all common types
 const availableEvidenceTypes = computed(() => {
+  const toOption = (type: EvidenceType, description?: string) => ({
+    value: type,
+    label: description || type,
+  });
+
+  if (props.evidenceRequirements.length > 0) {
+    return props.evidenceRequirements.map((req) =>
+      toOption(req.type, req.description),
+    );
+  }
+
   const allTypes: EvidenceType[] = [
     'document',
     'attestation',
     'screenshot',
     'link',
     'text',
   ];
-
-  if (props.evidenceRequirements.length > 0) {
-    return props.evidenceRequirements;
-  }
-
-  return allTypes;
+  return allTypes.map((type) => toOption(type));
 });
 
 const isFileEvidenceType = computed(() => {

src/views/workflow-executions/partials/StepExecutionPanel.vue

@@ -233,7 +233,7 @@
         <EvidenceSubmissionForm
           v-if="canSubmitEvidence"
           :step="step"
-          :evidence-requirements="requiredEvidenceTypes"
+          :evidence-requirements="evidenceRequirements"
           @evidence-submitted="handleEvidenceSubmitted"
         />
 

src/views/workflow-executions/partials/__tests__/EvidenceSubmissionForm.spec.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import EvidenceSubmissionForm from '../EvidenceSubmissionForm.vue';
+import type { EvidenceRequirement, StepExecution } from '@/types/workflows';
+
+const step = {
+  id: 'step-1',
+  status: 'in_progress',
+  evidence: [],
+} as unknown as StepExecution;
+
+const selectStub = {
+  props: ['options', 'optionLabel', 'optionValue', 'modelValue', 'placeholder'],
+  emits: ['update:modelValue'],
+  template: `
+    <div class="select-stub">
+      <span
+        v-for="(option, i) in options"
+        :key="i"
+        class="select-option"
+      >{{ optionLabel ? option[optionLabel] : option }}</span>
+    </div>
+  `,
+};
+
+const stubs = {
+  Select: selectStub,
+  Label: { template: '<label><slot /></label>' },
+  Textarea: { template: '<textarea />' },
+  InputText: { template: '<input />' },
+  PrimaryButton: { template: '<button><slot /></button>' },
+  Message: { template: '<div><slot /></div>' },
+};
+
+describe('EvidenceSubmissionForm', () => {
+  it('displays description from EvidenceRequirement objects in the type selector', () => {
+    const requirements: EvidenceRequirement[] = [
+      {
+        type: 'document',
+        required: true,
+        description: 'Upload policy document',
+      },
+      {
+        type: 'attestation',
+        required: false,
+        description: 'Sign off attestation',
+      },
+    ];
+
+    const wrapper = mount(EvidenceSubmissionForm, {
+      props: { step, evidenceRequirements: requirements },
+      global: { stubs },
+    });
+
+    const optionTexts = wrapper
+      .findAll('.select-option')
+      .map((o) => o.text().trim());
+
+    expect(optionTexts).toContain('Upload policy document');
+    expect(optionTexts).toContain('Sign off attestation');
+  });
+
+  it('falls back to the type name when a requirement has no description', () => {
+    const requirements: EvidenceRequirement[] = [
+      { type: 'screenshot', required: true },
+    ];
+
+    const wrapper = mount(EvidenceSubmissionForm, {
+      props: { step, evidenceRequirements: requirements },
+      global: { stubs },
+    });
+
+    const optionTexts = wrapper
+      .findAll('.select-option')
+      .map((o) => o.text().trim());
+
+    expect(optionTexts).toContain('screenshot');
+  });
+});