@finsemble/finsemble-ui 7.2.1 → 7.3.1

package/react/components/notifications/css/notification-card.css

@@ -0,0 +1,165 @@
+/* Notification card and views */
+.notification-card {
+	background-color: var(--core-primary);
+	box-shadow: 0 0 8px 0 rgb(0 0 0 / 50%);
+	display: flex;
+	flex-direction: column;
+	font-family: var(--notification-font-family);
+	min-height: 120px;
+	padding: 8px 10px;
+	margin: 0 5px;
+}
+
+.notification-card.new {
+	box-shadow: 0 0 9px 0 var(--notification-highlight-border-color);
+}
+
+.notification-card.read {
+	background-color: var(--core-primary-opacity);
+	color: var(--font-shadow-light);
+}
+
+.notification-day {
+	color: var(--font-shadow-light);
+	font-size: var(--font-size);
+	font-weight: bold;
+	margin: 10px auto;
+	padding: 0 0 0 5px;
+}
+
+.notification-card__header {
+	display: grid;
+	grid-template-columns: 25px auto minmax(80px, auto);
+	grid-template-rows: 30px;
+	align-items: center;
+}
+
+.notification-card__title {
+	display: block;
+	font-size: var(--font-size-large);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-right: auto;
+	width: 100%;
+}
+
+.notification-card__more-options__no-toggle,
+.notification-card__more-options__toggle {
+	cursor: pointer;
+	white-space: nowrap;
+	display: grid;
+	grid-template-rows: 30px;
+	align-items: center;
+	grid-template-columns: minmax(80px, auto);
+	justify-items: end;
+	margin-left: 2px;
+}
+
+.js-toasts .notification-card__more-options__no-toggle,
+.js-toasts .notification-card__more-options__toggle {
+	grid-template-columns: 25px 20px;
+}
+
+.notification-card__more-options__toggle .notification-card_context_menu,
+.notification-card__more-options__toggle:hover .notification-card_timestamp {
+	display: none;
+}
+
+.notification-card__more-options__no-toggle .notification-card_context_menu,
+.notification-card__more-options__toggle:hover .notification-card_context_menu {
+	display: flex;
+}
+
+.notification-card__dismiss.finsemble-icon__btn i {
+	font-size: var(--titleBar-icon-font-size);
+}
+
+.notification-card__more-options__no-toggle .notification-card__dismiss:hover {
+	color: var(--titleBar-button-hover-negative-color);
+}
+
+.notification-card__body {
+	gap: 10px;
+	display: flex;
+	flex-direction: row;
+	font-size: var(--font-size-large);
+	margin-top: 8px;
+}
+
+.notification-card__body_text {
+	display: -webkit-box; /* stylelint-disable-line */
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 4;
+	color: var(--core-primary-5);
+	overflow: hidden;
+}
+
+.notification-card__body_img_container {
+	width: 50px;
+	height: 50px;
+	padding-bottom: 5px;
+}
+
+.notification-card__body_img_container img {
+	width: inherit;
+	height: inherit;
+}
+
+.notification-card.read .notification-card__body_text {
+	color: var(--font-color-1-shadow);
+}
+
+.actions-panel {
+	max-width: 120px;
+	align-items: flex-end;
+	display: flex;
+	flex-direction: column;
+	margin-left: auto;
+}
+
+.actions-panel__btn:hover {
+	opacity: 0.75;
+}
+
+.notification-card .overflow-menu__container,
+.notification-card.read .overflow-menu__container {
+	color: var(--font-color);
+}
+
+.notification-card__header img {
+	object-fit: contain;
+	margin-right: 8px;
+	max-width: 18px;
+	max-height: 18px;
+	width: auto;
+	height: auto;
+}
+
+.js-toasts .notification-card__header {
+	grid-template-columns: 25px auto 45px;
+}
+
+.finsemble-icon__btn {
+	align-items: center;
+	color: var(--core-primary-5);
+	cursor: pointer;
+	display: flex;
+	height: 24px;
+	justify-content: center;
+	position: relative;
+	width: 24px;
+}
+
+.finsemble-icon__btn.active {
+	color: var(--accent-primary);
+}
+
+.finsemble-icon__btn:hover:not(.no-hover) {
+	background: var(--menu-actions-hover-color);
+	border-radius: 50%;
+}
+
+.finsemble-icon__btn i {
+	font-size: var(--font-size-large);
+}

package/react/components/notifications/stories/NotificationCardShell.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import { NotificationCardPropType } from "../components/shared/NotificationCardShell";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<NotificationCardPropType>;
+};
+export default _default;
+export declare const AllFields: Story<NotificationCardPropType>;
+export declare const AllFieldsToasts: Story<NotificationCardPropType>;
+export declare const NoLogos: Story<NotificationCardPropType>;
+export declare const NoActionsNoLogos: Story<NotificationCardPropType>;
+export declare const VeryLongActionName: Story<NotificationCardPropType>;
+export declare const ALotOfDetailsText: Story<NotificationCardPropType>;

