Merge branch 'next' into feature/multisuggest-maxheight-CMEM-5868

CHANGELOG.md

@@ -45,6 +45,54 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `shouldHaveMinimalSetup` optional property that imports codemirror's base minimal configurations.
     -   `additionalExtensions` optional property for additional extensions to customize the editor further.
 
+### Deprecated
+
+-   `<Icon/>` and `<TestIcon/>`
+    -   `description` and `iconTitle`: use `title` as replacement.
+-   `TableRowHeightSize` type: use `TableProps["size"]` directly
+-   `IRenderModifiers` interface: use `SuggestFieldItemRendererModifierProps`
+-   `IElementWidth` type: use `SuggestFieldItemRendererModifierProps["styleWidth"]`
+-   `MultiSelectSelectionProps` interface: use `MultiSuggestFieldSelectionProps`
+-   `MultiSelectProps` interface: use `MultiSuggestFieldProps`
+-   `nodeTypes` and `edgeTypes`
+    -   will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option
+-   `AutoCompleteFieldProps` and `IAutoCompleteFieldProps` interfaces: use `SuggestFieldProps`
+-   `<CodeAutocompleteField/>`
+    -   `AutoSuggestionProps`: use `CodeAutocompleteFieldProps` instead
+    -   we renamed `ISuggestionBase`, `ISuggestionWithReplacementInfo`, `IReplacementResult`, `IPartialAutoCompleteResult`, `IValidationResult` to `CodeAutocompleteFieldSuggestionBase`, `CodeAutocompleteFieldSuggestionWithReplacementInfo`, `CodeAutocompleteFieldReplacementResult`, `CodeAutocompleteFieldPartialAutoCompleteResult`, `CodeAutocompleteFieldValidationResult`
+-   all legacy support components are going to be removed, you need to replace them by activily maintained components
+    -   `<ButtonReplacement/>`: switch to `<Button />`
+    -   `<AffirmativeButtonReplacement/>`: switch to `<Button affirmative />`
+    -   `<DismissiveButtonReplacement/>`: switch to `<Button dismissive />`
+    -   `<DisruptiveButtonReplacement/>`: switch to `<Button disruptive />`
+    -   `<CheckboxReplacement/>`: switch to `<Checkbox />`
+    -   `<RadioButtonReplacement/>`: switch to `<RadioButton />`
+    -   `<TabsReplacement/>`: switch to `<Tabs />`
+    -   `<TextFieldReplacement/>`: switch to `<TextField />`, `<TextArea />`, `<FieldItem />`
+-   `MultiSuggestField.ofType` method:
+    -   instead of `MyMultiSuggest = MultiSuggestField.ofType<MyType>()` use directly `<MultiSuggestField<MyType> {...props} />`
+    -   `MultiSuggestField.ofType` also returns the original BlueprintJS `MultiSelect` element, not our version!
+
+### Migration from v23 to v24
+
+-   upgrade Typescript to v5
+-   upgrade Node to at least v18, see **Changed** section for more info about it
+-   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
+    -   `<GridColumn/>`
+        -   `full`: was deprecated and now removed because it always uses full width if it is the only column and does not have any othe size config
+    -   `<Notification/>`
+        -   `fullWidth`: was deprecated and now removed, use `flexWidth` as replacement
+        -   `iconName`: was deprecated and now removed, use `icon` property
+    -   `<Table/>`
+        -   `size`: use only "small", "medium" or "large" as value
+    -   `<Tag/>`
+        -   `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead
+    -   `IconSized` type: use `CarbonIconType`
+    -   `TimeUnits` type: use `ElapsedDateTimeDisplayUnits`
+    -   `MarkdownParserProps` interface: use `MarkdownProps`
+    -   `elapsedTimeSegmented` function: use `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
+    -   `simplifiedElapsedTime` function: use `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
+
 ## [23.8.0] - 2024-08-19
 
 ### Added
@@ -92,7 +140,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   Element wraps the content that need to be displayed sticky.
 -   `utils`
     -   `getScrollParent`: method to find the scroll parent of an element
--   `<AutoCompleteField />`
+-   `<SuggestField />`
     -   Support loading more results when scrolling to the end of the result list.
 -   `<TextArea />`
     -   `intent` property to set the state, formerly used `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger` properties are now deprecated
@@ -227,7 +275,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ActivityControlWidget />`
     -   added extra line to show timer for execution period
 -   `<ExtendedCodeEditor />`
