@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/favorites/FavoritesShell.spec.js

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import sinon from "sinon";
+import { Basic } from "./FavoritesShell.stories";
+import { accessibilityAssessor } from "../sdd/tests/a11y_helper";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+addons.setChannel(mockChannel());
+describe("<FavoritesShell/>", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    // Scan fails due to duplicate ID
+    // Multiple instances of <i id="toolbar-delete">, which violates the rule "id attribute value must be unique"
+    it.skip("should pass accessibility scans (Page)", async () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    });
+    it("should display text", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find(".finsemble-toolbar-button").first().text()).to.contain("Hello World");
+    });
+    it("should display truncate long text", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        const truncated_text = wrapper.find("div.finsemble-toolbar-button").at(2).text();
+        expect(truncated_text.length, "Truncated text down to 25 characters, then add ellipses (total of 28 characters)").to.equal(28);
+        expect(truncated_text, "Include '...'").to.contain("...");
+    });
+    it("should display category icon", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find(".finsemble-toolbar-button .icon-avatar").first().prop("data-category")).to.equal("Application");
+    });
+    it("should open the item when clicked", () => {
+        const buttonSpy = sinon.spy(Basic.args, "spawn");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("click");
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should open the item when the user presses Enter", () => {
+        const buttonSpy = sinon.spy(Basic.args, "spawn");
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        wrapper.find(".finsemble-toolbar-button").first().simulate("keyDown", {
+            key: "Enter",
+        });
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+    it("should remove the item when deleted", () => {
+        const wrapper = mount(React.createElement(Basic, Object.assign({}, Basic.args)));
+        expect(wrapper.find("div.finsemble-toolbar-button").length).to.equal(3);
+        wrapper.find("div.finsemble-toolbar-button i").first().simulate("click");
+        expect(wrapper.find("div.finsemble-toolbar-button").length).to.equal(2);
+        wrapper
+            .find(".finsemble-toolbar-button")
+            .first()
+            .simulate("keyDown", {
+            key: "Delete",
+            preventDefault: () => { },
+        });
+        expect(wrapper.find("div.finsemble-toolbar-button").length).to.equal(1);
+    });
+});
+//# sourceMappingURL=FavoritesShell.spec.js.map

package/react/components/favorites/FavoritesShell.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoritesShell.spec.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoritesShell.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport sinon from \"sinon\";\nimport { Basic } from \"./FavoritesShell.stories\";\nimport { accessibilityAssessor } from \"../sdd/tests/a11y_helper\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<FavoritesShell/>\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\t// Scan fails due to duplicate ID\n\t// Multiple instances of <i id=\"toolbar-delete\">, which violates the rule \"id attribute value must be unique\"\n\tit.skip(\"should pass accessibility scans (Page)\", async () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\tit(\"should display text\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\texpect(wrapper.find(\".finsemble-toolbar-button\").first().text()).to.contain(\"Hello World\");\n\t});\n\tit(\"should display truncate long text\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\tconst truncated_text = wrapper.find(\"div.finsemble-toolbar-button\").at(2).text();\n\t\texpect(\n\t\t\ttruncated_text.length,\n\t\t\t\"Truncated text down to 25 characters, then add ellipses (total of 28 characters)\"\n\t\t).to.equal(28);\n\t\texpect(truncated_text, \"Include '...'\").to.contain(\"...\");\n\t});\n\tit(\"should display category icon\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\texpect(wrapper.find(\".finsemble-toolbar-button .icon-avatar\").first().prop(\"data-category\")).to.equal(\n\t\t\t\"Application\"\n\t\t);\n\t});\n\tit(\"should open the item when clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"spawn\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"click\");\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should open the item when the user presses Enter\", () => {\n\t\tconst buttonSpy = sinon.spy(Basic.args as any, \"spawn\");\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\twrapper.find(\".finsemble-toolbar-button\").first().simulate(\"keyDown\", {\n\t\t\tkey: \"Enter\",\n\t\t});\n\t\texpect(buttonSpy.calledOnce).to.be.true;\n\t});\n\tit(\"should remove the item when deleted\", () => {\n\t\tconst wrapper = mount(<Basic {...Basic.args} />);\n\t\texpect(wrapper.find(\"div.finsemble-toolbar-button\").length).to.equal(3);\n\t\twrapper.find(\"div.finsemble-toolbar-button i\").first().simulate(\"click\");\n\t\texpect(wrapper.find(\"div.finsemble-toolbar-button\").length).to.equal(2);\n\t\twrapper\n\t\t\t.find(\".finsemble-toolbar-button\")\n\t\t\t.first()\n\t\t\t.simulate(\"keyDown\", {\n\t\t\t\tkey: \"Delete\",\n\t\t\t\tpreventDefault: () => {},\n\t\t\t});\n\t\texpect(wrapper.find(\"div.finsemble-toolbar-button\").length).to.equal(1);\n\t});\n});\n"]}

