instructlab · nerdalert · Aug 31, 2024 · Aug 31, 2024 · Aug 31, 2024 · Aug 31, 2024
diff --git a/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx b/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx
@@ -10,6 +10,7 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/ex
 import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/constants';
 import { KnowledgeFormData } from '..';
 import { checkKnowledgeFormCompletion } from '../validation';
+import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/components/Modal/Modal';
 
 interface Props {
   reset: boolean;
@@ -21,8 +22,6 @@ interface Props {
   setKnowledgeDocumentCommit: React.Dispatch<React.SetStateAction<string>>;
   documentName: string;
   setDocumentName: React.Dispatch<React.SetStateAction<string>>;
-  uploadedFiles: File[];
-  setUploadedFiles: React.Dispatch<React.SetStateAction<File[]>>;
 }
 
 const DocumentInformation: React.FC<Props> = ({
@@ -34,11 +33,12 @@ const DocumentInformation: React.FC<Props> = ({
   knowledgeDocumentCommit,
   setKnowledgeDocumentCommit,
   documentName,
-  setDocumentName,
-  uploadedFiles,
-  setUploadedFiles
+  setDocumentName
 }) => {
   const [useFileUpload, setUseFileUpload] = useState(true);
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalText, setModalText] = useState<string | undefined>();
 
   const [successAlertTitle, setSuccessAlertTitle] = useState<string | undefined>();
   const [successAlertMessage, setSuccessAlertMessage] = useState<string | undefined>();
@@ -99,7 +99,6 @@ const DocumentInformation: React.FC<Props> = ({
 
   const handleFilesChange = (files: File[]) => {
     setUploadedFiles(files);
-    setDocumentName(files.map((file) => file.name).join(', ')); // Populate the patterns field
   };
 
   const handleDocumentUpload = async () => {
@@ -162,6 +161,41 @@ const DocumentInformation: React.FC<Props> = ({
     setFailureAlertMessage(undefined);
   };
 
+  const handleAutomaticUpload = () => {
+    if (knowledgeDocumentRepositoryUrl.length > 0 || knowledgeDocumentCommit.length > 0 || documentName.length > 0) {
+      console.log('Switching to automatic upload will clear the document information');
+      setModalText('Switching to automatic upload will clear the document information. Are you sure you want to continue?');
+      setIsModalOpen(true);
+    } else {
+      setUseFileUpload(true);
+    }
+  };
+
+  const handleManualUpload = () => {
+    if (uploadedFiles.length > 0) {
+      console.log('Switching to manual upload will clear the uploaded files');
+      setModalText('Switching to manual upload will clear the uploaded files. Are you sure you want to continue?');
+      setIsModalOpen(true);
+    } else {
+      setUseFileUpload(false);
+    }
+  };
+
+  const handleModalContinue = () => {
+    if (useFileUpload) {
+      setUploadedFiles([]);
+    } else {
+      setKnowledgeDocumentRepositoryUrl('');
+      setValidRepo(ValidatedOptions.default);
+      setKnowledgeDocumentCommit('');
+      setValidCommit(ValidatedOptions.default);
+      setDocumentName('');
+      setValidDocumentName(ValidatedOptions.default);
+    }
+    setUseFileUpload(!useFileUpload);
+    setIsModalOpen(false);
+  };
+
   return (
     <FormFieldGroupExpandable
       toggleAriaLabel="Details"
@@ -184,20 +218,36 @@ const DocumentInformation: React.FC<Props> = ({
           <Button
             variant={useFileUpload ? 'primary' : 'secondary'}
             className={useFileUpload ? 'button-active' : 'button-secondary'}
-             => setUseFileUpload(true)}
+             => handleAutomaticUpload()}
           >
             Automatically Upload Documents
           </Button>
           <Button
             variant={useFileUpload ? 'secondary' : 'primary'}
             className={!useFileUpload ? 'button-active' : 'button-secondary'}
-             => setUseFileUpload(false)}
+             => handleManualUpload()}
           >
             Manually Enter Document Details
           </Button>
         </div>
       </FormGroup>
-
+      <Modal
+        variant={ModalVariant.medium}
+        title="Data Loss Warning"
+        titleIconVariant="warning"
+        isOpen={isModalOpen}
+         => setIsModalOpen(false)}
+        actions={[
+          <Button key="Continue" variant="secondary"  => handleModalContinue()}>
+            Continue
+          </Button>,
+          <Button key="cancel" variant="secondary"  => setIsModalOpen(false)}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <p>{modalText}</p>
+      </Modal>
       {!useFileUpload ? (
         <FormGroup key={'doc-info-details-id'}>
           <TextInput
@@ -274,7 +324,6 @@ const DocumentInformation: React.FC<Props> = ({
           <Button variant="primary" >
             Submit Files
           </Button>
-          <FormHelperText></FormHelperText>
         </>
       )}
 

diff --git a/src/components/Contribute/Knowledge/DownloadAttribution/DownloadAttribution.tsx b/src/components/Contribute/Knowledge/DownloadAttribution/DownloadAttribution.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { validateFields } from '../validation';
 import { ActionGroupAlertContent, KnowledgeFormData } from '..';
+import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
+import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
 
 interface Props {
   disableAction: boolean;
@@ -32,9 +33,9 @@ const DownloadAttribution: React.FC<Props> = ({ disableAction, knowledgeFormData
   };
 
   return (
-    <Button variant="primary" type="button" isDisabled={disableAction} >
-      Download Attribution
-    </Button>
+    <DropdownItem key="DownloadAttribution" to="#default-link6" isDisabled={disableAction} >
+      <FileIcon /> Attribution File
+    </DropdownItem>
   );
 };
 

diff --git a/src/components/Contribute/Knowledge/DownloadDropdown/DownloadDropdown.tsx b/src/components/Contribute/Knowledge/DownloadDropdown/DownloadDropdown.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Dropdown } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import { DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
+import DownloadYaml from '../DownloadYaml/DownloadYaml';
+import DownloadAttribution from '../DownloadAttribution/DownloadAttribution';
+import { ActionGroupAlertContent, KnowledgeFormData } from '..';
+import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+
+interface Props {
+  disableAction: boolean;
+  knowledgeFormData: KnowledgeFormData;
+  setActionGroupAlertContent: React.Dispatch<React.SetStateAction<ActionGroupAlertContent | undefined>>;
+  githubUsername: string | undefined;
+}
+
+export const DownloadDropdown: React.FunctionComponent<Props> = ({
+  disableAction,
+  knowledgeFormData,
+  setActionGroupAlertContent,
+  githubUsername
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const  => {
+    setIsOpen(!isOpen);
+  };
+
+  const  => {
+    // eslint-disable-next-line no-console
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      >
+       boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef}  isExpanded={isOpen}>
+          <DownloadIcon /> Download
+        </MenuToggle>
+      )}
+      ouiaId="DownloadDropdown"
+      shouldFocusToggleOnSelect
+    >
+      <DropdownList>
+        <DownloadYaml
+          disableAction={disableAction}
+          knowledgeFormData={knowledgeFormData}
+          setActionGroupAlertContent={setActionGroupAlertContent}
+          githubUsername={githubUsername}
+        />
+        <DownloadAttribution
+          disableAction={disableAction}
+          knowledgeFormData={knowledgeFormData}
+          setActionGroupAlertContent={setActionGroupAlertContent}
+        />
+      </DropdownList>
+    </Dropdown>
+  );
+};
diff --git a/src/components/Contribute/Knowledge/DownloadYaml/DownloadYaml.tsx b/src/components/Contribute/Knowledge/DownloadYaml/DownloadYaml.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { validateFields } from '../validation';
 import { ActionGroupAlertContent, KnowledgeFormData
9E81
 } from '..';
 import { KnowledgeYamlData, SchemaVersion } from '@/types';
 import { dumpYaml } from '@/utils/yamlConfig';
+import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 
 interface Props {
   disableAction: boolean;
@@ -46,9 +47,9 @@ const DownloadYaml: React.FC<Props> = ({ disableAction, knowledgeFormData, setAc
     document.body.removeChild(a);
   };
   return (
-    <Button variant="primary" type="button" isDisabled={disableAction} >
-      Download YAML
-    </Button>
+    <DropdownItem key="Download Yaml" to="#default-link6" isDisabled={disableAction} >
+      <CodeIcon /> Yaml File
+    </DropdownItem>
   );
 };
 

diff --git a/src/components/Contribute/Knowledge/UploadFile.tsx b/src/components/Contribute/Knowledge/UploadFile.tsx
@@ -7,9 +7,8 @@ import {
   MultipleFileUpload,
   MultipleFileUploadMain
 } from '@patternfly/react-core/dist/dynamic/components/MultipleFileUpload';
-import { Modal } from '@patternfly/react-core/dist/dynamic/next/components/Modal';
+import { Modal } from '@patternfly/react-core/dist/dynamic/components/Modal';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/dynamic/icons/exclamation-triangle-icon';
 import { FileRejection, DropEvent } from 'react-dropzone';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
@@ -88,10 +87,10 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[]
   const handleDropRejected = (fileRejections: FileRejection[]) => {
     console.warn('Files rejected:', fileRejections);
     if (fileRejections.length === 1) {
-      setModalText(`${fileRejections[0].file.name} is not an accepted file type`);
+      setModalText(`${fileRejections[0].file.name} is not an accepted file type. Please upload a Markdown file.`);
     } else {
       const rejectedMessages = fileRejections.reduce((acc, fileRejection) => (acc += `${fileRejection.file.name}, `), '');
-      setModalText(`${rejectedMessages} are not accepted file types`);
+      setModalText(`${rejectedMessages} are not accepted file types. Please upload Markdown files.`);
     }
   };
 
@@ -116,7 +115,6 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[]
         >
         dropzoneProps={{
           accept: {
-            'application/pdf': ['.pdf'],
             'text/markdown': ['.md']
           },
           onDropRejected: handleDropRejected
@@ -149,16 +147,21 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[]
         <Modal
           isOpen={!!modalText}
           title="Unsupported file"
+          titleIconVariant="warning"
           variant="small"
           aria-label="unsupported file upload attempted"
            => setModalText('')}
+          actions={[
+            <Button key="close" variant="secondary"  => setModalText('')}>
+              Close
+            </Button>
+          ]}
         >
-          <div>
-            <ExclamationTriangleIcon /> {modalText}
-          </div>
-          <Button key="close" variant="primary"  => setModalText('')}>
-            Close
-          </Button>
+          <p>
+            <br />
+            {modalText}
+            <br />
+          </p>
         </Modal>
       </MultipleFileUpload>
     </>