package/react/components/notifications/stories/NotificationCardShell.stories.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { initFSBL } from "../../common/helpers";
+import { NotificationCardShell } from "../components/shared/NotificationCardShell";
+export default {
+    title: "Notifications/NotificationCard",
+    component: NotificationCardShell,
+};
+const Template = (args) => {
+    initFSBL(window);
+    return (React.createElement("div", { style: { maxWidth: "408px", background: "#171a20", padding: "20px" } },
+        React.createElement(NotificationCardShell, Object.assign({}, args))));
+};
+const notification = {
+    headerLogo: "https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png",
+    type: "type",
+    timeout: 5000,
+    source: "source-name",
+    headerText: "I am header text",
+    cssClassName: "css-class-name",
+    contentLogo: "https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png",
+    isRead: false,
+    issuedAt: new Date().toISOString(),
+    title: "Title",
+    details: "A reasonable amount of text. One or two lines.",
+    isMuted: false,
+    isSnoozed: false,
+    isDeleted: false,
+    stateHistory: [],
+    actions: [
+        [
+            {
+                type: "SNOOZE",
+                buttonText: "Default Snooze",
+            },
+            {
+                type: "SNOOZE",
+                buttonText: "Snooze With Longer Text",
+            },
+            {
+                type: "SNOOZE",
+                buttonText: "Small Snooze",
+            },
+        ],
+        {
+            type: "SNOOZE",
+            buttonText: "Longer text",
+        },
+        {
+            type: "SNOOZE",
+            buttonText: "Much longer text",
+        },
+    ],
+};
+export const AllFields = Template.bind({});
+AllFields.args = {
+    notification: notification,
+    uiContext: "center",
+};
+export const AllFieldsToasts = Template.bind({});
+AllFieldsToasts.args = {
+    notification: notification,
+    uiContext: "toasts",
+};
+const noLogoNotification = Object.assign({}, notification);
+delete noLogoNotification.headerLogo;
+delete noLogoNotification.contentLogo;
+noLogoNotification.contentLogo;
+export const NoLogos = Template.bind({});
+NoLogos.args = {
+    notification: noLogoNotification,
+};
+const noActionsNoLogosNotification = Object.assign({}, notification);
+delete noActionsNoLogosNotification.headerLogo;
+delete noActionsNoLogosNotification.contentLogo;
+delete noActionsNoLogosNotification.actions;
+export const NoActionsNoLogos = Template.bind({});
+NoActionsNoLogos.args = {
+    notification: noActionsNoLogosNotification,
+};
+const veryLongActionNameNotification = Object.assign({}, notification);
+veryLongActionNameNotification.actions = [
+    {
+        buttonText: "This is a very long action name. How long can we go?",
+        type: "DISMISS",
+    },
+    [
+        {
+            buttonText: "This is a very long action name. How long can we go?",
+            type: "DISMISS",
+        },
+        {
+            buttonText: "This is a very long action name. How long can we go?",
+            type: "DISMISS",
+        },
+    ],
+];
+export const VeryLongActionName = Template.bind({});
+VeryLongActionName.args = {
+    notification: veryLongActionNameNotification,
+};
+const aLotOfDetailsTextNotification = Object.assign({}, notification);
+aLotOfDetailsTextNotification.details =
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took . galley of type and scrambled it to make . type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.";
+export const ALotOfDetailsText = Template.bind({});
+ALotOfDetailsText.args = {
+    notification: aLotOfDetailsTextNotification,
+};
+//# sourceMappingURL=NotificationCardShell.stories.js.map

