feat(HMS-3688): Add blueprints import dialog

src/Components/Blueprints/ImportBlueprintModal.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+
+import {
+  ActionGroup,
+  Button,
+  DropEvent,
+  FileUpload,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Modal,
+  ModalVariant,
+} from '@patternfly/react-core';
+
+interface ImportBlueprintModalProps {
+  setShowImportModal: React.Dispatch<React.SetStateAction<boolean>>;
+  isOpen: boolean;
+}
+
+export const ImportBlueprintModal: React.FunctionComponent<
+  ImportBlueprintModalProps
+> = ({ setShowImportModal, isOpen }: ImportBlueprintModalProps) => {
+  const onImportClose = () => {
+    setShowImportModal(false);
+  };
+  const [jsonContent, setJsonContent] = React.useState('');
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isRejected, setIsRejected] = React.useState(false);
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setFilename(file.name);
+    setIsRejected(false);
+  };
+  const handleClear = () => {
+    setFilename('');
+    setJsonContent('');
+    setIsRejected(false);
+  };
+  const handleTextChange = (
+    _: React.ChangeEvent<HTMLTextAreaElement>,
+    value: string
+  ) => {
+    setJsonContent(value);
+  };
+  const handleDataChange = (_: DropEvent, value: string) => {
+    setJsonContent(value);
+  };
+  const handleFileRejected = () => {
+    setIsRejected(true);
+  };
+  const handleFileReadStarted = () => {
+    setIsLoading(true);
+  };
+  const handleFileReadFinished = () => {
+    setIsLoading(false);
+  };
+
+  return (
+    <Modal
+      variant={ModalVariant.medium}
+      isOpen={isOpen}
+      title={'Import pipeline'}
+      onClose={onImportClose}
+    >
+      <Form>
+        <FormGroup fieldId="import-blueprint-file-upload">
+          <FileUpload
+            id="import-blueprint-file-upload"
+            type="text"
+            value={jsonContent}
+            filename={filename}
+            filenamePlaceholder="Drag and drop a file or upload one"
+            onFileInputChange={handleFileInputChange}
+            onDataChange={handleDataChange}
+            onTextChange={handleTextChange}
+            onReadStarted={handleFileReadStarted}
+            onReadFinished={handleFileReadFinished}
+            onClearClick={handleClear}
+            isLoading={isLoading}
+            allowEditingUploadedText={false}
+            browseButtonText="Upload"
+            dropzoneProps={{
+              accept: { 'text/json': ['.json'] },
+              maxSize: 1024,
+              onDropRejected: handleFileRejected,
+            }}
+            validated={isRejected ? 'error' : 'default'}
+          />
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem variant={isRejected ? 'error' : 'default'}>
+                {isRejected
+                  ? 'Must be a JSON file no larger than 1 KB'
+                  : 'Upload a JSON file'}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        </FormGroup>
+      </Form>
+      <ActionGroup>
+        <Button type="button">Review and finish</Button>
+        <Button variant="link" type="button" onClick={onImportClose}>
+          Cancel
+        </Button>
+      </ActionGroup>
+    </Modal>
+  );
+};

src/Components/sharedComponents/ImageBuilderHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   Button,
@@ -25,6 +25,7 @@ import { Link } from 'react-router-dom';
 
 import { resolveRelPath } from '../../Utilities/path';
 import './ImageBuilderHeader.scss';
+import { ImportBlueprintModal } from '../Blueprints/ImportBlueprintModal';
 
 type ImageBuilderHeaderPropTypes = {
   experimentalFlag?: boolean;
@@ -33,8 +34,13 @@ type ImageBuilderHeaderPropTypes = {
 export const ImageBuilderHeader = ({
   experimentalFlag,
 }: ImageBuilderHeaderPropTypes) => {
+  const [showImportModal, setShowImportModal] = useState(false);
   return (
     <>
+      <ImportBlueprintModal
+        setShowImportModal={setShowImportModal}
+        isOpen={showImportModal}
+      />
       <PageHeader data-testid="image-builder-header">
         <Flex>
           <FlexItem>
@@ -114,6 +120,7 @@ export const ImageBuilderHeader = ({
                   variant="secondary"
                   icon={<ImportIcon />}
                   iconPosition="end"
+                  onClick={() => setShowImportModal(true)}
                 >
                   Import{' '}
                 </Button>