package/react/components/favorites/FavoritesShell.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Story } from "@storybook/react/types-6-0";
+import "../../assets/css/favorites.css";
+declare const _default: {
+    title: string;
+    component: () => JSX.Element;
+};
+export default _default;
+export declare const Basic: Story<any>;

package/react/components/favorites/FavoritesShell.stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { FavoritesShell } from "./FavoritesShell";
+import { initFSBL } from "../common/helpers";
+import { FinsembleProvider } from "../FinsembleProvider";
+import { action } from "@storybook/addon-actions";
+import "../../assets/css/favorites.css";
+export default {
+    title: "Menu/FavoritesShell",
+    component: FavoritesShell,
+};
+const Template = (args) => {
+    initFSBL(window);
+    if (args.favorites) {
+        window.FSBL.Clients.StorageClient.get = (query, callback) => {
+            callback === null || callback === void 0 ? void 0 : callback("", args.favorites);
+            return new Promise((resolve) => {
+                resolve(args.favorites);
+            });
+        };
+    }
+    window.FSBL.Clients.LauncherClient.spawn = args.spawn;
+    return (React.createElement(FinsembleProvider, null,
+        React.createElement(FavoritesShell, null)));
+};
+export const Basic = Template.bind({});
+Basic.args = {
+    favorites: [
+        {
+            id: "1",
+            category: "Application",
+            name: "Hello World",
+        },
+        {
+            id: "2",
+            category: "Application",
+            name: "Another application",
+        },
+        {
+            id: "3",
+            category: "Application",
+            name: "This is a very long, extra long name",
+        },
+    ],
+    spawn: action("launch"),
+};
+//# sourceMappingURL=FavoritesShell.stories.js.map

package/react/components/favorites/FavoritesShell.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoritesShell.stories.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoritesShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,gCAAgC,CAAC;AAGxC,eAAe;IACd,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CACzB,CAAC;AAEF,MAAM,QAAQ,GAAe,CAAC,IAAS,EAAE,EAAE;IAC1C,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjB,IAAI,IAAI,CAAC,SAAS,EAAE;QACnB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,GAAG,CAAC,KAAU,EAAE,QAA0C,EAAgB,EAAE;YAChH,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC9B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACzB,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;KACF;IAED,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEtD,OAAO,CACN,oBAAC,iBAAiB;QACjB,oBAAC,cAAc,OAAG,CACC,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,SAAS,EAAE;QACV;YACC,EAAE,EAAE,GAAG;YACP,QAAQ,EAAE,aAAa;YACvB,IAAI,EAAE,aAAa;SACnB;QACD;YACC,EAAE,EAAE,GAAG;YACP,QAAQ,EAAE,aAAa;YACvB,IAAI,EAAE,qBAAqB;SAC3B;QACD;YACC,EAAE,EAAE,GAAG;YACP,QAAQ,EAAE,aAAa;YACvB,IAAI,EAAE,sCAAsC;SAC5C;KACD;IACD,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;CACvB,CAAC","sourcesContent":["import React from \"react\";\nimport { FavoritesShell } from \"./FavoritesShell\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { initFSBL } from \"../common/helpers\";\nimport { FinsembleProvider } from \"../FinsembleProvider\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../assets/css/favorites.css\";\nimport { StandardCallback, StandardError } from \"@finsemble/finsemble-api/types/types\";\n\nexport default {\n\ttitle: \"Menu/FavoritesShell\",\n\tcomponent: FavoritesShell,\n};\n\nconst Template: Story<any> = (args: any) => {\n\tinitFSBL(window);\n\n\tif (args.favorites) {\n\t\twindow.FSBL.Clients.StorageClient.get = (query: any, callback?: StandardCallback<StandardError>): Promise<any> => {\n\t\t\tcallback?.(\"\", args.favorites);\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tresolve(args.favorites);\n\t\t\t});\n\t\t};\n\t}\n\n\twindow.FSBL.Clients.LauncherClient.spawn = args.spawn;\n\n\treturn (\n\t\t<FinsembleProvider>\n\t\t\t<FavoritesShell />\n\t\t</FinsembleProvider>\n\t);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n\tfavorites: [\n\t\t{\n\t\t\tid: \"1\",\n\t\t\tcategory: \"Application\",\n\t\t\tname: \"Hello World\",\n\t\t},\n\t\t{\n\t\t\tid: \"2\",\n\t\t\tcategory: \"Application\",\n\t\t\tname: \"Another application\",\n\t\t},\n\t\t{\n\t\t\tid: \"3\",\n\t\t\tcategory: \"Application\",\n\t\t\tname: \"This is a very long, extra long name\",\n\t\t},\n\t],\n\tspawn: action(\"launch\"),\n};\n"]}