-    -   replaces `<SingleLineCodeEditor />` to get used for the `<AutoSuggestion />` component
+    -   replaces `<SingleLineCodeEditor />` to get used for the `<CodeAutocompleteField />` component
 -   new icons
     -   `data-string`, `data-url`, `data-date`, `data-time`, `data-datetime`, `data-number`
 
@@ -275,7 +323,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `loose`: can be set to `true` to prevent the box with border on the label component
 -   `<TableExpandHeader />`
     -   `toggleIcon`: optional icon that should be displayed instead of the default ones.
--   `Utilities`
+-   `utils`
     -   `getGlobalVar` and `setGlobalVar`: can be used to manage global variables indepentently from component states. They are stored to the `window` object under a `eccgui` "namespace". Can be used for example to manage globally increased counters. Do not use them if you need to store user session properties or confidential data!
 -   canonical icons for `artefact-chatlog`, `entity-human`, `entity-robot` and `operation-magic`
 
@@ -405,7 +453,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<WorkspaceHeader />`
     -   `IWorkspaceHeaderProps` interface is now deprecated, use `WorkspaceHeaderProps` instead
 -   `<NumericInput />`
-    -   It will be remove because beside the special arrow buttons it does not add any special. Could be done also with `<TextField />` combined with correct `type`.
+    -   It will be removed because beside the special arrow buttons it does not add any special. Could be done also with `<TextField />` combined with correct `type`.
 -   `<Highlighter />`
     -   `HighlighterFunctions` renamed to `highlighterUtils`
     -   `extractSearchWords` moved to `highlighterUtils.extractSearchWords`
@@ -420,7 +468,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `ReactFlow` extensions
     -   `NodeProps`: renamed to `NodeDefaultProps`
     -   `minimapNodeClassName`: moved to `miniMapUtils.nodeClassName`
-    -   `minimapNodeColor`: moved to `miniMapUtils.nodeClassName`
+    -   `minimapNodeColor`: moved to `miniMapUtils.nodeColor`
     -   `nodeUtils`: renamed to `nodeDefaultUtils`
     -   `IHandleProps`: renamed to `NodeContentHandleProps`
     -   `NodeDimensions`: use `NodeContentProps<any>['nodeDimensions']`

README.md

@@ -109,9 +109,11 @@ If necessary you can use [yalc](https://github.com/wclr/yalc) to develop gui ele
 
 1. Install yalc globally via npm or yarn
 2. Checkout [@eccenca/gui-elements](https://github.com/eccenca/gui-elements)
-3. Inside gui elements folder: `yalc publish --push`
-4. Inside your applications folder: `yalc link @eccenca/gui-elements`
-5. After updates to the gui elements: `yarn build:all && yalc push`
+3. Inside gui elements folder: `yarn build:all && yalc publish --push`
+4. Inside your applications folder: `yalc add @eccenca/gui-elements`
+5. After updates to the gui elements rebuild and update the applications yalc folder: `yarn build:all && yalc publish --push` (you usually are not required to fire another `yalc add` in your applications folder)
+
+After you tested the GUI elements package locally you can Clean up your applications folder by `yalc remove --all && git checkout -- pakage.json yarn.lock`.
 
 ### Process for pull requests and publishing releases
 

src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -1,5 +1,4 @@
-// @deprecated use `SilkActivityStatusProps`
-export interface IActivityStatus {
+export interface SilkActivityStatusProps {
     // Optional project ID
     project?: string;
     // Optional task ID
@@ -23,7 +22,7 @@ export interface IActivityStatus {
     // If the activity has been cancelled
     cancelled: boolean;
     // The concrete status ID
-    concreteStatus: ConcreteActivityStatus;
+    concreteStatus: SilkActivityStatusConcrete;
     // If there was an error, this contains the exception message
     exceptionMessage?: string | null;
     // The runtime in ms
@@ -33,15 +32,12 @@ export interface IActivityStatus {
     // The queue time spent waiting before workflow is executed as date time, e.g. "2021-09-07T09:34:53.153Z"
     queueTime?: string;
 }
-export type SilkActivityStatusProps = IActivityStatus;
 
-// @deprecated use `SilkActivityStatusConcrete`
-export type ConcreteActivityStatus =
+export type SilkActivityStatusConcrete =
     | "Cancelled"
     | "Failed"
     | "Successful"
     | "Not executed"
     | "Running"
     | "Waiting"
     | "Canceling";
-export type SilkActivityStatusConcrete = ConcreteActivityStatus;

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -83,9 +83,6 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     timerExecutionMsg?: JSX.Element | null;
 }
 
-// @deprecated use `ActivityControlWidgetProps`
-export type IActivityControlProps = ActivityControlWidgetProps;
-
 interface IActivityContextMenu extends TestableComponent {
     // Tooltip for the context menu
     tooltip?: string;
@@ -106,9 +103,6 @@ export interface ActivityControlWidgetAction extends TestableComponent {
     hasStateWarning?: boolean;
 }
 
-// @deprecated use `ActivityControlWidgetAction`
-export type IActivityAction = ActivityControlWidgetAction;
-
 interface IActivityMenuAction extends ActivityControlWidgetAction {
     // Optional link
     href?: string;

src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -4,7 +4,7 @@ import { Intent } from "@blueprintjs/core/src/common/intent";
 import { Icon, Spacing } from "../../";
 import { IntentTypes } from "../../common/Intent";
 import { TestableComponent } from "../../components/interfaces";
-import { ElapsedDateTimeDisplay, TimeUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
+import { ElapsedDateTimeDisplay, ElapsedDateTimeDisplayUnits } from "../DateTimeDisplay/ElapsedDateTimeDisplay";
 
 import { SilkActivityStatusConcrete, SilkActivityStatusProps } from "./ActivityControlTypes";
 import { ActivityControlWidget, ActivityControlWidgetProps } from "./ActivityControlWidget";
@@ -42,21 +42,21 @@ export interface SilkActivityControlProps extends TestableComponent {
         action: string | (() => any);
     };
     // DI activity actions
-    executeActivityAction: (action: ActivityAction) => void;
+    executeActivityAction: (action: SilkActivityControlAction) => void;
     /** If specified, the activity control will offer a "Start prioritized" button while the activity is in the waiting state.
      * When the button is clicked it should start the activity via the startPrioritized endpoint.
      */
     executePrioritized?: () => void;
     // Get the translation for a specific key
-    translate: (key: ActivityControlTranslationKeys) => string;
+    translate: (key: SilkActivityControlTranslationKeys) => string;
     // When defined the elapsed time since the last start is displayed next to the label
     elapsedTimeOfLastStart?: {
         // Prefix before the elapsed time
         prefix?: string;
         // Suffix after the elapsed time
         suffix?: string;
         // The translation of the time units
-        translate: (unit: TimeUnits) => string;
+        translate: (unit: ElapsedDateTimeDisplayUnits) => string;
     };
     // configure how the widget is displayed
     layoutConfig?: SilkActivityControlLayoutProps;
@@ -65,7 +65,7 @@ export interface SilkActivityControlProps extends TestableComponent {
     /**
      * The translation of the time units
      */
-    translateUnits?: (unit: TimeUnits) => string;
+    translateUnits?: (unit: ElapsedDateTimeDisplayUnits) => string;
 }
 
 export interface SilkActivityControlLayoutProps {
@@ -83,9 +83,6 @@ export interface SilkActivityControlLayoutProps {
     labelWrapper?: JSX.Element;
 }
 
-// @deprecated use `SilkActivityControlLayoutProps`
-export type IActivityControlLayoutProps = SilkActivityControlLayoutProps;
-
 const defaultLayout: SilkActivityControlLayoutProps = {
     small: false,
     border: false,
@@ -131,9 +128,6 @@ export interface SilkActivityExecutionReportProps {
     stackTrace?: IStacktrace;
 }
 
-// @deprecated use `SilkActivityExecutionReportProps`
-export type IActivityExecutionReport = SilkActivityExecutionReportProps;
-
 interface IStacktrace {
     // The final error message of the stacktrace
     errorMessage?: string;
@@ -143,17 +137,13 @@ interface IStacktrace {
     cause?: IStacktrace;
 }
 
-// @deprecated use `SilkActivityControlTranslationKeys`
-export type ActivityControlTranslationKeys =
+export type SilkActivityControlTranslationKeys =
     | "startActivity"
     | "stopActivity"
     | "reloadActivity"
     | "showErrorReport"
     | "startPrioritized";
-export type SilkActivityControlTranslationKeys = ActivityControlTranslationKeys;
-// @deprecated use `SilkActivityControlAction`
-export type ActivityAction = "start" | "cancel" | "restart";
-export type SilkActivityControlAction = ActivityAction;
+export type SilkActivityControlAction = "start" | "cancel" | "restart";
 
 /** Silk activity control. */
 export function SilkActivityControl(props: SilkActivityControlProps) {
@@ -178,7 +168,7 @@ export function useSilkActivityControl({
     layoutConfig = defaultLayout,
     hideMessageOnStatus = () => false,
     executePrioritized,
-    translateUnits = (unit: TimeUnits) => unit.toString(),
+    translateUnits = (unit: ElapsedDateTimeDisplayUnits) => unit.toString(),
     ...props
 }: SilkActivityControlProps) {
     const [activityStatus, setActivityStatus] = useState<SilkActivityStatusProps | undefined>(initialStatus);

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -74,9 +74,8 @@ const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
 
 /**
  * Takes the first non-empty line from a preview string.
- * @deprecated use `stringPreviewContentBlobTogglerUtils.firstNonEmptyLine`
  */
-export function firstNonEmptyLine(preview: string) {
+function firstNonEmptyLine(preview: string) {
     const previewString = preview.trim();
     const result = newLineRegex.exec(previewString);
     return result !== null ? previewString.substr(0, result.index) : previewString;

src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -2,9 +2,15 @@ import React, { useEffect, useState } from "react";
 
 import { TestableComponent } from "../../components/interfaces";
 
-// @deprecated use `ElapsedDateTimeDisplayUnits`
-export type TimeUnits = "second" | "seconds" | "minute" | "minutes" | "hour" | "hours" | "day" | "days";
-export type ElapsedDateTimeDisplayUnits = TimeUnits;
+export type ElapsedDateTimeDisplayUnits =
+    | "second"
+    | "seconds"
+    | "minute"
+    | "minutes"
+    | "hour"
+    | "hours"
+    | "day"
+    | "days";
 
 export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC)
@@ -28,9 +34,8 @@ const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
 
 /**
  * Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
- * @deprecated moved to `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
  */
