Skip to content

Commit ddaa67a

Browse files
vishnoianilvishnoianil
committed
Add support to allow users to add additional seed examples for knowledge contribution
Also fixes: - Show change modal styling - Improved the review content style for better readability Signed-off-by: Anil Vishnoi <[email protected]>
1 parent 9616e39 commit ddaa67a

File tree

4 files changed

+110
-60
lines changed

4 files changed

+110
-60
lines changed

‎src/components/Contribute/Knowledge/Native/KnowledgeSeedExampleNative/KnowledgeSeedExampleNative.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { FormFieldGroupHeader } from '@patternfly/react-core/dist/dynamic/compon
55
import KnowledgeQuestionAnswerPairsNative from '../KnowledgeQuestionAnswerPairsNative/KnowledgeQuestionAnswerPairs';
66
import type { KnowledgeSeedExample } from '@/types';
77
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
8+
import { Button } from '@patternfly/react-core';
9+
import { PlusCircleIcon, TrashIcon } from '@patternfly/react-icons';
810

911
interface Props {
1012
seedExamples: KnowledgeSeedExample[];
@@ -16,6 +18,8 @@ interface Props {
1618
handleAnswerBlur: (seedExampleIndex: number, questionAndAnswerIndex: number) => void;
1719
toggleSeedExampleExpansion?: (index: number) => void;
1820
addDocumentInfo: (repoUrl: string, commitSha: string, docName: string) => void;
21+
addSeedExample: () => void;
22+
deleteSeedExample: (seedExampleIndex: number) => void;
1923
repositoryUrl: string;
2024
commitSha: string;
2125
}
@@ -30,6 +34,8 @@ const KnowledgeSeedExampleNative: React.FC<Props> = ({
3034
handleAnswerBlur,
3135
toggleSeedExampleExpansion = () => {},
3236
addDocumentInfo,
37+
addSeedExample,
38+
deleteSeedExample,
3339
repositoryUrl,
3440
commitSha
3541
}) => {
@@ -60,7 +66,12 @@ const KnowledgeSeedExampleNative: React.FC<Props> = ({
6066
{seedExamples.map((seedExample: KnowledgeSeedExample, seedExampleIndex: number) => (
6167
<AccordionItem key={seedExampleIndex} isExpanded={seedExample.isExpanded}>
6268
<AccordionToggle onClick={() => toggleSeedExampleExpansion(seedExampleIndex)} id={`seed-example-toggle-${seedExampleIndex}`}>
63-
Seed Example {seedExampleIndex + 1} {seedExample.immutable && <span style={{ color: 'red' }}>*</span>}
69+
<span style={{ display: 'flex', alignItems: 'normal', justifyContent: 'space-between', width: '100%' }}>
70+
Seed Example {seedExampleIndex + 1} {seedExample.immutable && '*'}
71+
{!seedExample.immutable && (
72+
<Button icon={<TrashIcon />} variant="plain" aria-label="Remove" onClick={() => deleteSeedExample(seedExampleIndex)} />
73+
)}
74+
</span>
6475
</AccordionToggle>
6576
<AccordionContent id={`seed-example-content-${seedExampleIndex}`}>
6677
<KnowledgeQuestionAnswerPairsNative
@@ -80,6 +91,11 @@ const KnowledgeSeedExampleNative: React.FC<Props> = ({
8091
</AccordionItem>
8192
))}
8293
</Accordion>
94+
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
95+
<Button icon={<PlusCircleIcon />} variant="link" type="button" onClick={addSeedExample}>
96+
Add Seed Example
97+
</Button>
98+
</div>
8399
</div>
84100
);
85101
};

‎src/components/Contribute/Knowledge/Native/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,19 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
414414
});
415415
};
416416

417+
const addSeedExample = (): void => {
418+
const seedExample = createEmptySeedExample();
419+
seedExample.immutable = false;
420+
seedExample.isExpanded = true;
421+
setSeedExamples([...seedExamples, seedExample]);
422+
setDisableAction(true);
423+
};
424+
425+
const deleteSeedExample = (seedExampleIndex: number): void => {
426+
setSeedExamples(seedExamples.filter((_, index: number) => index !== seedExampleIndex));
427+
setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
428+
};
429+
417430
const onCloseActionGroupAlert = () => {
418431
setActionGroupAlertContent(undefined);
419432
};
@@ -625,6 +638,8 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
625638
toggleSeedExampleExpansion(idx);
626639
}}
627640
addDocumentInfo={addDocumentInfoHandler}
641+
addSeedExample={addSeedExample}
642+
deleteSeedExample={deleteSeedExample}
628643
repositoryUrl={knowledgeDocumentRepositoryUrl}
629644
commitSha={knowledgeDocumentCommit}
630645
/>

