Merge pull request #551 from aevo98765/bug/#515/display-invalid-yaml-error-message

Bug/#515/display invalid yaml error message

Author: vishnoianil

src/components/Contribute/Knowledge/Github/index.tsx

@@ -732,6 +732,7 @@ export const KnowledgeFormGithub: React.FunctionComponent<KnowledgeFormProps> =
           setIsModalOpen={setIsYamlModalOpen}
           isKnowledgeForm={true}
           onYamlUploadKnowledgeFillForm={onYamlUploadKnowledgeFillForm}
+          setActionGroupAlertContent={setActionGroupAlertContent}
         />
 
         <Wizard startIndex={activeStepIndex} onClose={handleCancel} height={600}>

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

@@ -714,6 +714,7 @@ export const KnowledgeFormNative: React.FunctionComponent<KnowledgeFormProps> =
           setIsModalOpen={setIsYamlModalOpen}
           isKnowledgeForm={true}
           onYamlUploadKnowledgeFillForm={onYamlUploadKnowledgeFillForm}
+          setActionGroupAlertContent={setActionGroupAlertContent}
         />
 
         <Wizard startIndex={activeStepIndex} onClose={handleCancel} height={600}>

src/components/Contribute/Skill/Github/index.tsx

@@ -468,6 +468,7 @@ export const SkillFormGithub: React.FunctionComponent<SkillFormProps> = ({ skill
           setIsModalOpen={setIsModalOpen}
           isKnowledgeForm={false}
           onYamlUploadSkillsFillForm={onYamlUploadSkillsFillForm}
+          setActionGroupAlertContent={setActionGroupAlertContent}
         />
 
         <Wizard startIndex={activeStepIndex} onClose={handleCancel} height={600}>

src/components/Contribute/Skill/Native/index.tsx

@@ -450,6 +450,7 @@ export const SkillFormNative: React.FunctionComponent<SkillFormProps> = ({ skill
           setIsModalOpen={setIsModalOpen}
           isKnowledgeForm={false}
           onYamlUploadSkillsFillForm={onYamlUploadSkillsFillForm}
+          setActionGroupAlertContent={setActionGroupAlertContent}
         />
 
         <Wizard startIndex={activeStepIndex} onClose={handleCancel} height={600}>

src/components/Contribute/YamlFileUpload.tsx

@@ -3,6 +3,7 @@ import yaml from 'js-yaml';
 import { KnowledgeYamlData, SkillYamlData } from '@/types';
 import { DropEvent, MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
 import { UploadIcon } from '@patternfly/react-icons';
+import { ActionGroupAlertContent } from './Knowledge/Github';
 
 interface readFile {
   fileName: string;
@@ -16,13 +17,15 @@ interface YamlFileUploadProps {
   isKnowledgeForm: boolean;
   onYamlUploadKnowledgeFillForm?: (data: KnowledgeYamlData) => void;
   onYamlUploadSkillsFillForm?: (data: SkillYamlData) => void;
+  setActionGroupAlertContent: React.Dispatch<React.SetStateAction<ActionGroupAlertContent | undefined>>;
 }
 
 const YamlFileUpload: React.FC<YamlFileUploadProps> = ({
   setIsModalOpen,
   isKnowledgeForm,
   onYamlUploadKnowledgeFillForm,
-  onYamlUploadSkillsFillForm
+  onYamlUploadSkillsFillForm,
+  setActionGroupAlertContent
 }) => {
   const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
   const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
@@ -51,9 +54,23 @@ const YamlFileUpload: React.FC<YamlFileUploadProps> = ({
           onYamlUploadSkillsFillForm?.(parsedData);
           setIsModalOpen(false);
         } else {
+          const yamlFileSchemaIssueAlertContent: ActionGroupAlertContent = {
+            title: 'YAML file upload error!',
+            message: `This yaml file does not match the Skills or Knowledge schema.`,
+            success: false,
+            timeout: false
+          };
+          setActionGroupAlertContent(yamlFileSchemaIssueAlertContent);
           console.error('This yaml file does not match the Skills or Knowledge schema');
         }
       } catch (error) {
+        const yamlFileParsingIssueAlertContent: ActionGroupAlertContent = {
+          title: 'YAML file upload error!',
+          message: `This yaml file is not correct and cannot be parsed.`,
+          success: false,
+          timeout: false
+        };
+        setActionGroupAlertContent(yamlFileParsingIssueAlertContent);
         console.error('Error parsing YAML file:', error);
       }
     };

src/components/Contribute/YamlFileUploadModal.tsx

@@ -2,21 +2,24 @@ import React from 'react';
 import YamlFileUpload from './YamlFileUpload';
 import { KnowledgeYamlData, SkillYamlData } from '@/types';
 import { Modal, ModalVariant, ModalHeader, ModalBody } from '@patternfly/react-core';
+import { ActionGroupAlertContent } from './Knowledge/Github';
 
 interface Props {
   isModalOpen: boolean;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isKnowledgeForm: boolean;
   onYamlUploadKnowledgeFillForm?: (data: KnowledgeYamlData) => void;
   onYamlUploadSkillsFillForm?: (data: SkillYamlData) => void;
+  setActionGroupAlertContent: React.Dispatch<React.SetStateAction<ActionGroupAlertContent | undefined>>;
 }
 
 export const YamlFileUploadModal: React.FunctionComponent<Props> = ({
   isModalOpen,
   setIsModalOpen,
   isKnowledgeForm,
   onYamlUploadKnowledgeFillForm,
-  onYamlUploadSkillsFillForm
+  onYamlUploadSkillsFillForm,
+  setActionGroupAlertContent
 }) => {
   const handleModalToggle = () => {
     setIsModalOpen(!isModalOpen);
@@ -40,6 +43,7 @@ export const YamlFileUploadModal: React.FunctionComponent<Props> = ({
             isKnowledgeForm={isKnowledgeForm}
             onYamlUploadKnowledgeFillForm={onYamlUploadKnowledgeFillForm}
             onYamlUploadSkillsFillForm={onYamlUploadSkillsFillForm}
+            setActionGroupAlertContent={setActionGroupAlertContent}
           />
         </ModalBody>
       </Modal>