diff --git a/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/Content.tsx b/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/Content.tsx index c9a3116..9433e04 100644 --- a/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/Content.tsx +++ b/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/Content.tsx @@ -11,19 +11,23 @@ governing permissions and limitations under the License. */ import React from "react"; -import { Heading, Text, Divider } from "@react-spectrum/s2"; +import { Button, Heading, Text, Divider } from "@react-spectrum/s2"; import { Experience } from "@adobe/genstudio-extensibility-sdk"; interface ContentProps { experience: Experience; + flaggedFieldName?: string; + onApplySuggestion?: (fieldName: string) => void; } /** * Content component that displays the details of an experience. * @param experience - The experience to display + * @param flaggedFieldName - The field name that has been flagged + * @param onApplySuggestion - Callback to apply the suggestion for a flagged field * @returns The Content component */ -export default function Content({ experience }: ContentProps) { +export default function Content({ experience, flaggedFieldName, onApplySuggestion }: ContentProps) { if (!experience) return null; return (
@@ -32,25 +36,55 @@ export default function Content({ experience }: ContentProps) { ID: {experience.id} Fields - {Object.entries(experience.experienceFields).map(([key, field]) => ( -
- - {field.fieldName} - - {field.fieldValue} - {field.keywords && ( - keywords: {field.keywords.join(", ")} - )} - {field.additionalMetadata && ( + {Object.entries(experience.experienceFields).map(([key, field]) => { + const isFlagged = field.fieldName === flaggedFieldName; + return ( +
- additionalMetadata: {JSON.stringify(field.additionalMetadata)} + {field.fieldName} + {isFlagged && ( + + ⚠ Needs review + + )} - )} -
- ))} + {field.fieldValue} + {field.keywords && ( + keywords: {field.keywords.join(", ")} + )} + {field.additionalMetadata && ( + + additionalMetadata: {JSON.stringify(field.additionalMetadata)} + + )} + {isFlagged && onApplySuggestion && ( +
+ + Suggestion: "This is a suggested field value from the Validation App!" + + +
+ )} +
+ ); + })}
); diff --git a/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/index.tsx b/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/index.tsx index 29503e3..1cca767 100644 --- a/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/index.tsx +++ b/genstudio-create-validation/src/genstudiopem/web-src/src/components/ValidationPanel/index.tsx @@ -37,6 +37,7 @@ export default function ValidationPanel(): JSX.Element { const [generationContext, setGenerationContext] = useState(null); const [isLoading, setIsLoading] = useState(false); + const [flaggedFieldName, setFlaggedFieldName] = useState(null); /** * Polls for experiences from the host. @@ -98,8 +99,34 @@ export default function ValidationPanel(): JSX.Element { * @returns void */ const handleRunClaimsCheck = (): void => { - if (experiences && selectedExperienceIndex !== null) - setSelectedExperience(experiences[selectedExperienceIndex]); + if (experiences && selectedExperienceIndex !== null) { + const experience = experiences[selectedExperienceIndex]; + setSelectedExperience(experience); + const fieldNames = Object.keys(experience.experienceFields); + if (fieldNames.length > 0) { + // Filter out image fields from the fieldNames array before selecting one to flag + const nonImageFieldNames = fieldNames.filter( + (name) => !/image/i.test(name) + ); + if (nonImageFieldNames.length > 0) { + const randomFieldName = nonImageFieldNames[Math.floor(Math.random() * nonImageFieldNames.length)]; + setFlaggedFieldName(randomFieldName); + } else { + // No non-image field found; do not flag any field + setFlaggedFieldName(null); + } + } + } + }; + + const handleApplySuggestion = (field: string): void => { + if (!guestConnection || !selectedExperience) return; + ValidationExtensionService.updateField(guestConnection, { + experienceId: selectedExperience.id, + field, + value: "This is a suggested field value from the Validation App!", + }); + setFlaggedFieldName(null); }; if (isLoading) return ; @@ -144,7 +171,11 @@ export default function ValidationPanel(): JSX.Element { width: "100%", }} > - + )}