@finsemble/finsemble-ui 6.6.3 → 7.0.0-beta-X

package/react/components/favorites/FavoriteMaker.js

@@ -1,7 +1,16 @@
 import * as React from "react";
 import { useFavorites } from "../../hooks/useFavorites";
+/**
+ * Creates a clickable "favorite" that coordinates with the toolbar's pinned <FavoritesShell>.
+ * @param {string} [className] - An optional CSS className to append.
+ * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.
+ * @param {string} [category] - "Workspace" | "Application". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.
+ * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.
+ * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.
+ */
 export const FavoriteMaker = ({ id, category, icon, name, children, className = "", style, }) => {
     const { isFavorited, addFavorite, removeFavorite } = useFavorites();
+    // If no icon is specified then default to an avatar based on initials
     const definitiveIcon = icon !== null && icon !== void 0 ? icon : {
         imageType: "initials",
         name: name,
@@ -26,6 +35,6 @@ export const FavoriteMaker = ({ id, category, icon, name, children, className =
     const active = isFavorited(id) ? "favorited" : "not-favorited";
     const classes = `favorite-maker ${active} ${className}`;
     const title = isFavorited(id) ? "Unfavorite" : "Favorite";
-    return (React.createElement("div", { onClick: toggleFavorite, className: classes, style: style, title: title }, children || React.createElement("i", { className: "ff-favorite" })));
+    return (React.createElement("div", { role: "button", tabIndex: 0, onClick: toggleFavorite, className: classes, style: style, title: title }, children || React.createElement("i", { className: "ff-favorite" })));
 };
 //# sourceMappingURL=FavoriteMaker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmBxD,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,EAC1E,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACL,EAAE,EAAE;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAGpE,MAAM,cAAc,GAAmB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QAC9C,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC9C,cAAc,CAAC;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACpB,cAAc,CAAC,EAAE,CAAC,CAAC;SACnB;aAAM;YACN,WAAW,CAAC;gBACX,EAAE;gBACF,QAAQ;gBACR,IAAI;gBACJ,IAAI,EAAE,cAAc;aACpB,CAAC,CAAC;SACH;IACF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,OAAO,GAAG,kBAAkB,MAAM,IAAI,SAAS,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE1D,OAAO,CACN,6BAAK,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAC1E,QAAQ,IAAI,2BAAG,SAAS,EAAC,aAAa,GAAK,CACvC,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavorites } from \"../../hooks/useFavorites\";\nimport { Favorite } from \"../../types/favoriteTypes\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\ntype FavoriteMakerProps = Favorite & {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\n/**\n * Creates a clickable \"favorite\" that coordinates with the toolbar's pinned <FavoritesShell>.\n * @param {string} [className] - An optional CSS className to append.\n * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.\n * @param {string} [category] - \"Workspace\" | \"Application\". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.\n * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.\n * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.\n */\nexport const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps> = ({\n\tid,\n\tcategory,\n\ticon,\n\tname,\n\tchildren,\n\tclassName = \"\",\n\tstyle,\n}) => {\n\tconst { isFavorited, addFavorite, removeFavorite } = useFavorites();\n\n\t// If no icon is specified then default to an avatar based on initials\n\tconst definitiveIcon: IconDescriptor = icon ?? {\n\t\timageType: \"initials\",\n\t\tname: name,\n\t\tcategory: category,\n\t};\n\n\tconst toggleFavorite = (e: React.MouseEvent) => {\n\t\tdefinitiveIcon;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tif (isFavorited(id)) {\n\t\t\tremoveFavorite(id);\n\t\t} else {\n\t\t\taddFavorite({\n\t\t\t\tid,\n\t\t\t\tcategory,\n\t\t\t\tname,\n\t\t\t\ticon: definitiveIcon,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst active = isFavorited(id) ? \"favorited\" : \"not-favorited\";\n\tconst classes = `favorite-maker ${active} ${className}`;\n\tconst title = isFavorited(id) ? \"Unfavorite\" : \"Favorite\";\n\n\treturn (\n\t\t<div onClick={toggleFavorite} className={classes} style={style} title={title}>\n\t\t\t{children || <i className=\"ff-favorite\"></i>}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"FavoriteMaker.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoriteMaker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWxD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgD,CAAC,EAC1E,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GACL,EAAE,EAAE;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpE,sEAAsE;IACtE,MAAM,cAAc,GAAmB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI;QAC9C,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;KAClB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC9C,cAAc,CAAC;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE;YACpB,cAAc,CAAC,EAAE,CAAC,CAAC;SACnB;aAAM;YACN,WAAW,CAAC;gBACX,EAAE;gBACF,QAAQ;gBACR,IAAI;gBACJ,IAAI,EAAE,cAAc;aACpB,CAAC,CAAC;SACH;IACF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAC/D,MAAM,OAAO,GAAG,kBAAkB,MAAM,IAAI,SAAS,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;IAE1D,OAAO,CACN,6BAAK,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IACrG,QAAQ,IAAI,2BAAG,SAAS,EAAC,aAAa,GAAK,CACvC,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavorites } from \"../../hooks/useFavorites\";\nimport { Favorite } from \"../../types/favoriteTypes\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype IconDescriptor = services.window.types.IconDescriptor;\n\ntype FavoriteMakerProps = Favorite & {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\n/**\n * Creates a clickable \"favorite\" that coordinates with the toolbar's pinned <FavoritesShell>.\n * @param {string} [className] - An optional CSS className to append.\n * @param {string} [id] - The unique identifier for the favorite item. This must be consistent across restarts.\n * @param {string} [category] - \"Workspace\" | \"Application\". The catagory of the favorite item. Currenly only workspaces and launchable Finsemble applications can be favorited.\n * @param {string} [name] - The name of the favorite item. This will be used for display in the FavoriteShell.\n * @param {IconDescriptor} [icon] - The icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the `name` field as its content.\n */\nexport const FavoriteMaker: React.FunctionComponent<FavoriteMakerProps> = ({\n\tid,\n\tcategory,\n\ticon,\n\tname,\n\tchildren,\n\tclassName = \"\",\n\tstyle,\n}) => {\n\tconst { isFavorited, addFavorite, removeFavorite } = useFavorites();\n\n\t// If no icon is specified then default to an avatar based on initials\n\tconst definitiveIcon: IconDescriptor = icon ?? {\n\t\timageType: \"initials\",\n\t\tname: name,\n\t\tcategory: category,\n\t};\n\n\tconst toggleFavorite = (e: React.MouseEvent) => {\n\t\tdefinitiveIcon;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tif (isFavorited(id)) {\n\t\t\tremoveFavorite(id);\n\t\t} else {\n\t\t\taddFavorite({\n\t\t\t\tid,\n\t\t\t\tcategory,\n\t\t\t\tname,\n\t\t\t\ticon: definitiveIcon,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst active = isFavorited(id) ? \"favorited\" : \"not-favorited\";\n\tconst classes = `favorite-maker ${active} ${className}`;\n\tconst title = isFavorited(id) ? \"Unfavorite\" : \"Favorite\";\n\n\treturn (\n\t\t<div role=\"button\" tabIndex={0} onClick={toggleFavorite} className={classes} style={style} title={title}>\n\t\t\t{children || <i className=\"ff-favorite\"></i>}\n\t\t</div>\n\t);\n};\n"]}

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

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import "../../assets/css/favorites.css";
+/**
+ * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user
+ * to launch, reorder, or delete a favorited item.
+ */
 export declare const FavoritesShell: () => JSX.Element;

package/react/components/favorites/FavoritesShell.js

@@ -4,11 +4,17 @@ import "../../assets/css/favorites.css";
 import { Icon } from "../icon/Icon";
 import { FinsembleDnDContext, AllowableDnDAxis } from "../legacyControls/FinsembleDnDContext";
 import { FinsembleDraggable } from "../legacyControls/FinsembleDraggable";
+/*
+ *  The component that loads and renders all the favorited items.
+ */
 const FavoritesComponent = () => {
     const { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();
+    // When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.
+    // This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.
     const reorder = ({ oldIndex, newIndex }) => {
         setFavoritesOrder({ oldIndex, newIndex });
     };
+    // Delete a favorite item from the toolbar
     const triggerRemoveFavorite = (event, id) => {
         event.stopPropagation();
         removeFavorite(id);
@@ -24,6 +30,12 @@ const FavoritesComponent = () => {
         React.createElement("i", { title: "Unfavorite", onClick: (event) => triggerRemoveFavorite(event, id), id: "toolbar-delete", className: "ff-close-3" }))));
     return (React.createElement(FinsembleDnDContext, { onDragEnd: reorder, className: "finsemble-toolbar-section rearrange-region", id: "favoritesContainer", allowHorizontalScroll: true, axis: AllowableDnDAxis.x }, favoriteElements));
 };
-export const FavoritesShell = () => (React.createElement("div", { className: "finsemble-toolbar-section", id: "fav-shell" },
+/**
+ * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user
+ * to launch, reorder, or delete a favorited item.
+ */
+export const FavoritesShell = () => (
+// When user scrolls to one end of the favorite list, the corresponding variable will be set to "false" so that the scrolling indicator will grey out
+React.createElement("div", { className: "finsemble-toolbar-section", id: "fav-shell" },
     React.createElement(FavoritesComponent, null)));
 //# sourceMappingURL=FavoritesShell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FavoritesShell.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoritesShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAI9F,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAA0C,EAAE,EAAE;QAClF,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAGF,MAAM,qBAAqB,GAAG,CAC7B,KAAuE,EACvE,EAAU,EACT,EAAE;QACH,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,cAAc,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEzG,MAAM,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/E,oBAAC,kBAAkB,IAClB,WAAW,EAAE,EAAE,EACf,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,EAAE,EACP,YAAY,EAAC,0BAA0B,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,QAAQ,CAAC,EAC5C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACvB,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;aAC7B;QACF,CAAC;QAED,oBAAC,IAAI,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,EAAI;QACtC,6BAAK,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,IAAI,IACzD,oBAAoB,CAAC,IAAI,CAAC,CACtB;QACN,2BACC,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,EACpD,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAC,YAAY,GAClB,CACe,CACrB,CAAC,CAAC;IACH,OAAO,CACN,oBAAC,mBAAmB,IACnB,SAAS,EAAE,OAAO,EAClB,SAAS,EAAC,4CAA4C,EACtD,EAAE,EAAC,oBAAoB,EACvB,qBAAqB,EAAE,IAAI,EAC3B,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAEvB,gBAAgB,CACI,CACtB,CAAC;AACH,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAGnC,6BAAK,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAC,WAAW;IACxD,oBAAC,kBAAkB,OAAG,CACjB,CACN,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavoritesShell } from \"../../hooks/useFavoritesShell\";\nimport \"../../assets/css/favorites.css\";\nimport { Icon } from \"../icon/Icon\";\nimport { FinsembleDnDContext, AllowableDnDAxis } from \"../legacyControls/FinsembleDnDContext\";\nimport { FinsembleDraggable } from \"../legacyControls/FinsembleDraggable\";\n\n/*\n *  The component that loads and renders all the favorited items.\n */\nconst FavoritesComponent = () => {\n\tconst { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();\n\n\t// When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.\n\t// This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.\n\tconst reorder = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {\n\t\tsetFavoritesOrder({ oldIndex, newIndex });\n\t};\n\n\t// Delete a favorite item from the toolbar\n\tconst triggerRemoveFavorite = (\n\t\tevent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n\t\tid: string\n\t) => {\n\t\tevent.stopPropagation();\n\t\tremoveFavorite(id);\n\t};\n\n\tconst nameLengthCheckPoint = (name: string) => (name.length > 24 ? `${name.substring(0, 25)}...` : name);\n\n\tconst favoriteElements = favorites.map(({ id, name, icon, category }, index) => (\n\t\t<FinsembleDraggable\n\t\t\tdraggableId={id}\n\t\t\tindex={index}\n\t\t\tkey={id}\n\t\t\twrapperClass=\"finsemble-toolbar-button\"\n\t\t\tonClick={() => triggerFavorite(id, category)}\n\t\t\tonKeydown={(e) => {\n\t\t\t\tif (e.key === \"Delete\") {\n\t\t\t\t\ttriggerRemoveFavorite(e, id);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<Icon category={category} {...icon} />\n\t\t\t<div className=\"finsemble-toolbar-button-label\" title={name}>\n\t\t\t\t{nameLengthCheckPoint(name)}\n\t\t\t</div>\n\t\t\t<i\n\t\t\t\ttitle=\"Unfavorite\"\n\t\t\t\tonClick={(event) => triggerRemoveFavorite(event, id)}\n\t\t\t\tid=\"toolbar-delete\"\n\t\t\t\tclassName=\"ff-close-3\"\n\t\t\t></i>\n\t\t</FinsembleDraggable>\n\t));\n\treturn (\n\t\t<FinsembleDnDContext\n\t\t\tonDragEnd={reorder}\n\t\t\tclassName=\"finsemble-toolbar-section rearrange-region\"\n\t\t\tid=\"favoritesContainer\"\n\t\t\tallowHorizontalScroll={true}\n\t\t\taxis={AllowableDnDAxis.x}\n\t\t>\n\t\t\t{favoriteElements}\n\t\t</FinsembleDnDContext>\n\t);\n};\n\n/**\n * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user\n * to launch, reorder, or delete a favorited item.\n */\nexport const FavoritesShell = () => (\n\t// When user scrolls to one end of the favorite list, the corresponding variable will be set to \"false\" so that the scrolling indicator will grey out\n\n\t<div className=\"finsemble-toolbar-section\" id=\"fav-shell\">\n\t\t<FavoritesComponent />\n\t</div>\n);\n"]}
+{"version":3,"file":"FavoritesShell.js","sourceRoot":"","sources":["../../../src/components/favorites/FavoritesShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E;;GAEG;AACH,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE9F,mIAAmI;IACnI,mIAAmI;IACnI,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAA0C,EAAE,EAAE;QAClF,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,0CAA0C;IAC1C,MAAM,qBAAqB,GAAG,CAC7B,KAAuE,EACvE,EAAU,EACT,EAAE;QACH,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,cAAc,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEzG,MAAM,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/E,oBAAC,kBAAkB,IAClB,WAAW,EAAE,EAAE,EACf,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,EAAE,EACP,YAAY,EAAC,0BAA0B,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,QAAQ,CAAC,EAC5C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACvB,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;aAC7B;QACF,CAAC;QAED,oBAAC,IAAI,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,EAAI;QACtC,6BAAK,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,IAAI,IACzD,oBAAoB,CAAC,IAAI,CAAC,CACtB;QACN,2BACC,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,EACpD,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAC,YAAY,GAClB,CACe,CACrB,CAAC,CAAC;IACH,OAAO,CACN,oBAAC,mBAAmB,IACnB,SAAS,EAAE,OAAO,EAClB,SAAS,EAAC,4CAA4C,EACtD,EAAE,EAAC,oBAAoB,EACvB,qBAAqB,EAAE,IAAI,EAC3B,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAEvB,gBAAgB,CACI,CACtB,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;AACnC,qJAAqJ;AAErJ,6BAAK,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAC,WAAW;IACxD,oBAAC,kBAAkB,OAAG,CACjB,CACN,CAAC","sourcesContent":["import * as React from \"react\";\nimport { useFavoritesShell } from \"../../hooks/useFavoritesShell\";\nimport \"../../assets/css/favorites.css\";\nimport { Icon } from \"../icon/Icon\";\nimport { FinsembleDnDContext, AllowableDnDAxis } from \"../legacyControls/FinsembleDnDContext\";\nimport { FinsembleDraggable } from \"../legacyControls/FinsembleDraggable\";\n\n/*\n *  The component that loads and renders all the favorited items.\n */\nconst FavoritesComponent = () => {\n\tconst { favorites, triggerFavorite, removeFavorite, setFavoritesOrder } = useFavoritesShell();\n\n\t// When user is reordering the favorite items in the UI, we need to keep track to this new order and persist the order information.\n\t// This function gets all the favorite item elements in the correct order and call the hook function to set and persist this order.\n\tconst reorder = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {\n\t\tsetFavoritesOrder({ oldIndex, newIndex });\n\t};\n\n\t// Delete a favorite item from the toolbar\n\tconst triggerRemoveFavorite = (\n\t\tevent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n\t\tid: string\n\t) => {\n\t\tevent.stopPropagation();\n\t\tremoveFavorite(id);\n\t};\n\n\tconst nameLengthCheckPoint = (name: string) => (name.length > 24 ? `${name.substring(0, 25)}...` : name);\n\n\tconst favoriteElements = favorites.map(({ id, name, icon, category }, index) => (\n\t\t<FinsembleDraggable\n\t\t\tdraggableId={id}\n\t\t\tindex={index}\n\t\t\tkey={id}\n\t\t\twrapperClass=\"finsemble-toolbar-button\"\n\t\t\tonClick={() => triggerFavorite(id, category)}\n\t\t\tonKeydown={(e) => {\n\t\t\t\tif (e.key === \"Delete\") {\n\t\t\t\t\ttriggerRemoveFavorite(e, id);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<Icon category={category} {...icon} />\n\t\t\t<div className=\"finsemble-toolbar-button-label\" title={name}>\n\t\t\t\t{nameLengthCheckPoint(name)}\n\t\t\t</div>\n\t\t\t<i\n\t\t\t\ttitle=\"Unfavorite\"\n\t\t\t\tonClick={(event) => triggerRemoveFavorite(event, id)}\n\t\t\t\tid=\"toolbar-delete\"\n\t\t\t\tclassName=\"ff-close-3\"\n\t\t\t></i>\n\t\t</FinsembleDraggable>\n\t));\n\treturn (\n\t\t<FinsembleDnDContext\n\t\t\tonDragEnd={reorder}\n\t\t\tclassName=\"finsemble-toolbar-section rearrange-region\"\n\t\t\tid=\"favoritesContainer\"\n\t\t\tallowHorizontalScroll={true}\n\t\t\taxis={AllowableDnDAxis.x}\n\t\t>\n\t\t\t{favoriteElements}\n\t\t</FinsembleDnDContext>\n\t);\n};\n\n/**\n * The FavoritesShell renders the favorite component, which displays all the favorited items and allows the user\n * to launch, reorder, or delete a favorited item.\n */\nexport const FavoritesShell = () => (\n\t// When user scrolls to one end of the favorite list, the corresponding variable will be set to \"false\" so that the scrolling indicator will grey out\n\n\t<div className=\"finsemble-toolbar-section\" id=\"fav-shell\">\n\t\t<FavoritesComponent />\n\t</div>\n);\n"]}

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

@@ -5,12 +5,15 @@ 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;

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

@@ -1 +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"]}
+{"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/fdc3Resolver/ResolverContainer.js

@@ -1,6 +1,9 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
 import React, { useState } from "react";
 import { ResolverDialog } from "./ResolverDialog";
-const { name: windowName } = FSBL.Clients.WindowClient.getCurrentWindow();
 export const ResolverContainer = () => {
     const [firstLoad, setFirstLoad] = useState(true);
     const [intentRaiser, setIntentRaiser] = useState("");
@@ -8,9 +11,7 @@ export const ResolverContainer = () => {
     const [cancelCallback, setCancelCallback] = useState(() => () => { });
     const [resolutionList, setResolutionList] = useState([]);
     const clearAll = () => {
-        FSBL.FinsembleWindow.getInstance({ name: windowName }, (err, win) => {
-            win.hide(() => { });
-        });
+        finsembleWindow.hide();
         setIntentRaiser("");
         setResolutionList([]);
     };
@@ -18,16 +19,20 @@ export const ResolverContainer = () => {
         var _a;
         setIntentRaiser((_a = choices.originatingAppName) !== null && _a !== void 0 ? _a : "");
         setResolutionList(choices.resolutionList);
-        FSBL.FinsembleWindow.getInstance({ name: windowName }, (err, win) => {
-            win.show(() => { });
-        });
+        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(() => () => {

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

@@ -1 +1 @@
-{"version":3,"file":"ResolverContainer.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverContainer.tsx"],"names":[],"mappings":"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","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\nconst { name: windowName } = FSBL.Clients.WindowClient.getCurrentWindow();\n\ntype ResolverChoicesType = {\n\tresolutionList: ResolutionList[];\n\toriginatingAppName?: 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\tFSBL.FinsembleWindow.getInstance({ name: windowName }, (err: any, win: any) => {\n\t\t\twin.hide(() => {});\n\t\t});\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\tFSBL.FinsembleWindow.getInstance({ name: windowName }, (err: any, win: any) => {\n\t\t\twin.show(() => {});\n\t\t});\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: object) => {\n\t\t\t\t\tclearAll();\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"]}
+{"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

@@ -1,5 +1,5 @@
 .resolverDialog {
-	padding: 0px 8px;
+	padding: 0 8px;
 }
 
 h2 {
@@ -17,9 +17,11 @@ h2 {
 .sourceText {
 	font-style: italic;
 }
+
 .intentText {
 	color: var(--accent-primary);
 }
+
 .intent {
 	color: var(--accent-positive);
 }
@@ -27,7 +29,7 @@ h2 {
 .appListGrid {
 	width: 466px;
 	height: 100px;
-	padding: 10px 10px 0px 10px;
+	padding: 10px 10px 0;
 	margin-bottom: 10px;
 	background-color: var(--core-primary);
 	overflow-y: scroll;
@@ -37,27 +39,32 @@ h2 {
 	width: 464px;
 	height: 100px;
 	margin: 10px 19px 7px 0;
-	padding: 0px 10px;
+	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;
@@ -70,6 +77,7 @@ h2 {
 .actionGroupRight {
 	float: right;
 }
+
 .actionGroupRight button + button {
 	margin-left: 10px;
 }
@@ -82,20 +90,25 @@ h2 {
 	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);
 }

package/react/components/fdc3Resolver/ResolverDialog.js

@@ -13,6 +13,11 @@ export const ResolverDialog = ({ intentRaiser, onSend, onCancel, resolutionList
     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,
@@ -40,7 +45,7 @@ export const ResolverDialog = ({ intentRaiser, onSend, onCancel, resolutionList
                 "."),
             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: app.meta.name, callback: () => {
+        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,
@@ -59,7 +64,7 @@ export const ResolverDialog = ({ intentRaiser, onSend, onCancel, resolutionList
                             selectedApp: { name: app.meta.name },
                             windowName: app.windowName,
                         });
-                    } }, `${app.index + 1} - ${app.meta.name}`))))))) : (React.createElement(React.Fragment, null)),
+                    } }, `${app.index + 1} - ${displayName(app)}`))))))) : (React.createElement(React.Fragment, null)),
         React.createElement("div", { className: "actionGroupRight" },
             React.createElement(Button, { fashion: "ghost", text: "Cancel", onClick: onCancel }))));
 };

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