‎src/components/Contribute/Knowledge/ReviewSubmission/index.tsx‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// src/components/Contribute/Knowledge/ReviewSubmission/ReviewSubmission.tsx
22
import { KnowledgeFormData } from '@/types';
3+
import { Content, ContentVariants } from '@patternfly/react-core';
34
import React from 'react';
45

56
interface ReviewSubmissionProps {
@@ -9,84 +10,100 @@ interface ReviewSubmissionProps {
910
export const ReviewSubmission: React.FC<ReviewSubmissionProps> = ({ knowledgeFormData }) => {
1011
return (
1112
<div>
12-
<h2>Review Submission</h2>
13-
13+
<Content component={ContentVariants.h2}>Review Submission</Content>
1414
{/* Author Information */}
15-
<h3>Author Information</h3>
1615
<p>
17-
<strong>Name:</strong> {knowledgeFormData.name}
16+
<strong>Author Information</strong>
17+
</p>
18+
<p>
19+
<i>Name:</i> {knowledgeFormData.name}
1820
</p>
1921
<p>
20-
<strong>Email:</strong> {knowledgeFormData.email}
22+
<i>Email:</i> {knowledgeFormData.email}
2123
</p>
2224

2325
{/* Knowledge Information */}
2426
<h3>Knowledge Information</h3>
2527
<p>
26-
<strong>Submission Summary:</strong> {knowledgeFormData.submissionSummary}
28+
<strong>Knowledge Information</strong>
29+
</p>
30+
<p>
31+
<i>Submission Summary:</i> {knowledgeFormData.submissionSummary}
2732
</p>
2833
<p>
29-
<strong>Domain:</strong> {knowledgeFormData.domain}
34+
<i>Domain:</i> {knowledgeFormData.domain}
3035
</p>
3136
<p>
32-
<strong>Document Outline:</strong> {knowledgeFormData.documentOutline}
37+
<i>Document Outline:</i> {knowledgeFormData.documentOutline}
3338
</p>
3439

3540
{/* File Path Information */}
36-
<h3>File Path Information</h3>
3741
<p>
38-
<strong>File Path:</strong> {knowledgeFormData.filePath}
42+
<strong>File Path Information</strong>
43+
</p>
44+
45+
<p>
46+
<i>File Path:</i> {knowledgeFormData.filePath}
3947
</p>
4048

4149
{/* Seed Examples */}
42-
<h3>Seed Examples</h3>
50+
<p>
51+
<strong>Seed Examples</strong>
52+
</p>
53+
4354
{knowledgeFormData.seedExamples.map((seedExample, index) => (
4455
<div key={index}>
45-
<h4>Seed Example {index + 1}</h4>
56+
<strong>Seed Example {index + 1}</strong>
4657
<p>
47-
<strong>Context:</strong> {seedExample.context}
58+
<i>Context:</i> {seedExample.context}
4859
</p>
4960
{seedExample.questionAndAnswers.map((qa, qaIndex) => (
5061
<div key={qaIndex}>
5162
<p>
52-
<strong>Question {qaIndex + 1}:</strong> {qa.question}
63+
<i>Question {qaIndex + 1}:</i> {qa.question}
5364
</p>
5465
<p>
55-
<strong>Answer {qaIndex + 1}:</strong> {qa.answer}
66+
<i>Answer {qaIndex + 1}:</i> {qa.answer}
5667
</p>
5768
</div>
5869
))}
5970
</div>
6071
))}
6172

6273
{/* Document Information */}
63-
<h3>Document Information</h3>
6474
<p>
65-
<strong>Repository URL:</strong> {knowledgeFormData.knowledgeDocumentRepositoryUrl}
75+
<strong>Document Information</strong>
76+
</p>
77+
78+
<p>
79+
<i>Repository URL:</i> {knowledgeFormData.knowledgeDocumentRepositoryUrl}
6680
</p>
6781
<p>
68-
<strong>Commit:</strong> {knowledgeFormData.knowledgeDocumentCommit}
82+
<i>Commit:</i> {knowledgeFormData.knowledgeDocumentCommit}
6983
</p>
7084
<p>
71-
<strong>Document Name:</strong> {knowledgeFormData.documentName}
85+
<i>Document Name:</i> {knowledgeFormData.documentName}
7286
</p>
7387

7488
{/* Attribution Information */}
75-
<h3>Attribution Information</h3>
7689
<p>
77-
<strong>Title of Work:</strong> {knowledgeFormData.titleWork}
90+
<strong>Attribution Information</strong>
91+
</p>
92+
93+
<p>
94+
<i>Title of Work:</i> {knowledgeFormData.titleWork}
7895
</p>
7996
<p>
80-
<strong>Link to Work:</strong> {knowledgeFormData.linkWork}
97+
<i>Link to Work:</i> {knowledgeFormData.linkWork}
8198
</p>
8299
<p>
83-
<strong>Revision:</strong> {knowledgeFormData.revision}
100+
<i>Revision:</i> {knowledgeFormData.revision}
84101
</p>
85102
<p>
86-
<strong>License of Work:</strong> {knowledgeFormData.licenseWork}
103+
<i>License of Work:</i> {knowledgeFormData.licenseWork}
87104
</p>
88105
<p>
89-
<strong>Creators:</strong> {knowledgeFormData.creators}
106+
<i>Creators:</i> {knowledgeFormData.creators}
90107
</p>
91108
</div>
92109
);

‎src/components/Dashboard/Native/dashboard.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -421,41 +421,43 @@ const DashboardNative: React.FunctionComponent = () => {
421421
aria-labelledby="changes-contribution-modal-title"
422422
aria-describedby="changes-contribution-body-variant"
423423
>
424-
{diffData?.changes.length ? (
425-
<ul style={{ listStyle: 'none', paddingLeft: '0' }}>
426-
{diffData.changes.map((change) => (
427-
<li key={`${change.file}-${change.commitSha}`} style={{ marginBottom: '1rem' }}>
428-
<div>
429-
<strong>{change.file}</strong> - <em>{change.status}</em> - Commit SHA: {change.commitSha}
430-
</div>
431-
{change.status !== 'deleted' && change.content && (
432-
<ExpandableSection
433-
toggleText={expandedFiles[change.file] ? 'Hide file contents' : 'Show file contents'}
434-
onToggle={() => toggleFileContent(change.file)}
435-
isExpanded={expandedFiles[change.file] || false}
436-
>
437-
<pre
438-
style={{
439-
whiteSpace: 'pre-wrap',
440-
wordBreak: 'break-word',
441-
backgroundColor: '#f5f5f5',
442-
padding: '10px',
443-
borderRadius: '4px',
444-
maxHeight: '700px',
445-
overflowY: 'auto',
446-
userSelect: 'text'
447-
}}
424+
<ModalBody>
425+
{diffData?.changes.length ? (
426+
<ul style={{ listStyle: 'none', paddingLeft: '0' }}>
427+
{diffData.changes.map((change) => (
428+
<li key={`${change.file}-${change.commitSha}`} style={{ marginBottom: '1rem' }}>
429+
<div>
430+
<strong>{change.file}</strong> - <em>{change.status}</em> - Commit SHA: {change.commitSha}
431+
</div>
432+
{change.status !== 'deleted' && change.content && (
433+
<ExpandableSection
434+
toggleText={expandedFiles[change.file] ? 'Hide file contents' : 'Show file contents'}
435+
onToggle={() => toggleFileContent(change.file)}
436+
isExpanded={expandedFiles[change.file] || false}
448437
>
449-
{change.content}
450-
</pre>
451-
</ExpandableSection>
452-
)}
453-
</li>
454-
))}
455-
</ul>
456-
) : (
457-
<p>No differences found.</p>
458-
)}
438+
<pre
439+
style={{
440+
whiteSpace: 'pre-wrap',
441+
wordBreak: 'break-word',
442+
backgroundColor: '#f5f5f5',
443+
padding: '10px',
444+
borderRadius: '4px',
445+
maxHeight: '700px',
446+
overflowY: 'auto',
447+
userSelect: 'text'
448+
}}
449+
>
450+
{change.content}
451+
</pre>
452+
</ExpandableSection>
453+
)}
454+
</li>
455+
))}
456+
</ul>
457+
) : (
458+
<p>No differences found.</p>
459+
)}
460+
</ModalBody>
459461
</Modal>
460462
<Modal
461463
variant={ModalVariant.small}

0 commit comments

Comments
 (0)