Skip to content
This repository was archived by the owner on Feb 11, 2026. It is now read-only.

523: UI updates for the submission steps on "Skill" & "Knowledge" Review forms #581

Merged
vishnoianil merged 15 commits into from
Feb 26, 2025
Merged

523: UI updates for the submission steps on "Skill" & "Knowledge" Review forms #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
eae9e4a
adopting semantic html
adigidh Feb 11, 2025
94fa77f
tweak components, add styles
adigidh Feb 11, 2025
6e629c7
getting accordion functional
adigidh Feb 11, 2025
5edc73d
update with the accordion set
adigidh Feb 11, 2025
ff4c5d6
adding accordion pieces
adigidh Feb 12, 2025
8ff4603
add corresponding styles
adigidh Feb 12, 2025
65d4c80
fix linting issues
adigidh Feb 12, 2025
5650a6e
updates post git actions failures
adigidh Feb 12, 2025
e618390
address UX code review updates
adigidh Feb 13, 2025
1f83349
updates for the knowledge review form
adigidh Feb 14, 2025
6e98088
rebase and push with some comments on css file
adigidh Feb 18, 2025
a0de003
minor edits
adigidh Feb 18, 2025
24e1dca
address code review comments
adigidh Feb 20, 2025
22b1e64
adopt vars instead of absolute values
adigidh Feb 24, 2025
ff6cbdb
adopt patternfly content component
adigidh Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 154 additions & 92 deletions src/components/Contribute/Knowledge/ReviewSubmission/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,177 @@
// src/components/Contribute/Knowledge/ReviewSubmission/ReviewSubmission.tsx
import { KnowledgeFormData } from '@/types';
import { Content, ContentVariants, Form } from '@patternfly/react-core';
import { Content, ContentVariants, Form, Accordion, AccordionContent, AccordionItem, AccordionToggle } from '@patternfly/react-core';
import React from 'react';
import '../../Skill/ReviewSubmission/submission.css';

interface ReviewSubmissionProps {
knowledgeFormData: KnowledgeFormData;
isGithubMode: boolean;
}

export const ReviewSubmission: React.FC<ReviewSubmissionProps> = ({ knowledgeFormData, isGithubMode }) => {
const [expanded, setExpanded] = React.useState<{ [key: string]: boolean }>({});

const onToggle = (id: number) => {
setExpanded((prevState) => ({
...prevState,
[id]: !prevState[id]
}));
};

return (
<Form>
<Content component={ContentVariants.h2}>Review Submission</Content>
{/* Author Information */}
<p>
<strong>Author Information</strong>
</p>
<p>
<i>Name:</i> {knowledgeFormData.name}
</p>
<p>
<i>Email:</i> {knowledgeFormData.email}
</p>
<>
<Form>
<section className="review-submission-container">
<Content component={ContentVariants.h2}>Review</Content>
<Content component={ContentVariants.p}>
Review the information below and click finish to submit your skill contribution. Use the back button to make changes.
</Content>
{/* Author Information */}
<article>
<div className="info-wrapper">
<Content component={ContentVariants.p} className="submission-titles">
Contributor Information
</Content>
<Content component={ContentVariants.p} className="submission-subtitles">
Information required for a Github Developer Certificate of Origin (DCO) sign-off.
</Content>
</div>

{/* Knowledge Information */}
<h3>Knowledge Information</h3>
<p>
<strong>Knowledge Information</strong>
</p>
<p>
<i>Submission Summary:</i> {knowledgeFormData.submissionSummary}
</p>
<p>
<i>Domain:</i> {knowledgeFormData.domain}
</p>
<p>
<i>Document Outline:</i> {knowledgeFormData.documentOutline}
</p>
<div className="contributors-wrapper">
<Content component={ContentVariants.h5} className="category-titles">
Contributors
</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.name}</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.email}</Content>
</div>
</article>

{/* Knowledge Information */}
<article>
<div className="info-wrapper">
<Content component={ContentVariants.p} className="submission-titles">
Knowledge Information
</Content>
<Content component={ContentVariants.p} className="submission-subtitles">
Brief information about the Knowledge and the directory path for the QnA and Attribution files.
</Content>
</div>

{/* File Path Information */}
<p>
<strong>File Path Information</strong>
</p>
<Content component={ContentVariants.h5} className="category-titles">
Submission summary
</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.submissionSummary}</Content>
<Content component={ContentVariants.h5} className="category-titles">
Domain
</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.domain}</Content>
<Content component={ContentVariants.h5} className="category-titles">
Document Outline
</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.documentOutline}</Content>
</article>

<p>
<i>File Path:</i> {knowledgeFormData.filePath}
</p>
<article>
{/* Directory path */}
<Content component={ContentVariants.h5} className="category-titles">
Directory path
</Content>

{/* Seed Examples */}
<p>
<strong>Seed Examples</strong>
</p>
<Content component={ContentVariants.p}>{knowledgeFormData.filePath}</Content>
</article>

{knowledgeFormData.seedExamples.map((seedExample, index) => (
<div key={index}>
<strong>Seed Example {index + 1}</strong>
<p>
<i>Context:</i> {seedExample.context}
</p>
{seedExample.questionAndAnswers.map((qa, qaIndex) => (
<div key={qaIndex}>
<p>
<i>Question {qaIndex + 1}:</i> {qa.question}
</p>
<p>
<i>Answer {qaIndex + 1}:</i> {qa.answer}
</p>
{/* Seed Examples */}
<article>
<div className="info-wrapper">
<Content component={ContentVariants.p}>Seed Examples</Content>
<Content component={ContentVariants.p} className="submission-subtitles">
Data that will be used to start teaching your model.
</Content>
</div>
))}
</div>
))}