@@ -1 +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 { 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\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={app.meta.name}\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} - ${app.meta.name}`}\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"]}
+{"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.js

@@ -5,6 +5,7 @@ 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", () => {
@@ -18,10 +19,10 @@ describe("Resolver UI", () => {
     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").to.equal("Chart");
+        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 #1").to.equal("1 - Chart");
+        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");

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

@@ -1 +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\").to.equal(\"Chart\");\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 #1\").to.equal(\n\t\t\t\"1 - Chart\"\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"]}
+{"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.js

@@ -20,6 +20,7 @@ Short.args = {
                     meta: {
                         appId: "Chart",
                         name: "Chart",
+                        title: "Chart Title",
                     },
                     appId: "Chart",
                 },
@@ -36,6 +37,7 @@ Short.args = {
                     windowName: "Chart-1-Finsemble",
                     meta: {
                         name: "Chart",
+                        title: "Chart Title",
                     },
                     appId: "Chart",
                 },

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

@@ -1 +1 @@
-{"version":3,"file":"ResolverDialog.stories.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverDialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { ResolverDialog, ResolverProps } from \"./ResolverDialog\";\nimport \"../../assets/css/finsemble.css\";\nimport \"../common/css/styles.css\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\n\nexport default {\n\ttitle: \"FDC3/ResolverDialog\",\n\tcomponent: ResolverDialog,\n};\n\nconst Template: Story<ResolverProps> = (args: ResolverProps) => <ResolverDialog {...args} />;\n\nexport const Short = Template.bind({});\nShort.args = {\n\tintentRaiser: \"FDC3Tester-37-8788-Finsemble\",\n\tonSend: action(\"sent\"),\n\tonCancel: action(\"cancel\"),\n\tresolutionList: [\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [\n\t\t\t\t{\n\t\t\t\t\twindowName: \"Chart-1-Finsemble\",\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\twindowName: \"Grid-1-Finsemble\",\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChart\",\n\t\t\t\tdisplayName: \"View Chart\",\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const LongNames = Template.bind({});\nLongNames.args = {\n\tintentRaiser: \"FDC3Tester-37-8788-Finsemble\",\n\tonSend: action(\"sent\"),\n\tonCancel: action(\"cancel\"),\n\tresolutionList: [\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"abc\",\n\t\t\t\t\t\tname: \"jacuzzi\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"abc\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"def\",\n\t\t\t\t\t\tname: \"blizzard\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"def\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"ghi\",\n\t\t\t\t\t\tname: \"quizzical\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"ghi\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"jkl\",\n\t\t\t\t\t\tname: \"puzzlement\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"jkl\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChart\",\n\t\t\t\tdisplayName: \"View Chart\",\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const MultiIntent = Template.bind({});\nMultiIntent.args = {\n\tintentRaiser: \"FDC3Tester-37-8788-Finsemble\",\n\tonSend: action(\"sent\"),\n\tonCancel: action(\"cancel\"),\n\tresolutionList: [\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [\n\t\t\t\t{\n\t\t\t\t\twindowName: \"Grid-7-9140-Finsemble\",\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewNews\",\n\t\t\t\tdisplayName: \"View news\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChart\",\n\t\t\t\tdisplayName: \"View chart\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChartStudy\",\n\t\t\t\tdisplayName: \"View chart study\",\n\t\t\t},\n\t\t},\n\t],\n};\n"]}
+{"version":3,"file":"ResolverDialog.stories.js","sourceRoot":"","sources":["../../../src/components/fdc3Resolver/ResolverDialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AACjE,OAAO,gCAAgC,CAAC;AACxC,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACd,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CACzB,CAAC;AAEF,MAAM,QAAQ,GAAyB,CAAC,IAAmB,EAAE,EAAE,CAAC,oBAAC,cAAc,oBAAK,IAAI,EAAI,CAAC;AAE7F,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,YAAY,EAAE,8BAA8B;IAC5C,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC1B,cAAc,EAAE;QACf;YACC,cAAc,EAAE;gBACf;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,OAAO;wBACd,IAAI,EAAE,OAAO;wBACb,KAAK,EAAE,aAAa;qBACpB;oBACD,KAAK,EAAE,OAAO;iBACd;gBACD;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,IAAI,EAAE,MAAM;qBACZ;oBACD,KAAK,EAAE,MAAM;iBACb;aACD;YACD,QAAQ,EAAE;gBACT;oBACC,UAAU,EAAE,mBAAmB;oBAC/B,IAAI,EAAE;wBACL,IAAI,EAAE,OAAO;wBACb,KAAK,EAAE,aAAa;qBACpB;oBACD,KAAK,EAAE,OAAO;iBACd;gBACD;oBACC,UAAU,EAAE,kBAAkB;oBAC9B,IAAI,EAAE;wBACL,IAAI,EAAE,MAAM;qBACZ;oBACD,KAAK,EAAE,MAAM;iBACb;aACD;YACD,MAAM,EAAE;gBACP,IAAI,EAAE,WAAW;gBACjB,WAAW,EAAE,YAAY;aACzB;SACD;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IAChB,YAAY,EAAE,8BAA8B;IAC5C,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC1B,cAAc,EAAE;QACf;YACC,cAAc,EAAE;gBACf;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,KAAK;wBACZ,IAAI,EAAE,SAAS;qBACf;oBACD,KAAK,EAAE,KAAK;iBACZ;gBACD;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,KAAK;wBACZ,IAAI,EAAE,UAAU;qBAChB;oBACD,KAAK,EAAE,KAAK;iBACZ;gBACD;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,KAAK;wBACZ,IAAI,EAAE,WAAW;qBACjB;oBACD,KAAK,EAAE,KAAK;iBACZ;gBACD;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,KAAK;wBACZ,IAAI,EAAE,YAAY;qBAClB;oBACD,KAAK,EAAE,KAAK;iBACZ;aACD;YACD,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE;gBACP,IAAI,EAAE,WAAW;gBACjB,WAAW,EAAE,YAAY;aACzB;SACD;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IAClB,YAAY,EAAE,8BAA8B;IAC5C,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC1B,cAAc,EAAE;QACf;YACC,cAAc,EAAE;gBACf;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,IAAI,EAAE,MAAM;qBACZ;oBACD,KAAK,EAAE,MAAM;iBACb;gBACD;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,OAAO;wBACd,IAAI,EAAE,OAAO;qBACb;oBACD,KAAK,EAAE,OAAO;iBACd;aACD;YACD,QAAQ,EAAE;gBACT;oBACC,UAAU,EAAE,uBAAuB;oBACnC,IAAI,EAAE;wBACL,IAAI,EAAE,MAAM;qBACZ;oBACD,KAAK,EAAE,MAAM;iBACb;aACD;YACD,MAAM,EAAE;gBACP,IAAI,EAAE,UAAU;gBAChB,WAAW,EAAE,WAAW;aACxB;SACD;QACD;YACC,cAAc,EAAE;gBACf;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,OAAO;wBACd,IAAI,EAAE,OAAO;qBACb;oBACD,KAAK,EAAE,OAAO;iBACd;aACD;YACD,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE;gBACP,IAAI,EAAE,WAAW;gBACjB,WAAW,EAAE,YAAY;aACzB;SACD;QACD;YACC,cAAc,EAAE;gBACf;oBACC,IAAI,EAAE;wBACL,KAAK,EAAE,OAAO;wBACd,IAAI,EAAE,OAAO;qBACb;oBACD,KAAK,EAAE,OAAO;iBACd;aACD;YACD,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE;gBACP,IAAI,EAAE,gBAAgB;gBACtB,WAAW,EAAE,kBAAkB;aAC/B;SACD;KACD;CACD,CAAC","sourcesContent":["import React from \"react\";\nimport { ResolverDialog, ResolverProps } from \"./ResolverDialog\";\nimport \"../../assets/css/finsemble.css\";\nimport \"../common/css/styles.css\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\n\nexport default {\n\ttitle: \"FDC3/ResolverDialog\",\n\tcomponent: ResolverDialog,\n};\n\nconst Template: Story<ResolverProps> = (args: ResolverProps) => <ResolverDialog {...args} />;\n\nexport const Short = Template.bind({});\nShort.args = {\n\tintentRaiser: \"FDC3Tester-37-8788-Finsemble\",\n\tonSend: action(\"sent\"),\n\tonCancel: action(\"cancel\"),\n\tresolutionList: [\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t\ttitle: \"Chart Title\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [\n\t\t\t\t{\n\t\t\t\t\twindowName: \"Chart-1-Finsemble\",\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t\ttitle: \"Chart Title\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\twindowName: \"Grid-1-Finsemble\",\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChart\",\n\t\t\t\tdisplayName: \"View Chart\",\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const LongNames = Template.bind({});\nLongNames.args = {\n\tintentRaiser: \"FDC3Tester-37-8788-Finsemble\",\n\tonSend: action(\"sent\"),\n\tonCancel: action(\"cancel\"),\n\tresolutionList: [\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"abc\",\n\t\t\t\t\t\tname: \"jacuzzi\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"abc\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"def\",\n\t\t\t\t\t\tname: \"blizzard\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"def\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"ghi\",\n\t\t\t\t\t\tname: \"quizzical\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"ghi\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"jkl\",\n\t\t\t\t\t\tname: \"puzzlement\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"jkl\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChart\",\n\t\t\t\tdisplayName: \"View Chart\",\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const MultiIntent = Template.bind({});\nMultiIntent.args = {\n\tintentRaiser: \"FDC3Tester-37-8788-Finsemble\",\n\tonSend: action(\"sent\"),\n\tonCancel: action(\"cancel\"),\n\tresolutionList: [\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [\n\t\t\t\t{\n\t\t\t\t\twindowName: \"Grid-7-9140-Finsemble\",\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tname: \"Grid\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Grid\",\n\t\t\t\t},\n\t\t\t],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewNews\",\n\t\t\t\tdisplayName: \"View news\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChart\",\n\t\t\t\tdisplayName: \"View chart\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tlaunchableApps: [\n\t\t\t\t{\n\t\t\t\t\tmeta: {\n\t\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t\t\tname: \"Chart\",\n\t\t\t\t\t},\n\t\t\t\t\tappId: \"Chart\",\n\t\t\t\t},\n\t\t\t],\n\t\t\topenApps: [],\n\t\t\tintent: {\n\t\t\t\tname: \"ViewChartStudy\",\n\t\t\t\tdisplayName: \"View chart study\",\n\t\t\t},\n\t\t},\n\t],\n};\n"]}

package/react/components/icon/Icon.d.ts

@@ -1,9 +1,22 @@
 import * as React from "react";
 import { services } from "@finsemble/finsemble-api";
 declare type IconDescriptor = services.window.types.IconDescriptor;
-export declare const iconFromConfig: (config: any, title: string) => IconDescriptor;
+/**
+ * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.
+ * @param config A finsemble icon config entry as derived by the launcher (e.g. "icons.toolBar", "icons.taskbar" or  "icons.titleBar")
+ * @param title The title for the icon
+ */
+export declare const iconFromConfig: (config: any, title: string, appD: any) => IconDescriptor;
 declare type IconProps = IconDescriptor & {
     className?: string;
 };
+/**
+ * An icon to accompany Finsemble components or workspaces.
+ * @param {string} [imageType] - "fonticon" | "url" | "initials" - Determines how the icon is generated.
+ * @param {string} [path] - The path of the image.
+ * @param {string} [name] - Used if imageType is "initials" to generate a text based icon.
+ * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.
+ * @param {string} [className] - Optional class to be appended.
+ */
 export declare const Icon: React.FunctionComponent<Partial<IconProps>>;
 export {};

package/react/components/icon/Icon.js

@@ -1,10 +1,24 @@
 import * as React from "react";
-export const iconFromConfig = (config, title) => {
+/**
+ * Converts a Finsemble config entry to an Icon type that can be used to create <Icon> components.
+ * @param config A finsemble icon config entry as derived by the launcher (e.g. "icons.toolBar", "icons.taskbar" or  "icons.titleBar")
+ * @param title The title for the icon
+ */
+export const iconFromConfig = (config, title, appD) => {
+    var _a;
+    if (((_a = appD === null || appD === void 0 ? void 0 : appD.icons) === null || _a === void 0 ? void 0 : _a.length) > 0 && appD.icons[0].src) {
+        return {
+            imageType: "url",
+            path: appD.icons[0].src,
+        };
+    }
+    // Our default icon. The <Icon> component can generate an "initials" icon based just off of the `name`
     const defaultIcon = {
         imageType: "initials",
         name: title,
         category: "Application",
     };
+    // Use iconography if available in the app's icon config entry
     if (config === null || config === void 0 ? void 0 : config.iconClass) {
         return {
             imageType: "fonticon",
@@ -29,17 +43,32 @@ const deriveClasses = (imageType, className = "") => {
     }
     return classes;
 };
+/**
+ * Derives two initials from a given name based on some simple heuristics.
+ */
 const avatarInitialsFromName = (name) => {
+    // Significant words are over three characters
     const significantWords = name
         .toUpperCase()
         .split(" ")
         .flatMap((str) => (str.length > 3 ? [str] : []));
+    // If no significant words then just return first two characters of the original name
     if (significantWords.length === 0)
         return name.substr(0, 2);
+    // If only one significant word then return its first two characters
     if (significantWords.length === 1)
         return significantWords[0].substr(0, 2);
+    // Return the first character of the first two significant words
     return significantWords[0].substr(0, 1).concat(significantWords[1].substr(0, 1));
 };
+/**
+ * An icon to accompany Finsemble components or workspaces.
+ * @param {string} [imageType] - "fonticon" | "url" | "initials" - Determines how the icon is generated.
+ * @param {string} [path] - The path of the image.
+ * @param {string} [name] - Used if imageType is "initials" to generate a text based icon.
+ * @param {string} [category] - This will appear on the `data-category` attribute which can be used to drive CSS.
+ * @param {string} [className] - Optional class to be appended.
+ */
 export const Icon = (props) => {
     var _a, _b;
     let avatar;
@@ -57,4 +86,16 @@ export const Icon = (props) => {
     const classes = deriveClasses(imageType, props.className);
     return (React.createElement("div", { className: classes, "data-category": props.category }, avatar));
 };
+/*
+export const CategoryIcon: React.FunctionComponent<CategoryIconProps> = (props) => {
+    let className = "";
+    if(props.category == "Application")
+        className=`entity-component ${props.className}`;
+    if(props.category == "Workspace")
+        className=`entity-workspace ${props.className}`;
+    return (
+        <Icon {...props} {...className} />
+    )
+}
+*/
 //# sourceMappingURL=Icon.js.map