chore(pf5): migrate shared components

cryostatio · Nov 5, 2023 · d7c4dd8 · d7c4dd8
1 parent 7f46aad
commit d7c4dd8
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 25 deletions.
diff --git a/src/app/Agent/AgentProbeTemplates.tsx b/src/app/Agent/AgentProbeTemplates.tsx
@@ -458,6 +458,9 @@ export const AgentProbeTemplateUploadModal: React.FC<AgentProbeTemplateUploadMod
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
+            dropZoneAccepts={{
+              'application/xml': ['.xml'],
+            }}
             displayAccepts={['XML']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}

diff --git a/src/app/Archives/ArchiveUploadModal.tsx b/src/app/Archives/ArchiveUploadModal.tsx
@@ -181,6 +181,9 @@ export const ArchiveUploadModal: React.FC<ArchiveUploadModalProps> = ({ onClose,
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
+            dropZoneAccepts={{
+              'application/octet-stream': ['.jfr'],
+            }}
             displayAccepts={['JFR']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}

diff --git a/src/app/Dashboard/LayoutTemplateUploadModal.tsx b/src/app/Dashboard/LayoutTemplateUploadModal.tsx
@@ -255,7 +255,9 @@ export const LayoutTemplateUploadModal: React.FC<LayoutTemplateUploadModalProps>
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
-            dropZoneAccepts={['application/json']}
+            dropZoneAccepts={{
+              'application/json': ['.json'],
+            }}
             displayAccepts={['JSON']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}

diff --git a/src/app/Events/EventTemplates.tsx b/src/app/Events/EventTemplates.tsx
@@ -519,6 +519,9 @@ export const EventTemplatesUploadModal: React.FC<EventTemplatesUploadModalProps>
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
+            dropZoneAccepts={{
+              'application/xml': ['.xml', '.jfc'],
+            }}
             displayAccepts={['XML', 'JFC']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}

diff --git a/src/app/Rules/RulesUploadModal.tsx b/src/app/Rules/RulesUploadModal.tsx
@@ -162,7 +162,9 @@ export const RuleUploadModal: React.FC<RuleUploadModalProps> = ({ onClose, ...pr
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
-            dropZoneAccepts={['application/json']}
+            dropZoneAccepts={{
+              'application/json': ['.json'],
+            }}
             displayAccepts={['JSON']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}

diff --git a/src/app/SecurityPanel/CertificateUploadModal.tsx b/src/app/SecurityPanel/CertificateUploadModal.tsx
@@ -129,7 +129,10 @@ export const CertificateUploadModal: React.FC<CertificateUploadModalProps> = ({
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
-            dropZoneAccepts={['application/x-x509-ca-cert', 'application/pkix-cert']}
+            dropZoneAccepts={{
+              'application/x-x509-ca-cert': ['.der'],
+              'application/pkix-cert': ['.cer'],
+            }}
             displayAccepts={['CER', 'DER']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}

diff --git a/src/app/Shared/Components/FileUploads.tsx b/src/app/Shared/Components/FileUploads.tsx
@@ -25,6 +25,7 @@ import {
 import { InProgressIcon, UploadIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { Subject } from 'rxjs';
+import { DropzoneAccept, FileRejection } from './types';
 
 export type ProgressVariant = 'success' | 'danger' | 'warning';
 
@@ -50,7 +51,7 @@ export interface MultiFileUploadProps {
   abortRef?: React.RefObject<HTMLDivElement>;
   uploading: boolean;
   displayAccepts: string[];
-  dropZoneAccepts?: string[]; // Infer from displayAccepts, if not specified
+  dropZoneAccepts: DropzoneAccept;
   onFilesChange?: (files: FUpload[]) => void;
   onFileSubmit: (fileUploads: FUpload[], uploadCallbacks: UploadCallbacks) => void;
   titleIcon?: React.ReactNode;
@@ -76,15 +77,8 @@ export const MultiFileUpload: React.FC<MultiFileUploadProps> = ({
   const [fileUploads, setFileUploads] = React.useState<FUpload[]>([]);
   const [showCancelPrompt, setShowCancelPrompt] = React.useState(false);
 
-  const dzAccept = React.useMemo(() => {
-    if (dropZoneAccepts && dropZoneAccepts.length) {
-      return dropZoneAccepts.join(',');
-    }
-    return displayAccepts.map((t) => `.${t.toLocaleLowerCase()}`).join(',');
-  }, [dropZoneAccepts, displayAccepts]);
-
   const handleFileDrop = React.useCallback(
-    (droppedFiles: File[]) => {
+    (_, droppedFiles: File[]) => {
       setFileUploads((old) => {
         // Check for re-uploads
         const currentFilenames = old.map((fileUpload) => fileUpload.file.name);
@@ -108,19 +102,14 @@ export const MultiFileUpload: React.FC<MultiFileUploadProps> = ({
   );
 
   const handleFileReject = React.useCallback(
-    (rejectedFiles: File[]) => {
-      rejectedFiles.forEach((f) => {
-        if (!dzAccept.includes(f.type) || f.type === '') {
-          const message = `Expected file format: ${dzAccept}, but received ${
-            f.type === '' ? 'unknown type' : f.type
-          } for ${f.name}`;
-          notifications.warning(`Incompatible file format`, message);
-        } else {
-          notifications.warning(`Failed to load file`, f.name);
-        }
+    (fileRejections: FileRejection[]) => {
+      fileRejections.forEach(({ file, errors }) => {
+        errors.forEach(({ message }) => {
+          notifications.warning(`Rejected file: ${file.name}`, message);
+        });
       });
     },
-    [notifications, dzAccept],
+    [notifications],
   );
 
   const handleFileRemove = React.useCallback(
@@ -272,7 +261,7 @@ export const MultiFileUpload: React.FC<MultiFileUploadProps> = ({
       <MultipleFileUpload
         onFileDrop={handleFileDrop}
         dropzoneProps={{
-          accept: dzAccept,
+          accept: dropZoneAccepts,
           onDropRejected: handleFileReject,
         }}
         disabled={uploading}

diff --git a/src/app/Shared/Components/SelectTemplateSelectorForm.tsx b/src/app/Shared/Components/SelectTemplateSelectorForm.tsx
@@ -71,7 +71,7 @@ export const SelectTemplateSelectorForm: React.FC<SelectTemplateSelectorFormProp
   );
 
   const handleTemplateSelect = React.useCallback(
-    (selected: string) => {
+    (_, selected: string) => {
       if (!selected.length) {
         onSelect(undefined);
       } else {

diff --git a/src/app/Shared/Components/types.ts → src/app/Shared/Components/types.tsx b/src/app/Shared/Components/types.ts → src/app/Shared/Components/types.tsx
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import * as React from 'react';
+import { MultipleFileUploadProps } from '@patternfly/react-core';
+
 export interface LoadingProps {
   spinnerAriaValueText?: string; // Text describing that current loading status or progress
   spinnerAriaLabelledBy?: string; // Id of element which describes what is being loaded
@@ -24,3 +27,12 @@ export interface LoadingProps {
 export type DescriptionProps = {
   children?: React.ReactNode;
 };
+
+export type Unpacked<T> = T extends (infer A)[] ? A : T;
+
+// FIXME: React drop-zone types cannot be imported
+export type DropzoneOptions = NonNullable<MultipleFileUploadProps['dropzoneProps']>;
+
+export type FileRejection = Unpacked<Parameters<NonNullable<DropzoneOptions['onDropRejected']>>[0]>;
+
+export type DropzoneAccept = DropzoneOptions['accept'];