Merge pull request #22 from aleksbobic/3-dataset-overview

3 dataset overview
aleksbobic · Apr 16, 2022 · cbe640b · cbe640b
2 parents 286784c + cd0374b
commit cbe640b
Show file tree

Hide file tree

Showing 16 changed files with 2,242 additions and 964 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -27,7 +27,7 @@
     "lint-staged": "^11.0.0",
     "mobx": "^6.3.0",
     "mobx-react": "^7.1.0",
-    "node-sass": "^6.0.0",
+    "node-sass": "^7.0.0",
     "prettier": "^2.3.0",
     "query-string": "^7.1.0",
     "react": "^17.0.2",
@@ -102,4 +102,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}
diff --git a/app/src/components/feature/datasetconfig/DatasetConfig.component.jsx b/app/src/components/feature/datasetconfig/DatasetConfig.component.jsx
diff --git a/app/src/components/feature/searchbar/SearchBar.component.jsx b/app/src/components/feature/searchbar/SearchBar.component.jsx
@@ -93,6 +93,7 @@ function SearchBar(props) {
                                 paddingRight="50px"
                                 onChange={handleChange}
                                 value={values.search}
+                                autoComplete="off"
                                 borderStartRadius={
                                     props.datasetSelectorDisabled ? '4px' : '0'
                                 }

diff --git a/app/src/components/interface/datasetconfigmodal/DatasetConfigModal.component.jsx b/app/src/components/interface/datasetconfigmodal/DatasetConfigModal.component.jsx
@@ -0,0 +1,74 @@
+import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    useDisclosure
+} from '@chakra-ui/react';
+import DatasetConfigComponent from 'components/feature/datasetconfig/DatasetConfig.component';
+import { observer } from 'mobx-react';
+import { useContext, useEffect } from 'react';
+import { RootStoreContext } from 'stores/RootStore';
+
+function DatasetConfigModal() {
+    const store = useContext(RootStoreContext);
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
+    useEffect(() => {
+        if (store.fileUpload.showConfigChangeModal) {
+            onOpen();
+        } else if (!store.fileUpload.showConfigChangeModal && isOpen) {
+            onClose();
+        }
+    }, [isOpen, onClose, onOpen, store.fileUpload.showConfigChangeModal]);
+
+    const updateConfig = () => {
+        store.fileUpload.updateConfig();
+    };
+
+    const cancelSettingsEdit = () => {
+        store.fileUpload.changeConfigChangeModalVisiblity(false);
+        store.fileUpload.resetFileUploadData();
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            size="xl"
+            isCentered
+            closeOnEsc={false}
+            closeOnOverlayClick={false}
+        >
+            <ModalOverlay bg="none" backdropFilter="auto" backdropBlur="2px" />
+            <ModalContent width="748px" minWidth="748px" maxWidth="748px">
+                <ModalHeader>Dataset config change</ModalHeader>
+                {isOpen && (
+                    <ModalBody overflowY="scroll" width="748px">
+                        <DatasetConfigComponent formType="modify" />
+                    </ModalBody>
+                )}
+
+                {store.fileUpload.fileUploadData.name !== '' && (
+                    <ModalFooter>
+                        <Button
+                            variant="outline"
+                            mr={3}
+                            onClick={cancelSettingsEdit}
+                        >
+                            Cancel
+                        </Button>
+                        <Button variant="solid" onClick={() => updateConfig()}>
+                            Update config
+                        </Button>
+                    </ModalFooter>
+                )}
+            </ModalContent>
+        </Modal>
+    );
+}
+
+export default observer(DatasetConfigModal);