Working, requests busted

src/components/Firestore/CollectionList.tsx

@@ -79,6 +79,7 @@ const CollectionList: React.FC<React.PropsWithChildren<Props>> = ({
       const newCollection = reference
         ? collection(reference, value.collectionId)
         : collection(firestore, value.collectionId);
+      const databaseId = "(default)" // FIXME where do we get the database ID from?
       await setDoc(doc(newCollection, value.document.id), value.document.data);
 
       // Redirect to the new collection
@@ -89,10 +90,10 @@ const CollectionList: React.FC<React.PropsWithChildren<Props>> = ({
           .map((uri) => encodeURIComponent(uri))
           .join('/');
         history.push(
-          `/firestore/asdf/data/${encodedReferencePath}/${encodedCollectionId}` // FIXME
+          `/firestore/${databaseId}/data/${encodedReferencePath}/${encodedCollectionId}`
         );
       } else {
-        history.push(`/firestore/asdf/data/${encodedCollectionId}`);
+        history.push(`/firestore/${databaseId}/data/${encodedCollectionId}`);
       }
     }
   };

src/components/Firestore/Requests/RequestDetails/Header/index.tsx

@@ -60,7 +60,7 @@ const RequestDetailsHeader: React.FC<React.PropsWithChildren<Props>> = ({
               className="Firestore-Request-Details-Header-Return-Button"
               icon={{ icon: 'arrow_back_ios', size: 'small' }}
               tag={Link}
-              to="/firestore/(default)/requests" // FIXME consider if we care to go back to the current DB page or default
+              to="/firestore/fdsa/requests" // FIXME consider if we care to go back to the current DB page or default
               label="header-return-button"
             />
           </Tooltip>

src/components/Firestore/Requests/RequestsCard/Table/TableRow.tsx

@@ -79,7 +79,7 @@ const RequestTableRow: React.FC<React.PropsWithChildren<Props>> = ({
 
   return (
     <DataTableRow
-      onClick={() => history.push(`/firestore/(default)/requests/${requestId}`)} // FIXME DB id here
+      onClick={() => history.push(`/firestore/fdsa/requests/${requestId}`)} // FIXME DB id here
     >
       <Tooltip
         content={requestTimeComplete}

src/components/Firestore/Requests/index.tsx

@@ -47,7 +47,7 @@ const Requests: React.FC<React.PropsWithChildren<unknown>> = () => {
         style={{ flex: 1 }}
       >
         <Switch>
-          <Route exact path="/firestore/(default)/requests">
+          <Route exact path="/firestore/fdsa/requests">
             <div data-testid="requests-card">
               {/* TODO: Finish developing the RequestsHeader in order to render it */}
               {/* <RequestsHeader /> */}
@@ -58,7 +58,7 @@ const Requests: React.FC<React.PropsWithChildren<unknown>> = () => {
           </Route>
           <Route
             exact
-            path="/firestore/(default)/requests/:requestId"
+            path="/firestore/fdsa/requests/:requestId"
             render={({
               match,
             }: RouteComponentProps<RequestDetailsRouteParams>) => {

src/components/Firestore/index.tsx

@@ -69,28 +69,30 @@ interface FirestoreTabRoute {
   label: string;
   exact: boolean;
 }
-const firestoreRoutes: ReadonlyArray<FirestoreTabRoute> = [
-  {
-    path: '/firestore/asdf/data',
-    label: 'Data',
-    exact: false,
-  },
-  {
-    path: '/firestore/(default)/requests',
-    label: 'Requests',
-    exact: false,
-  },
-];
 
 export const Firestore: React.FC<React.PropsWithChildren<unknown>> = React.memo(
   () => {
     const location = useLocation();
+    const databaseId = location.pathname.split("/")[2];
     const history = useHistory();
     const [isRefreshing, setIsRefreshing] = useState(false);
     const eject = useEjector();
-
+    const firestoreRoutes: ReadonlyArray<FirestoreTabRoute> = [
+      {
+        path: `/firestore/${databaseId}/data`,
+        label: 'Data',
+        exact: false,
+      },
+      {
+        path: `/firestore/${databaseId}/requests`,
+        label: 'Requests',
+        exact: false,
+      },
+    ];
     // TODO: do something better here!
-    const path = location.pathname.replace(/^\/firestore\/data/, '');
+    // Regex based (roughly) on valid DB IDs here:
+    // https://firebase.google.com/docs/firestore/manage-databases#database_id
+    const path = location.pathname.replace(/^\/firestore\/[a-zA-Z0-9-]{1,63}\/data/, '');
     const showCollectionShell = path.split('/').length < 2;
     const showDocumentShell = path.split('/').length < 3;
 
@@ -117,13 +119,13 @@ export const Firestore: React.FC<React.PropsWithChildren<unknown>> = React.memo(
       if (!shouldNuke) return;
       setIsRefreshing(true);
       await eject();
-      handleNavigate();
+      handleNavigate(databaseId);
       setIsRefreshing(false);
     }
 
-    function handleNavigate(path?: string) {
+    function handleNavigate(path?: string, databaseId: string = "default") {
       // TODO: move to routing constants
-      const root = '/firestore/asdf/data'; // FIXME
+      const root = `/firestore/${databaseId}/data`;
       if (path === undefined) {
         history.push(root);
       } else {
@@ -163,20 +165,21 @@ export const Firestore: React.FC<React.PropsWithChildren<unknown>> = React.memo(
           </div>
 
           <Switch>
-            <Route path="/firestore/asdf/data">
+            <Route path="/firestore/:databaseId/data">
               <FirestoreDataCard
                 path={path}
+                databaseId={databaseId}
                 handleClearData={handleClearData}
                 handleNavigate={handleNavigate}
                 showCollectionShell={showCollectionShell}
                 showDocumentShell={showDocumentShell}
               />
             </Route>
-            <Route path="/firestore/(default)/requests">
+            <Route path="/firestore/:databaseId/requests">
               <FirestoreRequestsCard />
             </Route>
-            <Redirect from="/firestore" to="/firestore/asdf/data" />
-            <Redirect from="/firestore/data" to="/firestore/asdf/data" />
+            <Redirect from="/firestore" to="/firestore/default/data" />
+            <Redirect from="/firestore/data" to="/firestore/default/data" />
           </Switch>
         </GridCell>
       </FirestoreStore>
@@ -186,6 +189,7 @@ export const Firestore: React.FC<React.PropsWithChildren<unknown>> = React.memo(
 
 interface FirestoreDataCardProps {
   path: string;
+  databaseId: string;
   handleClearData: () => void;
   handleNavigate: (path?: string) => void;
   showCollectionShell: boolean;
@@ -196,11 +200,13 @@ const FirestoreDataCard: React.FC<
   React.PropsWithChildren<FirestoreDataCardProps>
 > = ({
   path,
+  databaseId,
   handleClearData,
   handleNavigate,
   showCollectionShell,
   showDocumentShell,
-}) => (
+}) => {
+console.log("my path is:" + path); return (
   <>
     <div className="Firestore-actions">
       <CustomThemeProvider use="warning" wrap>
@@ -212,7 +218,7 @@ const FirestoreDataCard: React.FC<
     <Elevation z="2" wrap>
       <Card className="Firestore-panels-wrapper">
         <InteractiveBreadCrumbBar
-          base="/firestore/asdf/data" // FIXME
+          base={`/firestore/${databaseId}/data`}
           path={path}
           onNavigate={handleNavigate}
         />
@@ -235,7 +241,7 @@ const FirestoreDataCard: React.FC<
       </Card>
     </Elevation>
   </>
-);
+)};
 
 const FirestoreRequestsCard: React.FC<
   React.PropsWithChildren<unknown>

src/components/Firestore/useAutoSelect.tsx

@@ -17,12 +17,9 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { Redirect, useLocation, useRouteMatch } from 'react-router-dom';
 
-export const FIRESTORE_DATA_URL = '/firestore/asdf/data'; // FIXME
-const FIRESTORE_DATA_URL_PATH_LENGTH = FIRESTORE_DATA_URL.split('/').length;
-
 /**
  * Given a list of collections or documents, auto select the first item. Only
- * works on root (`/firestore/data`) or top level collections (`/firestore/data/users`)
+ * works on root (`/firestore/DB/data`) or top level collections (`/firestore/DB/data/users`)
  * to prevent deep auto selection.
  */
 export function useAutoSelect<T extends { id: string }>(list?: T[] | null) {
@@ -31,11 +28,11 @@ export function useAutoSelect<T extends { id: string }>(list?: T[] | null) {
   const [autoSelect, setAutoSelect] = useState<ReactNode | null>(null);
 
   useEffect(() => {
+    const splitUrl = url.split('/');
     const isRootOrRootCollection =
-      url === FIRESTORE_DATA_URL ||
-      // /firestore/data/users
-      (url.startsWith(FIRESTORE_DATA_URL) && // FIXME need a fuzzy match here
-        url.split('/').length === FIRESTORE_DATA_URL_PATH_LENGTH + 1);
+      (splitUrl.length === 4 || splitUrl.length === 5)
+      && splitUrl[1] === "firestore" // The first segment is empty string
+      && splitUrl[3] === "data";
     const hasNothingSelected = url === pathname;
     const firstChild = list?.[0];
     const shouldAutoSelect = isRootOrRootCollection && hasNothingSelected;

src/routes.test.tsx

@@ -37,19 +37,19 @@ describe('getSanitizedPathData', () => {
 
   describe('Firestore', () => {
     it('scrubs Firestore path data', () => {
-      expect(scrubPathData('/firestore/asdf/data/myCollection/myDoc')).toEqual({
-        scrubbedPath: '/firestore/asdf/data/:path*',
+      expect(scrubPathData('/firestore/default/data/myCollection/myDoc')).toEqual({
+        scrubbedPath: '/firestore/default/data/:path*',
         pathLabel: 'Firestore',
       });
     });
 
     it('scrubs deeply nested Firestore paths', () => {
       expect(
         scrubPathData(
-          '/firestore/asdf/data/myCollection/myDoc/mySubCollection/mySubDoc'
+          '/firestore/default/data/myCollection/myDoc/mySubCollection/mySubDoc'
         )
       ).toEqual({
-        scrubbedPath: '/firestore/asdf/data/:path*',
+        scrubbedPath: '/firestore/default/data/:path*',
         pathLabel: 'Firestore',
       });
     });

src/routes.ts

@@ -45,8 +45,8 @@ const routesToSanitize: string[] = [
   '/extensions/:instanceId',
 
   // Firestore
-  '/firestore/asdf/data/:path*',
-  '/firestore/(default)/requests/:requestId',
+  '/firestore/:databaseId/data/:path*',
+  '/firestore/:databaseId/requests/:requestId',
 
   // Storage
   '/storage/:bucket/:path*',