Merge remote-tracking branch 'origin/develop' into fix/uriPatternEditor-CMEM-6461

Author: haschek

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+- Added custom icon for "Concatenate to file" operator (CMEM-6476).
 -   `<ContentGroup />` component
     -   Manage display of a grouped content section.
     -   Add info, actions and context annotations by using its properties.
@@ -23,6 +24,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<NodeContent />`
     -   `resizeDirections` to specifiy the axis that can be used to resize the node
     -   `resizeMaxDimensions` to add maximum values for resizing height/width
+-   `<CardActions />`
+    -   `noWrap` property to display them without wrapping its children on multiple lines
+-   `<SimpleDialog />`
+    -   `actionsProps` property to forward `CardActions` properties, e.g. `noWrap`
+-   `<MenutItem />`
+    -   `tooltip` property to dislay tooltip on menu item label
 
 ### Fixed
 

src/components/Card/CardActions.tsx

@@ -8,6 +8,10 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
      * Mainly used for cards used as modals (dialogs).
      */
     inverseDirection?: boolean;
+    /**
+     * Set footer to display its children on only one line.
+     */
+    noWrap?: boolean;
 }
 
 /**
@@ -18,6 +22,7 @@ export const CardActions = ({
     children,
     className = "",
     inverseDirection = false,
+    noWrap = false,
     ...otherProps
 }: CardActionsProps) => {
     return (
@@ -26,6 +31,7 @@ export const CardActions = ({
             className={
                 `${eccgui}-card__actions` +
                 (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : "") +
+                (noWrap ? ` ${eccgui}-card__actions--nowrap` : "") +
                 (className ? " " + className : "")
             }
         >

src/components/Card/card.scss

@@ -236,6 +236,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-direction: row-reverse;
 }
 
+.#{$eccgui}-card__actions--nowrap {
+    flex-wrap: nowrap;
+}
+
 .#{$eccgui}-card__actions__aux {
     display: flex;
     flex-flow: row wrap;
@@ -272,4 +276,15 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     .#{$eccgui}-card__actions--inversedirection > & {
         justify-content: flex-start;
     }
+
+    .#{$eccgui}-card__actions--nowrap > & {
+        flex-shrink: 5;
+        flex-wrap: nowrap;
+        min-width: 0;
+
+        & > * {
+            flex-shrink: 10;
+            min-width: 0;
+        }
+    }
 }

src/components/Dialog/SimpleDialog.tsx

@@ -5,7 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import IconButton from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
+import { Card, CardActions, CardActionsProps, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 
@@ -45,6 +45,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
     startInFullScreenMode?: boolean;
+    /** Forward properties to the actions footer component. */
+    actionsProps?: Omit<CardActionsProps, "inverseDirection">;
 }
 
 /**
@@ -66,6 +68,7 @@ export const SimpleDialog = ({
     showFullScreenToggler = false,
     startInFullScreenMode = false,
     size,
+    actionsProps,
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
@@ -112,7 +115,11 @@ export const SimpleDialog = ({
                     <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions inverseDirection className={intentClassName}>
+                    <CardActions
+                        {...actionsProps}
+                        inverseDirection
+                        className={`${actionsProps?.className ?? ""} ${intentClassName}`}
+                    >
                         {actions}
                     </CardActions>
                 )}

src/components/Icon/canonicalIconNames.tsx

@@ -19,6 +19,7 @@ const canonicalIcons = {
     "artefact-commit": icons.Commit,
     "artefact-task-deleteprojectfiles": icons.TrashCan,
     "artefact-task-downloadfile": icons.CloudDownload,
+    "artefact-task-concatenatetofile": icons.DocumentExport,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,

src/components/Menu/MenuItem.tsx

@@ -5,6 +5,7 @@ import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 
 import { TestIconProps } from "./../Icon/TestIcon";
 
@@ -15,16 +16,41 @@ export interface MenuItemProps
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+    /**
+     * Submenu.
+     */
     children?: React.ReactNode;
+    /**
+     * Tooltip, but only added to the label, not to the full menu item.
+     */
+    tooltip?: string | JSX.Element;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
+export const MenuItem = ({
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    text,
+    tooltip,
+    ...restProps
+}: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
+            text={
+                tooltip ? (
+                    <Tooltip content={tooltip} fill>
+                        {text}
+                    </Tooltip>
+                ) : (
+                    text
+                )
+            }
             href={href}
             onClick={(e: React.MouseEvent<HTMLElement>) =>
                 openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)

yarn.lock

@@ -11218,10 +11218,10 @@ range-parser@^1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-re-resizable@^6.10.1:
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.1.tgz#d062ca50bbc4ec7ae940f756cba36479e9015bc5"
-  integrity sha512-m33nSWRH57UZLmep5M/LatkZ2NRqimVD/bOOpvymw5Zf33+eTSEixsUugscOZzAtK0/nx+OSuOf8VbKJx/4ptw==
+re-resizable@^6.10.3:
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.11.2.tgz#2e8f7119ca3881d5b5aea0ffa014a80e5c1252b3"
+  integrity sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A==
 
 react-app-polyfill@^3.0.0:
   version "3.0.0"