package/react/components/notifications/stories/NotificationCardShell.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardShell.stories.js","sourceRoot":"","sources":["../../../../src/components/notifications/stories/NotificationCardShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { initFSBL } from \"../../common/helpers\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { NotificationCardShell, NotificationCardPropType } from \"../components/shared/NotificationCardShell\";\nimport { services } from \"@finsemble/finsemble-api\";\ntype INotification = services.notification.types.INotification;\n\nexport default {\n\ttitle: \"Notifications/NotificationCard\",\n\tcomponent: NotificationCardShell,\n};\n\nconst Template: Story<NotificationCardPropType> = (args: NotificationCardPropType) => {\n\tinitFSBL(window);\n\treturn (\n\t\t<div style={{ maxWidth: \"408px\", background: \"#171a20\", padding: \"20px\" }}>\n\t\t\t<NotificationCardShell {...args} />\n\t\t</div>\n\t);\n};\n\nconst notification: INotification = {\n\theaderLogo: \"https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png\",\n\ttype: \"type\",\n\ttimeout: 5000,\n\tsource: \"source-name\",\n\theaderText: \"I am header text\",\n\tcssClassName: \"css-class-name\",\n\tcontentLogo: \"https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png\",\n\tisRead: false,\n\tissuedAt: new Date().toISOString(),\n\ttitle: \"Title\",\n\tdetails: \"A reasonable amount of text. One or two lines.\",\n\tisMuted: false,\n\tisSnoozed: false,\n\tisDeleted: false,\n\tstateHistory: [],\n\tactions: [\n\t\t[\n\t\t\t{\n\t\t\t\ttype: \"SNOOZE\",\n\t\t\t\tbuttonText: \"Default Snooze\",\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: \"SNOOZE\",\n\t\t\t\tbuttonText: \"Snooze With Longer Text\",\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: \"SNOOZE\",\n\t\t\t\tbuttonText: \"Small Snooze\",\n\t\t\t},\n\t\t],\n\t\t{\n\t\t\ttype: \"SNOOZE\",\n\t\t\tbuttonText: \"Longer text\",\n\t\t},\n\t\t{\n\t\t\ttype: \"SNOOZE\",\n\t\t\tbuttonText: \"Much longer text\",\n\t\t},\n\t],\n};\n\nexport const AllFields = Template.bind({});\nAllFields.args = {\n\tnotification: notification,\n\tuiContext: \"center\",\n};\nexport const AllFieldsToasts = Template.bind({});\nAllFieldsToasts.args = {\n\tnotification: notification,\n\tuiContext: \"toasts\",\n};\n\nconst noLogoNotification = Object.assign({}, notification);\n\ndelete noLogoNotification.headerLogo;\ndelete noLogoNotification.contentLogo;\nnoLogoNotification.contentLogo;\n\nexport const NoLogos = Template.bind({});\nNoLogos.args = {\n\tnotification: noLogoNotification,\n};\n\nconst noActionsNoLogosNotification = Object.assign({}, notification);\ndelete noActionsNoLogosNotification.headerLogo;\ndelete noActionsNoLogosNotification.contentLogo;\ndelete noActionsNoLogosNotification.actions;\n\nexport const NoActionsNoLogos = Template.bind({});\nNoActionsNoLogos.args = {\n\tnotification: noActionsNoLogosNotification,\n};\n\nconst veryLongActionNameNotification = Object.assign({}, notification);\nveryLongActionNameNotification.actions = [\n\t{\n\t\tbuttonText: \"This is a very long action name. How long can we go?\",\n\t\ttype: \"DISMISS\",\n\t},\n\t[\n\t\t{\n\t\t\tbuttonText: \"This is a very long action name. How long can we go?\",\n\t\t\ttype: \"DISMISS\",\n\t\t},\n\t\t{\n\t\t\tbuttonText: \"This is a very long action name. How long can we go?\",\n\t\t\ttype: \"DISMISS\",\n\t\t},\n\t],\n];\n\nexport const VeryLongActionName = Template.bind({});\nVeryLongActionName.args = {\n\tnotification: veryLongActionNameNotification,\n};\n\nconst aLotOfDetailsTextNotification = Object.assign({}, notification);\naLotOfDetailsTextNotification.details =\n\t\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took . galley of type and scrambled it to make . type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\";\n\nexport const ALotOfDetailsText = Template.bind({});\nALotOfDetailsText.args = {\n\tnotification: aLotOfDetailsTextNotification,\n};\n"]}

package/react/components/notifications/tests/NotificationCardShell.spec.d.ts

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

