Handle MakeCode shareId created by logged in users (#628)

* Handle MakeCode shareId created by logged in users (these use a different pattern, starting with S)
* Rename shortId to shareId

Author: microbit-robert

src/App.tsx

@@ -184,8 +184,11 @@ const createRouter = () => {
         {
           path: createOpenSharedProjectPageUrl(),
           loader: ({ params }) => {
-            if (!params.shortId || !/^_[a-zA-Z0-9]+$/.test(params.shortId)) {
-              throw "Not a shared key";
+            if (
+              !params.shareId ||
+              !/^_[a-zA-Z\d]{12}$|^S(?:\d{5}-){3}\d{5}$/.test(params.shareId)
+            ) {
+              throw new Error("Not a valid shareId");
             }
             return null;
           },

src/e2e/app/open-shared-project-page.ts

@@ -15,10 +15,10 @@ export class OpenSharedProjectPage {
   }
 
   /**
-   * Unlike other page fixtures, you must specify a shortId in the goto
+   * Unlike other page fixtures, you must specify a shareId in the goto
    */
-  async goto(shortId: string, flags: string[] = ["open"]) {
-    const response = await this.page.goto(`${this.url}${shortId}`);
+  async goto(shareId: string, flags: string[] = ["open"]) {
+    const response = await this.page.goto(`${this.url}${shareId}`);
     await this.page.evaluate(
       (flags) => localStorage.setItem("flags", flags.join(",")),
       flags

src/e2e/open-shared-project-page.spec.ts

@@ -39,7 +39,7 @@ test.describe("import shared page", () => {
   });
 
   test("error", async ({ openSharedProjectPage }) => {
-    await openSharedProjectPage.goto("_aBadSh0rt1d");
+    await openSharedProjectPage.goto("_aaBadSh0rt1d");
     await openSharedProjectPage
       .expectMain()
       .toHaveAttribute("aria-busy", "true");

src/pages/OpenSharedProjectPage.tsx

@@ -72,17 +72,17 @@ const OpenSharedProjectPage = () => {
   const [name, setName] = useState("");
   const { sharedState, header, dataset, projectText } =
     useProjectPreload(setName);
-  const { shortId } = useParams();
+  const { shareId } = useParams();
 
   const handleOpenProject = useCallback(() => {
     if (!header || !projectText) return;
     loadProject({ header: { ...header, name }, text: projectText }, name);
     logging.event({
       type: "import-shared-project-complete",
-      detail: { shortId },
+      detail: { shareId },
     });
     navigate(createDataSamplesPageUrl());
-  }, [loadProject, header, projectText, name, navigate, logging, shortId]);
+  }, [loadProject, header, projectText, name, navigate, logging, shareId]);
 
   if (sharedState === SharedState.Failed) {
     return <ErrorPreloading />;
@@ -141,7 +141,7 @@ const OpenSharedProjectPage = () => {
                             color="brand.600"
                             textDecoration="underline"
                             href={`https://makecode.microbit.org/${encodeURIComponent(
-                              shortId!
+                              shareId!
                             )}`}
                           >
                             {children}
@@ -373,7 +373,7 @@ const ErrorPreloading = () => {
  * it update the name on preload via a callback.
  */
 const useProjectPreload = (setName: (name: string) => void) => {
-  const { shortId } = useParams();
+  const { shareId } = useParams();
   const logging = useLogging();
 
   const [sharedState, setSharedState] = useState<SharedState>(
@@ -385,15 +385,15 @@ const useProjectPreload = (setName: (name: string) => void) => {
   const [dataset, setDataset] = useState<ActionData[]>();
 
   useEffect(() => {
-    if (!shortId) return;
+    if (!shareId) return;
     let cleanedUp = false;
     const loadAsync = async () => {
       try {
         logging.event({
           type: "import-shared-project-start",
-          detail: { shortId },
+          detail: { shareId },
         });
-        const header = await fetchSharedHeader(shortId);
+        const header = await fetchSharedHeader(shareId);
         if (cleanedUp) {
           throw new Error("Cancelled");
         }
@@ -414,12 +414,12 @@ const useProjectPreload = (setName: (name: string) => void) => {
         setProjectText(text);
         logging.event({
           type: "import-shared-project-preloaded",
-          detail: { shortId },
+          detail: { shareId },
         });
       } catch (e: unknown) {
         logging.event({
           type: "import-shared-project-failed",
-          detail: { shortId, error: e },
+          detail: { shareId, error: e },
         });
         if (!cleanedUp) {
           setSharedState(SharedState.Failed);
@@ -430,7 +430,7 @@ const useProjectPreload = (setName: (name: string) => void) => {
     return () => {
       cleanedUp = true;
     };
-  }, [logging, shortId, setName]);
+  }, [logging, shareId, setName]);
   return {
     sharedState,
     header,
@@ -440,9 +440,9 @@ const useProjectPreload = (setName: (name: string) => void) => {
   };
 };
 
-const fetchSharedHeader = async (shortId: string): Promise<Header> => {
+const fetchSharedHeader = async (shareId: string): Promise<Header> => {
   const headerResponse = await fetch(
-    `https://www.makecode.com/api/${encodeURIComponent(shortId)}`
+    `https://www.makecode.com/api/${encodeURIComponent(shareId)}`
   );
   if (!headerResponse.ok) {
     throw new Error("Network error");

src/urls.ts

@@ -15,7 +15,7 @@ export const createNewPageUrl = () => `${basepath}new`;
 
 export const createImportPageUrl = () => `${basepath}import`;
 
-export const createOpenSharedProjectPageUrl = () => `${basepath}:shortId`;
+export const createOpenSharedProjectPageUrl = () => `${basepath}:shareId`;
 
 export const createDataSamplesPageUrl = () => `${basepath}data-samples`;