[frontend]Improvements to initial file chooser commit

desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Modal from 'antd/lib/modal/Modal';
+
+interface FileProps {
+  show: boolean;
+  onCancel: () => void;
+  title: string;
+  okText: string;
+}
+
+const defaultProps = { title: 'Choose a file', okText: 'Select' };
+
+const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }) => {
+  const handleOk = () => {
+    //temporary until the file is selected through the file chooser compoent
+    onCancel();
+  };
+
+  const handleCancel = () => {
+    onCancel();
+  };
+
+  return (
+    <Modal
+      title={title}
+      open={show}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okText={okText}
+    ></Modal>
+  );
+};
+
+FileChooserModal.defaultProps = defaultProps;
+
+export default FileChooserModal;

desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.scss

@@ -0,0 +1,8 @@
+@use '../../../components/styles/colors' as colors;
+
+.file-chooser__button {
+  background-color: colors.$hue-primary-color-dark;
+  color: white;
+  margin-left: 40px;
+  margin-top: 12px;
+}

desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import React from 'react';
+
+import FileChooserWithButton from './FileChooserWithButton';
+
+test('Filechooser modal opens on button click', async () => {
+  const user = userEvent.setup();
+  const { queryByText } = render(<FileChooserWithButton title={'File chooser component'} />);
+  await user.click(screen.getByRole('button', { name: 'File chooser component' }));
+  expect(queryByText('Choose a file')).toBeInTheDocument();
+});

desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+
+import './FileChooserWithButton.scss';
+import FileChooserModal from '../FileChooserModal/FileChooserModal';
+
+interface FileChooserWithButtonProps {
+  title: string;
+}
+
+const defaultProps = { title: 'File chooser component' };
+
+const FileChooserWithButton: React.FC<FileChooserWithButtonProps> = ({ title }): JSX.Element => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Button className="file-chooser__button" type="primary" onClick={() => setShow(true)}>
+        {title}
+      </Button>
+
+      <FileChooserModal
+        onCancel={() => setShow(false)}
+        show={show}
+        title="Choose a file"
+        okText="Select"
+      />
+    </>
+  );
+};
+
+FileChooserWithButton.defaultProps = defaultProps;
+
+export default FileChooserWithButton;

desktop/core/src/desktop/js/reactComponents/imports.js

@@ -11,10 +11,8 @@ export async function loadComponent(name) {
     case 'ReactExampleGlobal':
       return (await import('./ReactExampleGlobal/ReactExampleGlobal')).default;
 
-    case 'FileChooserComponentButton':
-      return (
-        await import('./FileChooserComponent/FileChooserComponentButton/FileChooserComponentButton')
-      ).default;
+    case 'FileChooserWithButton':
+      return (await import('./FileChooser/FileChooserWithButton/FileChooserWithButton')).default;
 
     default:
       console.error(`A placeholder component is rendered because you probably forgot to include your new component in the 

desktop/libs/indexer/src/indexer/templates/importer.mako

@@ -79,18 +79,6 @@ ${ commonheader(_("Importer"), "indexer", user, request, "60px") | n,unicode }
               <!-- /ko -->
             </a>
           </li>
-          <!-- File Chooser component button 
-          <script type="text/javascript">
-            (function () {    
-              window.createReactComponents('#importerComponents');
-            })();
-          </script>
-          <li>
-            <div>
-              <FileChooserComponentButton data-reactcomponent='FileChooserComponentButton' ></FileChooserComponentButton>
-            </div>
-          </li>
-          !-->
         </ul>
       </div>
     </div>