feat(VariantManagement): add onManageViewsCancel and onSaveViewCancel events

packages/main/src/components/VariantManagement/ManageViewsDialog.tsx

@@ -1,6 +1,6 @@
 import { isPhone, isTablet } from '@ui5/webcomponents-base/dist/Device.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
-import { ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
 import type { MouseEventHandler, ReactNode } from 'react';
 import React, { Children, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -22,11 +22,13 @@ import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
 import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
 import { Dialog } from '../../webComponents/Dialog/index.js';
+import type { InputDomRef } from '../../webComponents/index.js';
 import { Icon, Input } from '../../webComponents/index.js';
 import { Table } from '../../webComponents/Table/index.js';
 import { TableColumn } from '../../webComponents/TableColumn/index.js';
 import { FlexBox } from '../FlexBox/index.js';
 import { ManageViewsTableRows } from './ManageViewsTableRows.js';
+import type { VariantManagementPropTypes } from './types.js';
 import type { VariantItemPropTypes } from './VariantItem.js';
 
 const _popupDefaultHeaderHeight = `var(${cssVarVersionInfoPrefix}popup_default_header_height)`;
@@ -83,6 +85,7 @@ interface ManageViewsDialogPropTypes {
   variantNames: string[];
   portalContainer: Element;
   showOnlyFavorites?: boolean;
+  onManageViewsCancel?: VariantManagementPropTypes['onManageViewsCancel'];
 }
 
 export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
@@ -96,7 +99,8 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
     showCreatedBy,
     variantNames,
     portalContainer,
-    showOnlyFavorites
+    showOnlyFavorites,
+    onManageViewsCancel
   } = props;
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const cancelText = i18nBundle.getText(CANCEL);
@@ -110,7 +114,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   const searchText = i18nBundle.getText(SEARCH);
 
   const [changedVariantNames, setChangedVariantNames] = useState(new Map());
-  const [invalidVariants, setInvalidVariants] = useState<Record<string, HTMLInputElement>>({});
+  const [invalidVariants, setInvalidVariants] = useState<Record<string, InputDomRef & { isInvalid?: boolean }>>({});
 
   const classes = useStyles();
 
@@ -204,6 +208,31 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
     }
   };
 
