@eccenca/gui-elements 22.0.1 → 22.1.0-rc.0

package/src/components/Dialog/Modal.tsx

@@ -4,10 +4,13 @@
 */
 
 import React from 'react';
-import {Classes as BlueprintClassNames, OverlayProps, Overlay as BlueprintOverlay,} from "@blueprintjs/core";
+import {
+    Classes as BlueprintClassNames,
+    OverlayProps, Overlay as BlueprintOverlay,
+    IOverlayState,
+} from "@blueprintjs/core";
 import {Card} from "./../Card";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import { IOverlayState } from '@blueprintjs/core';
 
 export interface ModalProps extends OverlayProps, IOverlayState {
   children: React.ReactNode | React.ReactNode[];
@@ -23,6 +26,8 @@ export interface ModalProps extends OverlayProps, IOverlayState {
    * Prevents that a backdrop area is displayed behind the modal elements.
    */
   preventBackdrop?: boolean;
+    /** Optional props for the wrapper div element inside the modal overlay. */
+  wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 }
 
 /**
@@ -38,6 +43,7 @@ function Modal({
     canOutsideClickClose=false,
     canEscapeKeyClose=false,
     preventBackdrop=false,
+    wrapperDivProps,
     ...otherProps
 }: ModalProps) {
 
@@ -65,6 +71,7 @@ function Modal({
             hasBackdrop={!preventBackdrop}
         >
             <div
+                {...wrapperDivProps}
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}

package/src/components/Dialog/SimpleDialog.tsx

@@ -47,6 +47,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
      * Define purpose of the dialog, e.g. if it is a warning.
      */
     intent?: IntentTypes;
+    /** Optional props for the wrapper div element inside the modal. */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 }
 
 /**

package/src/components/Icon/Icon.tsx

@@ -5,7 +5,7 @@ import { IntentTypes } from "../../common/Intent";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 import canonicalIcons, {IconSized, ValidIconName} from "./canonicalIconNames"
 
-interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
     // The CSS class name.
     className?: string,
     // Canonical icon name
@@ -38,16 +38,16 @@ const findExistingIcon = (iconName: ValidIconName | string[],
 
 /** Returns the first icon name that exists or the fallback icon name. */
 export const findExistingIconName = (iconNames: string[],
-                                     fallbackIconName: string = "Undefined"): string => {
+                                     fallbackIconName: ValidIconName = "Undefined"): ValidIconName => {
     let foundIconName: string = fallbackIconName;
     const iconNameStack = [...iconNames]
     while (foundIconName === fallbackIconName && iconNameStack.length > 0) {
         let iconNameToTest = iconNameStack.shift();
-        if (iconNameToTest && canonicalIcons[iconNameToTest] != null) {
+        if (iconNameToTest && (canonicalIcons as any)[iconNameToTest] != null) {
             foundIconName = iconNameToTest
         }
     }
-    return foundIconName
+    return foundIconName as ValidIconName
 }
 
 function Icon({

package/src/components/Icon/IconButton.tsx

@@ -6,7 +6,7 @@ import {ValidIconName} from "./canonicalIconNames";
 
 interface IconButtonProps extends ButtonProps {
     // Canonical icon name
-    name: ValidIconName
+    name: ValidIconName | string[]
     className?: string
     // Tooltip text
     text?: string,

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,8 +1,7 @@
 import * as icons from "@carbon/icons-react"
 
 /** Valid icon names. */
-export type ValidIconName = string // allow also dynamic string parameter (in intermediate elements that insert Icon elements)
-    | "application-dataintegration"
+export type ValidIconName = "application-dataintegration"
     | "application-homepage"
     | "application-useraccount"
     | "application-warning"
@@ -65,6 +64,11 @@ export type ValidIconName = string // allow also dynamic string parameter (in in
     | "operation-logout"
     | "operation-filter"
     | "operation-filteredit"
+    | "operation-comparison"
+    | "operation-transform"
+    | "operation-aggregation"
+    | "data-sourcepath"
+    | "data-targetpath"
     | "list-sort"
     | "list-sortasc"
     | "list-sortdesc"
@@ -106,6 +110,7 @@ export type ValidIconName = string // allow also dynamic string parameter (in in
     | "linked-item"
     | "operation-auto-graph-layout"
     | "unlinked-item"
+    | "write-protected"
     | "undefined"
     | "Undefined";
 
@@ -433,6 +438,32 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.FilterEdit20,
         large: icons.FilterEdit32
     },
+    "operation-transform": {
+        small: icons.Calculation16,
+        normal: icons.Calculation20,
+        large: icons.Calculation32
+    },
+    "operation-comparison": {
+        small: icons.Compare16,
+        normal: icons.Compare20,
+        large: icons.Compare32
+    },
+    "operation-aggregation": {
+        small: icons.DataCollection16,
+        normal: icons.DataCollection20,
+        large: icons.DataCollection32
+    },
+
+    "data-sourcepath": {
+        small: icons.Data_216,
+        normal: icons.Data_220,
+        large: icons.Data_232
+    },
+    "data-targetpath": {
+        small: icons.Data_116,
+        normal: icons.Data_120,
+        large: icons.Data_132
+    },
 
     "list-sort": {
         small: icons.ArrowsVertical16,
@@ -646,6 +677,12 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         large: icons.ChartNetwork32
     },
 
+    "write-protected": {
+        small: icons.DocumentProtected16,
+        normal: icons.DocumentProtected20,
+        large: icons.DocumentProtected32
+    },
+
     "undefined": {
         small: icons.Undefined16,
         normal: icons.Undefined20,

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { name } from "react-lorem-ipsum";
+
+import MultiSelectExample from "./MultiSelect";
+
+export default {
+    title: "Components/MultiSelect",
+    component: MultiSelectExample,
+    argTypes: {
+        placeholder: {
+            description: "Input placeholder text",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        openOnKeyDown: {
+            description:
+                "If true, the component waits until a keydown event in the TagInput before opening its popover. If false, the popover opens immediately after a mouse click focuses the component's TagInput ",
+            control: "boolean",
+            defaultValue: false,
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        items: {
+            description: "Array of items in the list",
+            control: "none",
+        },
+    },
+} as ComponentMeta<typeof MultiSelectExample>;
+
+const Template: ComponentStory<typeof MultiSelectExample> = (args) => <MultiSelectExample {...args} />;
+
+export const Default = Template.bind({});
+
+const items = new Array(5).fill(undefined).map((_) => {
+    const testLabel = name();
+    return { testLabel, testId: `${testLabel}-id` };
+});
+
+Default.args = {
+    items,
+    canCreateNewItem: true,
+    prePopulateWithItems: false,
+    equalityProp: "testId",
+    labelProp: "testLabel",
+    openOnKeyDown: true,
+};
+
+const TemplateWithOpenDropdown: ComponentStory<typeof MultiSelectExample> = (args) => <MultiSelectExample {...args} />;
+
+export const openDropdownWhenFocused = TemplateWithOpenDropdown.bind({});
+
+openDropdownWhenFocused.args = {
+    items,
+    canCreateNewItem: true,
+    prePopulateWithItems: false,
+    equalityProp: "testId",
+    labelProp: "testLabel",
+};

package/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,370 @@
+import React from "react";
+import { Intent as BlueprintIntent } from "@blueprintjs/core";
+import { MultiSelect as BlueprintMultiSelect, MultiSelectProps, IItemRendererProps } from "@blueprintjs/select";
+import MenuItem from "../Menu/MenuItem";
+import Highlighter from "../Typography/Highlighter";
+import Button from "../Button/Button";
+import OverflowText from "../Typography/OverflowText";
+
+interface SelectedParamsType<T> {
+    newlySelected: T;
+    selectedItems: T[];
+    createdItems: Partial<T>[];
+}
+
+interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+    /**
+     * field in an item, that differentiates on item from the other.
+     */
+    equalityProp: string;
+    /**
+     * field in the item object that would be used to describe the item.
+     * this would be used in the item selection list as well as the multi-select input
+     */
+    labelProp: string;
+    /**
+     * if new items that are not in the original item list can be created and appended
+     */
+    canCreateNewItem?: boolean;
+    /**
+     * When set to true will set the multi-select value with all the items provided
+     */
+    prePopulateWithItems?: boolean;
+    /**
+     *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
+     */
+    onSelection?: (params: SelectedParamsType<T>) => void;
+    /**
+     * Props to spread to `Popover`. Note that `content` cannot be changed.
+     */
+    popoverProps?: MultiSelectProps<T>["popoverProps"];
+    /**
+     * Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input.
+     */
+    tagInputProps?: MultiSelectProps<T>["tagInputProps"];
+
+    /**
+     * prop to listen for query changes, when text is entered in the multi-select input
+     */
+    runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
+    /**
+     * Whether the component should take up the full width of its container.
+     * This overrides `popoverProps.fill` and `tagInputProps.fill`.
+     */
+    fullWidth?: boolean;
+    /**
+     * text content to render when filtering items returns zero results.
+     * If omitted, "No results." will be rendered in this case.
+     */
+    noResultText?: string;
+    /**
+     * text content to render when a new item non-existing in filtered items is about to be created .
+     * If omitted, "No results." will be rendered in this case.
+     */
+    newItemCreationText?: string;
+    /**
+     * The input element is displayed with primary color scheme.
+     */
+    hasStatePrimary?: boolean;
+    /**
+     * The input element is displayed with success (some type of green) color scheme.
+     */
+    hasStateSuccess?: boolean;
+    /**
+     * The input element is displayed with success (some type of orange) color scheme.
+     */
+    hasStateWarning?: boolean;
+    /**
+     * The input element is displayed with success (some type of red) color scheme.
+     */
+    hasStateDanger?: boolean;
+    /**
+     * Disables the input element
+     */
+    disabled?: boolean;
+}
+
+function MultiSelect<T>({
+    items,
+    prePopulateWithItems,
+    equalityProp,
+    labelProp,
+    onSelection,
+    canCreateNewItem,
+    popoverProps,
+    tagInputProps,
+    runOnQueryChange,
+    fullWidth = true,
+    noResultText = "No results.",
+    newItemCreationText = "Add new tag",
+    hasStatePrimary,
+    hasStateDanger,
+    hasStateSuccess,
+    hasStateWarning,
+    disabled,
+    ...otherProps
+}: IProps<T>) {
+    const [createdItems, setCreatedItems] = React.useState<T[]>([]);
+    const [itemsCopy, setItemsCopy] = React.useState<T[]>([...items]);
+    const [filteredItemList, setFilteredItemList] = React.useState<T[]>([]);
+    const [selectedItems, setSelectedItems] = React.useState<T[]>(() => (prePopulateWithItems ? [...items] : []));
+    const [query, setQuery] = React.useState<string | undefined>(undefined);
+    //currently focused element in popover list
+    const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
+    const tagInputRef = React.useRef<any>();
+
+    let intent;
+    switch (true) {
+        case hasStatePrimary:
+            intent = BlueprintIntent.PRIMARY;
+            break;
+        case hasStateSuccess:
+            intent = BlueprintIntent.SUCCESS;
+            break;
+        case hasStateWarning:
+            intent = BlueprintIntent.WARNING;
+            break;
+        case hasStateDanger:
+            intent = BlueprintIntent.DANGER;
+            break;
+        default:
+            break;
+    }
+
+    /** update items copy when the items change
+     *  e.g for auto-complete when query change
+     */
+    React.useEffect(() => {
+        setItemsCopy([...items, ...createdItems]);
+        setFilteredItemList([...items, ...createdItems]);
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [items.map((item) => item[equalityProp as keyof T]).join("|")]);
+
+    React.useEffect(() => {
+        onSelection &&
+            onSelection({
+                newlySelected: selectedItems.slice(-1)[0],
+                createdItems,
+                selectedItems,
+            });
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [
+        onSelection,
+        selectedItems.map((item) => item[equalityProp as keyof T]).join("|"),
+        createdItems.map((item) => item[equalityProp as keyof T]).join("|"),
+    ]);
+
+    /**
+     * using the equality prop specified checks if an item has already been selected
+     * @param matcher
+     * @returns
+     */
+    const itemHasBeenSelectedAlready = (matcher: string) => {
+        return !!selectedItems.find((item) => String(item[equalityProp as keyof typeof item]).toString() === matcher);
+    };
+
+    /**
+     * removes already selected item from the selectedItems
+     * @param matcher
+     */
+    const removeItemSelection = (matcher: string) => {
+        setSelectedItems((items) => items.filter((t) => String(t[equalityProp as keyof typeof t]).toString() !== matcher));
+    };
+
+    /**
+     * selects and deselects an item from selection list
+     * if the item exists it removes it instead
+     * @param item
+     */
+    const onItemSelect = (item: T) => {
+        if (itemHasBeenSelectedAlready(String(item[equalityProp as keyof T]).toString())) {
+            removeItemSelection(String(item[equalityProp as keyof T]).toString());
+        } else {
+            setSelectedItems((items) => [...items, item]);
+        }
+        setQuery("");
+    };
+
+    /**
+     * search through item list using "label prop" and update the items popover
+     * @param query
+     */
+    const onQueryChange = async (query: string) => {
+        if (query.length) {
+            setQuery(query);
+            const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
+            setFilteredItemList(() =>
+                [...(resultFromQuery ?? itemsCopy), ...createdItems].filter((t) =>
+                    String(t[labelProp as keyof typeof t]).toLowerCase().includes(query.toLowerCase())
+                )
+            );
+        }
+    };
+
+    // Renders the entries of the (search) options list
+    const optionRenderer = (label: string) => {
+        return <Highlighter label={label} searchValue={query} />;
+    };
+
+    /**
+     * defines how an item in the item list is displayed
+     * @param tag
+     * @param param
+     * @returns
+     */
+    const onItemRenderer = (item: T, { handleClick, modifiers }: IItemRendererProps) => {
+        if (!modifiers.matchesPredicate) {
+            return null;
+        }
+        const label = createdItems.find((createdItem) => createdItem[labelProp as keyof T] === item[labelProp as keyof T])
+            ? `${item[labelProp as keyof T]} (new tag)`
+            : item[labelProp as keyof T];
+        return (
+            <MenuItem
+                active={modifiers.active}
+                key={String(item[equalityProp as keyof T]).toString()}
+                icon={itemHasBeenSelectedAlready(String(item[equalityProp as keyof T]).toString()) ? "state-checked" : "state-unchecked"}
+                onClick={handleClick}
+                text={optionRenderer(String(label).toString())}
+                shouldDismissPopover={false}
+            />
+        );
+    };
+
+    /**
+     * clear all selected items in the multi-select input
+     */
+    const handleClear = () => {
+        setSelectedItems([]);
+        setFilteredItemList(itemsCopy);
+    };
+
+    /**
+     * remove a specific item from the multi-select input
+     * @param label
+     * @param index
+     */
+    const removeTagFromSelectionViaIndex = (label: string, index: number) => {
+        setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
+        setCreatedItems((items) => items.filter((t) => String(t[labelProp as keyof typeof t]).toString() !== label));
+    };
+
+    const removeExtraSpaces = (text: string) => text.replace(/\s+/g, " ").trim();
+
+    /**
+     * utility function to create a new Item
+     * @param event
+     * @param label
+     */
+    const createNewItem = (event: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>, label: string): T => {
+        const newItem = { [labelProp]: removeExtraSpaces(label), [equalityProp]: removeExtraSpaces(label) } as any;
+        //set new items
+        setCreatedItems((items) => [...items, newItem]);
+        setQuery("");
+        itemsCopy.push(newItem);
+        return newItem;
+    };
+
+    /**
+     * added functionality to create new item when there are no matching items on enter keypress
+     * @param event
+     */
+    const handleOnKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Enter" && !filteredItemList.length && !!query) {
+            createNewItem(event, query);
+        }
+        tagInputRef.current?.focus();
+    };
+
+    /**
+     * added functionality to either create new item
+     * when there are no matching items or select an item on tab keypress
+     * @param event
+     */
+    const handleOnKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Tab" && !!query) {
+            event.preventDefault();
+            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(event, query));
+            setTimeout(() => tagInputRef.current?.focus());
+        }
+    };
+
+    /**
+     * create new item handler, displays the new item selector and creates a new item when selected
+     * @param label '
+     * @param active
+     * @param handleClick
+     * @returns
+     */
+    const newItemRenderer = (label: string, active: boolean, handleClick: React.MouseEventHandler<HTMLElement>) => {
+        if (!canCreateNewItem) return undefined;
+        const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
+            createNewItem(e, label);
+            handleClick(e);
+        };
+        return (
+            <MenuItem
+                id={"new-tag"}
+                icon="item-add-artefact"
+                active={active}
+                key={label}
+                onClick={clickHandler}
+                text={<OverflowText>{`${newItemCreationText} '${label}'`}</OverflowText>}
+            />
+        );
+    };
+
+    const clearButton =
+        selectedItems.length > 0 ? (
+            <Button icon="operation-clear" data-test-id="clear-all-items" minimal={true} onClick={handleClear} />
+        ) : undefined;
+
+    return (
+        <BlueprintMultiSelect
+            {...otherProps}
+            query={query}
+            onQueryChange={onQueryChange}
+            items={filteredItemList}
+            onItemSelect={onItemSelect}
+            itemRenderer={onItemRenderer}
+            itemsEqual={(a: T, b: T) => a[labelProp as keyof T] === b[labelProp as keyof T]}
+            selectedItems={selectedItems}
+            noResults={<MenuItem disabled={true} text={noResultText} />}
+            tagRenderer={(tag) => tag[labelProp as keyof typeof tag]}
+            createNewItemRenderer={newItemRenderer}
+            onActiveItemChange={(activeItem) => setFocusedItem(activeItem)}
+            fill={fullWidth}
+            createNewItemFromQuery={(query) =>
+                ({
+                    [labelProp]: removeExtraSpaces(query),
+                    [equalityProp]: removeExtraSpaces(query),
+                } as any)
+            }
+            tagInputProps={{
+                inputProps: {
+                    id: "item",
+                    autoComplete: "off",
+                },
+                inputRef: tagInputRef,
+                intent,
+                addOnBlur: true,
+                onKeyDown: handleOnKeyDown,
+                onKeyUp: handleOnKeyUp,
+                onRemove: removeTagFromSelectionViaIndex,
+                rightElement: disabled ? undefined : clearButton,
+                tagProps: { minimal: true },
+                disabled,
+                ...tagInputProps,
+            }}
+            popoverProps={{
+                minimal: true,
+                position: "bottom-left",
+                hasBackdrop: true,
+                ...popoverProps,
+                defaultIsOpen: true,
+            }}
+        />
+    );
+}
+
+export default MultiSelect;