package/react/components/favorites/index.d.ts

@@ -0,0 +1,2 @@
+export { FavoriteMaker } from "./FavoriteMaker";
+export { FavoritesShell } from "./FavoritesShell";

package/react/components/favorites/index.js

@@ -0,0 +1,3 @@
+export { FavoriteMaker } from "./FavoriteMaker";
+export { FavoritesShell } from "./FavoritesShell";
+//# sourceMappingURL=index.js.map

package/react/components/favorites/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/favorites/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { FavoriteMaker } from \"./FavoriteMaker\";\nexport { FavoritesShell } from \"./FavoritesShell\";\n"]}

package/react/components/fdc3Resolver/ResolverContainer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ResolverContainer: () => JSX.Element;

package/react/components/fdc3Resolver/ResolverContainer.js

@@ -0,0 +1,52 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState } from "react";
+import { ResolverDialog } from "./ResolverDialog";
+export const ResolverContainer = () => {
+    const [firstLoad, setFirstLoad] = useState(true);
+    const [intentRaiser, setIntentRaiser] = useState("");
+    const [sendCallback, setSendCallback] = useState(() => () => { });
+    const [cancelCallback, setCancelCallback] = useState(() => () => { });
+    const [resolutionList, setResolutionList] = useState([]);
+    const clearAll = () => {
+        finsembleWindow.hide();
+        setIntentRaiser("");
+        setResolutionList([]);
+    };
+    const handleChoices = (choices) => {
+        var _a;
+        setIntentRaiser((_a = choices.originatingAppName) !== null && _a !== void 0 ? _a : "");
+        setResolutionList(choices.resolutionList);
+        finsembleWindow.show();
+    };
+    // We want to register as an IntentResolverListener, but we only want to register once
+    // However, the IntentResovlerListener handler needs to have access to this component's states
+    // So, this block will register the listener, and then never be called again
+    if (firstLoad) {
+        setFirstLoad(false);
+        const handleResolverChoices = (choices) => new Promise((resolve, reject) => {
+            handleChoices(choices);
+            setSendCallback(() => (result) => {
+                clearAll();
+                // originatingAppName and originatingAppWindow returned to support auto-associate
+                result.originatingAppName = choices.originatingAppName;
+                result.originatingAppWindow = choices.originatingAppWindow;
+                resolve(result);
+            });
+            setCancelCallback(() => () => {
+                clearAll();
+                reject({ err: "Cancelled by user" });
+            });
+        });
+        FSBL.internal.interopAdmin.registerUIResolverListener(handleResolverChoices).then(() => { });
+        clearAll();
+    }
+    return (React.createElement(ResolverDialog, { intentRaiser: intentRaiser, resolutionList: resolutionList, onSend: (selected) => {
+            sendCallback(selected);
+        }, onCancel: () => {
+            cancelCallback();
+        } }));
+};
+//# sourceMappingURL=ResolverContainer.js.map

