Skip to content

Commit ddbd35e

Browse files
vishnoianilvishnoianil
authored
Merge pull request #743 from jeff-phillips-18/size-warnings
Update word count overage to a warning rather than error
2 parents 29abb7a + 2def1dc commit ddbd35e

File tree

8 files changed

+174
-121
lines changed

8 files changed

+174
-121
lines changed

‎src/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeFileSelectModal.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
import { KnowledgeFile } from '@/types';
2222
import { ExclamationCircleIcon } from '@patternfly/react-icons';
2323
import { getWordCount } from '@/components/Contribute/Utils/contributionUtils';
24+
import { MAX_CONTEXT_WORDS } from '@/components/Contribute/Utils/seedExampleUtils';
2425

2526
interface Props {
2627
knowledgeFile: KnowledgeFile;
@@ -110,7 +111,7 @@ const KnowledgeFileSelectModal: React.FC<Props> = ({ knowledgeFile, initialSelec
110111
<ModalHeader
111112
labelId="select-context-title"
112113
title="Select Context"
113-
description="To create a context, highlight 500 words or less. Selecting a combination of simple and complex contexts you can help prepare your model to handle various needs."
114+
description={`To create a context, highlight up to ${MAX_CONTEXT_WORDS} words (recommended). Selecting a combination of simple and complex contexts you can help prepare your model to handle various needs.`}
114115
/>
115116
<ModalBody id="select-context-body" style={{ paddingTop: 0, marginTop: MdSpacer.var }}>
116117
<Content
@@ -130,14 +131,14 @@ const KnowledgeFileSelectModal: React.FC<Props> = ({ knowledgeFile, initialSelec
130131
</ModalBody>
131132
<HelperText style={{ paddingLeft: LgSpacer.var, paddingTop: XsSpacer.var }}>
132133
<HelperTextItem
133-
icon={selectedWordCount > 500 ? <ExclamationCircleIcon /> : undefined}
134-
variant={selectedWordCount > 500 ? ValidatedOptions.error : ValidatedOptions.default}
134+
icon={selectedWordCount > MAX_CONTEXT_WORDS ? <ExclamationCircleIcon /> : undefined}
135+
variant={selectedWordCount > MAX_CONTEXT_WORDS ? ValidatedOptions.warning : ValidatedOptions.default}
135136
>
136-
{selectedWordCount} / 500 words
137+
{`${selectedWordCount} / ${MAX_CONTEXT_WORDS} words${selectedWordCount > MAX_CONTEXT_WORDS ? ` (${selectedWordCount - MAX_CONTEXT_WORDS} over the recommended limit)` : ''}`}
137138
</HelperTextItem>
138139
</HelperText>
139140
<ModalFooter>
140-
<Button variant="primary" onClick={() => handleUseSelectedText()} isDisabled={selectedWordCount === 0 || selectedWordCount > 500}>
141+
<Button variant="primary" onClick={() => handleUseSelectedText()} isDisabled={selectedWordCount === 0}>
141142
Create context
142143
</Button>
143144
<Button variant="link" onClick={handleCloseModal}>

‎src/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeSeedExampleCard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -395,8 +395,8 @@ const KnowledgeSeedExampleCard: React.FC<Props> = ({
395395
{wordCount > MAX_CONTRIBUTION_Q_AND_A_WORDS ? (
396396
<FormHelperText>
397397
<HelperText className="q-and-a-field__text-help">
398-
<HelperTextItem icon={<ExclamationCircleIcon />} variant={ValidatedOptions.error}>
399-
{`${wordCount}/${MAX_CONTRIBUTION_Q_AND_A_WORDS} words total (${wordCount - MAX_CONTRIBUTION_Q_AND_A_WORDS} over limit)`}
398+
<HelperTextItem icon={<ExclamationCircleIcon />} variant={ValidatedOptions.warning}>
399+
{`${wordCount}/${MAX_CONTRIBUTION_Q_AND_A_WORDS} words total (${wordCount - MAX_CONTRIBUTION_Q_AND_A_WORDS} over the recommended limit)`}
400400
</HelperTextItem>
401401
</HelperText>
402402
</FormHelperText>
@@ -418,14 +418,14 @@ const KnowledgeSeedExampleCard: React.FC<Props> = ({
418418
{areAllQuestionAnswerPairsValid ? (
419419
wordCount > 0 ? (
420420
<Alert
421-
title={`${wordCount}/${MAX_CONTRIBUTION_Q_AND_A_WORDS} words total${wordCount > MAX_CONTRIBUTION_Q_AND_A_WORDS ? `(${wordCount - MAX_CONTRIBUTION_Q_AND_A_WORDS} over limit)` : ''}`}
421+
title={`${wordCount}/${MAX_CONTRIBUTION_Q_AND_A_WORDS} words total${wordCount > MAX_CONTRIBUTION_Q_AND_A_WORDS ? ` (${wordCount - MAX_CONTRIBUTION_Q_AND_A_WORDS} over the recommended limit)` : ''}`}
422422
isPlain
423423
isInline
424-
variant={wordCount > MAX_CONTRIBUTION_Q_AND_A_WORDS ? 'danger' : 'info'}
424+
variant={wordCount > MAX_CONTRIBUTION_Q_AND_A_WORDS ? 'warning' : 'info'}
425425
/>
426426
) : (
427427
<Alert
428-
title={`The combined word count of the three question-and-answer pairs in each seed example must not exceed ${MAX_CONTRIBUTION_Q_AND_A_WORDS} words.`}
428+
title={`The recommended combined word count of each seed example's question-and-answer pairs is ${MAX_CONTRIBUTION_Q_AND_A_WORDS} words or less.`}
429429
isPlain
430430
isInline
431431
variant="info"

‎src/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeSeedExamples.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
&.pf-m-info {
1010
background-color: var(--pf-t--color--blue--10);
1111
}
12+
&.pf-m-warning {
13+
background-color: #fdf7e7;
14+
}
1215
&.pf-m-danger {
1316
background-color: #faeae8;
1417
}

‎src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import './knowledge.css';
55
import { useSession } from 'next-auth/react';
66
import DocumentInformation from '@/components/Contribute/Knowledge/DocumentInformation/DocumentInformation';
77
import KnowledgeSeedExamples from '@/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeSeedExamples';
8-
import { ContributionFormData, KnowledgeEditFormData, KnowledgeFormData, KnowledgeYamlData } from '@/types';
8+
import { ContributionFormData, KnowledgeEditFormData, KnowledgeFormData, KnowledgeSeedExample, KnowledgeYamlData } from '@/types';
99
import { useRouter } from 'next/navigation';
1010
import { Button, ValidatedOptions } from '@patternfly/react-core';
1111
import { devLog } from '@/utils/devlog';
@@ -228,6 +228,12 @@ export const KnowledgeWizard: React.FunctionComponent<KnowledgeFormProps> = ({ k
228228
contributionFormData={knowledgeFormData}
229229
isGithubMode={isGithubMode}
230230
seedExamples={<KnowledgeSeedExamplesReviewSection seedExamples={knowledgeFormData.seedExamples} />}
231+
onUpdateSeedExamples={(seedExamples) =>
232+
setKnowledgeFormData((prev) => ({
233+
...prev,
234+
seedExamples: seedExamples as KnowledgeSeedExample[]
235+
}))
236+
}
231237
/>
232238
),
233239
status: StepStatus.Default

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

Lines changed: 117 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,148 @@
11
// src/components/Contribute/ReviewSubmission/ReviewSubmission.tsx
22
import React from 'react';
3-
import { ContributionFormData, KnowledgeFormData } from '@/types';
3+
import { ContributionFormData, KnowledgeFormData, KnowledgeSeedExample, SkillFormData, SkillSeedExample } from '@/types';
44
import { Flex, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, FlexItem } from '@patternfly/react-core';
55
import WizardPageHeader from '@/components/Common/WizardPageHeader';
66
import ReviewSection from '@/components/Contribute/ReviewSubmission/ReviewSection';
7+
import { getValidatedKnowledgeSeedExamples, getValidatedSkillSeedExamples } from '@/components/Contribute/Utils/validationUtils';
78

89
interface ReviewSubmissionProps {
910
contributionFormData: ContributionFormData;
1011
seedExamples: React.ReactNode;
1112
isSkillContribution: boolean;
1213
isGithubMode: boolean;
14+
onUpdateSeedExamples: (seedExamples: KnowledgeSeedExample[] | SkillSeedExample[]) => void;
1315
}
1416

15-
export const ReviewSubmission: React.FC<ReviewSubmissionProps> = ({ contributionFormData, seedExamples, isSkillContribution, isGithubMode }) => (
16-
<Flex direction={{ default: 'column' }} gap={{ default: 'gapMd' }}>
17-
<FlexItem>
18-
<WizardPageHeader title="Review" description={`Confirm the details of your ${isSkillContribution ? 'skill' : 'knowledge'} contribution.`} />
19-
</FlexItem>
20-
<FlexItem>
21-
<Flex direction={{ default: 'column' }} gap={{ default: 'gapXl' }}>
22-
{/* Author Information */}
23-
<FlexItem>
24-
<ReviewSection
25-
title="Contributor details"
26-
descriptionText="Information required for a Github Developer Certificate of Origin (DCO) sign-off."
27-
descriptionItems={[
28-
<DescriptionListGroup key="contributors">
29-
<DescriptionListTerm>Contributors</DescriptionListTerm>
30-
<DescriptionListDescription>
31-
<div>{contributionFormData.name}</div>
32-
<div>{contributionFormData.email}</div>
33-
</DescriptionListDescription>
34-
</DescriptionListGroup>
35-
]}
36-
/>
37-
</FlexItem>
17+
export const ReviewSubmission: React.FC<ReviewSubmissionProps> = ({
18+
contributionFormData,
19+
seedExamples,
20+
isSkillContribution,
21+
isGithubMode,
22+
onUpdateSeedExamples
23+
}) => {
24+
React.useEffect(() => {
25+
if (!isSkillContribution) {
26+
onUpdateSeedExamples(getValidatedKnowledgeSeedExamples(contributionFormData as KnowledgeFormData));
27+
return;
28+
}
29+
onUpdateSeedExamples(getValidatedSkillSeedExamples(contributionFormData as SkillFormData));
30+
// Don't update on form data changes
31+
// eslint-disable-next-line react-hooks/exhaustive-deps
32+
}, [isSkillContribution]);
3833

39-
{/* Knowledge/Skill Information */}
40-
<FlexItem>
41-
<ReviewSection
42-
title="Contribution information"
43-
descriptionText="Brief summary of your contribution, and the directory path for your reference documents."
44-
descriptionItems={[
45-
<DescriptionListGroup key="submission-summary">
46-
<DescriptionListTerm>Contribution summary</DescriptionListTerm>
47-
<DescriptionListDescription>
48-
<div>{contributionFormData.submissionSummary}</div>
49-
</DescriptionListDescription>
50-
</DescriptionListGroup>,
51-
<DescriptionListGroup key="file-path">
52-
<DescriptionListTerm>Directory path</DescriptionListTerm>
53-
<DescriptionListDescription>
54-
<div>{contributionFormData.filePath}</div>
55-
</DescriptionListDescription>
56-
</DescriptionListGroup>
57-
]}
58-
/>
59-
</FlexItem>
60-
61-
{/* Attribution Information */}
62-
{isGithubMode ? (
34+
return (
35+
<Flex direction={{ default: 'column' }} gap={{ default: 'gapMd' }}>
36+
<FlexItem>
37+
<WizardPageHeader title="Review" description={`Confirm the details of your ${isSkillContribution ? 'skill' : 'knowledge'} contribution.`} />
38+
</FlexItem>
39+
<FlexItem>
40+
<Flex direction={{ default: 'column' }} gap={{ default: 'gapXl' }}>
41+
{/* Author Information */}
6342
<FlexItem>
6443
<ReviewSection
65-
title="Source attribution"
44+
title="Contributor details"
45+
descriptionText="Information required for a Github Developer Certificate of Origin (DCO) sign-off."
6646
descriptionItems={[
67-
<DescriptionListGroup key="title-work">
68-
<DescriptionListTerm>Title</DescriptionListTerm>
47+
<DescriptionListGroup key="contributors">
48+
<DescriptionListTerm>Contributors</DescriptionListTerm>
6949
<DescriptionListDescription>
70-
<div>{contributionFormData.titleWork}</div>
50+
<div>{contributionFormData.name}</div>
51+
<div>{contributionFormData.email}</div>
7152
</DescriptionListDescription>
72-
</DescriptionListGroup>,
73-
...(!isSkillContribution
74-
? [
75-
<DescriptionListGroup key="work-link">
76-
<DescriptionListTerm>Link to work</DescriptionListTerm>
77-
<DescriptionListDescription>
78-
<div>{(contributionFormData as KnowledgeFormData).linkWork}</div>
79-
</DescriptionListDescription>
80-
</DescriptionListGroup>
81-
]
82-
: []),
83-
...(!isSkillContribution
84-
? [
85-
<DescriptionListGroup key="revision">
86-
<DescriptionListTerm>Revision</DescriptionListTerm>
87-
<DescriptionListDescription>
88-
<div>{(contributionFormData as KnowledgeFormData).revision}</div>
89-
</DescriptionListDescription>
90-
</DescriptionListGroup>
91-
]
92-
: []),
93-
<DescriptionListGroup key="license">
94-
<DescriptionListTerm>License of the work</DescriptionListTerm>
53+
</DescriptionListGroup>
54+
]}
55+
/>
56+
</FlexItem>
57+
58+
{/* Knowledge/Skill Information */}
59+
<FlexItem>
60+
<ReviewSection
61+
title="Contribution information"
62+
descriptionText="Brief summary of your contribution, and the directory path for your reference documents."
63+
descriptionItems={[
64+
<DescriptionListGroup key="submission-summary">
65+
<DescriptionListTerm>Contribution summary</DescriptionListTerm>
9566
<DescriptionListDescription>
96-
<div>{contributionFormData.licenseWork}</div>
67+
<div>{contributionFormData.submissionSummary}</div>
9768
</DescriptionListDescription>
9869
</DescriptionListGroup>,
99-
<DescriptionListGroup key="creators">
100-
<DescriptionListTerm>Authors</DescriptionListTerm>
70+
<DescriptionListGroup key="file-path">
71+
<DescriptionListTerm>Directory path</DescriptionListTerm>
10172
<DescriptionListDescription>
102-
<div>{contributionFormData.creators}</div>
73+
<div>{contributionFormData.filePath}</div>
10374
</DescriptionListDescription>
10475
</DescriptionListGroup>
10576
]}
10677
/>
10778
</FlexItem>
108-
) : null}
10979

110-
{/* Seed Examples */}
111-
<FlexItem>
112-
<ReviewSection
113-
title="Seed data"
114-
descriptionText="Data that will be used to start teaching your model."
115-
descriptionItems={[
116-
<DescriptionListGroup key="examples">
117-
<DescriptionListTerm>Examples</DescriptionListTerm>
118-
<DescriptionListDescription>{seedExamples}</DescriptionListDescription>
119-
</DescriptionListGroup>
120-
]}
121-
/>
122-
</FlexItem>
123-
</Flex>
124-
</FlexItem>
125-
</Flex>
126-
);
80+
{/* Attribution Information */}
81+
{isGithubMode ? (
82+
<FlexItem>
83+
<ReviewSection
84+
title="Source attribution"
85+
descriptionItems={[
86+
<DescriptionListGroup key="title-work">
87+
<DescriptionListTerm>Title</DescriptionListTerm>
88+
<DescriptionListDescription>
89+
<div>{contributionFormData.titleWork}</div>
90+
</DescriptionListDescription>
91+
</DescriptionListGroup>,
92+
...(!isSkillContribution
93+
? [
94+
<DescriptionListGroup key="work-link">
95+
<DescriptionListTerm>Link to work</DescriptionListTerm>
96+
<DescriptionListDescription>
97+
<div>{(contributionFormData as KnowledgeFormData).linkWork}</div>
98+
</DescriptionListDescription>
99+
</DescriptionListGroup>
100+
]
101+
: []),
102+
...(!isSkillContribution
103+
? [
104+
<DescriptionListGroup key="revision">
105+
<DescriptionListTerm>Revision</DescriptionListTerm>
106+
<DescriptionListDescription>
107+
<div>{(contributionFormData as KnowledgeFormData).revision}</div>
108+
</DescriptionListDescription>
109+
</DescriptionListGroup>
110+
]
111+
: []),
112+
<DescriptionListGroup key="license">
113+
<DescriptionListTerm>License of the work</DescriptionListTerm>
114+
<DescriptionListDescription>
115+
<div>{contributionFormData.licenseWork}</div>
116+
</DescriptionListDescription>
117+
</DescriptionListGroup>,
118+
<DescriptionListGroup key="creators">
119+
<DescriptionListTerm>Authors</DescriptionListTerm>
120+
<DescriptionListDescription>
121+
<div>{contributionFormData.creators}</div>
122+
</DescriptionListDescription>
123+
</DescriptionListGroup>
124+
]}
125+
/>
126+
</FlexItem>
127+
) : null}
128+
129+
{/* Seed Examples */}
130+
<FlexItem>
131+
<ReviewSection
132+
title="Seed data"
133+
descriptionText="Data that will be used to start teaching your model."
134+
descriptionItems={[
135+
<DescriptionListGroup key="examples">
136+
<DescriptionListTerm>Examples</DescriptionListTerm>
137+
<DescriptionListDescription>{seedExamples}</DescriptionListDescription>
138+
</DescriptionListGroup>
139+
]}
140+
/>
141+
</FlexItem>
142+
</Flex>
143+
</FlexItem>
144+
</Flex>
145+
);
146+
};
127147

128148
export default ReviewSubmission;

‎src/components/Contribute/Skill/SkillWizard/SkillWizard.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
66
import { ValidatedOptions, Button } from '@patternfly/react-core';
77
import { devLog } from '@/utils/devlog';
88
import { SkillSchemaVersion } from '@/types/const';
9-
import { ContributionFormData, SkillEditFormData, SkillFormData, SkillYamlData } from '@/types';
9+
import { ContributionFormData, SkillEditFormData, SkillFormData, SkillSeedExample, SkillYamlData } from '@/types';
1010
import { ActionGroupAlertContent } from '@/components/Contribute/types';
1111
import { isAttributionInformationValid, isSkillSeedExamplesValid, isDetailsValid } from '@/components/Contribute/Utils/validationUtils';
1212
import {
@@ -150,6 +150,7 @@ export const SkillWizard: React.FunctionComponent<Props> = ({ skillEditFormData,
150150
isSkillContribution
151151
isGithubMode={isGithubMode}
152152
seedExamples={<SkillSeedExamplesReviewSection seedExamples={skillFormData.seedExamples} />}
153+
onUpdateSeedExamples={(seedExamples) => setSkillFormData((prev) => ({ ...prev, seedExamples: seedExamples as SkillSeedExample[] }))}
153154
/>
154155
),
155156
status: StepStatus.Default

‎src/components/Contribute/Utils/seedExampleUtils.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,11 @@ export const validateSkillAnswer = (answer: string) => {
2929
};
3030

3131
export const validateContext = (context?: string) => {
32-
// Split the context into words based on spaces
3332
const contextStr = context?.trim() ?? '';
3433
if (contextStr.length === 0) {
3534
return { msg: 'Context is required', status: ValidatedOptions.error };
3635
}
37-
const tokens = contextStr.split(/\s+/);
38-
if (tokens.length > 0 && tokens.length <= MAX_CONTEXT_WORDS) {
39-
return { msg: 'Valid Input', status: ValidatedOptions.success };
40-
}
41-
const errorMsg = `Context must be less than ${MAX_CONTEXT_WORDS} words. Current word count: ` + tokens.length;
42-
return { msg: errorMsg, status: ValidatedOptions.error };
36+
return { msg: 'Valid Input', status: ValidatedOptions.success };
4337
};
4438

4539
export const handleSkillSeedExamplesContextInputChange = (

0 commit comments

Comments
 (0)