{/* Document Information */}
<p>
<strong>Document Information</strong>
</p>
{knowledgeFormData.seedExamples?.map((seedExample, index) => (
<Accordion asDefinitionList={false} className="accordion-wrapper" key={`seed-${index}`}>
<AccordionItem isExpanded={!!expanded[index]} key={`accordion-item-${index}`}>
<AccordionToggle onClick={() => onToggle(index)} id={`seed-example-toggle-${index}`} className="accordion-toggle-item">
Sample {index + 1}
</AccordionToggle>
<AccordionContent id={`seed-example-content-${index}`}>
<div className="accordion-content">
<Content component={ContentVariants.h5} className="seed-category-titles">
Context:
</Content>{' '}
{seedExample.context}
</div>
{seedExample.questionAndAnswers.map((qa, qaIndex) => (
<React.Fragment key={`qa-${index}-${qaIndex}`}>
<div className="accordion-content">
<Content component={ContentVariants.h5} className="seed-category-titles">
Question:
</Content>{' '}
{qa.question}
</div>
<div className="accordion-content">
<Content component={ContentVariants.h5} className="seed-category-titles">
Answer:
</Content>{' '}
{qa.answer}
</div>
</React.Fragment>
))}
</AccordionContent>
</AccordionItem>
</Accordion>
))}
</article>

<p>
<i>Repository URL:</i> {knowledgeFormData.knowledgeDocumentRepositoryUrl}
</p>
<p>
<i>Commit:</i> {knowledgeFormData.knowledgeDocumentCommit}
</p>
<p>
<i>Document Name:</i> {knowledgeFormData.documentName}
</p>
{/* Document Information */}
<article>
<Content component={ContentVariants.p} className="category-titles">
Document Information
</Content>
<Content component={ContentVariants.h5} className="category-titles">
Repository URL
</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.knowledgeDocumentRepositoryUrl}</Content>
<Content component={ContentVariants.h5} className="category-titles">
Commit
</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.knowledgeDocumentCommit}</Content>
<Content component={ContentVariants.h5} className="category-titles">
Name
</Content>
<Content component={ContentVariants.p}>{knowledgeFormData.documentName}</Content>
</article>

{/* Attribution Information */}
{isGithubMode && (
<div>
<p>
<strong>Attribution Information</strong>
</p>
<p>
<i>Title of Work:</i> {knowledgeFormData.titleWork}
</p>
<p>
<i>Link to Work:</i> {knowledgeFormData.linkWork}
</p>
<p>
<i>Revision:</i> {knowledgeFormData.revision}
</p>
<p>
<i>License of Work:</i> {knowledgeFormData.licenseWork}
</p>
<p>
<i>Creators:</i> {knowledgeFormData.creators}
</p>
</div>
)}
</Form>
<article className="info-wrapper">
{/* Attribution Information */}
{isGithubMode && (
<div>
<Content component={ContentVariants.p}>
<strong>Attribution Information</strong>
</Content>
<Content component={ContentVariants.p}>
<i>Title of Work:</i> {knowledgeFormData.titleWork}
</Content>
<Content component={ContentVariants.p}>
<i>Link to Work:</i> {knowledgeFormData.linkWork}
</Content>
<Content component={ContentVariants.p}>
<i>Revision:</i> {knowledgeFormData.revision}
</Content>
<Content component={ContentVariants.p}>
<i>License of Work:</i> {knowledgeFormData.licenseWork}
</Content>
<Content component={ContentVariants.p}>
<i>Creators:</i> {knowledgeFormData.creators}
</Content>
</div>
)}
</article>
</section>
</Form>
</>
);
};

Expand Down
4 changes: 2 additions & 2 deletions src/components/Contribute/Skill/Github/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,15 +437,15 @@ export const SkillFormGithub: React.FunctionComponent<SkillFormProps> = ({ skill
<PageBreadcrumb>
<Breadcrumb>
<BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
<BreadcrumbItem isActive>Skill Contribution</BreadcrumbItem>
<BreadcrumbItem isActive>Create Skill Contribution</BreadcrumbItem>
</Breadcrumb>
</PageBreadcrumb>

<PageSection className="skill-form">
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<FlexItem>
<Title headingLevel="h1" size="2xl" style={{ paddingTop: '10px' }}>
Skill Contribution
Create Skill Contribution
</Title>
</FlexItem>
<FlexItem>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Contribute/Skill/Native/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,15 +385,15 @@ export const SkillFormNative: React.FunctionComponent<SkillFormProps> = ({ skill
<PageBreadcrumb>
<Breadcrumb>
<BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
<BreadcrumbItem isActive>Skill Contribution</BreadcrumbItem>
<BreadcrumbItem isActive>Create Skill Contribution</BreadcrumbItem>
</Breadcrumb>
</PageBreadcrumb>

<PageSection className="skill-form">
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<FlexItem>
<Title headingLevel="h1" size="2xl" style={{ paddingTop: '10px' }}>
Skill Contribution
Create Skill Contribution
</Title>
</FlexItem>
<FlexItem>
Expand Down
Loading