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

…starting with a colon closes #49 BREAKING CHANGE: Allowing context key names containing forward slashes or starting with a colon introduced a breaking change in the host/client communication protocol. The messaging protocol between host and client HAS CHANGED for context value lookup using the `ContextService`. Therefore, you must update the host and affected clients to the new version together. The API has not changed; the breaking change only applies to the `@scion/microfrontend-platform` version. To migrate: - Upgrade host and clients (which use the `ContextService`) to `@scion/[email protected]`.
SchweizerischeBundesbahnen · Mar 26, 2021 · cb0bfd8 · cb0bfd8
1 parent 879836d
commit cb0bfd8
Show file tree

Hide file tree

Showing 3 changed files with 35 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,10 @@ 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.
+        const name = decodeURIComponent(encodedName);
         const replyTo = lookupRequest.headers.get(MessageHeaders.ReplyTo);
         const options = lookupRequest.headers.get(CONTEXT_LOOKUP_OPTIONS);
         const entries = this._entries$.getValue();