@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

package/dist/collection/components/wm-navigator/wm-navigator.js

@@ -1,496 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { getWmMode } from "../../global/interfaces";
-import { intl, snakeCaseToCamelCase, getNewIndexToFocus } from "../../global/functions";
-import { getRequest } from "../../global/services/http-service";
-export class Navigator {
-    constructor() {
-        // comp can check whether the info was successfully retrieved with:
-        this.retrievedInfo = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed
-        // used either way to store the products
-        this.parsedProducts = [];
-        this.openRight = false; // whether the menu should open on the right side
-        this.userName = undefined;
-        this.email = undefined;
-        this.authType = 1;
-        this.connectionName = undefined;
-        this.logoutUrl = undefined;
-        this.products = undefined;
-        this.loadFromUserinfo = false;
-        this.isOpen = false;
-        this.itemIndexToFocus = 0;
-    }
-    isSafeUrl(url) {
-        let isSafe = false;
-        const whitelist = [
-            "digitalmeasures\\.com",
-            "evalkit\\.info",
-            "evaluationkit\\.com",
-            "evaluationkit\\.info",
-            "lat_ams\\.com",
-            "livetext\\.com",
-            "smartcatalogiq\\.com",
-            "smartcatalogiq\\.net",
-            "smartcatalogiq\\.us",
-            "taskstream\\.com",
-            "vialivetext\\.com",
-            "watermarkinsights\\.com",
-        ];
-        whitelist.forEach((tld) => {
-            const knownTLD = `^https:\/\/(.*\.)?${tld}(\/.*)?$`;
-            if (!!url && url.match(knownTLD)) {
-                isSafe = true;
-            }
-        });
-        return isSafe;
-    }
-    async componentWillLoad() {
-        if (!this.userName) {
-            console.error("wm-navigator: user-name is a required property.");
-        }
-        await this.parseData();
-        this.setFocusIndex();
-    }
-    // async because we need the http request to complete before proceeding
-    async parseData() {
-        if (!!this.loadFromUserinfo) {
-            await getRequest("/platform/navigator/userinfo")
-                .then((response) => {
-                this.email = response.email;
-                this.currentProductId = response.current_product_id;
-                this.parsedProducts = this.productKeysToCamelCase(response.products);
-                this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;
-                this.connectionName = this.connectionName ? this.connectionName : response.connection_name;
-                if (!!this.email && !!this.currentProductId) {
-                    this.retrievedInfo = true;
-                }
-            })
-                .catch((errStatus) => {
-                console.error(errStatus);
-            });
-        }
-        else {
-            this.currentProductId = getWmMode(this.el);
-            if (!!this.products) {
-                if (typeof this.products === "string") {
-                    this.parsedProducts = JSON.parse(this.products);
-                }
-                else {
-                    this.parsedProducts = this.products;
-                }
-                this.parsedProducts = this.productKeysToCamelCase(this.parsedProducts);
-            }
-        }
-        // products is initialized as empty array in case nothing is passed
-        this.parsedProducts.sort((a, b) => (a.name < b.name ? -1 : 1));
-    }
-    productKeysToCamelCase(products) {
-        products = products.map((product) => {
-            const keys = Object.keys(product);
-            let newProduct = {};
-            keys.forEach((key) => {
-                newProduct[snakeCaseToCamelCase(key)] = product[key];
-            });
-            return newProduct;
-        });
-        return products;
-    }
-    /**
-     * Sets index to focus on open to the selected product. This index resets it when the menu closes.
-     */
-    setFocusIndex() {
-        if (this.parsedProducts.length > 1) {
-            const currentProduct = this.getProduct(this.currentProductId);
-            if (currentProduct) {
-                this.itemIndexToFocus = this.parsedProducts.indexOf(currentProduct);
-            }
-        }
-    }
-    handleKeys(ev) {
-        switch (ev.key) {
-            case "Escape":
-                ev.preventDefault();
-                this.closeMenu();
-                break;
-            case "ArrowDown":
-            case "ArrowUp":
-                ev.preventDefault();
-                if (!this.isOpen) {
-                    this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, ev.key, this.navigatorItems.length);
-                    this.openMenu();
-                }
-                break;
-        }
-    }
-    handleKeydown(ev) {
-        const key = ev.detail.key;
-        const item = ev.detail.navItem;
-        switch (key) {
-            case "Tab":
-                this.closeMenu(false);
-                break;
-            case "Enter":
-            case " ":
-                item.click();
-                break;
-            case "ArrowDown":
-            case "ArrowUp":
-                const oldIndex = this.itemIndexToFocus;
-                this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, key, this.navigatorItems.length);
-                this.focusItem();
-                this.unfocusItem(oldIndex);
-                break;
-        }
-    }
-    handleClick(ev) {
-        const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
-        if (!isElOrChild && this.isOpen) {
-            this.closeMenu(false);
-        }
-    }
-    handleButtonClick() {
-        this.isOpen ? this.closeMenu() : this.openMenu();
-    }
-    openMenu() {
-        if (this.wrapperEl) {
-            const wrapperWidth = this.wrapperEl.clientWidth;
-            const spaceLeft = this.el.getBoundingClientRect().left;
-            const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;
-            this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;
-        }
-        this.isOpen = true;
-        this.focusItem();
-    }
-    closeMenu(returnFocus = true) {
-        this.isOpen = false;
-        window.requestAnimationFrame(() => {
-            this.unfocusItem(this.itemIndexToFocus);
-            this.setFocusIndex();
-            if (returnFocus) {
-                this.buttonFocusHandler();
-            }
-        });
-    }
-    focusItem() {
-        const newSelection = this.navigatorItems[this.itemIndexToFocus];
-        newSelection.tabIndex = 0;
-        newSelection.focused = true;
-        // wait for animation to complete before sending focus to option
-        window.setTimeout(() => newSelection.focus(), 250);
-    }
-    unfocusItem(index) {
-        const oldSelection = this.navigatorItems[index];
-        oldSelection.tabIndex = -1;
-        oldSelection.focused = false;
-    }
-    buttonFocusHandler() {
-        const hostButton = this.el.shadowRoot.querySelector("priv-navigator-button");
-        const button = hostButton.shadowRoot.querySelector("button");
-        button.focus();
-    }
-    /**
-     * HELPERS FOR RENDER
-     */
-    renderUserInfo() {
-        return (h("div", { class: "user", id: "wm-nav-user", "aria-label": intl.formatMessage({
-                id: "navigator.userinfoLabel",
-                defaultMessage: "for {name}, email {email}",
-            }, { name: this.userName, email: this.email }) }, h("p", null, this.userName), h("p", null, this.email)));
-    }
-    setAltText() {
-        if (this.parsedProducts.length > 1) {
-            return intl.formatMessage({
-                id: "navigator.userinfoAndProductNavigator",
-                defaultMessage: "User information and product navigator",
-            });
-        }
-        else {
-            return intl.formatMessage({
-                id: "navigator.userinfo",
-                defaultMessage: "User information",
-            });
-        }
-    }
-    renderHeading() {
-        return (h("h2", null, intl.formatMessage({
-            id: "navigator.watermarkApps",
-            defaultMessage: "Watermark Apps",
-            description: "Applications made by Watermark Insights",
-        })));
-    }
-    renderList() {
-        return (h("ul", { role: "listbox", "aria-label": `${intl.formatMessage({
-                id: "navigator.WatermarkAppNavigation",
-                defaultMessage: "Watermark App Navigation",
-                description: "list of applications by Watermark Insights",
-            })}`, "aria-describedby": "wm-nav-user" }, this.parsedProducts.length > 1 && this.renderProductOptions(), this.renderLogoutOption()));
-    }
-    renderProductOptions() {
-        return this.parsedProducts.map((product) => {
-            let name, icon, isSelected, clickRedirect;
-            name = product.name;
-            icon = product.iconUrl;
-            clickRedirect = this.setProductOnClick(product.id);
-            if (!!name && !!icon) {
-                isSelected = this.currentProductId === product.id;
-                return (h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: () => {
-                        isSelected ? this.closeMenu() : clickRedirect();
-                    }, role: "option", "aria-label": name, "aria-selected": isSelected ? "true" : "false" }, h("img", { src: icon, alt: name })));
-            }
-        });
-    }
-    setProductOnClick(productId) {
-        const product = this.getProduct(productId);
-        if (this.currentProductId === productId) {
-            return () => { };
-        }
-        else if (product) {
-            if (!!this.loadFromUserinfo || this.authType === 2) {
-                const url = product.linkUrl;
-                if (this.isSafeUrl(url)) {
-                    return () => (window.location.href = url);
-                }
-                else {
-                    console.error(`"${url}" is not a safe url`);
-                    return;
-                }
-            }
-            else if (this.authType === 3) {
-                // products passed as prop, saml
-                const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : "";
-                const url = product.samlLinkUrl;
-                if (this.isSafeUrl(url)) {
-                    return () => (window.location.href = url + connName);
-                }
-                else {
-                    console.error(`"${url}" is not a safe url`);
-                    return;
-                }
-            }
-        }
-    }
-    renderLogoutOption() {
-        return (h("priv-navigator-item", { class: "logout", selected: !(this.parsedProducts.length > 1), id: "nav-logout", onClick: this.setLogoutOnclick(), role: "option", "aria-selected": "false" }, h("span", { class: "logout" }, intl.formatMessage({
-            id: "navigator.logout",
-            defaultMessage: "Log Out",
-        }))));
-    }
-    setLogoutOnclick() {
-        // The logout item will always emit a custom event on click so that the dev can run any business logic specific to the app on logout (e.g., clearing local storage).
-        // It will only redirect if the dev has set the logoutUrl. If some sort of custom redirect is needed, the logoutUrl should not be set.
-        return () => {
-            this.wmNavigatorLogout.emit();
-            const url = this.logoutUrl;
-            if (this.isSafeUrl(url)) {
-                window.location.href = url;
-            }
-            else {
-                console.error(`"${url}" is not a safe url`);
-            }
-        };
-    }
-    get navigatorItems() {
-        return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"));
-    }
-    getProduct(id) {
-        return this.parsedProducts.find((product) => product.id === id);
-    }
-    render() {
-        return this.retrievedInfo ? (h(Host, null, h("priv-navigator-button", { expanded: this.isOpen, altText: this.setAltText() }), h("div", { class: `wrapper ${this.isOpen ? "" : "hide"} ${this.openRight ? "right" : ""}`, ref: (el) => (this.wrapperEl = el) }, this.renderUserInfo(), this.parsedProducts.length > 1 && this.renderHeading(), this.renderList()))) : ("");
-    }
-    static get is() { return "wm-navigator"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-navigator.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-navigator.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "userName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "user-name",
-                "reflect": false
-            },
-            "email": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "email",
-                "reflect": false
-            },
-            "authType": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "auth-type",
-                "reflect": false,
-                "defaultValue": "1"
-            },
-            "connectionName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "connection-name",
-                "reflect": false
-            },
-            "logoutUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "logout-url",
-                "reflect": false
-            },
-            "products": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | []",
-                    "resolved": "[] | string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "products",
-                "reflect": false
-            },
-            "loadFromUserinfo": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "load-from-userinfo",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "itemIndexToFocus": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmNavigatorLogout",
-                "name": "wmNavigatorLogout",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "products",
-                "methodName": "parseData"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKeys",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydownOnNavItem",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "buttonActivated",
-                "method": "handleButtonClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/components/wm-navigator/wm-navigator.spec.js

