[CORL-491] Support event alias loginPrompt (#2474)

* feat: support event alias loginPrompt

* lint: import ordering

README.md

@@ -21,6 +21,7 @@ Preview Coral easily by running Coral via a Heroku App:
   - [Source](#source)
   - [Embed On Your Site](#embed-on-your-site)
   - [Single Sign On](#single-sign-on)
+    - [SSO Login Prompts](#sso-login-prompts)
   - [Development](#development)
     - [Email](#email)
     - [Design Language System (UI Components)](#design-language-system-ui-components)
@@ -245,6 +246,23 @@ embed.login("{{ SSO_TOKEN }}");
 embed.logout();
 ```
 
+#### SSO Login Prompts
+
+In order to handle login prompts (e.g. a user clicks on the sign in button) you can listen to the `loginPrompt` event.
+
+```js
+var embed = Coral.createStreamEmbed({
+  // Don't forget to include the parameters from the
+  // "Embed On Your Site" section.
+  events: function(events) {
+    events.on("loginPrompt", function() {
+      // Redirect user to a login page.
+      location.href = "http://example.com/login";
+    });
+  },
+});
+```
+
 ### Development
 
 Running Coral for development is very similar to installing Coral via Source as

src/core/client/embed/index.html

@@ -23,6 +23,17 @@
     <script>
       const CoralStreamEmbed = Coral.createStreamEmbed({
         id: "coralStreamEmbed",
+        /**
+        *  You can listen to events using the example below.
+        *  The argument passed is the event emitter from
+        *  https://github.com/asyncly/EventEmitter2
+        *
+        *  events: function(events) {
+        *    events.onAny(function(eventName, data) {
+        *      console.log(eventName, data);
+        *    });
+        *  },
+        */
       });
       window.CoralStreamEmbed = CoralStreamEmbed;
       CoralStreamEmbed.render();

src/core/client/stream/App/listeners/OnEvents.spec.tsx

@@ -1,3 +1,4 @@
+import { noop } from "lodash";
 import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 
@@ -27,3 +28,24 @@ it("Broadcasts events to pym", () => {
   );
   expect(pym.sendMessage.calledOnce).toBe(true);
 });
+
+it("emits event aliases", () => {
+  const eventEmitter: any = {
+    emit: createSinonStub(
+      s => s.throws(),
+      s => s.withArgs("loginPrompt").returns(null)
+    ),
+    onAny: (cb: (eventName: string, value: any) => void) => {
+      cb("mutation.showAuthPopup", { view: "SIGN_IN" });
+    },
+  };
+
+  const pym = {
+    sendMessage: noop,
+  };
+
+  createRenderer().render(
+    <OnEvents pym={pym as any} eventEmitter={eventEmitter} />
+  );
+  expect(eventEmitter.emit.calledOnce).toBe(true);
+});

src/core/client/stream/App/listeners/OnEvents.tsx

@@ -2,6 +2,8 @@ import { Component } from "react";
 
 import { CoralContext, withContext } from "coral-framework/lib/bootstrap";
 
+import emitEventAliases from "./emitEventAliases";
+
 interface Props {
   pym: CoralContext["pym"];
   eventEmitter: CoralContext["eventEmitter"];
@@ -10,8 +12,9 @@ interface Props {
 export class OnEvents extends Component<Props> {
   constructor(props: Props) {
     super(props);
-    // Auth popup will use this to handle a successful login.
     props.eventEmitter.onAny((eventName: string, value: any) => {
+      // Emit event aliases.
+      emitEventAliases(props.eventEmitter, eventName, value);
       props.pym!.sendMessage(
         "event",
         JSON.stringify({

src/core/client/stream/App/listeners/emitEventAliases.ts

@@ -0,0 +1,17 @@
+import { EventEmitter2 } from "eventemitter2";
+
+export default function emitEventAliases(
+  eventEmitter: EventEmitter2,
+  eventName: string,
+  value: any
+) {
+  switch (eventName) {
+    case "mutation.showAuthPopup":
+      switch (value.view) {
+        case "SIGN_IN":
+          eventEmitter.emit("loginPrompt");
+          break;
+      }
+      break;
+  }
+}