Skip to content

Commit

Permalink
523: UI updates for the submission steps on "Skill" & "Knowledge" Rev…
Browse files Browse the repository at this point in the history 
…iew forms (#581)

* updates for the knowledge review form
* adopt vars instead of absolute values
* adopt patternfly content component

Signed-off-by: Aditya Gidh <[email protected]>
  • Loading branch information
@adigidh
adigidh authored Feb 26, 2025
1 parent 70a1f32 commit 04b491b
Show file tree
Hide file tree
Showing 5 changed files with 323 additions and 164 deletions.
246 changes: 154 additions & 92 deletions src/components/Contribute/Knowledge/ReviewSubmission/index.tsx
View file
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
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
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

0 comments on commit 04b491b

Please sign in to comment.