+  const handleClose = (e) => {
+    if (e.detail.escPressed) {
+      handleCancel(e);
+    } else {
+      onAfterClose(e);
+    }
+  };
+
+  const handleCancel = (e) => {
+    if (typeof onManageViewsCancel === 'function') {
+      onManageViewsCancel(
+        enrichEventWithDetails(e, {
+          invalidVariants
+        })
+      );
+    }
+    setInvalidVariants((prev) => {
+      Object.values(prev).forEach((item) => {
+        item.isInvalid = false;
+      });
+      return {};
+    });
+    onAfterClose(e);
+  };
+
   const handleSearchInput = (e) => {
     const lowerCaseVal = e.target.value.toLowerCase();
     setFilteredProps(
@@ -225,6 +254,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
       className={classes.manageViewsDialog}
       data-component-name="VariantManagementManageViewsDialog"
       onAfterClose={onAfterClose}
+      onBeforeClose={handleClose}
       headerText={manageViewsText}
       header={
         <FlexBox direction={FlexBoxDirection.Column} style={{ width: '100%' }} alignItems={FlexBoxAlignItems.Center}>
@@ -247,7 +277,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
               <Button design={ButtonDesign.Emphasized} onClick={handleSave}>
                 {saveText}
               </Button>
-              <Button design={ButtonDesign.Transparent} onClick={onAfterClose}>
+              <Button design={ButtonDesign.Transparent} onClick={handleCancel}>
                 {cancelText}
               </Button>
             </>

packages/main/src/components/VariantManagement/SaveViewDialog.tsx

@@ -1,4 +1,4 @@
-import { useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -22,6 +22,7 @@ import type { SelectedVariant } from '../../internal/VariantManagementContext.js
 import type { ButtonDomRef, DialogDomRef, InputPropTypes } from '../../webComponents/index.js';
 import { Bar, Button, CheckBox, Dialog, Input, Label } from '../../webComponents/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import type { VariantManagementPropTypes } from './types.js';
 
 const useStyles = createUseStyles(
   {
@@ -47,6 +48,7 @@ interface SaveViewDialogPropTypes {
   variantNames: string[];
   portalContainer: Element;
   saveViewInputProps?: Omit<InputPropTypes, 'value'>;
+  onSaveViewCancel?: VariantManagementPropTypes['onSaveViewCancel'];
 }
 
 export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
@@ -59,7 +61,8 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
     showSetAsDefault,
     variantNames,
     portalContainer,
-    saveViewInputProps
+    saveViewInputProps,
+    onSaveViewCancel
   } = props;
   const saveViewDialogRef = useRef<DialogDomRef>(null);
   const inputRef = useRef(undefined);
@@ -117,7 +120,29 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
     }
   };
 
-  const handleCancel = () => {
+  const handleClose = (e) => {
+    if (e.detail.escPressed) {
+      handleCancel(e);
+    } else {
+      onAfterClose(e);
+    }
+  };
+
+  const handleCancel = (e) => {
+    if (typeof onSaveViewCancel === 'function') {
+      onSaveViewCancel(
+        enrichEventWithDetails(e, {
+          ...selectedVariant,
+          children: variantName,
+          isDefault,
+          global: isPublic,
+          applyAutomatically,
+          isInvalid
+        })
+      );
+    }
+    setIsInvalid(false);
+    inputRef.current.isInvalid = false;
     saveViewDialogRef.current.close();
   };
 
@@ -143,6 +168,7 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
       ref={saveViewDialogRef}
       headerText={headingText}
       onAfterClose={onAfterClose}
+      onBeforeClose={handleClose}
       footer={
         <Bar
           design={BarDesign.Footer}

packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

@@ -105,6 +105,17 @@ describe('VariantManagement', () => {
     cy.get('[ui5-dialog]').should('be.visible');
     cy.findByTestId('12chars').typeIntoUi5Input('A');
     cy.findByTestId('12chars').should('have.attr', 'value-state', 'Error');
+    cy.realPress('Tab');
+    cy.realPress('Escape');
+    cy.findByText('Manage').click();
+    cy.findByTestId('12chars').should('have.attr', 'value-state', 'None');
+    cy.findByTestId('12chars').typeIntoUi5Input('A');
+    cy.findByTestId('12chars').should('have.attr', 'value-state', 'Error');
+    cy.findByText('Cancel').click();
+    cy.findByText('Manage').click();
+    cy.findByTestId('12chars').should('have.attr', 'value-state', 'None');
+    cy.findByTestId('12chars').typeIntoUi5Input('A');
+    cy.findByTestId('12chars').should('have.attr', 'value-state', 'Error');
     cy.findByText('Save').click();
     cy.get('[ui5-dialog]').should('be.visible');
     cy.findByTestId('12chars').typeIntoUi5Input('{backspace}');
@@ -123,6 +134,19 @@ describe('VariantManagement', () => {
     cy.get('[ui5-dialog]').should('be.visible');
     cy.findByTestId('alphanumeric').typeIntoUi5Input('$');
     cy.findByTestId('alphanumeric').should('have.attr', 'value-state', 'Error');
+    cy.realPress('Tab');
+    cy.realPress('Escape');
+    cy.contains('Only alphanumeric chars in Save View input').click();
+    cy.findByText('Save As').click();
+    cy.findByTestId('alphanumeric').should('have.attr', 'value-state', 'None');
+    cy.findByTestId('alphanumeric').typeIntoUi5Input('$');
+    cy.findByTestId('alphanumeric').should('have.attr', 'value-state', 'Error');
+    cy.findByText('Cancel').click();
+    cy.contains('Only alphanumeric chars in Save View input').click();
+    cy.findByText('Save As').click();
+    cy.findByTestId('alphanumeric').should('have.attr', 'value-state', 'None');
+    cy.findByTestId('alphanumeric').typeIntoUi5Input('$');
+    cy.findByTestId('alphanumeric').should('have.attr', 'value-state', 'Error');
     cy.findByText('Save').click();
     cy.get('[ui5-dialog]').should('be.visible');
     cy.focused().should('have.attr', 'value-state', 'Error');

packages/main/src/components/VariantManagement/VariantManagement.mdx

@@ -39,13 +39,13 @@ These props accept props of the `Input` component with which you are able to ove
 <summary>Show Code</summary>
 
 ```jsx
-export const VariantManagementWithCustomValidation = () => {
+const VariantManagementWithCustomValidation = ({ selectedByIndex = 1 }) => {
   const [valueStateSaveView, setValueStateSaveView] = useState(undefined);
-  const [customSaveViewVariantText, setCustomSaveViewVariantText] = useState(
-    'Only alphanumeric chars in Save View input'
-  );
   const [valueStateManageViews, setValueStateManageViews] = useState(undefined);
-  const [customManageViewsVariantText, setCustomManageViewsVariantText] = useState('Max 12 chars');
+  const [values, setValues] = useState({
+    1: 'Only alphanumeric chars in Save View input',
+    2: 'Max 12 chars'
+  });
 
   const handleSaveViewInput = (e) => {
     // only allow alphanumeric and space characters
@@ -60,7 +60,10 @@ export const VariantManagementWithCustomValidation = () => {
     }
   };
   const handleSaveAs = (e) => {
-    setCustomSaveViewVariantText(e.detail.children);
+    setValues((prev) => ({
+      ...prev,
+      [e.detail['data-id']]: e.detail.children
+    }));
   };
 
   const handleManageViewInput = (e) => {
@@ -79,33 +82,52 @@ export const VariantManagementWithCustomValidation = () => {
     // if is custom manage view variant and is not in error state, set children to new value
     const isCustomManageViewsItem = e.detail.updatedVariants.find((item) => item['data-custom-manage-views']);
     if (!valueStateManageViews && isCustomManageViewsItem) {
-      setCustomManageViewsVariantText(isCustomManageViewsItem.children);
+      setValues((prev) => ({
+        ...prev,
+        [isCustomManageViewsItem['data-id']]: isCustomManageViewsItem.children
+      }));
     }
   };
+  // reset value-state if user closes the dialogs without saving (cancel click or ESC press)
+  const handleManageViewsCancel = () => {
+    setValueStateManageViews(undefined);
+  };
+  const handleSaveViewCancel = () => {
+    setValueStateSaveView(undefined);
+  };
   return (
-    <VariantManagement onSaveAs={handleSaveAs} onSaveManageViews={handleSaveManageViews}>
+    <VariantManagement
+      onSaveAs={handleSaveAs}
+      onSaveManageViews={handleSaveManageViews}
+      onManageViewsCancel={handleManageViewsCancel}
+      onSaveViewCancel={handleSaveViewCancel}
+    >
       <VariantItem
-        data-custom-save-view
+        data-id={1}
+        selected={selectedByIndex === 0}
         saveViewInputProps={{
           valueState: valueStateSaveView,
           valueStateMessage: valueStateSaveView ? (
             <div>Only alphanumeric and space characters allowed!</div>
           ) : undefined,
-          onInput: handleSaveViewInput
+          onInput: handleSaveViewInput,
+          'data-testid': 'alphanumeric'
         }}
       >
-        {customSaveViewVariantText}
+        {values[1]}
       </VariantItem>
       <VariantItem
         data-custom-manage-views
-        selected
+        data-id={2}
+        selected={selectedByIndex === 1}
         manageViewsInputProps={{
           valueState: valueStateManageViews,
           valueStateMessage: valueStateManageViews ? <div>No more than 12 characters allowed!</div> : undefined,
-          onInput: handleManageViewInput
+          onInput: handleManageViewInput,
+          'data-testid': '12chars'
         }}
       >
-        {customManageViewsVariantText}
+        {values[2]}
       </VariantItem>
     </VariantManagement>
   );

packages/main/src/components/VariantManagement/VariantManagement.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { useEffect, useReducer, useRef, useState } from 'react';
 import { PopoverPlacementType, TitleLevel, ValueState } from '../../enums/index.js';
 import { DatePicker } from '../../webComponents/DatePicker/index.js';
 import { MultiComboBox } from '../../webComponents/MultiComboBox/index.js';
@@ -65,11 +65,8 @@ export const Default: Story = {
 export const WithCustomValidation: Story = {
   render: ({ selectedByIndex = 1 }: any) => {
     const [valueStateSaveView, setValueStateSaveView] = useState(undefined);
-    const [customSaveViewVariantText, setCustomSaveViewVariantText] = useState(
-      'Only alphanumeric chars in Save View input'
-    );
     const [valueStateManageViews, setValueStateManageViews] = useState(undefined);
-    const [customManageViewsVariantText, setCustomManageViewsVariantText] = useState('Max 12 chars');
+    const [values, setValues] = useState({ 1: 'Only alphanumeric chars in Save View input', 2: 'Max 12 chars' });
 
     const handleSaveViewInput = (e) => {
       // only allow alphanumeric and space characters
@@ -84,7 +81,7 @@ export const WithCustomValidation: Story = {
       }
     };
     const handleSaveAs = (e) => {
-      setCustomSaveViewVariantText(e.detail.children);
+      setValues((prev) => ({ ...prev, [e.detail['data-id']]: e.detail.children }));
     };
 
     const handleManageViewInput = (e) => {
@@ -103,13 +100,25 @@ export const WithCustomValidation: Story = {
       // if is custom manage view variant and is not in error state, set children to new value
       const isCustomManageViewsItem = e.detail.updatedVariants.find((item) => item['data-custom-manage-views']);
       if (!valueStateManageViews && isCustomManageViewsItem) {
-        setCustomManageViewsVariantText(isCustomManageViewsItem.children);
+        setValues((prev) => ({ ...prev, [isCustomManageViewsItem['data-id']]: isCustomManageViewsItem.children }));
       }
     };
+    // reset value-state if user closes the dialogs without saving (cancel click or ESC press)
+    const handleManageViewsCancel = () => {
+      setValueStateManageViews(undefined);
+    };
+    const handleSaveViewCancel = () => {
+      setValueStateSaveView(undefined);
+    };
     return (
-      <VariantManagement onSaveAs={handleSaveAs} onSaveManageViews={handleSaveManageViews}>
+      <VariantManagement
+        onSaveAs={handleSaveAs}
+        onSaveManageViews={handleSaveManageViews}
+        onManageViewsCancel={handleManageViewsCancel}
+        onSaveViewCancel={handleSaveViewCancel}
+      >
         <VariantItem
-          data-custom-save-view
+          data-id={1}
           selected={selectedByIndex === 0}
           saveViewInputProps={{
             valueState: valueStateSaveView,
@@ -121,10 +130,11 @@ export const WithCustomValidation: Story = {
             'data-testid': 'alphanumeric'
           }}
         >
-          {customSaveViewVariantText}
+          {values[1]}
         </VariantItem>
         <VariantItem
           data-custom-manage-views
+          data-id={2}
           selected={selectedByIndex === 1}
           manageViewsInputProps={{
             valueState: valueStateManageViews,
@@ -134,7 +144,7 @@ export const WithCustomValidation: Story = {
             'data-testid': '12chars'
           }}
         >
-          {customManageViewsVariantText}
+          {values[2]}
         </VariantItem>
       </VariantManagement>
     );