package/react/components/notifications/tests/NotificationCardShell.spec.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { afterEach, describe, it } from "mocha";
+import { expect } from "chai";
+import { NoActionsNoLogos, NoLogos, AllFields, AllFieldsToasts } from "../stories/NotificationCardShell.stories";
+import { accessibilityAssessor } from "../../sdd/tests/a11y_helper";
+import { waitTime } from "../../sdd/sdd_helpers";
+import sinon from "sinon";
+describe("<NotificationCardShell />", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("should pass accessibility scans when in the notification center", async () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    }).timeout(10e3);
+    it("should pass accessibility scans when in the notification toasts", async () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args, { uiContext: "toasts" })));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    }).timeout(10e3);
+    const testHalo = (args, expected) => async () => {
+        const { notification } = args;
+        // Refresh the issued at date as this tests behaviour based on the passage of time
+        notification.issuedAt = new Date().toISOString();
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, args, { notification: notification })));
+        await waitTime(0);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists()).to.equal(expected);
+        expect(wrapper.find(".notification-card.read").exists(), "card should not be marked as read").to.equal(false);
+    };
+    it("should show a halo when the notification is new", testHalo(Object.assign(Object.assign({}, AllFields.args), { uiContext: "center" }), true)).timeout(10e3);
+    it("should not show a halo when a toast", testHalo(Object.assign(Object.assign({}, AllFields.args), { uiContext: "toasts" }), false)).timeout(10e3);
+    // Skipped because it fails when running the whole suite. Passes when run on its own.
+    // Also couldn't get sinon.useFakeTimers() to work
+    it("should hide the new halo after 3 seconds of time (3s comes from preferences)", async () => {
+        const { notification } = AllFields.args;
+        notification.issuedAt = new Date().toISOString();
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args, { notification: notification })));
+        await waitTime(0);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists(), "Card is new").to.be.true;
+        await waitTime(2000);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists(), "Card is still new").to.be.true;
+        await waitTime(1500);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists(), "Card is no longer new").to.be.false;
+    }).timeout(10e3);
+    it("should be read", () => {
+        const { notification } = AllFields.args;
+        notification.isRead = true;
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args, { notification: notification })));
+        expect(wrapper.find(".notification-card.read").exists(), "card should be marked as read").to.equal(true);
+    });
+    it("should have a close button when a toast", () => {
+        const wrapper = mount(React.createElement(AllFieldsToasts, Object.assign({}, AllFieldsToasts.args, { uiContext: "toasts" })));
+        expect(wrapper.find(".notification-card__dismiss").exists(), "Toasts should have a dismiss button (x top right corner)").to.equal(true);
+    });
+    it("SHOULD have icons", () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        const imageExists = wrapper.find(".notification-card__header img").exists();
+        const defaultImageExists = wrapper.find(".notification-card__header .default-img").exists();
+        expect(imageExists && !defaultImageExists, "Title icon exists and default icon does not").to.equal(true);
+        expect(wrapper.find(".notification-card__body_img_container img").exists(), "Content icon exists").to.equal(true);
+    });
+    it("SHOULD NOT have icons", () => {
+        const wrapper = mount(React.createElement(NoLogos, Object.assign({}, NoLogos.args)));
+        const defaultImageExists = wrapper.find(".notification-card__header .default-img").exists();
+        expect(defaultImageExists, "Default title icon exists").to.equal(true);
+        expect(wrapper.find(".notification-card__body_img_container img").exists(), "Content icon exists").to.equal(true);
+    });
+    it("should have cssClass value as css class", () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        expect(wrapper.find(".notification-card.css-class-name").exists()).to.be.true;
+    });
+    it("SHOULD have actions", () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        expect(wrapper.find(".finsemble-dropdown-action__btn-container").exists(), "One grouped action should exist").to.be
+            .true;
+        const actions = wrapper.find(".actions-panel .finsemble__btn");
+        expect(actions.length, "Two single actions should exist").to.equal(2);
+        const spy = sinon.spy(FSBL.Clients.NotificationClient, "performAction");
+        actions.at(0).simulate("click");
+        expect(spy.calledOnce, "action is performed").to.be.true;
+    });
+    it("SHOULD NOT have actions", () => {
+        const wrapper = mount(React.createElement(NoActionsNoLogos, Object.assign({}, NoActionsNoLogos.args)));
+        expect(wrapper.find(".actions-panel").exists()).to.be.false;
+    });
+});
+//# sourceMappingURL=NotificationCardShell.spec.js.map

