Properly url encode/decode branch names + object names whenever they're used in url paths (#353)

Author: jaclarke

shared/studio/state/connection.ts

@@ -91,7 +91,7 @@ export class Connection extends Model({
   conn = AdminUIFetchConnection.create(
     {
       address: this.config.serverUrl,
-      database: this.config.database,
+      database: encodeURIComponent(this.config.database),
       user: this.config.user,
       token: this.config.authToken,
     },

shared/studio/tabs/ai/state/rag.ts

@@ -64,7 +64,9 @@ export async function runRAGQuery(
   abortController: AbortController
 ): Promise<SSEStream> {
   const response = await fetch(
-    `${connectConfig.serverUrl}/branch/${connectConfig.database}/ext/ai/rag`,
+    `${connectConfig.serverUrl}/branch/${encodeURIComponent(
+      connectConfig.database
+    )}/ext/ai/rag`,
     {
       method: "POST",
       headers: {

shared/studio/tabs/auth/index.tsx

@@ -142,7 +142,7 @@ const AuthUrls = observer(function AuthUrls({
   const databaseState = useDatabaseState();
 
   const url = new URL(instanceState.serverUrl);
-  url.pathname = `db/${databaseState.name}/ext/auth`;
+  url.pathname = `db/${encodeURIComponent(databaseState.name)}/ext/auth`;
 
   const baseUrl = url.toString();
 

shared/studio/tabs/dataview/index.tsx

@@ -53,7 +53,12 @@ export const DataView = observer(function DataView() {
     } else if (dbState.schemaData) {
       const updatedPath = state.updateFromPath(path ?? "");
       if (updatedPath !== null) {
-        navigate(`${basePath}/${updatedPath}`, true);
+        navigate(
+          `${basePath}/${updatedPath
+            .map((part) => encodeURIComponent(part).replace(/%3A/g, ":"))
+            .join("/")}`,
+          true
+        );
       }
     }
   }, [currentPath, dbState.schemaData]);

shared/studio/tabs/dataview/state/index.ts

@@ -118,9 +118,11 @@ export class DataView extends Model({
   }
 
   @modelAction
-  updateFromPath(path: string): string | null {
+  updateFromPath(path: string): string[] | null {
     this.lastSelectedPath = path;
-    const [rootObjectTypeName, ...nestedParts] = path.split("/");
+    const [rootObjectTypeName, ...nestedParts] = path
+      .split("/")
+      .map(decodeURIComponent);
     if (rootObjectTypeName !== this.inspectorStack[0]?.objectType?.name) {
       const objTypeId = this.objectTypes.find(
         (obj) => obj.name === rootObjectTypeName
@@ -129,7 +131,7 @@ export class DataView extends Model({
         this.selectObject(objTypeId);
       } else {
         this.selectObject(this.objectTypes[0]?.id);
-        return this.objectTypes[0]?.name ?? "";
+        return [this.objectTypes[0]?.name ?? ""];
       }
     }
     let i = 0;
@@ -162,7 +164,7 @@ export class DataView extends Model({
         (typeof objId === "number" && !this.edits.insertEdits.has(objId))
       ) {
         this.inspectorStack = this.inspectorStack.slice(0, i + 1);
-        return [rootObjectTypeName, ...nestedParts.slice(0, i * 2)].join("/");
+        return [rootObjectTypeName, ...nestedParts.slice(0, i * 2)];
       } else {
         if (
           objId !== stackItem?.parentObject!.id ||

shared/studio/tabs/repl/state/commands.ts

@@ -77,7 +77,7 @@ export async function handleSlashCommand(
 
       if (instanceState.databases!.includes(dbName)) {
         item.setCommandResult({kind: CommandOutputKind.none});
-        repl.navigation?.(`${dbName}/repl`);
+        repl.navigation?.(`${encodeURIComponent(dbName)}/repl`);
       } else {
         item.setCommandResult({
           kind: CommandOutputKind.error,

web/src/components/databasePage/index.tsx

@@ -101,7 +101,7 @@ function HeaderNavMenu({
                 label: db,
                 selected: selectedDB === db,
                 checked: currentDB === db,
-                linkProps: {to: `/${db}`},
+                linkProps: {to: `/${encodeURIComponent(db)}`},
                 onHover: () => setSelectedDB(db),
               })) ?? null,
           },
@@ -113,7 +113,9 @@ function HeaderNavMenu({
               <CreateBranchModal
                 fromBranch={currentDB}
                 instanceState={instanceState}
-                navigateToDB={(dbName) => navigate(`/${dbName}`)}
+                navigateToDB={(dbName) =>
+                  navigate(`/${encodeURIComponent(dbName)}`)
+                }
               />
             ),
         }}

web/src/components/instancePage/index.tsx

@@ -21,7 +21,11 @@ export default observer(function InstancePage() {
       <div className={styles.instanceName}>{instanceState.instanceName}</div>
       <div className={styles.databases}>
         {instanceState.databases?.map((db) => (
-          <Link key={db} className={styles.databaseCard} to={db}>
+          <Link
+            key={db}
+            className={styles.databaseCard}
+            to={encodeURIComponent(db)}
+          >
             <HeaderDatabaseIcon />
             <span>{db}</span>
           </Link>
@@ -59,7 +63,7 @@ export default observer(function InstancePage() {
               <CreateBranchModal
                 instanceState={instanceState}
                 navigateToDB={(branchName) => {
-                  navigate(`/${branchName}`);
+                  navigate(`/${encodeURIComponent(branchName)}`);
                 }}
               />
             );