package/react/components/fdc3Resolver/ResolverContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResolverContainer.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverContainer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAM,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACtE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAM,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAC1E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE3E,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,eAAe,CAAC,IAAI,EAAE,CAAC;QACvB,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,OAA4B,EAAE,EAAE;;QACtD,eAAe,CAAC,MAAA,OAAO,CAAC,kBAAkB,mCAAI,EAAE,CAAC,CAAC;QAClD,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC1C,eAAe,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAEF,sFAAsF;IACtF,8FAA8F;IAC9F,4EAA4E;IAC5E,IAAI,SAAS,EAAE;QACd,YAAY,CAAC,KAAK,CAAC,CAAC;QAEpB,MAAM,qBAAqB,GAAG,CAAC,OAA4B,EAAE,EAAE,CAC9D,IAAI,OAAO,CAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACnD,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC,MAA0B,EAAE,EAAE;gBACpD,QAAQ,EAAE,CAAC;gBACX,iFAAiF;gBACjF,MAAM,CAAC,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,CAAC;gBACvD,MAAM,CAAC,oBAAoB,GAAG,OAAO,CAAC,oBAAoB,CAAC;gBAC3D,OAAO,CAAC,MAAM,CAAC,CAAC;YACjB,CAAC,CAAC,CAAC;YACH,iBAAiB,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;gBAC5B,QAAQ,EAAE,CAAC;gBACX,MAAM,CAAC,EAAE,GAAG,EAAE,mBAAmB,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,0BAA0B,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QAC5F,QAAQ,EAAE,CAAC;KACX;IAED,OAAO,CACN,oBAAC,cAAc,IACd,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,CAAC,QAAa,EAAE,EAAE;YACzB,YAAY,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;YACd,cAAc,EAAE,CAAC;QAClB,CAAC,GACA,CACF,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\nimport React, { useState } from \"react\";\nimport { ResolverDialog } from \"./ResolverDialog\";\nimport { ResolutionList } from \"../../types/fdc3\";\nimport { clients } from \"@finsemble/finsemble-api\";\n\ntype ResolverResolution = clients.Interop.types.ResolverResolution;\n\ntype ResolverChoicesType = {\n\tresolutionList: ResolutionList[];\n\toriginatingAppName?: string;\n\toriginatingAppWindow?: string;\n};\n\nexport const ResolverContainer = () => {\n\tconst [firstLoad, setFirstLoad] = useState(true);\n\tconst [intentRaiser, setIntentRaiser] = useState(\"\");\n\tconst [sendCallback, setSendCallback] = useState<any>(() => () => {});\n\tconst [cancelCallback, setCancelCallback] = useState<any>(() => () => {});\n\tconst [resolutionList, setResolutionList] = useState<ResolutionList[]>([]);\n\n\tconst clearAll = () => {\n\t\tfinsembleWindow.hide();\n\t\tsetIntentRaiser(\"\");\n\t\tsetResolutionList([]);\n\t};\n\tconst handleChoices = (choices: ResolverChoicesType) => {\n\t\tsetIntentRaiser(choices.originatingAppName ?? \"\");\n\t\tsetResolutionList(choices.resolutionList);\n\t\tfinsembleWindow.show();\n\t};\n\n\t// We want to register as an IntentResolverListener, but we only want to register once\n\t// However, the IntentResovlerListener handler needs to have access to this component's states\n\t// So, this block will register the listener, and then never be called again\n\tif (firstLoad) {\n\t\tsetFirstLoad(false);\n\n\t\tconst handleResolverChoices = (choices: ResolverChoicesType) =>\n\t\t\tnew Promise<ResolverResolution>((resolve, reject) => {\n\t\t\t\thandleChoices(choices);\n\t\t\t\tsetSendCallback(() => (result: ResolverResolution) => {\n\t\t\t\t\tclearAll();\n\t\t\t\t\t// originatingAppName and originatingAppWindow returned to support auto-associate\n\t\t\t\t\tresult.originatingAppName = choices.originatingAppName;\n\t\t\t\t\tresult.originatingAppWindow = choices.originatingAppWindow;\n\t\t\t\t\tresolve(result);\n\t\t\t\t});\n\t\t\t\tsetCancelCallback(() => () => {\n\t\t\t\t\tclearAll();\n\t\t\t\t\treject({ err: \"Cancelled by user\" });\n\t\t\t\t});\n\t\t\t});\n\n\t\tFSBL.internal.interopAdmin.registerUIResolverListener(handleResolverChoices).then(() => {});\n\t\tclearAll();\n\t}\n\n\treturn (\n\t\t<ResolverDialog\n\t\t\tintentRaiser={intentRaiser}\n\t\t\tresolutionList={resolutionList}\n\t\t\tonSend={(selected: any) => {\n\t\t\t\tsendCallback(selected);\n\t\t\t}}\n\t\t\tonCancel={() => {\n\t\t\t\tcancelCallback();\n\t\t\t}}\n\t\t/>\n\t);\n};\n"]}

package/react/components/fdc3Resolver/ResolverDialog.css

