Replace deprecated gui components (CMEM-4905)

CHANGELOG.md

@@ -11,19 +11,31 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ApplicationViewability />`
     -   component for hiding elements in specific media
 -   `<InlineText />`
-    -    force children to get displayed as inline content
+    -   force children to get displayed as inline content
+-   `<NotAvailable />`
+    -   simple placeholder element that can be used to display info about missing data
 -   `<StringPreviewContentBlobToggler />`
-    - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+    -   `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+-   `<ContentBlobToggler />`
+    -   `forceInline` property: force inline rendering
+-   `<ContextMenu />`
+    -   `togglerSize`: replaces the deprecated `togglerLarge` property
+-   `<MultiSelect />:
+    -   `searchListPredicate` property: Allows to filter the complete list of search options at once.
+    -   Following optional BlueprintJs properties are forwarded now to override default behaviour: `noResults`, `createNewItemRenderer` and `itemRenderer`
+    -   `isValidNewOption` property: Checks if an input string is or can be turned into a valid new option.
 
 ### Fixed
 
 -   `<Tag />`
     -   create more whitespace inside `small` tag
     -   reduce visual impact of border
 -   `<StringPreviewContentBlobToggler />`
-    -    take Markdown rendering into account before testing the maximum preview length
+    -   take Markdown rendering into account before testing the maximum preview length
 -   `<NodeContent />`
     -   header-menu items are vertically centered now
+-   `<MultiSelect />`:
+    -   border of the BlueprintJS `Tag` elements were fixed
 
 ### Changed
 
@@ -37,11 +49,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `<FlexibleLayoutItem />`
     -   `<GridColumn />`
     -   `<PropertyName />` and `<PropertyValue />`
+-   `<MultiSelect />`
+    -   by default, if no searchPredicate or searchListPredicate is defined, the filtering is done via case-insensitive multi-word filtering.
 
 ### Deprecated
 
 -   `<StringPreviewContentBlobToggler />`
-    -    `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
+    -   `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
+-   `<ContextMenu />`
+    -   `togglerLarge`: replaced by the more versatile `togglerSize` property
+-   `<MultiSelect />`
+    -   `searchPreficate`: replaced by the, in some cases, more efficient `searchListPredicate`
 
 ## [25.0.0] - 2025-12-01
 

eslint.config.mjs

@@ -17,11 +17,13 @@ const compat = new FlatCompat({
     allConfig: js.configs.all
 });
 
-export default [...compat.extends(
+const base = compat.extends(
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-), {
+);
+
+export default [...base, {
     plugins: {
         "@typescript-eslint": typescriptEslint,
         react,
@@ -31,6 +33,9 @@ export default [...compat.extends(
 
     languageOptions: {
         parser: tsParser,
+        globals: {
+            window: "readonly",
+        }
     },
 
     rules: {
@@ -54,4 +59,4 @@ export default [...compat.extends(
 
         "no-console": "error",
     },
-}];
+}];

package.json

@@ -153,6 +153,7 @@
         "identity-obj-proxy": "^3.0.0",
         "jest": "^30.2.0",
         "jest-environment-jsdom": "^30.2.0",
+        "jest-fixed-jsdom": "^0.0.11",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.2",
         "node-sass-package-importer": "^5.3.3",
@@ -224,7 +225,7 @@
         "testMatch": [
             "<rootDir>/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
         ],
-        "testEnvironment": "jest-environment-jsdom",
+        "testEnvironment": "jest-fixed-jsdom",
         "transform": {
             "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
         },

src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -4,14 +4,9 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import {
-    ActivityControlWidget,
-    ActivityControlWidgetAction,
-    IconButton,
-    SimpleDialog,
-    Tag,
-    TagList,
-} from "../../../index";
+import { IconButton, SimpleDialog, Tag, TagList } from "../../components";
+
+import { ActivityControlWidget, ActivityControlWidgetAction } from "./ActivityControlWidget";
 
 export default {
     title: "Cmem/ActivityControlWidget",

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -1,12 +1,5 @@
 import React from "react";
 
-import { ValidIconName } from "../../components/Icon/canonicalIconNames";
-import { IconProps } from "../../components/Icon/Icon";
-import { TestIconProps } from "../../components/Icon/TestIcon";
-import { TestableComponent } from "../../components/interfaces";
-import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
-import { SpinnerProps } from "../../components/Spinner/Spinner";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
     Card,
     ContextMenu,
@@ -21,7 +14,14 @@ import {
     ProgressBar,
     Spinner,
     Tooltip,
-} from "../../index";
+} from "../../components";
+import { ValidIconName } from "../../components/Icon/canonicalIconNames";
+import { IconProps } from "../../components/Icon/Icon";
+import { TestIconProps } from "../../components/Icon/TestIcon";
+import { TestableComponent } from "../../components/interfaces";
+import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
+import { SpinnerProps } from "../../components/Spinner/Spinner";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ActivityControlWidgetProps extends TestableComponent {
     /**
@@ -212,11 +212,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                     activityActions.map((action, idx) => {
                         return (
                             <IconButton
-                                key={
-                                    typeof action.icon === "string"
-                                        ? action.icon
-                                        : action["data-test-id"] ?? action["data-testid"] ?? idx
-                                }
+                                key={idx}
                                 data-test-id={action["data-test-id"]}
                                 data-testid={action["data-testid"]}
                                 name={action.icon}
@@ -241,11 +237,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                             return (
                                 <MenuItem
                                     icon={menuAction.icon}
-                                    key={
-                                        typeof menuAction.icon === "string"
-                                            ? menuAction.icon
-                                            : menuAction["data-test-id"] ?? idx
-                                    }
+                                    key={idx}
                                     onClick={menuAction.action}
                                     text={menuAction.tooltip}
                                 />

src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,6 +1,8 @@
-import React, { useState } from "react";
-
-import { Button, HtmlContentBlock, IconButton, SimpleDialog } from "../../index";
+import React, {useState} from "react";
+import SimpleDialog from "../../components/Dialog/SimpleDialog";
+import IconButton from "../../components/Icon/IconButton";
+import Button from "../../components/Button/Button";
+import HtmlContentBlock from "../../components/Typography/HtmlContentBlock";
 
 interface ActivityExecutionErrorReportModalProps {
     // Title of the modal

src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 
-import { Link, Spacing } from "../../index";
+import Link from "../../components/Link/Link";
+import Spacing from "../../components/Separation/Spacing";
+import InlineText from "../../components/Typography/InlineText";
 
 export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -31,6 +33,10 @@ export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivEle
         Callback if toggler is necessary. Default: true
     */
     enableToggler?: boolean;
+    /**
+     * Force always inline rendering.
+     */
+    forceInline?: boolean;
 }
 
 /** Shows a preview with the option to expand to a full view (and back). */
@@ -42,27 +48,29 @@ export function ContentBlobToggler({
     fullviewContent,
     startExtended = false,
     enableToggler = true,
+    forceInline = false,
     ...otherProps
 }: ContentBlobTogglerProps) {
     const [isExtended, setViewState] = useState(startExtended);
-    const handlerToggleView = (event: any) => {
+    const handlerToggleView = (event: React.MouseEvent<HTMLAnchorElement>) => {
         event.preventDefault();
         event.stopPropagation();
         setViewState(!isExtended);
     };
 
-    return (
+    const tooglerDisplay = (
         <div className={className} {...otherProps}>
             {!isExtended ? (
                 <>
                     {previewContent}
                     {enableToggler && (
                         <>
-                            {" "}&hellip;{" "}
+                            {" "}
+                            &hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -76,11 +84,11 @@ export function ContentBlobToggler({
                     {fullviewContent}
                     {enableToggler && (
                         <div>
-                            <Spacing size="small" />
+                            {forceInline ? <> </> : <Spacing size="small" />}
                             <Link
                                 data-test-id={"content-blob-toggler-less-link"}
                                 href="#less"
-                                onClick={(e: any) => {
+                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                                     handlerToggleView(e);
                                 }}
                             >
@@ -92,4 +100,6 @@ export function ContentBlobToggler({
             )}
         </div>
     );
+
+    return forceInline ? <InlineText>{tooglerDisplay}</InlineText> : tooglerDisplay;
 }

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,6 +1,9 @@
 import React from "react";
+import {ContentBlobToggler, ContentBlobTogglerProps} from "./ContentBlobToggler";
+import {Markdown} from "../markdown/Markdown";
+import {utils} from "../../common";
+import InlineText from "../../components/Typography/InlineText";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
 
 export interface StringPreviewContentBlobTogglerProps
     extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
@@ -54,6 +57,7 @@ export function StringPreviewContentBlobToggler({
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
     firstNonEmptyLineOnly,
+    ...otherContentBlobTogglerProps
 }: StringPreviewContentBlobTogglerProps) {
     // need to test `firstNonEmptyLineOnly` until property is removed
     const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
@@ -105,6 +109,7 @@ export function StringPreviewContentBlobToggler({
             fullviewContent={fullviewContent}
             startExtended={startExtended}
             enableToggler={enableToggler}
+            {...otherContentBlobTogglerProps}
         />
     );
 }

src/cmem/markdown/Markdown.tsx

@@ -8,8 +8,9 @@ import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 import { PluggableList } from "unified";
 
+import { TestableComponent } from "../../components";
+import { HtmlContentBlock, HtmlContentBlockProps } from "../../components/Typography";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;

src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Accordion/AccordionItem",

src/components/Application/_header.scss

@@ -52,19 +52,22 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 /// Item link
 $shell-header-link: $blue-60 !default;
 
+/// Height
+$shell-header-height: mini-units(8) !default;
+
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweak original layout
 
 .#{$prefix}--header {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 .#{$prefix}--header__action,
 .#{$prefix}--header__action.#{$prefix}--btn--icon-only {
-    width: mini-units(8);
-    height: mini-units(8);
+    width: $shell-header-height;
+    height: $shell-header-height;
     padding-block-start: 0;
     background-color: transparent;
 
@@ -128,7 +131,7 @@ span.#{$prefix}--header__name {
 }
 
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 // tweak original colors (as long as config does not work properly)
@@ -255,15 +258,15 @@ a.#{$prefix}--header__menu-item:focus > svg {
     // adjust position of all other modal dialogs
 
     .#{$ns}-dialog-container {
-        top: mini-units(8);
-        left: mini-units(8);
-        width: calc(100% - #{mini-units(8)});
-        min-height: calc(100% - #{mini-units(8)});
+        top: $shell-header-height;
+        left: $shell-header-height;
+        width: calc(100% - #{$shell-header-height});
+        min-height: calc(100% - #{$shell-header-height});
     }
 
     .#{$eccgui}-dialog__wrapper {
-        max-width: calc(100vw - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
-        max-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+        max-width: calc(100vw - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
+        max-height: calc(100vh - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
         margin: 0;
     }
 }

src/components/Badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Badge, Icon, TestIcon } from "../../../index";
+import { Badge, Icon, TestIcon } from "../../components";
 
 export default {
     title: "Components/Badge",

src/components/Button/Button.tsx

@@ -104,13 +104,18 @@ export const Button = ({
 
     const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
+    const iconSize = {
+        small: restProps["size"] === "small",
+        large: restProps["size"] === "large",
+    };
+
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
             intent={(intent || intentByFunction) as BlueprintIntent}
-            icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
-            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
+            icon={typeof icon === "string" ? <Icon name={icon} {...iconSize} /> : icon}
+            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} {...iconSize} /> : rightIcon}
         >
             {children}
             {badge && (