package/react/components/notifications/tests/NotificationCardShell.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardShell.spec.js","sourceRoot":"","sources":["../../../../src/components/notifications/tests/NotificationCardShell.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 { NoActionsNoLogos, NoLogos, AllFields, AllFieldsToasts } from \"../stories/NotificationCardShell.stories\";\nimport { NotificationCardPropType } from \"../components/shared/NotificationCardShell\";\nimport { accessibilityAssessor } from \"../../sdd/tests/a11y_helper\";\nimport { waitTime } from \"../../sdd/sdd_helpers\";\nimport sinon from \"sinon\";\n\ndescribe(\"<NotificationCardShell />\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\n\tit(\"should pass accessibility scans when in the notification center\", async () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t}).timeout(10e3);\n\n\tit(\"should pass accessibility scans when in the notification toasts\", async () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} uiContext=\"toasts\" />);\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t}).timeout(10e3);\n\n\tconst testHalo = (args: NotificationCardPropType, expected: any) => async () => {\n\t\tconst { notification } = args;\n\t\t// Refresh the issued at date as this tests behaviour based on the passage of time\n\t\tnotification.issuedAt = new Date().toISOString();\n\t\tconst wrapper = mount(<AllFields {...(args as NotificationCardPropType)} notification={notification} />);\n\t\tawait waitTime(0);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists()).to.equal(expected);\n\t\texpect(wrapper.find(\".notification-card.read\").exists(), \"card should not be marked as read\").to.equal(false);\n\t};\n\n\tit(\n\t\t\"should show a halo when the notification is new\",\n\t\ttestHalo({ ...AllFields.args, uiContext: \"center\" } as NotificationCardPropType, true)\n\t).timeout(10e3);\n\n\tit(\n\t\t\"should not show a halo when a toast\",\n\t\ttestHalo({ ...AllFields.args, uiContext: \"toasts\" } as NotificationCardPropType, false)\n\t).timeout(10e3);\n\n\t// Skipped because it fails when running the whole suite. Passes when run on its own.\n\t// Also couldn't get sinon.useFakeTimers() to work\n\tit(\"should hide the new halo after 3 seconds of time (3s comes from preferences)\", async () => {\n\t\tconst { notification } = AllFields.args as NotificationCardPropType;\n\t\tnotification.issuedAt = new Date().toISOString();\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} notification={notification} />);\n\t\tawait waitTime(0);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists(), \"Card is new\").to.be.true;\n\t\tawait waitTime(2000);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists(), \"Card is still new\").to.be.true;\n\t\tawait waitTime(1500);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists(), \"Card is no longer new\").to.be.false;\n\t}).timeout(10e3);\n\n\tit(\"should be read\", () => {\n\t\tconst { notification } = AllFields.args as NotificationCardPropType;\n\t\tnotification.isRead = true;\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} notification={notification} />);\n\t\texpect(wrapper.find(\".notification-card.read\").exists(), \"card should be marked as read\").to.equal(true);\n\t});\n\n\tit(\"should have a close button when a toast\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AllFieldsToasts {...(AllFieldsToasts.args as NotificationCardPropType)} uiContext=\"toasts\" />\n\t\t);\n\t\texpect(\n\t\t\twrapper.find(\".notification-card__dismiss\").exists(),\n\t\t\t\"Toasts should have a dismiss button (x top right corner)\"\n\t\t).to.equal(true);\n\t});\n\n\tit(\"SHOULD have icons\", () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\tconst imageExists = wrapper.find(\".notification-card__header img\").exists();\n\t\tconst defaultImageExists = wrapper.find(\".notification-card__header .default-img\").exists();\n\t\texpect(imageExists && !defaultImageExists, \"Title icon exists and default icon does not\").to.equal(true);\n\n\t\texpect(wrapper.find(\".notification-card__body_img_container img\").exists(), \"Content icon exists\").to.equal(true);\n\t});\n\n\tit(\"SHOULD NOT have icons\", () => {\n\t\tconst wrapper = mount(<NoLogos {...(NoLogos.args as NotificationCardPropType)} />);\n\t\tconst defaultImageExists = wrapper.find(\".notification-card__header .default-img\").exists();\n\t\texpect(defaultImageExists, \"Default title icon exists\").to.equal(true);\n\t\texpect(wrapper.find(\".notification-card__body_img_container img\").exists(), \"Content icon exists\").to.equal(true);\n\t});\n\n\tit(\"should have cssClass value as css class\", () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\texpect(wrapper.find(\".notification-card.css-class-name\").exists()).to.be.true;\n\t});\n\n\tit(\"SHOULD have actions\", () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\texpect(wrapper.find(\".finsemble-dropdown-action__btn-container\").exists(), \"One grouped action should exist\").to.be\n\t\t\t.true;\n\t\tconst actions = wrapper.find(\".actions-panel .finsemble__btn\");\n\t\texpect(actions.length, \"Two single actions should exist\").to.equal(2);\n\t\tconst spy = sinon.spy(FSBL.Clients.NotificationClient, \"performAction\");\n\t\tactions.at(0).simulate(\"click\");\n\t\texpect(spy.calledOnce, \"action is performed\").to.be.true;\n\t});\n\n\tit(\"SHOULD NOT have actions\", () => {\n\t\tconst wrapper = mount(<NoActionsNoLogos {...(NoActionsNoLogos.args as NotificationCardPropType)} />);\n\t\texpect(wrapper.find(\".actions-panel\").exists()).to.be.false;\n\t});\n});\n"]}

package/react/components/notifications/types.d.ts