@@ -0,0 +1,139 @@
+.resolverDialog {
+	padding: 0 8px;
+}
+
+h2 {
+	height: 26px;
+	margin: 0 72px 10px 0;
+	font-size: 19px;
+	font-weight: bold;
+	font-stretch: normal;
+	font-style: normal;
+	line-height: normal;
+	letter-spacing: 0.7px;
+	color: var(--font-color);
+}
+
+.sourceText {
+	font-style: italic;
+}
+
+.intentText {
+	color: var(--accent-primary);
+}
+
+.intent {
+	color: var(--accent-positive);
+}
+
+.appListGrid {
+	width: 466px;
+	height: 100px;
+	padding: 10px 10px 0;
+	margin-bottom: 10px;
+	background-color: var(--core-primary);
+	overflow-y: scroll;
+}
+
+.appSelector {
+	width: 464px;
+	height: 100px;
+	margin: 10px 19px 7px 0;
+	padding: 0 10px;
+	background-color: var(--core-primary);
+	overflow-y: scroll;
+}
+
+.appSelector ul {
+	padding-left: 2px;
+}
+
+.appSelector li {
+	list-style-type: none;
+	padding: 8px;
+	padding-left: 15px;
+	margin-left: 5px;
+}
+
+.appSelector li:hover {
+	border-radius: 17px;
+	background-color: var(--core-primary-3);
+}
+
+.appSelector li[aria-selected="true"] {
+	border-radius: 17px;
+	background-color: var(--core-primary-3);
+}
+
+.appSelector.empty {
+	vertical-align: middle;
+	text-align: center;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.actionGroupRight {
+	float: right;
+}
+
+.actionGroupRight button + button {
+	margin-left: 10px;
+}
+
+.appTile {
+	width: 103px;
+	height: 77px;
+	margin: 5px;
+	border-radius: 5px;
+	background-color: var(--core-primary-2);
+	vertical-align: top;
+}
+
+.appTile:hover {
+	border: 1px solid var(--accent-primary);
+}
+
+.tileHeader {
+	color: var(--font-color);
+	font-size: 14px;
+	overflow-wrap: break-word;
+}
+
+.tileNote {
+	font-size: 12px;
+}
+
+.open-disabled {
+	color: var(--core-primary-5);
+}
+
+.open-active {
+	color: var(--accent-primary);
+}
+
+/* width */
+
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+	background: none;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+	background: #f1f1f1;
+	border-radius: 3px;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+	background: #555;
+}

package/react/components/fdc3Resolver/ResolverDialog.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import "./ResolverDialog.css";
+import { ResolutionList } from "../../types/fdc3";
+declare type openApp = {
+    name: string;
+    id: string;
+};
+export declare type ReceivingAppType = {
+    name: string;
+    open: openApp[];
+};
+export declare type ResolverProps = {
+    intentRaiser: string;
+    onSend: any;
+    onCancel: any;
+    resolutionList?: ResolutionList[];
+};
+export declare const ResolverDialog: ({ intentRaiser, onSend, onCancel, resolutionList }: ResolverProps) => JSX.Element;
+export {};

package/react/components/fdc3Resolver/ResolverDialog.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { Button } from "../common/Button";
+import "./ResolverDialog.css";
+import { FinsembleSelect } from "../common/FinsembleSelect";
+const Tile = ({ text, callback }) => (React.createElement("button", { className: "appTile", onClick: callback, title: text },
+    React.createElement("span", { className: "tileHeader" }, text)));
+export const ResolverDialog = ({ intentRaiser, onSend, onCancel, resolutionList = [] }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [intentNumber, setIntentNumber] = useState(0);
+    const intent = ((_b = (_a = resolutionList[intentNumber]) === null || _a === void 0 ? void 0 : _a.intent) === null || _b === void 0 ? void 0 : _b.displayName) || "";
+    const contextType = (_e = (_d = (_c = resolutionList[intentNumber]) === null || _c === void 0 ? void 0 : _c.context) === null || _d === void 0 ? void 0 : _d.type) !== null && _e !== void 0 ? _e : "data";
+    const receivingApps = ((_f = resolutionList[intentNumber]) === null || _f === void 0 ? void 0 : _f.launchableApps) || [];
+    const openApps = (((_g = resolutionList[intentNumber]) === null || _g === void 0 ? void 0 : _g.openApps) || []).map((app, key) => {
+        return Object.assign(Object.assign({}, app), { index: key });
+    });
+    /**
+     * Calculates what text to display in the UX. AppD prefers `title` when available. However, in the future we may
+     * expand this to use data that is proprietary to Finsemble, such as the window's current title.
+     */
+    const displayName = (app) => { var _a, _b; return (_b = (_a = app.meta.title) !== null && _a !== void 0 ? _a : app.meta.name) !== null && _b !== void 0 ? _b : app.meta.appId; };
+    return (React.createElement("div", { className: "resolverDialog" },
+        resolutionList.length > 1 ? (React.createElement(React.Fragment, null,
+            React.createElement("h3", null,
+                React.createElement("span", { className: "sourceText" }, intentRaiser),
+                " wants to send",
+                " ",
+                React.createElement("span", { className: "intentText" },
+                    "\"",
+                    contextType,
+                    "\""),
+                " to another app."),
+            React.createElement("p", null, "How do you want to handle this?"),
+            React.createElement("h2", null, "Choose an action:"),
+            React.createElement(FinsembleSelect, { selected: [`${intentNumber}`], options: resolutionList.map((item) => { var _a; return ((_a = item.intent) === null || _a === void 0 ? void 0 : _a.displayName) || ""; }), values: resolutionList.map((item, key) => `${key}`), updateCallback: (values) => {
+                    setIntentNumber(+values[0]);
+                }, size: Math.min(resolutionList.length, 5), limit: 1 }))) : (React.createElement(React.Fragment, null,
+            React.createElement("h3", null,
+                React.createElement("span", { className: "sourceText" }, intentRaiser),
+                " wants to",
+                " ",
+                React.createElement("span", { className: "intentText" },
+                    "\"",
+                    intent,
+                    "\""),
+                "."),
+            React.createElement("p", null, "How do you want to handle this?"))),
+        React.createElement("h2", null, "Open a new app..."),
+        React.createElement("div", { className: "appListGrid" }, receivingApps.map((app, key) => (React.createElement(Tile, { key: key, text: displayName(app), callback: () => {
+                var _a, _b;
+                onSend({
+                    intent: (_b = (_a = resolutionList[intentNumber]) === null || _a === void 0 ? void 0 : _a.intent) === null || _b === void 0 ? void 0 : _b.name,
+                    selectedApp: {
+                        appId: app.appId,
+                    },
+                });
+            } })))),
+        openApps.length ? (React.createElement(React.Fragment, null,
+            React.createElement("h2", null, "...or, send to a running app"),
+            React.createElement("div", { className: "appSelector" },
+                React.createElement("ul", null, openApps.map((app, index) => (React.createElement("li", { key: index, tabIndex: 0, onClick: () => {
+                        var _a, _b;
+                        onSend({
+                            intent: (_b = (_a = resolutionList[intentNumber]) === null || _a === void 0 ? void 0 : _a.intent) === null || _b === void 0 ? void 0 : _b.name,
+                            selectedApp: { name: app.meta.name },
+                            windowName: app.windowName,
+                        });
+                    } }, `${app.index + 1} - ${displayName(app)}`))))))) : (React.createElement(React.Fragment, null)),
+        React.createElement("div", { className: "actionGroupRight" },
+            React.createElement(Button, { fashion: "ghost", text: "Cancel", onClick: onCancel }))));
+};
+//# sourceMappingURL=ResolverDialog.js.map