@@ -1,177 +0,0 @@
-jest.mock("../../global/services/http-service");
-import { newSpecPage } from "@stencil/core/testing";
-//import { PrivNavigatorItem } from "./priv-navigator-item/priv-navigator-item";
-import { Navigator } from "./wm-navigator";
-describe("wm-navigator", () => {
-    it("builds (with props)", async () => {
-        const comp = await newSpecPage({
-            components: [Navigator],
-            html: `<wm-navigator
-      email="anna@user.com"
-      user-name="Anna User"
-      auth-type="3"
-      products='[{"samlLinkUrl":"https://aqua.taskstream.com/sso/samlLogin","linkUrl":"https://aqua.taskstream.com/sso/login","id":"aqua","iconUrl":"https://cdn.watermarkinsights.com/images/login/aqua.svg","name":"Aqua"},{"samlLinkUrl":"https://www.vialivetext.com/wm_sso/saml_login","linkUrl":"https://www.vialivetext.com/wm_sso/login","id":"via","iconUrl":"https://cdn.watermarkinsights.com/images/login/via.svg","name":"Via"},{"samlLinkUrl":"https://watermark.evaluationkit.com/Login/SAML","linkUrl":"https://watermark.evaluationkit.com/Login","id":"ek","iconUrl":"https://cdn.watermarkinsights.com/images/login/evaluationkit.svg","name":"Evaluation Kit"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/lat","id":"lat","iconUrl":"https://cdn.watermarkinsights.com/images/login/tslat.svg","name":"Taskstream LAT"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/ams","id":"ams","iconUrl":"https://cdn.watermarkinsights.com/images/login/tsams.svg","name":"Taskstream AMS"},{"samlLinkUrl":"https://www.digitalmeasures.com/login/sso/authenticate/saml","linkUrl":"https://www.digitalmeasures.com/login/sso/authenticate","id":"dm","iconUrl":"https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg","name":"Digital Measures"},{"samlLinkUrl":"https://planning.watermarkinsights.com/login/sso/saml_login","linkUrl":"https://planning.watermarkinsights.com/login/sso","id":"planning","iconUrl":"https://cdn.watermarkinsights.com/images/login/planningselfstudy.svg","name":"Planning & Self-Study"}]'
-      ></wm-navigator>`,
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("builds (endpoint)", async () => {
-        const comp = await newSpecPage({
-            components: [Navigator],
-            html: `<wm-navigator
-      user-name="Bettie User"
-      load-from-userinfo="true"
-      ></wm-navigator>`,
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("returns the proper link", () => {
-        const nav = new Navigator();
-        nav.email = "a_user@company.com";
-        nav.userName = "Anna User";
-        nav.parsedProducts = [
-            {
-                name: "Aqua",
-                iconUrl: "aqua icon",
-                linkUrl: "aqua sso",
-                samlLinkUrl: "aqua saml",
-                id: "aqua",
-            },
-            {
-                name: "via",
-                iconUrl: "via icon",
-                linkUrl: "via sso",
-                samlLinkUrl: "via saml",
-                id: "via",
-            },
-            {
-                name: "ek",
-                iconUrl: "ek icon",
-                linkUrl: "ek sso",
-                samlLinkUrl: "ek saml",
-                id: "ek",
-            },
-            {
-                name: "lat",
-                iconUrl: "lat icon",
-                linkUrl: "lat sso",
-                samlLinkUrl: "lat saml",
-                id: "lat",
-            },
-            {
-                name: "ams",
-                iconUrl: "ams icon",
-                linkUrl: "ams sso",
-                samlLinkUrl: "ams saml",
-                id: "ams",
-            },
-            {
-                name: "dm",
-                iconUrl: "dm icon",
-                linkUrl: "dm sso",
-                samlLinkUrl: "dm saml",
-                id: "dm",
-            },
-            {
-                name: "planning",
-                iconUrl: "planning icon",
-                linkUrl: "planning sso",
-                samlLinkUrl: "planning saml",
-                id: "planning",
-            },
-        ];
-        nav.connectionName = "xoxo"; // connection name only appended for saml
-        nav.authType = 2; // = sso
-        // setProductOnClick returns the onClick function
-        // we invoke it to test the string
-        expect(nav.setProductOnClick("aqua")()).toBe("aqua sso");
-        expect(nav.setProductOnClick("via")()).toBe("via sso");
-        expect(nav.setProductOnClick("ek")()).toBe("ek sso");
-        expect(nav.setProductOnClick("lat")()).toBe("lat sso");
-        expect(nav.setProductOnClick("ams")()).toBe("ams sso");
-        expect(nav.setProductOnClick("dm")()).toBe("dm sso");
-        expect(nav.setProductOnClick("planning")()).toBe("planning sso");
-        nav.authType = 3; // = saml
-        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml/?connection_name=xoxo");
-        // if connection_name is not set, nothing is appended
-        nav.connectionName = "";
-        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml");
-    });
-    it("handles unknown products (props mode)", async () => {
-        // in props mode the component checks a hard-coded list of products
-        // if the product is not in the list, it ignores it altogether
-        // 2 exceptions: "c1" is converted to "livetext", and anything with the name "admin" (e.g. "system_admin_sit", "platform_admin") is converted to "platform_admin"
-        const comp = await newSpecPage({
-            components: [Navigator],
-            html: `<wm-navigator
-      email="anna@user.com"
-      user-name="Anna User"
-      auth-type="3"
-      products='[{"samlLinkUrl":"something_weird.fakeurl","linkUrl":"something_weird.fakeurl","id":"something_weird"},{"samlLinkUrl":"livetext.fakeurl","linkUrl":"livetext.fakeurl","id":"c1"},{"samlLinkUrl":"platform.fakeurl","linkUrl":"platform.fakeurl","id":"something_with_admin_in_it"}]'
-       ></wm-navigator>`,
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("loads (userinfo mode)", async () => {
-        const page = await newSpecPage({
-            components: [Navigator],
-            html: `<wm-navigator user-name="User Name" load-from-userinfo="true"></wm-navigator>`,
-        });
-        expect(page.root).toMatchSnapshot();
-        const nav = page.body.querySelector("wm-navigator");
-        const items = nav.shadowRoot.querySelectorAll("priv-navigator-item");
-        expect(items.length).toBe(7);
-        items.forEach((i) => {
-            expect(i.id).not.toBeNull();
-            expect(i.onClick).not.toBeNull();
-        });
-    });
-    it("camel cases product keys", async () => {
-        const nav = new Navigator();
-        expect(nav.productKeysToCamelCase([
-            {
-                description: "desc1",
-                icon_url: "url1",
-                id: "id1",
-                link_url: "url1",
-                name: "name1",
-            },
-            {
-                description: "desc2",
-                icon_url: "url2",
-                id: "id2",
-                link_url: "url2",
-                name: "name2",
-            },
-            {
-                description: "desc3",
-                icon_url: "url3",
-                id: "id3",
-                link_url: "url3",
-                name: "name3",
-            },
-        ])).toStrictEqual([
-            {
-                description: "desc1",
-                iconUrl: "url1",
-                id: "id1",
-                linkUrl: "url1",
-                name: "name1",
-            },
-            {
-                description: "desc2",
-                iconUrl: "url2",
-                id: "id2",
-                linkUrl: "url2",
-                name: "name2",
-            },
-            {
-                description: "desc3",
-                iconUrl: "url3",
-                id: "id3",
-                linkUrl: "url3",
-                name: "name3",
-            },
-        ]);
-    });
-});