-export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
+const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
     // In how many segments the time should be split, i.e. hours, minutes, seconds
     const segmentSteps = [24, 60, 60];
     // First convert to time in seconds
@@ -47,9 +52,8 @@ export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
 
 /**
  * Returns the simplified elapsed time
- * @deprecated moved to `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
  */
-export const simplifiedElapsedTime = (
+const simplifiedElapsedTime = (
     timeSegments: number[],
     translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string,
     includeSeconds = false

src/cmem/DateTimeDisplay/tests/ElapsedDateTimeDisplay.test.tsx

@@ -1,12 +1,17 @@
-import { elapsedTimeSegmented, simplifiedElapsedTime, TimeUnits } from "../ElapsedDateTimeDisplay";
+import { ElapsedDateTimeDisplayUnits, elapsedDateTimeDisplayUtils } from "../../../../index";
 
 describe("Elapsed time component", () => {
     const checkMS = (timeInMs: number, expectedString: string) =>
-        expect(elapsedTimeSegmented(timeInMs).join(":")).toBe(expectedString);
+        expect(elapsedDateTimeDisplayUtils.elapsedTimeSegmented(timeInMs).join(":")).toBe(expectedString);
     const checkS = (timeInSeconds: number, expectedString: string) => checkMS(timeInSeconds * 1000, expectedString);
-    const translate = (timeUnit: TimeUnits) => timeUnit;
+    const translate = (timeUnit: ElapsedDateTimeDisplayUnits) => timeUnit;
     const checkHumanReadable = (timeInSeconds: number, expectedString: string) =>
-        expect(simplifiedElapsedTime(elapsedTimeSegmented(timeInSeconds * 1000), translate)).toBe(expectedString);
+        expect(
+            elapsedDateTimeDisplayUtils.simplifiedElapsedTime(
+                elapsedDateTimeDisplayUtils.elapsedTimeSegmented(timeInSeconds * 1000),
+                translate
+            )
+        ).toBe(expectedString);
     it("should segment the time", () => {
         checkMS(2123, "0:0:0:2");
         checkS(2, "0:0:0:2");

src/cmem/markdown/Markdown.tsx

@@ -42,8 +42,6 @@ export interface MarkdownProps extends TestableComponent {
      */
     linkTargetName?: false | string;
 }
-/* @deprecated use `MarkdownProps` */
-export type MarkdownParserProps = MarkdownProps;
 
 const configDefault = {
     /*

src/cmem/markdown/highlightSearchWords.test.ts

@@ -1,12 +1,12 @@
 import { Element, Parent, Root, Text } from "hast";
 import { VFile } from "vfile";
 
-import highlightSearchWordsPluginFactory from "./highlightSearchWords";
+import { markdownUtils } from "../../../index";
 
 describe("Highlight search words reHype plugin", () => {
     it("should highlight search words", () => {
         const searchQuery = "abc xyz";
-        const highlightSearchWordsPlugin = highlightSearchWordsPluginFactory(searchQuery);
+        const highlightSearchWordsPlugin = markdownUtils.highlightSearchWordsPluginFactory(searchQuery);
         const highlightSearchWordTransformer = highlightSearchWordsPlugin();
         const textNode = (text: string): Text => ({ type: "text", value: text });
         const markNode = (text: string): Element => ({ type: "element", tagName: "mark", children: [textNode(text)] });
@@ -22,6 +22,7 @@ describe("Highlight search words reHype plugin", () => {
                 ],
             },
             new VFile(),
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
             () => {}
         );
         const rootChildren = (result as Root).children;

src/cmem/markdown/highlightSearchWords.ts

@@ -4,7 +4,10 @@ import { Node } from "unist";
 
 import { highlighterUtils } from "../../components/Typography/Highlighter";
 
-const highlightSearchWordsPluginFactoryFn = (searchQuery: string | undefined) => {
+/**
+ * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
+ */
+const highlightSearchWordsPluginFactory = (searchQuery: string | undefined) => {
     const searchStringParts = searchQuery ? highlighterUtils.extractSearchWords(searchQuery) : [];
     const multiWordRegex = highlighterUtils.createMultiWordRegex(searchStringParts);
     const createTextNode = (text: string): Text => ({ type: "text", value: text });
@@ -65,14 +68,6 @@ const highlightSearchWordsPluginFactoryFn = (searchQuery: string | undefined) =>
     };
 };
 
-/**
- * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
- * @deprecated moved to `markdownUtils.highlightSearchWordsPluginFactory`
- */
-const highlightSearchWordsPluginFactory = highlightSearchWordsPluginFactoryFn;
-
-export default highlightSearchWordsPluginFactory;
-
 export const markdownUtils = {
-    highlightSearchWordsPluginFactory: highlightSearchWordsPluginFactoryFn,
+    highlightSearchWordsPluginFactory,
 };