@@ -82,10 +82,12 @@ export interface NotificationsConfig {
 export interface WindowConfig {
     window: SpawnParams & NotificationsConfig;
 }
-export declare type OverFlowMenuAction = {
+export declare type ContextMenuAction = {
+    id?: string;
     name: string;
     icon: React.ReactElement;
-    action: (notification: INotification) => void;
+    action?: (name: any) => void;
     label: string;
+    display: boolean;
 };
 export {};

package/react/components/notifications/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notifications/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Notification types\n */\nimport React from \"react\";\nimport { ViewMode, SelectionMode } from \"./constants\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype INotificationHistoryOptions = services.notification.types.INotificationHistoryOptions;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IFilter = services.notification.types.IFilter;\ntype SpawnParams = services.window.types.SpawnParams;\n\nexport interface Control {\n\taction: string;\n\tlabel: string;\n\trun?: Function;\n}\n\nexport interface NotificationCenterControlsProps {\n\tcontrols: Array<Control>;\n\tactive?: Control[\"action\"];\n}\n\nexport interface INotificationCenterProps {\n\tcontrols?: NotificationCenterControlsProps;\n\tnotificationCard?: React.ComponentType<any>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n\tnotificationListRow?: React.ComponentType<any>;\n}\n\nexport interface INotificationToastsProps {\n\tnotificationCard?: React.ComponentType<any>;\n}\n\nexport interface INotificationDetailProps {\n\tnotification: INotification;\n}\n\nexport type NotificationListViewProps = {\n\tnotifications: INotification[];\n\tnotificationListRow?: React.ComponentType<INotificationDetailProps>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n};\n\nexport type NotificationCardViewProps = {\n\tnotifications: INotification[];\n\tnotificationCard?: React.ComponentType<any>; // A custom component used to render a notification\n};\n\nexport type NotificationsContextType = {\n\tviewMode: ViewMode;\n\tsetViewMode: React.Dispatch<React.SetStateAction<ViewMode>>;\n\tselectionMode: SelectionMode;\n\tsetSelectionMode: React.Dispatch<React.SetStateAction<SelectionMode>>;\n\tisSelectAll: boolean;\n\tsetSelectAll: React.Dispatch<React.SetStateAction<boolean>>;\n\tdrawerControlProps: NotificationCenterControlsProps;\n\tsetDrawerControlProps: React.Dispatch<React.SetStateAction<NotificationCenterControlsProps>>;\n\tselectedNotification: INotification | null;\n\tsetSelectedNotification: React.Dispatch<React.SetStateAction<INotification | null>>;\n\tsearchString: string;\n\tsetSearchString: React.Dispatch<React.SetStateAction<string>>;\n\tfilteredNotifications: INotification[];\n\tcheckedNotifications: INotification[];\n\tsetCheckedNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tsetFilteredNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tmuteFilters: IMuteFilter[];\n\tsetMuteFilters: React.Dispatch<React.SetStateAction<IMuteFilter[]>>;\n};\n\nexport interface NotificationsConfig {\n\tfilter?: {\n\t\tinclude?: [];\n\t\texclude?: [];\n\t};\n\tposition?: {};\n\tanimation?: {\n\t\tdisplayDuration: number;\n\t\tanimateIn: string;\n\t\tanimateOut: string;\n\t};\n\tisTransparent?: boolean;\n\tnotificationsHistory?: { since?: string; filter?: IFilter; options?: INotificationHistoryOptions } | boolean;\n\tapplyMuteFilters?: boolean;\n\twindowName: string;\n}\n\nexport interface WindowConfig {\n\twindow: SpawnParams & NotificationsConfig;\n}\n\nexport type OverFlowMenuAction = {\n\tname: string;\n\ticon: React.ReactElement;\n\taction: (notification: INotification) => void;\n\tlabel: string;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notifications/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Notification types\n */\nimport React from \"react\";\nimport { ViewMode, SelectionMode } from \"./constants\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype INotificationHistoryOptions = services.notification.types.INotificationHistoryOptions;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IFilter = services.notification.types.IFilter;\ntype SpawnParams = services.window.types.SpawnParams;\n\nexport interface Control {\n\taction: string;\n\tlabel: string;\n\trun?: Function;\n}\n\nexport interface NotificationCenterControlsProps {\n\tcontrols: Array<Control>;\n\tactive?: Control[\"action\"];\n}\n\nexport interface INotificationCenterProps {\n\tcontrols?: NotificationCenterControlsProps;\n\tnotificationCard?: React.ComponentType<any>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n\tnotificationListRow?: React.ComponentType<any>;\n}\n\nexport interface INotificationToastsProps {\n\tnotificationCard?: React.ComponentType<any>;\n}\n\nexport interface INotificationDetailProps {\n\tnotification: INotification;\n}\n\nexport type NotificationListViewProps = {\n\tnotifications: INotification[];\n\tnotificationListRow?: React.ComponentType<INotificationDetailProps>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n};\n\nexport type NotificationCardViewProps = {\n\tnotifications: INotification[];\n\tnotificationCard?: React.ComponentType<any>; // A custom component used to render a notification\n};\n\nexport type NotificationsContextType = {\n\tviewMode: ViewMode;\n\tsetViewMode: React.Dispatch<React.SetStateAction<ViewMode>>;\n\tselectionMode: SelectionMode;\n\tsetSelectionMode: React.Dispatch<React.SetStateAction<SelectionMode>>;\n\tisSelectAll: boolean;\n\tsetSelectAll: React.Dispatch<React.SetStateAction<boolean>>;\n\tdrawerControlProps: NotificationCenterControlsProps;\n\tsetDrawerControlProps: React.Dispatch<React.SetStateAction<NotificationCenterControlsProps>>;\n\tselectedNotification: INotification | null;\n\tsetSelectedNotification: React.Dispatch<React.SetStateAction<INotification | null>>;\n\tsearchString: string;\n\tsetSearchString: React.Dispatch<React.SetStateAction<string>>;\n\tfilteredNotifications: INotification[];\n\tcheckedNotifications: INotification[];\n\tsetCheckedNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tsetFilteredNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tmuteFilters: IMuteFilter[];\n\tsetMuteFilters: React.Dispatch<React.SetStateAction<IMuteFilter[]>>;\n};\n\nexport interface NotificationsConfig {\n\tfilter?: {\n\t\tinclude?: [];\n\t\texclude?: [];\n\t};\n\tposition?: {};\n\tanimation?: {\n\t\tdisplayDuration: number;\n\t\tanimateIn: string;\n\t\tanimateOut: string;\n\t};\n\tisTransparent?: boolean;\n\tnotificationsHistory?: { since?: string; filter?: IFilter; options?: INotificationHistoryOptions } | boolean;\n\tapplyMuteFilters?: boolean;\n\twindowName: string;\n}\n\nexport interface WindowConfig {\n\twindow: SpawnParams & NotificationsConfig;\n}\n\nexport type ContextMenuAction = {\n\tid?: string;\n\tname: string;\n\ticon: React.ReactElement;\n\taction?: (name: any) => void;\n\tlabel: string;\n\tdisplay: boolean;\n};\n"]}

