fix(platform): allow context key names containing forward slashes or …

…starting with a colon closes #49
SchweizerischeBundesbahnen · Mar 26, 2021 · ccef226 · ccef226
1 parent 6952563
commit ccef226
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/projects/scion/microfrontend-platform.e2e/src/context/context.e2e-spec.ts b/projects/scion/microfrontend-platform.e2e/src/context/context.e2e-spec.ts
@@ -57,6 +57,36 @@ describe('Context', () => {
     await expect(await lookupContextValuePO.lookupValue('key')).toEqual('value');
   });
 
+  it('should allow setting a context key name containing forward slashes', async () => {
+    const testingAppPO = new TestingAppPO();
+    const pagePOs = await testingAppPO.navigateTo({
+      context: LookupContextValuePagePO,
+    });
+
+    const outlet = pagePOs.get<BrowserOutletPO>('context:outlet');
+    await outlet.outletContextPO.open();
+    await outlet.outletContextPO.addContextValue('a/b/c', 'value');
+    await outlet.outletContextPO.close();
+
+    const lookupContextValuePO = pagePOs.get<LookupContextValuePagePO>('context');
+    await expect(await lookupContextValuePO.lookupValue('a/b/c')).toEqual('value');
+  });
+
+  it('should allow setting a context key name starting with a colon', async () => {
+    const testingAppPO = new TestingAppPO();
+    const pagePOs = await testingAppPO.navigateTo({
+      context: LookupContextValuePagePO,
+    });
+
+    const outlet = pagePOs.get<BrowserOutletPO>('context:outlet');
+    await outlet.outletContextPO.open();
+    await outlet.outletContextPO.addContextValue(':key', 'value');
+    await outlet.outletContextPO.close();
+
+    const lookupContextValuePO = pagePOs.get<LookupContextValuePagePO>('context');
+    await expect(await lookupContextValuePO.lookupValue(':key')).toEqual('value');
+  });
+
   it('should allow removing a context value', async () => {
     const testingAppPO = new TestingAppPO();
     const pagePOs = await testingAppPO.navigateTo({

diff --git a/projects/scion/microfrontend-platform/src/lib/client/context/context.model.ts b/projects/scion/microfrontend-platform/src/lib/client/context/context.model.ts
@@ -80,7 +80,7 @@ export namespace Contexts {
       transport: MessagingTransport.EmbeddedOutletContentToOutlet,
       channel: MessagingChannel.Topic,
       message: {
-        topic: contextValueLookupTopic(name),
+        topic: contextValueLookupTopic(`ɵ${encodeURIComponent(name)}`), // Encode in order to support names containing forward slashes or starting with a colon.
         body: values || [],
         headers: new Map()
           .set(MessageHeaders.MessageId, UUID.randomUUID())

diff --git a/...cts/scion/microfrontend-platform/src/lib/client/context/router-outlet-context-provider.ts b/...cts/scion/microfrontend-platform/src/lib/client/context/router-outlet-context-provider.ts
@@ -115,7 +115,11 @@ export class RouterOutletContextProvider {
         takeUntil(this._outletDisconnect$),
       )
       .subscribe((lookupRequest: TopicMessage<any[]>) => runSafe(() => {
-        const name = new TopicMatcher(Contexts.contextValueLookupTopic(':name')).match(lookupRequest.topic).params.get('name');
+        const encodedName = new TopicMatcher(Contexts.contextValueLookupTopic(':name')).match(lookupRequest.topic).params.get('name');
+
+        // The name has to be decoded here because it was encoded in `newContextValueLookupRequest` where the topic was created.
+        // To ensure backwards compatibility with older clients, only names starting with the Theta (ɵ) symbol are decoded.
+        const name = encodedName.startsWith('ɵ') ? decodeURIComponent(encodedName.substring(1)) : encodedName;
         const replyTo = lookupRequest.headers.get(MessageHeaders.ReplyTo);
         const options = lookupRequest.headers.get(CONTEXT_LOOKUP_OPTIONS);
         const entries = this._entries$.getValue();