Move collection creation page to its own URL so that we can deeplink to it

src/components/Collections/CreateCollection/CreateCollectionButton.jsx

@@ -1,64 +1,40 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import { Button, Tooltip } from '@mui/material';
-import CreateCollectionDialog from './CreateCollectionDialog';
+import { Link } from 'react-router';
 import AddIcon from '@mui/icons-material/Add';
 import { useClient } from '../../../context/client-context';
-import PropTypes from 'prop-types';
 
 const BUTTON_LABEL = 'Create Collection';
 
-const CreateCollectionButton = ({ onComplete }) => {
-  const [open, setOpen] = useState(false);
+const CreateCollectionButton = () => {
   const { isRestricted } = useClient();
 
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    onComplete();
-  }, [onComplete]);
-
-  const handleOpen = useCallback(() => {
-    if (!isRestricted) {
-      setOpen(true);
-    }
-  }, [isRestricted]);
+  if (isRestricted) {
+    return (
+      <Tooltip
+        title="Access Denied: You do not have permission to create collections. Please contact your administrator."
+        placement="bottom"
+      >
+        <span>
+          <Button variant="contained" startIcon={<AddIcon fontSize="small" />} disabled aria-label={BUTTON_LABEL}>
+            {BUTTON_LABEL}
+          </Button>
+        </span>
+      </Tooltip>
+    );
+  }
 
   return (
-    <>
-      {isRestricted ? (
-        <Tooltip
-          title="Access Denied: You do not have permission to create collections. Please contact your administrator."
-          placement="bottom"
-        >
-          {/* span is needed to allow tooltip on disabled button */}
-          <span>
-            <Button
-              variant="contained"
-              startIcon={<AddIcon fontSize="small" />}
-              onClick={handleOpen}
-              disabled
-              aria-label={BUTTON_LABEL}
-            >
-              {BUTTON_LABEL}
-            </Button>
-          </span>
-        </Tooltip>
-      ) : (
-        <Button
-          variant="contained"
-          startIcon={<AddIcon fontSize="small" />}
-          onClick={handleOpen}
-          aria-label={BUTTON_LABEL}
-        >
-          {BUTTON_LABEL}
-        </Button>
-      )}
-      <CreateCollectionDialog open={open} handleClose={handleClose} />
-    </>
+    <Button
+      variant="contained"
+      startIcon={<AddIcon fontSize="small" />}
+      component={Link}
+      to="/collection/create"
+      aria-label={BUTTON_LABEL}
+    >
+      {BUTTON_LABEL}
+    </Button>
   );
 };
 
-CreateCollectionButton.propTypes = {
-  onComplete: PropTypes.func.isRequired,
-};
-
 export default CreateCollectionButton;

src/pages/CollectionCreation.jsx

@@ -0,0 +1,21 @@
+import React, { useCallback } from 'react';
+import { Navigate, useNavigate } from 'react-router';
+import CreateCollectionDialog from '../components/Collections/CreateCollection/CreateCollectionDialog';
+import { useClient } from '../context/client-context';
+
+function CollectionCreation() {
+  const navigate = useNavigate();
+  const { isRestricted } = useClient();
+
+  const handleClose = useCallback(() => {
+    navigate('/collections');
+  }, [navigate]);
+
+  if (isRestricted) {
+    return <Navigate to="/collections" replace />;
+  }
+
+  return <CreateCollectionDialog open={true} handleClose={handleClose} />;
+}
+
+export default CollectionCreation;

src/pages/Collections.jsx

@@ -298,7 +298,7 @@ function Collections() {
                 Delete ({selectedCollections.size})
               </Button>
             )}
-            <CreateCollectionButton onComplete={() => getCollectionsCall(currentPage)} />
+            <CreateCollectionButton />
             <SnapshotsUpload onComplete={() => getCollectionsCall(currentPage)} key={'snapshots'} />
           </Grid>
           <Grid size={12} mb={2}>

src/routes.jsx

@@ -3,6 +3,7 @@ import Home from './pages/Home';
 import Console from './pages/Console';
 import Collections from './pages/Collections';
 import Collection from './pages/Collection';
+import CollectionCreation from './pages/CollectionCreation';
 import Visualize from './pages/Visualize';
 import TutorialIndex from './pages/TutorialIndex';
 import Tutorial from './pages/Tutorial';
@@ -22,6 +23,7 @@ const routes = () => [
       { path: '/welcome', element: <Welcome /> },
       { path: '/console', element: <Console /> },
       { path: '/datasets', element: <Datasets /> },
+      { path: '/collection/create', element: <CollectionCreation /> },
       { path: '/collections', element: <Collections /> },
       { path: '/collections/:collectionName', element: <Collection /> },
       {