package/react/components/sdd/AddApp.d.ts

@@ -6,11 +6,11 @@
 import "./css/addApp.css";
 export declare type AddAppProps = {
     checkValidURL: (url: string) => boolean;
-    addAppByUrl: (url: string, name: string) => void;
-    addAppByPath: (path: string, name: string, apiAccess: boolean) => void;
+    addAppByUrl: (url: string, name: string, appId?: string) => void;
+    addAppByPath: (path: string, name: string, apiAccess: boolean, appId?: string) => void;
     close: () => void;
     show: boolean;
-    addAppCitrix?: (alias: string, name: string) => void;
+    addAppCitrix?: (alias: string, name: string, appId?: string) => void;
     includeCitrix?: boolean;
     idKey?: string;
 };

package/react/components/sdd/AddApp.js

@@ -10,6 +10,7 @@ import { VALID_APP_EXTENSIONS } from "../common/file_helpers";
 import { FinsembleIcon } from "../common/FinsembleIcon";
 import { FinsembleToggleButtonBar } from "../common/FinsembleToggleButtonBar";
 import { Tooltip } from "../common/Tooltip";
+import { Checkbox } from "../common/Checkbox";
 import { getDefaultName } from "./sdd_helpers";
 import "./css/addApp.css";
 const isValid = ({ visible, appUrl, appPath, appCitrix, webAppName, pathAppName, citrixAppName, }) => {
@@ -38,6 +39,8 @@ export const AddApp = ({ checkValidURL, addAppByPath, addAppByUrl, addAppCitrix
     const [citrixAppName, setCitrixAppName] = useState("");
     const [apiAccess, setApiAccess] = useState(true);
     const [urlUserInput, setUrlUserInput] = useState(false);
+    const [autoGenerateWeb, setAutoGenerateWeb] = useState(true);
+    const [appId, setAppId] = useState("");
     const isAppUrlValid = checkValidURL(appUrl);
     const clearAll = () => {
         setAppUrl("");
@@ -47,6 +50,8 @@ export const AddApp = ({ checkValidURL, addAppByPath, addAppByUrl, addAppCitrix
         setPathAppName("");
         setCitrixAppName("");
         setApiAccess(true);
+        setAutoGenerateWeb(true);
+        setAppId("");
     };
     const closeBox = () => {
         clearAll();
@@ -91,20 +96,20 @@ export const AddApp = ({ checkValidURL, addAppByPath, addAppByUrl, addAppCitrix
             },
         ]
         : []);
-    return (React.createElement("div", { className: `quick-add-app${show ? "" : " collapsed"}`, style: { position: "relative" }, "aria-hidden": !show },
+    return (React.createElement("div", { className: `quick-add-app${show ? "" : " collapsed"}`, "aria-hidden": !show },
         React.createElement(ButtonIcon, { icon: "times", onClick: closeBox, text: "Close", className: "quick-add-close" }),
         React.createElement(FinsembleToggleButtonBar, { selected: visible, onChange: setVisible, options: toggleButtonOptions }),
-        React.createElement("table", { role: "presentation", style: { width: "100%" } },
+        React.createElement("table", { role: "presentation", "data-section": visible },
             visible === "web" && (React.createElement("tbody", null,
                 React.createElement("tr", { className: "quick-add-url" },
-                    React.createElement("td", { style: { width: "20%" } },
+                    React.createElement("td", null,
                         React.createElement("label", { htmlFor: `app-url-${idKey}` }, "App URL")),
                     React.createElement("td", null,
                         React.createElement("input", { type: "text", placeholder: "https://...", id: `app-url-${idKey}`, value: appUrl, "aria-invalid": !isAppUrlValid, "aria-errormessage": `app-url-error-message-${idKey}`, onChange: (e) => {
                                 changeUrlContent(e.target.value);
                             }, onKeyUp: (e) => {
                                 changeUrlContent(e.currentTarget.value);
-                            }, style: { width: "95%" } }),
+                            } }),
                         !isAppUrlValid && (React.createElement("div", { id: `app-url-error-message-${idKey}`, className: "invalid-message" }, "URL must be valid (e.g., https://cosaic.io/). Only http and https prototcols are supported.")))),
                 React.createElement("tr", null,
                     React.createElement("td", null,
@@ -113,7 +118,7 @@ export const AddApp = ({ checkValidURL, addAppByPath, addAppByUrl, addAppCitrix
                         React.createElement("input", { type: "text", id: `url-app-name-${idKey}`, value: webAppName, onChange: (e) => {
                                 setWebAppName(e.target.value);
                                 setUrlUserInput(true);
-                            }, style: { width: "95%" } }))))),
+                            } }))))),
             visible === "native" && (React.createElement("tbody", null,
                 React.createElement("tr", { className: "quick-add-url" },
                     React.createElement("td", { colSpan: 2 },
@@ -126,19 +131,10 @@ export const AddApp = ({ checkValidURL, addAppByPath, addAppByUrl, addAppCitrix
                     React.createElement("td", null,
                         React.createElement("input", { type: "text", id: `path-app-name-${idKey}`, value: pathAppName, onChange: (e) => {
                                 setPathAppName(e.target.value);
-                            }, style: { width: "95%" } }))),
-                React.createElement("tr", null,
-                    React.createElement("td", null,
-                        React.createElement("label", { htmlFor: `api-access-${idKey}` }, "API access")),
-                    React.createElement("td", null,
-                        React.createElement("input", { type: "checkbox", id: `api-access-${idKey}`, checked: apiAccess, onChange: (e) => {
-                                setApiAccess(e.target.checked);
-                            } })),
-                    React.createElement("td", null,
-                        React.createElement(Tooltip, { position: "left" }, "Specify if your app needs to access Finsemble API. Your app must be built with the Finsemble native integration library (see Finsemble documentation for details)."))))),
+                            } }))))),
             visible === "citrix" && (React.createElement("tbody", null,
                 React.createElement("tr", { className: "quick-add-citrix" },
-                    React.createElement("td", { style: { width: "20%" } },
+                    React.createElement("td", null,
                         React.createElement("label", { htmlFor: `app-citrix-${idKey}` }, "Virtual app name")),
                     React.createElement("td", null,
                         React.createElement("input", { type: "text", placeholder: "", id: `app-citrix-${idKey}`, value: appCitrix, onChange: (e) => {
@@ -146,24 +142,36 @@ export const AddApp = ({ checkValidURL, addAppByPath, addAppByUrl, addAppCitrix
                                     setCitrixAppName(e.target.value);
                                 }
                                 setAppCitrix(e.target.value);
-                            }, style: { width: "95%" } }))),
+                            } }))),
                 React.createElement("tr", null,
                     React.createElement("td", null,
                         React.createElement("label", { htmlFor: `citrix-display-name-${idKey}` }, "Display name")),
                     React.createElement("td", null,
                         React.createElement("input", { type: "text", id: `citrix-display-name-${idKey}`, value: citrixAppName, onChange: (e) => {
                                 setCitrixAppName(e.target.value);
-                            }, style: { width: "95%" } })))))),
+                            } })))))),
+        React.createElement("div", { className: "autogenerate" },
+            React.createElement(Checkbox, { label: "Autogenerate ID", checked: autoGenerateWeb, onClick: () => {
+                    setAutoGenerateWeb(!autoGenerateWeb);
+                } }),
+            !autoGenerateWeb && (React.createElement("input", { type: "text", id: "appId_web", value: appId, onChange: (e) => {
+                    setAppId(e.target.value);
+                } }))),
+        visible === "native" && (React.createElement("div", { className: "apiAccessRow" },
+            React.createElement(Checkbox, { id: `api-access-${idKey}`, label: "API access", checked: apiAccess, onClick: (e) => {
+                    setApiAccess(e.target.checked);
+                } }),
+            React.createElement(Tooltip, null, "Specify if your app needs to access Finsemble API. Your app must be built with the Finsemble native integration library (see Finsemble documentation for details)."))),
         React.createElement("div", { className: "save-button-container" },
             React.createElement(Button, { fashion: "secondary", className: "quick-add-save", onClick: () => {
                     if (visible === "web") {
-                        addAppByUrl(appUrl, webAppName);
+                        addAppByUrl(appUrl, webAppName, appId);
                     }
                     else if (visible === "native") {
-                        addAppByPath(appPath, pathAppName, apiAccess);
+                        addAppByPath(appPath, pathAppName, apiAccess, appId);
                     }
                     else if (visible === "citrix") {
-                        addAppCitrix(appCitrix, citrixAppName);
+                        addAppCitrix(appCitrix, citrixAppName, appId);
                     }
                 }, text: "Save", disabled: !isEnabledFlag }))));
 };