From 7fd561b39b4e450e2478be20dc680443c8b14e1a Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Tue, 25 Feb 2025 15:44:30 -0500 Subject: [PATCH 1/2] Fix to show status for Attribution step in knowledge wizard Signed-off-by: Jeffrey Phillips --- .../KnowledgeWizard/KnowledgeWizard.tsx | 39 ++++++++++++++----- .../Contribute/Knowledge/validationUtils.ts | 29 ++++++++++++++ 2 files changed, 59 insertions(+), 9 deletions(-) diff --git a/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx b/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx index 1feaa7ed..a91eb81b 100644 --- a/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx +++ b/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx @@ -35,6 +35,7 @@ import { addDocumentInfoToKnowledgeFormData } from '@/components/Contribute/Know import { addYamlUploadKnowledge } from '@/components/Contribute/Knowledge/uploadUtils'; import { createEmptySeedExample } from '@/components/Contribute/Knowledge/seedExampleUtils'; import { + isAttributionInformationValid, isAuthInfoValid, isDocumentInfoValid, isFilePathInfoValid, @@ -76,6 +77,19 @@ export interface KnowledgeFormProps { const STEP_IDS = ['author-info', 'knowledge-info', 'file-path-info', 'document-info', 'seed-examples', 'attribution-info', 'review-submission']; +enum StepStatus { + Default = 'default', + Error = 'error', + Success = 'success' +} + +interface StepType { + id: string; + name: string; + component?: React.ReactNode; + status?: StepStatus; +} + export const KnowledgeWizard: React.FunctionComponent = ({ knowledgeEditFormData, isGithubMode }) => { const [devModeEnabled, setDevModeEnabled] = useState(); const { data: session } = useSession(); @@ -211,7 +225,7 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k router.push('/dashboard'); }; - const steps: { id: string; name: string; component: React.ReactNode; status?: 'default' | 'error' }[] = React.useMemo( + const steps: StepType[] = React.useMemo( () => [ { id: STEP_IDS[0], @@ -224,7 +238,7 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k setName={(name) => setKnowledgeFormData((prev) => ({ ...prev, name }))} /> ), - status: isAuthInfoValid(knowledgeFormData) ? 'default' : 'error' + status: isAuthInfoValid(knowledgeFormData) ? StepStatus.Success : StepStatus.Error }, { id: STEP_IDS[1], @@ -250,7 +264,7 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k } /> ), - status: isKnowledgeInfoValid(knowledgeFormData) ? 'default' : 'error' + status: isKnowledgeInfoValid(knowledgeFormData) ? StepStatus.Success : StepStatus.Error }, { id: STEP_IDS[2], @@ -261,7 +275,7 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k setFilePath={(filePath) => setKnowledgeFormData((prev) => ({ ...prev, filePath }))} /> ), - status: isFilePathInfoValid(knowledgeFormData) ? 'default' : 'error' + status: isFilePathInfoValid(knowledgeFormData) ? StepStatus.Success : StepStatus.Error }, { id: STEP_IDS[3], @@ -290,7 +304,7 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k } /> ), - status: isDocumentInfoValid(knowledgeFormData) ? 'default' : 'error' + status: isDocumentInfoValid(knowledgeFormData) ? StepStatus.Success : StepStatus.Error }, { id: STEP_IDS[4], @@ -305,7 +319,7 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k commitSha={knowledgeFormData.knowledgeDocumentCommit} /> ), - status: isSeedExamplesValid(knowledgeFormData) ? 'default' : 'error' + status: isSeedExamplesValid(knowledgeFormData) ? StepStatus.Success : StepStatus.Error }, ...(isGithubMode ? [ @@ -327,14 +341,16 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k creators={knowledgeFormData.creators} setCreators={(creators) => setKnowledgeFormData((prev) => ({ ...prev, creators }))} /> - ) + ), + status: isAttributionInformationValid(knowledgeFormData) ? StepStatus.Success : StepStatus.Error } ] : []), { id: STEP_IDS[6], name: 'Review Submission', - component: + component: , + status: StepStatus.Default } ], [addDocumentInfoHandler, isGithubMode, knowledgeEditFormData?.isEditForm, knowledgeFormData] @@ -419,7 +435,12 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k } > {steps.map((step, index) => ( - + activeStepIndex) ? StepStatus.Default : step.status} + > {step.component} ))} diff --git a/src/components/Contribute/Knowledge/validationUtils.ts b/src/components/Contribute/Knowledge/validationUtils.ts index 2254cf07..8c559b6a 100644 --- a/src/components/Contribute/Knowledge/validationUtils.ts +++ b/src/components/Contribute/Knowledge/validationUtils.ts @@ -56,3 +56,32 @@ export const isSeedExamplesValid = (knowledgeFormData: KnowledgeFormData): boole ) ); }; + +export const isAttributionInformationValid = (knowledgeFormData: KnowledgeFormData): boolean => { + const title = knowledgeFormData.titleWork.trim(); + if (!title.length) { + return false; + } + + const link = knowledgeFormData.linkWork.trim(); + if (!link.length) { + return false; + } + + const revision = knowledgeFormData.revision.trim(); + if (!revision.length) { + return false; + } + + const license = knowledgeFormData.licenseWork.trim(); + if (!license.length) { + return false; + } + + const creators = knowledgeFormData.creators.trim(); + if (!creators.length) { + return false; + } + + return true; +}; From e955b3641eb314ef7e0a93e5bd26920d65e37ee6 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Tue, 25 Feb 2025 15:45:06 -0500 Subject: [PATCH 2/2] Fix to update input box when selecting context from a file Signed-off-by: Jeffrey Phillips --- .../Knowledge/KnowledgeWizard/KnowledgeWizard.tsx | 4 +++- .../SeedExamples/KnowledgeFileSelectModal.tsx | 11 ++--------- .../Knowledge/SeedExamples/QuestionAnswerPairs.tsx | 7 +------ .../Knowledge/SeedExamples/SeedExamples.tsx | 4 ++-- .../Contribute/Knowledge/seedExampleUtils.ts | 14 ++++++++++---- 5 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx b/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx index a91eb81b..686c98bd 100644 --- a/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx +++ b/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx @@ -439,7 +439,9 @@ export const KnowledgeWizard: React.FunctionComponent = ({ k key={step.id} id={step.id} name={step.name} - status={index === activeStepIndex || (step.status === StepStatus.Error && index > activeStepIndex) ? StepStatus.Default : step.status} + status={ + index === activeStepIndex || (step.status === StepStatus.Error && index > activeStepIndex) ? StepStatus.Default : step.status + } > {step.component} diff --git a/src/components/Contribute/Knowledge/SeedExamples/KnowledgeFileSelectModal.tsx b/src/components/Contribute/Knowledge/SeedExamples/KnowledgeFileSelectModal.tsx index 6def0d66..9eb34b8d 100644 --- a/src/components/Contribute/Knowledge/SeedExamples/KnowledgeFileSelectModal.tsx +++ b/src/components/Contribute/Knowledge/SeedExamples/KnowledgeFileSelectModal.tsx @@ -30,12 +30,7 @@ interface Props { error: string; seedExample: KnowledgeSeedExample; seedExampleIndex: number; - handleContextInputChange: (seedExampleIndex: number, contextValue: string) => void; - handleContextBlur: (seedExampleIndex: number) => void; - handleQuestionInputChange: (seedExampleIndex: number, questionAndAnswerIndex: number, questionValue: string) => void; - handleQuestionBlur: (seedExampleIndex: number, questionAndAnswerIndex: number) => void; - handleAnswerInputChange: (seedExampleIndex: number, questionAndAnswerIndex: number, answerValue: string) => void; - handleAnswerBlur: (seedExampleIndex: number, questionAndAnswerIndex: number) => void; + handleContextInputChange: (seedExampleIndex: number, contextValue: string, validate?: boolean) => void; addDocumentInfo: (repositoryUrl: string, commitSha: string, docName: string) => void; repositoryUrl: string; commitSha: string; @@ -48,7 +43,6 @@ const KnowledgeFileSelectModal: React.FC = ({ error, seedExampleIndex, handleContextInputChange, - handleContextBlur, addDocumentInfo, repositoryUrl, commitSha, @@ -81,8 +75,7 @@ const KnowledgeFileSelectModal: React.FC = ({ `handleUseSelectedText: selectedText="${selectedText}", repositoryUrl=${repositoryUrl}, commitSha=${commitShaValue}, docName=${docName}` ); - handleContextInputChange(seedExampleIndex, selectedText); - handleContextBlur(seedExampleIndex); + handleContextInputChange(seedExampleIndex, selectedText, true); addDocumentInfo(repositoryUrl, commitShaValue, docName); handleCloseModal(); }; diff --git a/src/components/Contribute/Knowledge/SeedExamples/QuestionAnswerPairs.tsx b/src/components/Contribute/Knowledge/SeedExamples/QuestionAnswerPairs.tsx index 2265c13b..0e0f1fd4 100644 --- a/src/components/Contribute/Knowledge/SeedExamples/QuestionAnswerPairs.tsx +++ b/src/components/Contribute/Knowledge/SeedExamples/QuestionAnswerPairs.tsx @@ -31,7 +31,7 @@ interface Props { isGithubMode: boolean; seedExample: KnowledgeSeedExample; seedExampleIndex: number; - handleContextInputChange: (seedExampleIndex: number, contextValue: string) => void; + handleContextInputChange: (seedExampleIndex: number, contextValue: string, validate?: boolean) => void; handleContextBlur: (seedExampleIndex: number) => void; handleQuestionInputChange: (seedExampleIndex: number, questionAndAnswerIndex: number, questionValue: string) => void; handleQuestionBlur: (seedExampleIndex: number, questionAndAnswerIndex: number) => void; @@ -226,11 +226,6 @@ const KnowledgeQuestionAnswerPairsNative: React.FC = ({ seedExample={seedExample} seedExampleIndex={seedExampleIndex} handleContextInputChange={handleContextInputChange} - handleContextBlur={handleContextBlur} - handleQuestionInputChange={handleQuestionInputChange} - handleQuestionBlur={handleQuestionBlur} - handleAnswerInputChange={handleAnswerInputChange} - handleAnswerBlur={handleAnswerBlur} addDocumentInfo={addDocumentInfo} repositoryUrl={repositoryUrl} commitSha={commitSha} diff --git a/src/components/Contribute/Knowledge/SeedExamples/SeedExamples.tsx b/src/components/Contribute/Knowledge/SeedExamples/SeedExamples.tsx index b812467b..8b94bf69 100644 --- a/src/components/Contribute/Knowledge/SeedExamples/SeedExamples.tsx +++ b/src/components/Contribute/Knowledge/SeedExamples/SeedExamples.tsx @@ -25,8 +25,8 @@ interface Props { } const SeedExamples: React.FC = ({ isGithubMode, seedExamples, onUpdateSeedExamples, addDocumentInfo, repositoryUrl, commitSha }) => { - const handleContextInputChange = (seedExampleIndex: number, contextValue: string): void => { - onUpdateSeedExamples(handleSeedExamplesContextInputChange(seedExamples, seedExampleIndex, contextValue)); + const handleContextInputChange = (seedExampleIndex: number, contextValue: string, validate = false): void => { + onUpdateSeedExamples(handleSeedExamplesContextInputChange(seedExamples, seedExampleIndex, contextValue, validate)); }; const handleContextBlur = (seedExampleIndex: number): void => { diff --git a/src/components/Contribute/Knowledge/seedExampleUtils.ts b/src/components/Contribute/Knowledge/seedExampleUtils.ts index a397f290..35b68396 100644 --- a/src/components/Contribute/Knowledge/seedExampleUtils.ts +++ b/src/components/Contribute/Knowledge/seedExampleUtils.ts @@ -43,16 +43,22 @@ export const validateContext = (context: string) => { export const handleSeedExamplesContextInputChange = ( seedExamples: KnowledgeSeedExample[], seedExampleIndex: number, - contextValue: string -): KnowledgeSeedExample[] => - seedExamples.map((seedExample: KnowledgeSeedExample, index: number) => + contextValue: string, + validate = false +): KnowledgeSeedExample[] => { + const { msg, status } = validateContext(contextValue); + const newSeed = seedExamples.map((seedExample: KnowledgeSeedExample, index: number) => index === seedExampleIndex ? { ...seedExample, - context: contextValue + context: contextValue, + isContextValid: validate ? status : seedExample.isContextValid, + validationError: validate ? msg : seedExample.validationError } : seedExample ); + return newSeed; +}; export const handleSeedExamplesContextBlur = (seedExamples: KnowledgeSeedExample[], seedExampleIndex: number): KnowledgeSeedExample[] => seedExamples.map((seedExample: KnowledgeSeedExample, index: number) => {