From 4afad5b23a41833eb14e7da64d714736414e1f86 Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Mon, 4 Nov 2024 22:41:53 +0000 Subject: [PATCH 01/20] adding the file upload component that can be used for Knowledge and Skills Signed-off-by: Ash Evans --- src/components/Contribute/YamlFileUpload.tsx | 108 +++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 src/components/Contribute/YamlFileUpload.tsx diff --git a/src/components/Contribute/YamlFileUpload.tsx b/src/components/Contribute/YamlFileUpload.tsx new file mode 100644 index 00000000..b8f5551d --- /dev/null +++ b/src/components/Contribute/YamlFileUpload.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { FileUpload } from '@patternfly/react-core/dist/dynamic/components/FileUpload'; +import { Form } from '@patternfly/react-core/dist/dynamic/components/Form'; +import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form'; +import { FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form'; +import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; +import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; +import yaml from 'js-yaml'; +import { KnowledgeFormData } from './Knowledge'; +import { SkillFormData } from './Skill'; + +interface YamlFileUploadProps { + isKnowledgeForm: boolean; + onYamlUploadFillForm: (data: KnowledgeFormData | SkillFormData) => void; +} + +const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYamlUploadFillForm }) => { + const [value, setValue] = React.useState(''); + const [filename, setFilename] = React.useState(''); + const [isLoading, setIsLoading] = React.useState(false); + const [isRejected, setIsRejected] = React.useState(false); + + const handleFileInputChange = (_: unknown, file: File) => { + setFilename(file.name); + if (file) { + readFileContent(file); + } + }; + + const readFileContent = (file: File) => { + setIsLoading(true); + const reader = new FileReader(); + + reader.onload = (event) => { + const fileContent = event.target?.result as string; + setValue(fileContent); + setIsLoading(false); + + try { + const parsedData = yaml.load(fileContent); + + if (isKnowledgeForm && isKnowledgeFormData(parsedData)) { + onYamlUploadFillForm(parsedData); + } else if (!isKnowledgeForm) { + const skillData = parsedData as SkillFormData; + onYamlUploadFillForm(skillData); + } else { + setIsRejected(true); // Set rejected if it doesn't match expected type + } + } catch (error) { + console.error('Error parsing YAML file:', error); + setIsRejected(true); + } + }; + + reader.onerror = () => { + console.error('Error reading file'); + setIsLoading(false); + setIsRejected(true); + }; + + reader.readAsText(file); + }; + + const isKnowledgeFormData = (data: object): data is KnowledgeFormData => { + return typeof data === 'object' && 'knowledgeDocumentRepositoryUrl' in data && 'knowledgeDocumentCommit' in data; + }; + + const handleClear = () => { + setFilename(''); + setValue(''); + setIsRejected(false); + }; + + return ( + <> +
+ + setIsRejected(true) + }} + validated={isRejected ? 'error' : 'default'} + browseButtonText="Upload" + /> + + + + {isRejected ? 'Invalid YAML file for this form type' : 'Upload a YAML file'} + + + + +
+ + ); +}; + +export default YamlFileUpload; From e0ef48a1cd5c104e9f529cef777e9d80a580616e Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 11:09:15 +0000 Subject: [PATCH 02/20] adding the YamlFileUpload component to the knowledge form and creating a function to populate the knowledge form fields Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 73651889..2e701d93 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -28,12 +28,15 @@ import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/consta import { DownloadDropdown } from './DownloadDropdown/DownloadDropdown'; import { ViewDropdown } from './ViewDropdown/ViewDropdown'; import Update from './Update/Update'; -import { PullRequestFile } from '@/types'; +import { KnowledgeYamlData, PullRequestFile } from '@/types'; import { Button } from '@patternfly/react-core/dist/esm/components/Button/Button'; import { useRouter } from 'next/navigation'; import { autoFillKnowledgeFields } from './AutoFill'; import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner'; +import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; +import YamlFileUpload from '../YamlFileUpload'; + export interface QuestionAndAnswerPair { immutable: boolean; question: string; @@ -432,6 +435,18 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno setSeedExamples(autoFillKnowledgeFields.seedExamples); }; + const onYamlUploadKnowledgeFillForm = (data: KnowledgeYamlData): void => { + setName(data.created_by); + setDocumentOutline(data.document_outline); + setSubmissionSummary(data.document_outline); + setDomain(data.domain); + setKnowledgeDocumentRepositoryUrl(data.document.repo); + setKnowledgeDocumentCommit(data.document.commit); + // Looks like the form accepts + setDocumentName(data.document.patterns.join(', ')); + setSeedExamples(yamlSeedExampleToFormSeedExample(data.seed_examples)); + }; + const knowledgeFormData: KnowledgeFormData = { email: email, name: name, @@ -479,7 +494,7 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno Auto-Fill )} - +
= ({ kno + + ); From a00e08635af51100268ec5c014fd66c0c922da2c Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 11:10:05 +0000 Subject: [PATCH 03/20] adding a function to convert the yaml qnas to SeedExamples[] Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 2e701d93..4ceabb17 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -435,6 +435,21 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno setSeedExamples(autoFillKnowledgeFields.seedExamples); }; + const yamlSeedExampleToFormSeedExample = ( + yamlSeedExamples: { context: string; questions_and_answers: { question: string; answer: string }[] }[] + ) => { + return yamlSeedExamples.map((yamlSeedExample) => ({ + immutable: true, + isExpanded: false, + context: yamlSeedExample.context, + isContextValid: ValidatedOptions.default, + questionAndAnswers: yamlSeedExample.questions_and_answers.map((questionAndAnswer) => ({ + question: questionAndAnswer.question, + answer: questionAndAnswer.answer + })) + })) as SeedExample[]; + }; + const onYamlUploadKnowledgeFillForm = (data: KnowledgeYamlData): void => { setName(data.created_by); setDocumentOutline(data.document_outline); From 702a6021dacc3306d182f5139f38c9404d10307f Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 11:15:52 +0000 Subject: [PATCH 04/20] adding new logic in type checking knowledge or skills yaml upload Signed-off-by: Ash Evans --- src/components/Contribute/YamlFileUpload.tsx | 28 +++++++++++--------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/Contribute/YamlFileUpload.tsx b/src/components/Contribute/YamlFileUpload.tsx index b8f5551d..434b3d39 100644 --- a/src/components/Contribute/YamlFileUpload.tsx +++ b/src/components/Contribute/YamlFileUpload.tsx @@ -6,15 +6,15 @@ import { FormHelperText } from '@patternfly/react-core/dist/dynamic/components/F import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import yaml from 'js-yaml'; -import { KnowledgeFormData } from './Knowledge'; -import { SkillFormData } from './Skill'; +import { KnowledgeYamlData, SkillYamlData } from '@/types'; interface YamlFileUploadProps { isKnowledgeForm: boolean; - onYamlUploadFillForm: (data: KnowledgeFormData | SkillFormData) => void; + onYamlUploadKnowledgeFillForm?: (data: KnowledgeYamlData) => void; + onYamlUploadSkillsFillForm?: (data: SkillYamlData) => void; } -const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYamlUploadFillForm }) => { +const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYamlUploadKnowledgeFillForm, onYamlUploadSkillsFillForm }) => { const [value, setValue] = React.useState(''); const [filename, setFilename] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); @@ -38,14 +38,12 @@ const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYaml try { const parsedData = yaml.load(fileContent); - if (isKnowledgeForm && isKnowledgeFormData(parsedData)) { - onYamlUploadFillForm(parsedData); - } else if (!isKnowledgeForm) { - const skillData = parsedData as SkillFormData; - onYamlUploadFillForm(skillData); + onYamlUploadKnowledgeFillForm?.(parsedData); + } else if (!isKnowledgeForm && isSkillFormData(parsedData)) { + onYamlUploadSkillsFillForm?.(parsedData); } else { - setIsRejected(true); // Set rejected if it doesn't match expected type + setIsRejected(true); } } catch (error) { console.error('Error parsing YAML file:', error); @@ -62,8 +60,14 @@ const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYaml reader.readAsText(file); }; - const isKnowledgeFormData = (data: object): data is KnowledgeFormData => { - return typeof data === 'object' && 'knowledgeDocumentRepositoryUrl' in data && 'knowledgeDocumentCommit' in data; + // Type guard for KnowledgeFormData + const isKnowledgeFormData = (data: any): data is KnowledgeYamlData => { + return data && typeof data === 'object' && 'document' in data && 'document_outline' in data; + }; + + // Type guard for SkillFormData + const isSkillFormData = (data: any): data is SkillYamlData => { + return data && typeof data === 'object' && 'task_description' in data; }; const handleClear = () => { From ec86d6f041ee0773b52481ec4fda56e1aaba6881 Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 11:28:59 +0000 Subject: [PATCH 05/20] adding a ternary to account for partially complete yaml Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 4ceabb17..16377901 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -451,14 +451,13 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno }; const onYamlUploadKnowledgeFillForm = (data: KnowledgeYamlData): void => { - setName(data.created_by); - setDocumentOutline(data.document_outline); - setSubmissionSummary(data.document_outline); - setDomain(data.domain); - setKnowledgeDocumentRepositoryUrl(data.document.repo); - setKnowledgeDocumentCommit(data.document.commit); - // Looks like the form accepts - setDocumentName(data.document.patterns.join(', ')); + setName(data.created_by ?? ''); + setDocumentOutline(data.document_outline ?? ''); + setSubmissionSummary(data.document_outline ?? ''); + setDomain(data.domain ?? ''); + setKnowledgeDocumentRepositoryUrl(data.document.repo ?? ''); + setKnowledgeDocumentCommit(data.document.commit ?? ''); + setDocumentName(data.document.patterns.join(', ') ?? ''); setSeedExamples(yamlSeedExampleToFormSeedExample(data.seed_examples)); }; From 3a3d69a38f3ab36d3f5f7b43bbd75a8d4d3cb615 Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 11:44:10 +0000 Subject: [PATCH 06/20] accounting for partial qna yaml file Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 16377901..9b9c965c 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -441,11 +441,11 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno return yamlSeedExamples.map((yamlSeedExample) => ({ immutable: true, isExpanded: false, - context: yamlSeedExample.context, + context: yamlSeedExample.context ?? '', isContextValid: ValidatedOptions.default, questionAndAnswers: yamlSeedExample.questions_and_answers.map((questionAndAnswer) => ({ - question: questionAndAnswer.question, - answer: questionAndAnswer.answer + question: questionAndAnswer.question ?? '', + answer: questionAndAnswer.answer ?? '' })) })) as SeedExample[]; }; From 1b5f86411daf0f0f7237649b90296a3f08e8ccdd Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 12:11:25 +0000 Subject: [PATCH 07/20] add YamlFileUpload to the skill form Signed-off-by: Ash Evans --- src/components/Contribute/Skill/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx index 737f92fb..c333aeb9 100644 --- a/src/components/Contribute/Skill/index.tsx +++ b/src/components/Contribute/Skill/index.tsx @@ -32,6 +32,7 @@ import SkillsInformation from './SkillsInformation/SkillsInformation'; import SkillsDescriptionContent from './SkillsDescription/SkillsDescriptionContent'; import { autoFillSkillsFields } from './AutoFill'; import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner'; +import YamlFileUpload from '../YamlFileUpload'; export interface SeedExample { immutable: boolean; @@ -371,6 +372,8 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo Auto-Fill )} + +
Date: Wed, 6 Nov 2024 12:27:09 +0000 Subject: [PATCH 08/20] adding the onYamlUploadSkillsFillForm with logic to convert question and answers Signed-off-by: Ash Evans --- src/components/Contribute/Skill/index.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx index c333aeb9..54ee14c7 100644 --- a/src/components/Contribute/Skill/index.tsx +++ b/src/components/Contribute/Skill/index.tsx @@ -24,7 +24,7 @@ import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/consta import { DownloadDropdown } from './DownloadDropdown/DownloadDropdown'; import { ViewDropdown } from './ViewDropdown/ViewDropdown'; import Update from './Update/Update'; -import { PullRequestFile } from '@/types'; +import { SkillYamlData, PullRequestFile } from '@/types'; import { Button } from '@patternfly/react-core/dist/esm/components/Button/Button'; import { useRouter } from 'next/navigation'; import SkillsSeedExample from './SkillsSeedExample/SkillsSeedExample'; @@ -331,6 +331,23 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo setSeedExamples(autoFillSkillsFields.seedExamples); }; + const yamlSeedExampleToFormSeedExample = (yamlSeedExamples: { question: string; context?: string | undefined; answer: string }[]) => { + return yamlSeedExamples.map((yamlSeedExample) => ({ + immutable: true, + isExpanded: false, + context: yamlSeedExample.context ?? '', + isContextValid: ValidatedOptions.default, + question: yamlSeedExample.question, + answer: yamlSeedExample.answer + })) as SeedExample[]; + }; + + const onYamlUploadSkillsFillForm = (data: SkillYamlData): void => { + setName(data.created_by ?? ''); + setDocumentOutline(data.task_description ?? ''); + setSeedExamples(yamlSeedExampleToFormSeedExample(data.seed_examples)); + }; + const skillFormData: SkillFormData = { email: email, name: name, @@ -372,7 +389,7 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo Auto-Fill )} - + Date: Wed, 6 Nov 2024 14:05:22 +0000 Subject: [PATCH 09/20] correcting the YamlFileUpload component isKnowledgeForm Signed-off-by: Ash Evans --- src/components/Contribute/Skill/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx index 54ee14c7..e738bbec 100644 --- a/src/components/Contribute/Skill/index.tsx +++ b/src/components/Contribute/Skill/index.tsx @@ -389,7 +389,7 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo Auto-Fill )} - + Date: Wed, 6 Nov 2024 14:10:37 +0000 Subject: [PATCH 10/20] removing any types from the type guards in YamlFileUpload Signed-off-by: Ash Evans --- src/components/Contribute/YamlFileUpload.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Contribute/YamlFileUpload.tsx b/src/components/Contribute/YamlFileUpload.tsx index 434b3d39..efb5f246 100644 --- a/src/components/Contribute/YamlFileUpload.tsx +++ b/src/components/Contribute/YamlFileUpload.tsx @@ -61,12 +61,14 @@ const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYaml }; // Type guard for KnowledgeFormData - const isKnowledgeFormData = (data: any): data is KnowledgeYamlData => { + const isKnowledgeFormData = (data: unknown): data is KnowledgeYamlData => { + if (!data) return false; return data && typeof data === 'object' && 'document' in data && 'document_outline' in data; }; // Type guard for SkillFormData - const isSkillFormData = (data: any): data is SkillYamlData => { + const isSkillFormData = (data: unknown): data is SkillYamlData => { + if (!data) return false; return data && typeof data === 'object' && 'task_description' in data; }; From 375ff85727a1e37fb7f80c31c219124a4b83979f Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 14:28:02 +0000 Subject: [PATCH 11/20] COnverting the YamlFileUpload component to an expandable form section Signed-off-by: Ash Evans --- src/components/Contribute/YamlFileUpload.tsx | 69 +++++++++++--------- 1 file changed, 39 insertions(+), 30 deletions(-) diff --git a/src/components/Contribute/YamlFileUpload.tsx b/src/components/Contribute/YamlFileUpload.tsx index efb5f246..9a85a1df 100644 --- a/src/components/Contribute/YamlFileUpload.tsx +++ b/src/components/Contribute/YamlFileUpload.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { FileUpload } from '@patternfly/react-core/dist/dynamic/components/FileUpload'; -import { Form } from '@patternfly/react-core/dist/dynamic/components/Form'; +import { Form, FormFieldGroupExpandable, FormFieldGroupHeader } from '@patternfly/react-core/dist/dynamic/components/Form'; import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form'; import { FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form'; import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; @@ -79,35 +79,44 @@ const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYaml }; return ( - <> - - - setIsRejected(true) - }} - validated={isRejected ? 'error' : 'default'} - browseButtonText="Upload" - /> - - - - {isRejected ? 'Invalid YAML file for this form type' : 'Upload a YAML file'} - - - - - - + Load a pre-exsiting yaml file

