Skip to content

Replace deprecated gui components (CMEM-4905) #367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
haschek wants to merge 11 commits into
base: develop
Choose a base branch
from
Draft

Replace deprecated gui components (CMEM-4905) #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ad360d9
adapted for react 18
arausly Sep 30, 2025
f8a22eb
added temp any type for failing strict ts check
arausly Sep 30, 2025
919bca3
merge develop
arausly Dec 8, 2025
ef6fede
corrected interface to fix compilation errors
arausly Dec 8, 2025
f8edf61
fixed compile errors in ContextOverlay
arausly Dec 10, 2025
e7ab6a0
Merge branch 'develop' into change/upgradedToReact18-CMEM-6639
andreas-schultz Jan 14, 2026
2491c21
Remove seemingly unnecessary changes
andreas-schultz Jan 14, 2026
67bb694
Upgrade react testing library from v12 to v14
andreas-schultz Jan 19, 2026
47395f9
Fix deprecation warnings because of React 18 upgrade
andreas-schultz Jan 19, 2026
52bd09a
add NotAvailable component
haschek Jan 29, 2026
b921c68
add tooltip indicator if no tag is used
haschek Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@
"lodash": "^4.17.21",
"n3": "^1.26.0",
"re-resizable": "^6.10.3",
"react": "^16.13.1",
"react-dom": "^16.14.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flow-renderer": "9.7.4",
"react-inlinesvg": "^3.0.3",
"react-is": "^16.13.1",
Expand Down Expand Up @@ -132,7 +132,7 @@
"@storybook/react-webpack5": "^8.6.14",
"@storybook/test": "^8.6.14",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^12.1.5",
"@testing-library/react": "^14.3.1",
"@types/color": "^3.0.6",
"@types/he": "^1.2.3",
"@types/jest": "^30.0.0",
Expand Down Expand Up @@ -179,7 +179,7 @@
"react": ">=16"
},
"resolutions": {
"**/@types/react": "^17.0.90",
"**/@types/react": "^18.2.0",
"node-sass-package-importer/**/postcss": "^8.5.6",
"string-width": "^4.2.3",
"wrap-ansi": "^7.0.0",
Expand Down
10 changes: 5 additions & 5 deletions src/cmem/ActivityControl/ActivityControlWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,16 @@ export interface ActivityControlWidgetProps extends TestableComponent {
/**
* The label to be shown
*/
label?: string | JSX.Element;
label?: string | React.JSX.Element;
/**
* Element that wraps around the label.
* Default: `<OverflowText inline={true} />`
*/
labelWrapper?: JSX.Element;
labelWrapper?: React.JSX.Element;
/**
* To add tags in addition to the widget status description
*/
tags?: JSX.Element;
tags?: React.JSX.Element;
/**
* The progress bar parameters if it should be show by a progres bar
*/
Expand Down Expand Up @@ -80,7 +80,7 @@ export interface ActivityControlWidgetProps extends TestableComponent {
/**
* execution timer messages for waiting and running times.
*/
timerExecutionMsg?: JSX.Element | null;
timerExecutionMsg?: React.JSX.Element | null;
/**
* additional actions that can serve as a complex component, positioned between the default actions and the context menu
*/
Expand Down Expand Up @@ -146,7 +146,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
keepColors
>
{progressSpinnerFinishedIcon ? (
React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
React.cloneElement(progressSpinnerFinishedIcon as React.JSX.Element, { small, large: !small })
) : (
<Spinner
position="inline"
Expand Down
2 changes: 1 addition & 1 deletion src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface ActivityExecutionErrorReportModalProps {
// Called when the close button is clicked
onDiscard: () => any;
// The error report
report: JSX.Element;
report: React.JSX.Element;
// Value of the download button
downloadButtonValue: string;
// Value of the close button
Expand Down
8 changes: 4 additions & 4 deletions src/cmem/ActivityControl/SilkActivityControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ const progressBreakpointAnimation = 99;

export interface SilkActivityControlProps extends TestableComponent {
// The label of this activity
label: string | JSX.Element;
label: string | React.JSX.Element;
/**
* To add tags in addition to the widget status description
*/
tags?: JSX.Element;
tags?: React.JSX.Element;
// Initial state
initialStatus?: SilkActivityStatusProps;
// Register a function in order to receive callbacks
Expand Down Expand Up @@ -80,7 +80,7 @@ export interface SilkActivityControlLayoutProps {
// what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that
visualization?: "none" | "progressbar" | "spinner";
// wrapper around label
labelWrapper?: JSX.Element;
labelWrapper?: React.JSX.Element;
}

const defaultLayout: SilkActivityControlLayoutProps = {
Expand All @@ -94,7 +94,7 @@ interface IErrorReportAction {
// The title of the error report modal
title?: string;
// The element that will be rendered in the modal, either as Markdown or object
renderReport: (report: string | SilkActivityExecutionReportProps) => JSX.Element;
renderReport: (report: string | SilkActivityExecutionReportProps) => React.JSX.Element;
// What version of the report should be handed to the renderReport function, if false SilkActivityExecutionReportProps, if true the Markdown string
renderMarkdown: boolean;
// The function to fetch the error report. It returns undefined if something went wrong.
Expand Down
2 changes: 1 addition & 1 deletion src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export interface StringPreviewContentBlobTogglerProps
* Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
* This allows to add non-string elements to both the full-view content and the pure string content.
*/
noTogglerContentSuffix?: JSX.Element;
noTogglerContentSuffix?: React.JSX.Element;
/**
* If only the first non-empty line should be shown in the preview.
* This will in addition also be shortened according to `previewMaxLength`.
Expand Down
5 changes: 2 additions & 3 deletions src/cmem/react-flow/configuration/graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { NodeProps } from "react-flow-renderer";
import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier";
import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
import { GRAPH_NODE_TYPES } from "./typing";
//import {ComponentType} from "react";
//import {NodeProps} from "react-flow-renderer-lts";

const edgeTypes = {
default: EdgeBezier,
Expand All @@ -16,7 +15,7 @@ const edgeTypes = {
danger: EdgeBezier,
};

const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
const nodeTypes: Record<GRAPH_NODE_TYPES, React.ComponentType<NodeProps>> = {
default: NodeDefault,
graph: NodeDefault,
class: NodeDefault,
Expand Down
5 changes: 2 additions & 3 deletions src/cmem/react-flow/configuration/linking.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
import { StickyNoteNode } from "./../nodes/StickyNoteNode";
import { LINKING_NODE_TYPES } from "./typing";
//import {ComponentType} from "react";
//import {NodeProps} from "react-flow-renderer-lts";
import {NodeProps} from "react-flow-renderer";

const edgeTypes = {
default: EdgeStep,
Expand All @@ -14,7 +13,7 @@ const edgeTypes = {
danger: EdgeStep,
};

const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
const nodeTypes: Record<LINKING_NODE_TYPES, React.ComponentType<NodeProps> /*& ComponentType<NodeProps>*/> = {
default: NodeDefault,
sourcepath: NodeDefault,
targetpath: NodeDefault,
Expand Down
5 changes: 2 additions & 3 deletions src/cmem/react-flow/configuration/workflow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
import { StickyNoteNode } from "./../nodes/StickyNoteNode";
import { WORKFLOW_NODE_TYPES } from "./typing";
//import {ComponentType} from "react";
//import {NodeProps} from "react-flow-renderer-lts";
import {NodeProps} from "react-flow-renderer";

const edgeTypes = {
default: EdgeStep,
Expand All @@ -12,7 +11,7 @@ const edgeTypes = {
danger: EdgeStep,
};

const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ComponentType<NodeProps>> = {
default: NodeDefault,
dataset: NodeDefault,
linking: NodeDefault,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Accordion/AccordionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export interface AccordionItemProps
/**
* header of accordion item
*/
label: string | JSX.Element;
label: string | React.JSX.Element;
/**
* use full available width for content
*/
Expand Down
8 changes: 6 additions & 2 deletions src/components/Application/ApplicationSidebarNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c
import { CLASSPREFIX as eccgui } from "../../configuration/constants";

export interface ApplicationSidebarNavigationProps
extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
React.HTMLAttributes<HTMLElement> {}
extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader"| "onToggle"> {
children: React.ReactNode;
className?: string;
onToggle?: any //todo change later
}

export const ApplicationSidebarNavigation = ({
children,
className = "",
...otherCarbonSideNavProps
}: ApplicationSidebarNavigationProps) => {

return (
<CarbonSideNav
className={`${eccgui}-application__menu__sidebar ${className}`}
Expand Down
8 changes: 7 additions & 1 deletion src/components/Application/ApplicationTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,13 @@ export const ApplicationTitle = ({
<span className={`${eccgui}-application__title--content`}>
{!!depiction && (
<>
<span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
<span className={`${eccgui}-application__title--depiction`}>
{React.isValidElement(depiction)
? depiction
: depiction instanceof HTMLElement
? <>{depiction.outerHTML}</>
: depiction}
</span>
</>
)}
{!!prefix && (
Expand Down
7 changes: 4 additions & 3 deletions src/components/Application/stories/ColorPalettes.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react";
import { render } from "react-dom";
import { loremIpsum } from "react-lorem-ipsum";
import { Meta, StoryFn } from "@storybook/react";
import Color from "color";
import { createRoot } from 'react-dom/client';

import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
import {
Expand Down Expand Up @@ -194,10 +194,11 @@ const ColorPaletteConfigurator = ({
}, 0 as number);
const warningsTarget = document.getElementById("sumWarnings");
if (warningsTarget) {
const warningsRoot = createRoot(warningsTarget)
if (warnings > 0) {
render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
warningsRoot.render(<Badge intent={"warning"}>{warnings}</Badge>);
} else {
render(<></>, warningsTarget);
warningsRoot.render(<></>);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/AutoSuggestion/AutoSuggestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,10 @@ export interface CodeAutocompleteFieldProps {
*/
useTabForCompletions?: boolean;
/** An additional element that is put to the left side of the input field */
leftElement?: JSX.Element | null;
leftElement?: React.JSX.Element | null;
/** An additional element that is put to the right side of the input field
*/
rightElement?: JSX.Element | null;
rightElement?: React.JSX.Element | null;
/** Placeholder tobe shown when no text has been entered, yet. */
placeholder?: string;
/** If the horizontal scrollbars should be shown. */
Expand Down Expand Up @@ -214,7 +214,7 @@ export const CodeAutocompleteField = ({
CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
>(undefined);
const [cm, setCM] = React.useState<EditorView>();
const currentCm = React.useRef<EditorView>();
const currentCm = React.useRef<EditorView>(undefined);
currentCm.current = cm;
const isFocused = React.useRef(false);
const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -361,7 +361,7 @@ export const CodeAutocompleteField = ({
return { fromOffset, toOffset };
};

const inputActionsDisplayed = React.useCallback((node) => {
const inputActionsDisplayed = React.useCallback((node:any) => {
if (!node) return;
const width = node.offsetWidth;
const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
Expand Down
2 changes: 1 addition & 1 deletion src/components/AutoSuggestion/AutoSuggestionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const AutoSuggestionList = ({
}: AutoSuggestionListProps) => {
const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
// Refs of list items
const [refs] = React.useState<React.RefObject<Element>[]>([]);
const [refs] = React.useState<React.RefObject<Element | null>[]>([]);
const dropdownRef = React.useRef<HTMLDivElement>(null);
const generateRef = (index: number) => {
if (!refs[index]) {
Expand Down
27 changes: 9 additions & 18 deletions src/components/AutocompleteField/AutoCompleteField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
query: string,
modifiers: SuggestFieldItemRendererModifierProps,
handleClick: () => any
): string | JSX.Element;
): string | React.JSX.Element;

/** Renders the string that should be displayed in the input field after the item has been selected.
*/
Expand Down Expand Up @@ -122,7 +122,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
query: string,
modifiers: SuggestFieldItemRendererModifierProps,
handleClick: React.MouseEventHandler<HTMLElement>
) => JSX.Element | undefined;
) => React.JSX.Element | undefined;

/** If the new item option will always be shown as the first entry in the suggestion list, else it will be the last entry.
* @default false
Expand Down Expand Up @@ -160,19 +160,10 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
loadMoreResults?: () => Promise<T[] | undefined>;
}

SuggestField.defaultProps = {
autoFocus: false,
disabled: false,
onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
fill: true,
requestErrorPrefix: "",
hasBackDrop: false,
};

/**
* A component with the appearance of an input field that allows to select and optionally create new items.
* It shows suggestions for the entered text from which the user can select any option.
*
*
* It has the following fixed behavior:
*
* - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
Expand All @@ -187,21 +178,21 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
className,
reset,
noResultText,
disabled,
onlyDropdownWithQuery,
disabled = false,
onlyDropdownWithQuery = false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
itemValueSelector,
itemRenderer,
onSearch,
onChange,
initialValue,
autoFocus,
autoFocus = false,
createNewItem,
itemValueRenderer,
resetQueryToValue,
itemValueString,
requestErrorPrefix,
hasBackDrop,
fill,
requestErrorPrefix = "",
hasBackDrop = false,
fill = true,
loadMoreResults,
...otherProps
} = props;
Expand Down
2 changes: 1 addition & 1 deletion src/components/AutocompleteField/autoCompleteFieldUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { SuggestFieldItemRendererModifierProps } from "./interfaces";
* @param iconName Optional icon to show left to the text.
*/
export const createNewItemRendererFactory = (
itemTextRenderer: (query: string) => string | JSX.Element,
itemTextRenderer: (query: string) => string | React.JSX.Element,
iconName?: ValidIconName | React.ReactElement<TestIconProps>
) => {
// Return custom render function
Expand Down
6 changes: 3 additions & 3 deletions src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,19 @@ interface AdditionalButtonProps {
/**
* takes in either a string of text or a react element to display as a tooltip when the button is hovered.
*/
tooltip?: string | JSX.Element | null;
tooltip?: string | React.JSX.Element | null;
/**
* Object with additional properties for the tooltip.
*/
tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
/**
* Icon displayed on button start.
*/
icon?: ValidIconName | JSX.Element;
icon?: ValidIconName | React.JSX.Element;
/**
* Icon displayed on button end.
*/
rightIcon?: ValidIconName | JSX.Element;
rightIcon?: ValidIconName | React.JSX.Element;
}

interface ExtendedButtonProps
Expand Down
2 changes: 1 addition & 1 deletion src/components/Card/CardHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import CardOptions from "./CardOptions";
import CardTitle from "./CardTitle";

export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined;
}

export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {
Expand Down
Loading
Loading