package/react/components/fdc3Resolver/ResolverDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResolverDialog.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from \"react\";\nimport { Button } from \"../common/Button\";\nimport \"./ResolverDialog.css\";\nimport { ResolutionCandidate, ResolutionList } from \"../../types/fdc3\";\nimport { FinsembleSelect } from \"../common/FinsembleSelect\";\n\ntype TileProps = {\n\ttext: string;\n\tcallback: () => void;\n};\n\nconst Tile = ({ text, callback }: TileProps) => (\n\t<button className=\"appTile\" onClick={callback} title={text}>\n\t\t<span className=\"tileHeader\">{text}</span>\n\t</button>\n);\n\ntype openApp = {\n\tname: string;\n\tid: string;\n};\nexport type ReceivingAppType = {\n\tname: string;\n\topen: openApp[];\n};\nexport type ResolverProps = {\n\tintentRaiser: string;\n\tonSend: any;\n\tonCancel: any;\n\tresolutionList?: ResolutionList[];\n};\n\nexport const ResolverDialog = ({ intentRaiser, onSend, onCancel, resolutionList = [] }: ResolverProps) => {\n\tconst [intentNumber, setIntentNumber] = useState(0);\n\tconst intent = resolutionList[intentNumber]?.intent?.displayName || \"\";\n\tconst contextType = resolutionList[intentNumber]?.context?.type ?? \"data\";\n\tconst receivingApps = resolutionList[intentNumber]?.launchableApps || [];\n\tconst openApps = (resolutionList[intentNumber]?.openApps || []).map((app, key) => {\n\t\treturn {\n\t\t\t...app,\n\t\t\tindex: key,\n\t\t};\n\t});\n\n\t/**\n\t * Calculates what text to display in the UX. AppD prefers `title` when available. However, in the future we may\n\t * expand this to use data that is proprietary to Finsemble, such as the window's current title.\n\t */\n\tconst displayName = (app: ResolutionCandidate): string => app.meta.title ?? app.meta.name ?? app.meta.appId;\n\n\treturn (\n\t\t<div className=\"resolverDialog\">\n\t\t\t{resolutionList.length > 1 ? (\n\t\t\t\t<>\n\t\t\t\t\t<h3>\n\t\t\t\t\t\t<span className=\"sourceText\">{intentRaiser}</span> wants to send{\" \"}\n\t\t\t\t\t\t<span className=\"intentText\">&quot;{contextType}&quot;</span> to another app.\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p>How do you want to handle this?</p>\n\n\t\t\t\t\t<h2>Choose an action:</h2>\n\n\t\t\t\t\t<FinsembleSelect\n\t\t\t\t\t\tselected={[`${intentNumber}`]}\n\t\t\t\t\t\toptions={resolutionList.map((item) => item.intent?.displayName || \"\")}\n\t\t\t\t\t\tvalues={resolutionList.map((item, key) => `${key}`)}\n\t\t\t\t\t\tupdateCallback={(values: string[]) => {\n\t\t\t\t\t\t\tsetIntentNumber(+values[0]);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tsize={Math.min(resolutionList.length, 5)}\n\t\t\t\t\t\tlimit={1}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<h3>\n\t\t\t\t\t\t<span className=\"sourceText\">{intentRaiser}</span> wants to{\" \"}\n\t\t\t\t\t\t<span className=\"intentText\">&quot;{intent}&quot;</span>.\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p>How do you want to handle this?</p>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t<h2>Open a new app...</h2>\n\n\t\t\t<div className=\"appListGrid\">\n\t\t\t\t{receivingApps.map((app, key) => (\n\t\t\t\t\t<Tile\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\ttext={displayName(app)}\n\t\t\t\t\t\tcallback={() => {\n\t\t\t\t\t\t\tonSend({\n\t\t\t\t\t\t\t\tintent: resolutionList[intentNumber]?.intent?.name,\n\t\t\t\t\t\t\t\tselectedApp: {\n\t\t\t\t\t\t\t\t\tappId: app.appId,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t{openApps.length ? (\n\t\t\t\t<>\n\t\t\t\t\t<h2>...or, send to a running app</h2>\n\n\t\t\t\t\t<div className=\"appSelector\">\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t{openApps.map((app, index) => (\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tonSend({\n\t\t\t\t\t\t\t\t\t\t\tintent: resolutionList[intentNumber]?.intent?.name,\n\t\t\t\t\t\t\t\t\t\t\tselectedApp: { name: app.meta.name },\n\t\t\t\t\t\t\t\t\t\t\twindowName: app.windowName,\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{`${app.index + 1} - ${displayName(app)}`}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t<div className=\"actionGroupRight\">\n\t\t\t\t<Button fashion=\"ghost\" text=\"Cancel\" onClick={onCancel} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/fdc3Resolver/ResolverDialog.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/fdc3Resolver/ResolverDialog.spec.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { afterEach, describe, it } from "mocha";
+import { expect } from "chai";
+import sinon from "sinon";
+import { Short } from "./ResolverDialog.stories";
+import { accessibilityAssessor } from "../sdd/tests/a11y_helper";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+addons.setChannel(mockChannel());
+describe("Resolver UI", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("should pass accessibility scans", async () => {
+        const wrapper = mount(React.createElement(Short, Object.assign({}, Short.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    });
+    it("should fill in data as expected", () => {
+        const wrapper = mount(React.createElement(Short, Object.assign({}, Short.args)));
+        expect(wrapper.find(".appTile").length, "Only show 2 tiles").to.equal(2);
+        expect(wrapper.find(".appTile").at(0).find(".tileHeader").text(), "First tile says Chart Title").to.equal("Chart Title");
+        expect(wrapper.find(".appTile").at(1).find(".tileHeader").text(), "Second tile says Grid").to.equal("Grid");
+        expect(wrapper.find(".appSelector li").length, "App list should have 2 items").to.equal(2);
+        expect(wrapper.find(".appSelector li").at(0).text(), "First app list item should say Chart Title #1").to.equal("1 - Chart Title");
+    });
+    it("should include info in the Send payload - selecting new item", () => {
+        const buttonSpy = sinon.spy(Short.args, "onSend");
+        const wrapper = mount(React.createElement(Short, Object.assign({}, Short.args)));
+        wrapper.find(".appTile").at(0).simulate("click");
+        const { args } = buttonSpy.getCall(0);
+        expect(buttonSpy.calledOnce, "The send callback was called").to.be.true;
+        expect(args.length, "Only 1 window was provided").to.be.equal(1);
+        expect(args[0].selectedApp.appId, "Provides name = Chart").to.equal("Chart");
+    });
+    it("should include the selected items in the Send payload", () => {
+        const buttonSpy = sinon.spy(Short.args, "onSend");
+        const wrapper = mount(React.createElement(Short, Object.assign({}, Short.args)));
+        wrapper.find(".appSelector li").at(0).simulate("click");
+        const { args } = buttonSpy.getCall(0);
+        expect(buttonSpy.calledOnce, "The send callback was called").to.be.true;
+        expect(args.length, "Only 1 window was provided").to.be.equal(1);
+        expect(args[0].windowName, "The name of the provided window was 'Chart-1-'Finsemble'").to.equal("Chart-1-Finsemble");
+    });
+    it("should call the cancel function if the Cancel button is clicked", () => {
+        const buttonSpy = sinon.spy(Short.args, "onCancel");
+        const wrapper = mount(React.createElement(Short, Object.assign({}, Short.args)));
+        wrapper.find(".button-container-ghost button").simulate("click");
+        expect(buttonSpy.calledOnce, "The send callback was called").to.be.true;
+    });
+});
+//# sourceMappingURL=ResolverDialog.spec.js.map

package/react/components/fdc3Resolver/ResolverDialog.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResolverDialog.spec.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverDialog.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { afterEach, describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport sinon from \"sinon\";\nimport { ResolverProps } from \"./ResolverDialog\";\nimport { Short } from \"./ResolverDialog.stories\";\nimport { accessibilityAssessor } from \"../sdd/tests/a11y_helper\";\n\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"Resolver UI\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<Short {...(Short.args as ResolverProps)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n\n\tit(\"should fill in data as expected\", () => {\n\t\tconst wrapper = mount(<Short {...(Short.args as ResolverProps)} />);\n\n\t\texpect(wrapper.find(\".appTile\").length, \"Only show 2 tiles\").to.equal(2);\n\t\texpect(wrapper.find(\".appTile\").at(0).find(\".tileHeader\").text(), \"First tile says Chart Title\").to.equal(\n\t\t\t\"Chart Title\"\n\t\t);\n\t\texpect(wrapper.find(\".appTile\").at(1).find(\".tileHeader\").text(), \"Second tile says Grid\").to.equal(\"Grid\");\n\t\texpect(wrapper.find(\".appSelector li\").length, \"App list should have 2 items\").to.equal(2);\n\t\texpect(wrapper.find(\".appSelector li\").at(0).text(), \"First app list item should say Chart Title #1\").to.equal(\n\t\t\t\"1 - Chart Title\"\n\t\t);\n\t});\n\n\tit(\"should include info in the Send payload - selecting new item\", () => {\n\t\tconst buttonSpy = sinon.spy(Short.args as ResolverProps, \"onSend\");\n\t\tconst wrapper = mount(<Short {...(Short.args as ResolverProps)} />);\n\n\t\twrapper.find(\".appTile\").at(0).simulate(\"click\");\n\t\tconst { args }: { args: any[] } = buttonSpy.getCall(0);\n\t\texpect(buttonSpy.calledOnce, \"The send callback was called\").to.be.true;\n\t\texpect(args.length, \"Only 1 window was provided\").to.be.equal(1);\n\t\texpect(args[0].selectedApp.appId, \"Provides name = Chart\").to.equal(\"Chart\");\n\t});\n\n\tit(\"should include the selected items in the Send payload\", () => {\n\t\tconst buttonSpy = sinon.spy(Short.args as ResolverProps, \"onSend\");\n\t\tconst wrapper = mount(<Short {...(Short.args as ResolverProps)} />);\n\n\t\twrapper.find(\".appSelector li\").at(0).simulate(\"click\");\n\n\t\tconst { args }: { args: any[] } = buttonSpy.getCall(0);\n\t\texpect(buttonSpy.calledOnce, \"The send callback was called\").to.be.true;\n\t\texpect(args.length, \"Only 1 window was provided\").to.be.equal(1);\n\t\texpect(args[0].windowName, \"The name of the provided window was 'Chart-1-'Finsemble'\").to.equal(\n\t\t\t\"Chart-1-Finsemble\"\n\t\t);\n\t});\n\n\tit(\"should call the cancel function if the Cancel button is clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(Short.args as ResolverProps, \"onCancel\");\n\t\tconst wrapper = mount(<Short {...(Short.args as ResolverProps)} />);\n\t\twrapper.find(\".button-container-ghost button\").simulate(\"click\");\n\t\texpect(buttonSpy.calledOnce, \"The send callback was called\").to.be.true;\n\t});\n});\n"]}

package/react/components/fdc3Resolver/ResolverDialog.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ResolverProps } from "./ResolverDialog";
+import "../../assets/css/finsemble.css";
+import "../common/css/styles.css";
+import { Story } from "@storybook/react/types-6-0";
+declare const _default: {
+    title: string;
+    component: ({ intentRaiser, onSend, onCancel, resolutionList }: ResolverProps) => JSX.Element;
+};
+export default _default;
+export declare const Short: Story<ResolverProps>;
+export declare const LongNames: Story<ResolverProps>;
+export declare const MultiIntent: Story<ResolverProps>;