, + id: 'author-info-id' + }} + titleDescription="If you have partially completed yaml file you can upload it!" + /> + } + > + + setIsRejected(true) + }} + validated={isRejected ? 'error' : 'default'} + browseButtonText="Upload" + /> + + + + {isRejected ? 'Invalid YAML file for this form type' : 'Upload a YAML file'} + + + + + ); }; From 537b298aa20e429180334bbcfc843463883cf5fb Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 6 Nov 2024 14:35:03 +0000 Subject: [PATCH 12/20] finishing notht the skill and knowledge sections and cleaning up imports Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 5 ++--- src/components/Contribute/Skill/index.tsx | 2 +- src/components/Contribute/YamlFileUpload.tsx | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 9b9c965c..0c9f3f7f 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -33,8 +33,6 @@ import { Button } from '@patternfly/react-core/dist/esm/components/Button/Button import { useRouter } from 'next/navigation'; import { autoFillKnowledgeFields } from './AutoFill'; import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner'; - -import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; import YamlFileUpload from '../YamlFileUpload'; export interface QuestionAndAnswerPair { @@ -508,8 +506,9 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno Auto-Fill )} -
+ + = ({ skillEditFo Auto-Fill )} - + Date: Wed, 27 Nov 2024 18:29:15 +0000 Subject: [PATCH 13/20] removed a console.log() that was being used for dev work Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 0c9f3f7f..c397d232 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -631,8 +631,6 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno - - ); From 97e5b8d54d2350716147c277f8cdb0c0f3196638 Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 27 Nov 2024 21:54:35 +0000 Subject: [PATCH 14/20] adding and styling buttons for yaml upload Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 17 ++++++++++++++--- src/components/Contribute/Skill/index.tsx | 16 +++++++++++++--- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index c397d232..24815b40 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -21,6 +21,7 @@ import { PageGroup } from '@patternfly/react-core/dist/dynamic/components/Page'; import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'; import { Content } from '@patternfly/react-core/dist/dynamic/components/Content'; import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex'; import KnowledgeDescriptionContent from './KnowledgeDescription/KnowledgeDescriptionContent'; import KnowledgeSeedExample from './KnowledgeSeedExample/KnowledgeSeedExample'; import { checkKnowledgeFormCompletion } from './validation'; @@ -495,9 +496,19 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno - - Knowledge Contribution - + + + + Knowledge Contribution + + + + + + + diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx index 33b66353..d5cd722b 100644 --- a/src/components/Contribute/Skill/index.tsx +++ b/src/components/Contribute/Skill/index.tsx @@ -19,6 +19,7 @@ import { PageGroup } from '@patternfly/react-core/dist/dynamic/components/Page'; import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'; import { Content } from '@patternfly/react-core/dist/dynamic/components/Content'; import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex'; import { checkSkillFormCompletion } from './validation'; import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/constants'; import { DownloadDropdown } from './DownloadDropdown/DownloadDropdown'; @@ -378,9 +379,18 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo - - Skill Contribution - + + + + Skill Contribution + + + + + + From 37c69fed0a6ddc24f2fba20bf55352c13954aa9d Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Wed, 27 Nov 2024 22:13:54 +0000 Subject: [PATCH 15/20] adding the initla modal and implementing in the skills form Signed-off-by: Ash Evans --- src/components/Contribute/Skill/index.tsx | 7 ++- .../Contribute/YamlFileUploadModal.tsx | 60 +++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/components/Contribute/YamlFileUploadModal.tsx diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx index d5cd722b..c433bd05 100644 --- a/src/components/Contribute/Skill/index.tsx +++ b/src/components/Contribute/Skill/index.tsx @@ -34,6 +34,7 @@ import SkillsDescriptionContent from './SkillsDescription/SkillsDescriptionConte import { autoFillSkillsFields } from './AutoFill'; import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner'; import YamlFileUpload from '../YamlFileUpload'; +import { YamlFileUploadModal } from '../YamlFileUploadModal'; export interface SeedExample { immutable: boolean; @@ -111,6 +112,8 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo const [disableAction, setDisableAction] = useState(true); const [reset, setReset] = useState(false); + const [isModalOpen, setIsModalOpen] = React.useState(false); + const router = useRouter(); const emptySeedExample: SeedExample = { @@ -386,7 +389,7 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo - @@ -400,6 +403,8 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo )} + +
>; +} + +export const YamlFileUploadModal: React.FunctionComponent = ({ isModalOpen, setIsModalOpen }) => { + const [selectedVariant, setSelectedVariant] = React.useState(ModalVariant.small); + + const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1); + const formatSizeVariantName = (variant: string) => capitalize(variant); + + const variantOptions = [ModalVariant.small, ModalVariant.medium, ModalVariant.large]; + + const renderSizeOptions = variantOptions.map((variant) => ( + setSelectedVariant(variant)} + key={formatSizeVariantName(variant)} + name="Variant options" + /> + )); + + const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { + setIsModalOpen(!isModalOpen); + }; + + return ( + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. + + + + + + + + ); +}; From f707989581a3d2bba00b3f5b7091cc0d799bf753 Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Thu, 28 Nov 2024 10:04:09 +0000 Subject: [PATCH 16/20] first implementation of the upload file modal Signed-off-by: Ash Evans --- src/components/Contribute/Knowledge/index.tsx | 14 +- src/components/Contribute/Skill/index.tsx | 8 +- src/components/Contribute/YamlFileUpload.tsx | 331 ++++++++++++++++-- .../Contribute/YamlFileUploadModal.tsx | 45 ++- 4 files changed, 331 insertions(+), 67 deletions(-) diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 24815b40..fa6db254 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -34,7 +34,7 @@ import { Button } from '@patternfly/react-core/dist/esm/components/Button/Button import { useRouter } from 'next/navigation'; import { autoFillKnowledgeFields } from './AutoFill'; import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner'; -import YamlFileUpload from '../YamlFileUpload'; +import { YamlFileUploadModal } from '../YamlFileUploadModal'; export interface QuestionAndAnswerPair { immutable: boolean; @@ -131,6 +131,8 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno const [disableAction, setDisableAction] = useState(true); const [reset, setReset] = useState(false); + const [isModalOpen, setIsModalOpen] = React.useState(false); + const router = useRouter(); const emptySeedExample: SeedExample = { @@ -517,9 +519,15 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno Auto-Fill )} - - + + + = ({ skillEditFo )} - + - = ({ isKnowledgeForm, onYaml const [isLoading, setIsLoading] = React.useState(false); const [isRejected, setIsRejected] = React.useState(false); + const [currentFiles, setCurrentFiles] = React.useState([]); + const [showStatus, setShowStatus] = React.useState(false); + const [statusIcon, setStatusIcon] = React.useState('inProgress'); + const [readFileData, setReadFileData] = React.useState([]); + const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false); + const handleFileInputChange = (_: unknown, file: File) => { setFilename(file.name); if (file) { @@ -78,46 +97,284 @@ const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYaml setIsRejected(false); }; + // remove files from both state arrays based on their name + const removeFiles = (namesOfFilesToRemove: string[]) => { + const newCurrentFiles = currentFiles.filter((currentFile) => !namesOfFilesToRemove.some((fileName) => fileName === currentFile.name)); + + setCurrentFiles(newCurrentFiles); + + const newReadFiles = readFileData.filter((readFile) => !namesOfFilesToRemove.some((fileName) => fileName === readFile.fileName)); + + setReadFileData(newReadFiles); + }; + + /** Forces uploaded files to become corrupted if "Demonstrate error reporting by forcing uploads to fail" is selected in the example, + * only used in this example for demonstration purposes */ + const updateCurrentFiles = (files: File[]) => { + if (fileUploadShouldFail) { + const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number })); + + setCurrentFiles((prevFiles) => [...prevFiles, ...(corruptedFiles as any)]); + } else { + setCurrentFiles((prevFiles) => [...prevFiles, ...files]); + } + }; + + // callback that will be called by the react dropzone with the newly dropped file objects + const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => { + // identify what, if any, files are re-uploads of already uploaded files + const currentFileNames = currentFiles.map((file) => file.name); + const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name)); + + /** this promise chain is needed because if the file removal is done at the same time as the file adding react + * won't realize that the status items for the re-uploaded files needs to be re-rendered */ + Promise.resolve() + .then(() => removeFiles(reUploads.map((file) => file.name))) + .then(() => updateCurrentFiles(droppedFiles)); + }; + + const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length; + + // callback called by the status item when a file is successfully read with the built-in file reader + const handleReadSuccess = (data: string, file: File) => { + setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]); + }; + + // callback called by the status item when a file encounters an error while being read with the built-in file reader + const handleReadFail = (error: DOMException, file: File) => { + setReadFileData((prevReadFiles) => [...prevReadFiles, { loadError: error, fileName: file.name, loadResult: 'danger' }]); + }; + + // add helper text to a status item showing any error encountered during the file reading process + const createHelperText = (file: File) => { + const fileResult = readFileData.find((readFile) => readFile.fileName === file.name); + if (fileResult?.loadError) { + return ( + + {fileResult.loadError.toString()} + + ); + } + }; + return ( - Load a pre-exsiting yaml file

, - id: 'author-info-id' - }} - titleDescription="If you have partially completed yaml file you can upload it!" - /> - } - > - - setIsRejected(true) - }} - validated={isRejected ? 'error' : 'default'} - browseButtonText="Upload" + <> + + } + titleText="Drag and drop files here" + titleTextSeparator="or" + infoText="Accepted file types: YAML" /> - - - - {isRejected ? 'Invalid YAML file for this form type' : 'Upload a YAML file'} - - - - - + {showStatus && ( + + {currentFiles.map((file) => ( + removeFiles([file.name])} + onReadSuccess={handleReadSuccess} + onReadFail={handleReadFail} + progressHelperText={createHelperText(file)} + /> + ))} + + )} + + + + // + // setIsRejected(true) + // }} + // validated={isRejected ? 'error' : 'default'} + // browseButtonText="Upload" + // /> + // + // + // + // {isRejected ? 'Invalid YAML file for this form type' : 'Upload a YAML file'} + // + // + // + // ); }; export default YamlFileUpload; + +// import React from 'react'; +// import { +// MultipleFileUpload, +// MultipleFileUploadMain, +// MultipleFileUploadStatus, +// MultipleFileUploadStatusItem, +// Checkbox, +// HelperText, +// HelperTextItem, +// DropEvent +// } from '@patternfly/react-core'; +// import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; + +// interface readFile { +// fileName: string; +// data?: string; +// loadResult?: 'danger' | 'success'; +// loadError?: DOMException; +// } + +// export const MultipleFileUploadBasic: React.FunctionComponent = () => { +// const [isHorizontal, setIsHorizontal] = React.useState(false); +// const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false); +// const [currentFiles, setCurrentFiles] = React.useState([]); +// const [readFileData, setReadFileData] = React.useState([]); +// const [showStatus, setShowStatus] = React.useState(false); +// const [statusIcon, setStatusIcon] = React.useState('inProgress'); + +// // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed +// if (!showStatus && currentFiles.length > 0) { +// setShowStatus(true); +// } + +// // determine the icon that should be shown for the overall status list +// React.useEffect(() => { +// if (readFileData.length < currentFiles.length) { +// setStatusIcon('inProgress'); +// } else if (readFileData.every((file) => file.loadResult === 'success')) { +// setStatusIcon('success'); +// } else { +// setStatusIcon('danger'); +// } +// }, [readFileData, currentFiles]); + +// // remove files from both state arrays based on their name +// const removeFiles = (namesOfFilesToRemove: string[]) => { +// const newCurrentFiles = currentFiles.filter((currentFile) => !namesOfFilesToRemove.some((fileName) => fileName === currentFile.name)); + +// setCurrentFiles(newCurrentFiles); + +// const newReadFiles = readFileData.filter((readFile) => !namesOfFilesToRemove.some((fileName) => fileName === readFile.fileName)); + +// setReadFileData(newReadFiles); +// }; + +// /** Forces uploaded files to become corrupted if "Demonstrate error reporting by forcing uploads to fail" is selected in the example, +// * only used in this example for demonstration purposes */ +// const updateCurrentFiles = (files: File[]) => { +// if (fileUploadShouldFail) { +// const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number })); + +// setCurrentFiles((prevFiles) => [...prevFiles, ...(corruptedFiles as any)]); +// } else { +// setCurrentFiles((prevFiles) => [...prevFiles, ...files]); +// } +// }; + +// // callback that will be called by the react dropzone with the newly dropped file objects +// const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => { +// // identify what, if any, files are re-uploads of already uploaded files +// const currentFileNames = currentFiles.map((file) => file.name); +// const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name)); + +// /** this promise chain is needed because if the file removal is done at the same time as the file adding react +// * won't realize that the status items for the re-uploaded files needs to be re-rendered */ +// Promise.resolve() +// .then(() => removeFiles(reUploads.map((file) => file.name))) +// .then(() => updateCurrentFiles(droppedFiles)); +// }; + +// // callback called by the status item when a file is successfully read with the built-in file reader +// const handleReadSuccess = (data: string, file: File) => { +// setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]); +// }; + +// // callback called by the status item when a file encounters an error while being read with the built-in file reader +// const handleReadFail = (error: DOMException, file: File) => { +// setReadFileData((prevReadFiles) => [...prevReadFiles, { loadError: error, fileName: file.name, loadResult: 'danger' }]); +// }; + +// // add helper text to a status item showing any error encountered during the file reading process +// const createHelperText = (file: File) => { +// const fileResult = readFileData.find((readFile) => readFile.fileName === file.name); +// if (fileResult?.loadError) { +// return ( +// +// {fileResult.loadError.toString()} +// +// ); +// } +// }; + +// const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length; + +// return ( +// <> +// +// } +// titleText="Drag and drop files here" +// titleTextSeparator="or" +// infoText="Accepted file types: JPEG, Doc, PDF, PNG" +// /> +// {showStatus && ( +// +// {currentFiles.map((file) => ( +// removeFiles([file.name])} +// onReadSuccess={handleReadSuccess} +// onReadFail={handleReadFail} +// progressHelperText={createHelperText(file)} +// /> +// ))} +// +// )} +// +// setIsHorizontal(!isHorizontal)} /> +// setFileUploadShouldFail(!fileUploadShouldFail)} +// /> +// +// ); +// }; diff --git a/src/components/Contribute/YamlFileUploadModal.tsx b/src/components/Contribute/YamlFileUploadModal.tsx index 6958ec7f..fc5a9efd 100644 --- a/src/components/Contribute/YamlFileUploadModal.tsx +++ b/src/components/Contribute/YamlFileUploadModal.tsx @@ -1,30 +1,23 @@ import React from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from '@patternfly/react-core'; +import YamlFileUpload from './YamlFileUpload'; +import { KnowledgeYamlData, SkillYamlData } from '@/types'; interface Props { isModalOpen: boolean; setIsModalOpen: React.Dispatch>; + isKnowledgeForm: boolean; + onYamlUploadKnowledgeFillForm?: (data: KnowledgeYamlData) => void; + onYamlUploadSkillsFillForm?: (data: SkillYamlData) => void; } -export const YamlFileUploadModal: React.FunctionComponent = ({ isModalOpen, setIsModalOpen }) => { - const [selectedVariant, setSelectedVariant] = React.useState(ModalVariant.small); - - const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1); - const formatSizeVariantName = (variant: string) => capitalize(variant); - - const variantOptions = [ModalVariant.small, ModalVariant.medium, ModalVariant.large]; - - const renderSizeOptions = variantOptions.map((variant) => ( - setSelectedVariant(variant)} - key={formatSizeVariantName(variant)} - name="Variant options" - /> - )); - +export const YamlFileUploadModal: React.FunctionComponent = ({ + isModalOpen, + setIsModalOpen, + isKnowledgeForm, + onYamlUploadKnowledgeFillForm, + onYamlUploadSkillsFillForm +}) => { const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); }; @@ -32,19 +25,21 @@ export const YamlFileUploadModal: React.FunctionComponent = ({ isModalOpe return ( - + - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. + Uploading your YAML will bring in all its data and streamline the contribution process. + - - + ); From 81fbf13c849a3410fffaf826c31afd0efd3bae96 Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Thu, 28 Nov 2024 14:03:51 +0000 Subject: [PATCH 18/20] auto close the modal on successful upload Signed-off-by: Ash Evans --- src/components/Contribute/YamlFileUpload.tsx | 26 ++++++++----------- .../Contribute/YamlFileUploadModal.tsx | 1 + 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/Contribute/YamlFileUpload.tsx b/src/components/Contribute/YamlFileUpload.tsx index 299c84a0..5f82e54e 100644 --- a/src/components/Contribute/YamlFileUpload.tsx +++ b/src/components/Contribute/YamlFileUpload.tsx @@ -18,17 +18,18 @@ interface readFile { } interface YamlFileUploadProps { + setIsModalOpen: React.Dispatch>; isKnowledgeForm: boolean; onYamlUploadKnowledgeFillForm?: (data: KnowledgeYamlData) => void; onYamlUploadSkillsFillForm?: (data: SkillYamlData) => void; } -const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYamlUploadKnowledgeFillForm, onYamlUploadSkillsFillForm }) => { - const [value, setValue] = React.useState(''); - const [filename, setFilename] = React.useState(''); - const [isLoading, setIsLoading] = React.useState(false); - const [isRejected, setIsRejected] = React.useState(false); - +const YamlFileUpload: React.FC = ({ + setIsModalOpen, + isKnowledgeForm, + onYamlUploadKnowledgeFillForm, + onYamlUploadSkillsFillForm +}) => { const [currentFiles, setCurrentFiles] = React.useState([]); const [showStatus, setShowStatus] = React.useState(false); const [statusIcon, setStatusIcon] = React.useState('inProgress'); @@ -36,40 +37,35 @@ const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYaml const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false); const handleFileInputChange = (file: File) => { - setFilename(file.name); if (file) { readFileContent(file); } }; const readFileContent = (file: File) => { - setIsLoading(true); const reader = new FileReader(); reader.onload = (event) => { const fileContent = event.target?.result as string; - setValue(fileContent); - setIsLoading(false); try { const parsedData = yaml.load(fileContent); if (isKnowledgeForm && isKnowledgeFormData(parsedData)) { onYamlUploadKnowledgeFillForm?.(parsedData); + setIsModalOpen(false); } else if (!isKnowledgeForm && isSkillFormData(parsedData)) { onYamlUploadSkillsFillForm?.(parsedData); + setIsModalOpen(false); } else { - setIsRejected(true); + console.error('This yaml file does not match the Skills or Knowledge schema'); } } catch (error) { console.error('Error parsing YAML file:', error); - setIsRejected(true); } }; reader.onerror = () => { console.error('Error reading file'); - setIsLoading(false); - setIsRejected(true); }; reader.readAsText(file); @@ -111,7 +107,7 @@ const YamlFileUpload: React.FC = ({ isKnowledgeForm, onYaml if (latestFile) { handleFileInputChange(latestFile); } else { - console.log('No latest file found!'); + console.error('No latest file found!'); } } }; diff --git a/src/components/Contribute/YamlFileUploadModal.tsx b/src/components/Contribute/YamlFileUploadModal.tsx index dd498d56..56107124 100644 --- a/src/components/Contribute/YamlFileUploadModal.tsx +++ b/src/components/Contribute/YamlFileUploadModal.tsx @@ -36,6 +36,7 @@ export const YamlFileUploadModal: React.FunctionComponent = ({ Uploading your YAML will bring in all its data and streamline the contribution process. Date: Thu, 28 Nov 2024 14:21:57 +0000 Subject: [PATCH 19/20] finishing the first implementation. I will creste a new issue for error handling Signed-off-by: Ash Evans --- .../Contribute/Knowledge/UploadFile.tsx | 2 - src/components/Contribute/Knowledge/index.tsx | 2 +- src/components/Contribute/Skill/index.tsx | 1 - src/components/Contribute/YamlFileUpload.tsx | 64 ++++++------------- .../Contribute/YamlFileUploadModal.tsx | 4 +- 5 files changed, 24 insertions(+), 49 deletions(-) diff --git a/src/components/Contribute/Knowledge/UploadFile.tsx b/src/components/Contribute/Knowledge/UploadFile.tsx index db5fff8c..096a496f 100644 --- a/src/components/Contribute/Knowledge/UploadFile.tsx +++ b/src/components/Contribute/Knowledge/UploadFile.tsx @@ -111,8 +111,6 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[] }; const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length; - console.log('Successfully read file count:', successfullyReadFileCount); - console.log('Current files count:', currentFiles.length); return ( <> diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index fa6db254..fc472935 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -505,7 +505,7 @@ export const KnowledgeForm: React.FunctionComponent = ({ kno - diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx index 1f05e184..a11783d4 100644 --- a/src/components/Contribute/Skill/index.tsx +++ b/src/components/Contribute/Skill/index.tsx @@ -33,7 +33,6 @@ import SkillsInformation from './SkillsInformation/SkillsInformation'; import SkillsDescriptionContent from './SkillsDescription/SkillsDescriptionContent'; import { autoFillSkillsFields } from './AutoFill'; import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner'; -import YamlFileUpload from '../YamlFileUpload'; import { YamlFileUploadModal } from '../YamlFileUploadModal'; export interface SeedExample { diff --git a/src/components/Contribute/YamlFileUpload.tsx b/src/components/Contribute/YamlFileUpload.tsx index 5f82e54e..f7cb84d5 100644 --- a/src/components/Contribute/YamlFileUpload.tsx +++ b/src/components/Contribute/YamlFileUpload.tsx @@ -5,8 +5,6 @@ import yaml from 'js-yaml'; import { KnowledgeYamlData, SkillYamlData } from '@/types'; import { MultipleFileUpload } from '@patternfly/react-core/dist/esm/components/MultipleFileUpload/MultipleFileUpload'; import { MultipleFileUploadMain } from '@patternfly/react-core/dist/esm/components/MultipleFileUpload/MultipleFileUploadMain'; -import { MultipleFileUploadStatus } from '@patternfly/react-core/dist/esm/components/MultipleFileUpload/MultipleFileUploadStatus'; -import { MultipleFileUploadStatusItem } from '@patternfly/react-core/dist/esm/components/MultipleFileUpload/MultipleFileUploadStatusItem'; import { DropEvent } from '@patternfly/react-core/dist/esm/helpers/typeUtils'; import { UploadIcon } from '@patternfly/react-icons/dist/esm/icons/upload-icon'; @@ -31,10 +29,10 @@ const YamlFileUpload: React.FC = ({ onYamlUploadSkillsFillForm }) => { const [currentFiles, setCurrentFiles] = React.useState([]); - const [showStatus, setShowStatus] = React.useState(false); - const [statusIcon, setStatusIcon] = React.useState('inProgress'); const [readFileData, setReadFileData] = React.useState([]); - const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false); + // Implement a failiure condition in a future PR + // const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false); + const fileUploadShouldFail = false; const handleFileInputChange = (file: File) => { if (file) { @@ -100,7 +98,7 @@ const YamlFileUpload: React.FC = ({ if (fileUploadShouldFail) { const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number })); - setCurrentFiles((prevFiles) => [...prevFiles, ...(corruptedFiles as any)]); + setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles]); } else { setCurrentFiles((prevFiles) => [...prevFiles, ...files]); const latestFile = files.at(-1); @@ -125,29 +123,27 @@ const YamlFileUpload: React.FC = ({ .then(() => updateCurrentFiles(droppedFiles)); }; - const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length; - // callback called by the status item when a file is successfully read with the built-in file reader - const handleReadSuccess = (data: string, file: File) => { - setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]); - }; + // const handleReadSuccess = (data: string, file: File) => { + // setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]); + // }; - // callback called by the status item when a file encounters an error while being read with the built-in file reader - const handleReadFail = (error: DOMException, file: File) => { - setReadFileData((prevReadFiles) => [...prevReadFiles, { loadError: error, fileName: file.name, loadResult: 'danger' }]); - }; + // // callback called by the status item when a file encounters an error while being read with the built-in file reader + // const handleReadFail = (error: DOMException, file: File) => { + // setReadFileData((prevReadFiles) => [...prevReadFiles, { loadError: error, fileName: file.name, loadResult: 'danger' }]); + // }; // add helper text to a status item showing any error encountered during the file reading process - const createHelperText = (file: File) => { - const fileResult = readFileData.find((readFile) => readFile.fileName === file.name); - if (fileResult?.loadError) { - return ( - - {fileResult.loadError.toString()} - - ); - } - }; + // const createHelperText = (file: File) => { + // const fileResult = readFileData.find((readFile) => readFile.fileName === file.name); + // if (fileResult?.loadError) { + // return ( + // + // {fileResult.loadError.toString()} + // + // ); + // } + // }; return ( <> @@ -166,24 +162,6 @@ const YamlFileUpload: React.FC = ({ titleTextSeparator="or" infoText="Accepted file types: YAML" /> - {showStatus && ( - - {currentFiles.map((file) => ( - removeFiles([file.name])} - onReadSuccess={handleReadSuccess} - onReadFail={handleReadFail} - progressHelperText={createHelperText(file)} - /> - ))} - - )} ); diff --git a/src/components/Contribute/YamlFileUploadModal.tsx b/src/components/Contribute/YamlFileUploadModal.tsx index 56107124..387daa4d 100644 --- a/src/components/Contribute/YamlFileUploadModal.tsx +++ b/src/components/Contribute/YamlFileUploadModal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from '@patternfly/react-core'; +import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/dist/dynamic/components/Modal'; import YamlFileUpload from './YamlFileUpload'; import { KnowledgeYamlData, SkillYamlData } from '@/types'; @@ -18,7 +18,7 @@ export const YamlFileUploadModal: React.FunctionComponent = ({ onYamlUploadKnowledgeFillForm, onYamlUploadSkillsFillForm }) => { - const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { + const handleModalToggle = () => { setIsModalOpen(!isModalOpen); }; From 85de3046aaba283ef3f5b39dc81f077b771b4a36 Mon Sep 17 00:00:00 2001 From: Ash Evans Date: Thu, 28 Nov 2024 14:27:34 +0000 Subject: [PATCH 20/20] removed unused imports Signed-off-by: Ash Evans --- src/components/Contribute/YamlFileUpload.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Contribute/YamlFileUpload.tsx b/src/components/Contribute/YamlFileUpload.tsx index f7cb84d5..a636395e 100644 --- a/src/components/Contribute/YamlFileUpload.tsx +++ b/src/components/Contribute/YamlFileUpload.tsx @@ -1,6 +1,4 @@ import React from 'react'; -import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; -import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import yaml from 'js-yaml'; import { KnowledgeYamlData, SkillYamlData } from '@/types'; import { MultipleFileUpload } from '@patternfly/react-core/dist/esm/components/MultipleFileUpload/MultipleFileUpload';