6429818523

Committed 06 Oct 2023 09:19AM CUT coverage: 87.716% (-0.1%) from 87.829%

Build # 6429818523

Build Type

Pull #5123

github

Committed by

web-flow

Commit Message

Merge 9bbf9066c into 6a3247e3e

Pull Request Pull Request #5123: feat(VariantManagement): add `onManageViewsCancel` and `onSaveViewCancel` events

Run Details

2771 of 3724 branches covered (0.0%)

18 of 22 new or added lines in 2 files covered. (81.82%)

5 existing lines in 1 file now uncovered.

5084 of 5796 relevant lines covered (87.72%)

16286.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

85.92

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

import { isPhone, isTablet } from '@ui5/webcomponents-base/dist/Device.js';
import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
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';
import { createUseStyles } from 'react-jss';
import { BarDesign, FlexBoxAlignItems, FlexBoxDirection, ButtonDesign } from '../../enums/index.js';
import {
  APPLY_AUTOMATICALLY,
  CANCEL,
  CREATED_BY,
  DEFAULT,
  MANAGE_VIEWS,
  SAVE,
  SHARING,
  VIEW,
  SEARCH
} from '../../i18n/i18n-defaults.js';
import { useCanRenderPortal } from '../../internal/ssr.js';
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)`;
const _popupHeaderFontFamily = `var(${cssVarVersionInfoPrefix}popup_header_font_family)`;

const styles = {
  manageViewsDialog: {
    width: isPhone() || isTablet() ? '100%' : '70vw',
    '&::part(content), &::part(header)': {
      padding: 0
    },
    '&::part(footer)': {
      padding: 0,
      borderBlockStart: 'none'
    }
  },
  headerText: {
    margin: 0,
    textAlign: 'center',
    alignSelf: 'start',
    minHeight: _popupDefaultHeaderHeight,
    maxHeight: _popupDefaultHeaderHeight,
    lineHeight: _popupDefaultHeaderHeight,
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    maxWidth: '100%',
    display: 'inline-block',
    paddingInlineStart: '1rem',
    fontFamily: `"72override",${_popupHeaderFontFamily}`,
    fontSize: '1rem'
  },
  search: { width: 'calc(100% - 2rem)', marginBlockEnd: '0.5rem' },
  inputIcon: { cursor: 'pointer', color: ThemingParameters.sapContent_IconColor }
};

const useStyles = createUseStyles(styles, { name: 'ManageViewsDialog' });

interface ManageViewsDialogPropTypes {
  children: ReactNode | ReactNode[];
  onAfterClose: any;
  handleSaveManageViews: (
    e: MouseEventHandler<HTMLElement>,
    payload: {
      updatedRows: any;
      defaultView: string;
      deletedRows: any;
    }
  ) => void;
  showShare: boolean;
  showApplyAutomatically: boolean;
  showSetAsDefault: boolean;
  showCreatedBy: boolean;
  variantNames: string[];
  portalContainer: Element;
  showOnlyFavorites?: boolean;
  onManageViewsCancel?: VariantManagementPropTypes['onManageViewsCancel'];
}

export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
  const {
    children,
    onAfterClose,
    handleSaveManageViews,
    showShare,
    showApplyAutomatically,
    showSetAsDefault,
    showCreatedBy,
    variantNames,
    portalContainer,
    showOnlyFavorites,
    onManageViewsCancel
  } = props;
  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
  const cancelText = i18nBundle.getText(CANCEL);
  const saveText = i18nBundle.getText(SAVE);
  const viewHeaderText = i18nBundle.getText(VIEW);
  const sharingHeaderText = i18nBundle.getText(SHARING);
  const defaultHeaderText = i18nBundle.getText(DEFAULT);
  const applyAutomaticallyHeaderText = i18nBundle.getText(APPLY_AUTOMATICALLY);
  const createdByHeaderText = i18nBundle.getText(CREATED_BY);
  const manageViewsText = i18nBundle.getText(MANAGE_VIEWS);
  const searchText = i18nBundle.getText(SEARCH);

  const [changedVariantNames, setChangedVariantNames] = useState(new Map());
  const [invalidVariants, setInvalidVariants] = useState<Record<string, InputDomRef & { isInvalid?: boolean }>>({});

  const classes = useStyles();

  const columns = (
    <>
      {showOnlyFavorites && <TableColumn key="favorite-variant-item" />}
      <TableColumn>{viewHeaderText}</TableColumn>
      {showShare && (
        <TableColumn demandPopin minWidth={600}>
          {sharingHeaderText}
        </TableColumn>
      )}
      {showSetAsDefault && (
        <TableColumn demandPopin minWidth={600} popinText={defaultHeaderText}>
          {defaultHeaderText}
        </TableColumn>
      )}
      {showApplyAutomatically && (
        <TableColumn demandPopin minWidth={600} popinText={applyAutomaticallyHeaderText}>
          {applyAutomaticallyHeaderText}
        </TableColumn>
      )}
      {showCreatedBy && (
        <TableColumn demandPopin minWidth={600} popinText={createdByHeaderText}>
          {createdByHeaderText}
        </TableColumn>
      )}
      <TableColumn key="delete-variant-item" />
    </>
  );

  const [childrenProps, setChildrenProps] = useState(
    Children.map(children, (child) => {
      if (!React.isValidElement(child)) {
        return {};
      }
      return child.props;
    })
  );
  useEffect(() => {
    setChildrenProps(
      Children.map(children, (child) => {
        if (!React.isValidElement(child)) {
          return {};
        }
        return child.props;
      })
    );
  }, [children]);

  const [filteredProps, setFilteredProps] = useState(childrenProps);
  useEffect(() => {
    setFilteredProps(childrenProps);
  }, [childrenProps]);

  const [defaultView, setDefaultView] = useState<string>();

  const changedTableRows = useRef({});
  const handleTableRowChange = (e, payload) => {
    if (payload) {
      changedTableRows.current[payload.currentVariant] = {
        ...(changedTableRows.current[payload.currentVariant] ?? {}),
        ...payload
      };
    }
  };
  const deletedTableRows = useRef(new Set([]));
  const handleDelete = (e) => {
    deletedTableRows.current.add(e.target.dataset.children);
    setChildrenProps((prev) =>
      prev
        .filter((item) => item.children !== e.target.dataset.children)
        .map((item) => {
          if (changedTableRows.current.hasOwnProperty(item.children)) {
            return { ...item, ...changedTableRows.current[item.children] };
          }
          return item;
        })
    );
  };

  const handleSave = (e) => {
    if (Object.keys(invalidVariants).length === 0) {
      handleSaveManageViews(e, {
        updatedRows: changedTableRows.current,
        defaultView,
        deletedRows: deletedTableRows.current
      });
    } else {
      Object.values(invalidVariants)[0].focus();
    }
  };

  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(
      childrenProps.filter(
        (item) =>
          item.children?.toLowerCase()?.includes(lowerCaseVal) || item.author?.toLowerCase()?.includes(lowerCaseVal)
      )
    );
  };

  const canRenderPortal = useCanRenderPortal();
  if (!canRenderPortal) {
    return null;
  }

  return createPortal(
    <Dialog
      open
      className={classes.manageViewsDialog}
      data-component-name="VariantManagementManageViewsDialog"
      onAfterClose={onAfterClose}
      onBeforeClose={handleClose}
      headerText={manageViewsText}
      header={
        <FlexBox direction={FlexBoxDirection.Column} style={{ width: '100%' }} alignItems={FlexBoxAlignItems.Center}>
          <h2 className={classes.headerText}>{manageViewsText}</h2>
          <Input
            className={classes.search}
            placeholder={searchText}
            showClearIcon
            icon={<Icon name={searchIcon} className={classes.inputIcon} />}
            onInput={handleSearchInput}
          />
        </FlexBox>
      }
      resizable
      footer={
        <Bar
          design={BarDesign.Footer}
          endContent={
            <>
              <Button design={ButtonDesign.Emphasized} onClick={handleSave}>
                {saveText}
              </Button>
              <Button design={ButtonDesign.Transparent} onClick={handleCancel}>
                {cancelText}
              </Button>
            </>
          }
        />
      }
    >
      <Table columns={columns} stickyColumnHeader role="table">
        {filteredProps.map((itemProps: VariantItemPropTypes) => {
          return (
            <ManageViewsTableRows
              {...itemProps}
              setInvalidVariants={setInvalidVariants}
              setChangedVariantNames={setChangedVariantNames}
              changedVariantNames={changedVariantNames}
              variantNames={variantNames}
              handleRowChange={handleTableRowChange}
              handleDelete={handleDelete}
              defaultView={defaultView}
              setDefaultView={setDefaultView}
              showShare={showShare}
              showApplyAutomatically={showApplyAutomatically}
              showSetAsDefault={showSetAsDefault}
              showCreatedBy={showCreatedBy}
              key={itemProps?.children}
              showOnlyFavorites={showOnlyFavorites}
            />
          );
        })}
      </Table>
    </Dialog>,
    portalContainer ?? document.body
  );
};

1	import { isPhone, isTablet } from '@ui5/webcomponents-base/dist/Device.js';
2	import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
3	import { enrichEventWithDetails, ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
4	import type { MouseEventHandler, ReactNode } from 'react';
5	import React, { Children, useEffect, useRef, useState } from 'react';
6	import { createPortal } from 'react-dom';
7	import { createUseStyles } from 'react-jss';
8	import { BarDesign, FlexBoxAlignItems, FlexBoxDirection, ButtonDesign } from '../../enums/index.js';
9	import {
10	APPLY_AUTOMATICALLY,
11	CANCEL,
12	CREATED_BY,
13	DEFAULT,
14	MANAGE_VIEWS,
15	SAVE,
16	SHARING,
17	VIEW,
18	SEARCH
19	} from '../../i18n/i18n-defaults.js';
20	import { useCanRenderPortal } from '../../internal/ssr.js';
21	import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
22	import { Bar } from '../../webComponents/Bar/index.js';
23	import { Button } from '../../webComponents/Button/index.js';
24	import { Dialog } from '../../webComponents/Dialog/index.js';
25	import type { InputDomRef } from '../../webComponents/index.js';
26	import { Icon, Input } from '../../webComponents/index.js';
27	import { Table } from '../../webComponents/Table/index.js';
28	import { TableColumn } from '../../webComponents/TableColumn/index.js';
29	import { FlexBox } from '../FlexBox/index.js';
30	import { ManageViewsTableRows } from './ManageViewsTableRows.js';
31	import type { VariantManagementPropTypes } from './types.js';
32	import type { VariantItemPropTypes } from './VariantItem.js';
33
34	const _popupDefaultHeaderHeight = `var(${cssVarVersionInfoPrefix}popup_default_header_height)`;	391✔
35	const _popupHeaderFontFamily = `var(${cssVarVersionInfoPrefix}popup_header_font_family)`;	391✔
36
37	const styles = {	391✔
38	manageViewsDialog: {
39	width: isPhone() \|\| isTablet() ? '100%' : '70vw',	1,173!
40	'&::part(content), &::part(header)': {
41	padding: 0
42	},
43	'&::part(footer)': {
44	padding: 0,
45	borderBlockStart: 'none'
46	}
47	},
48	headerText: {
49	margin: 0,
50	textAlign: 'center',
51	alignSelf: 'start',
52	minHeight: _popupDefaultHeaderHeight,
53	maxHeight: _popupDefaultHeaderHeight,
54	lineHeight: _popupDefaultHeaderHeight,
55	textOverflow: 'ellipsis',
56	overflow: 'hidden',
57	whiteSpace: 'nowrap',
58	maxWidth: '100%',
59	display: 'inline-block',
60	paddingInlineStart: '1rem',
61	fontFamily: `"72override",${_popupHeaderFontFamily}`,
62	fontSize: '1rem'
63	},
64	search: { width: 'calc(100% - 2rem)', marginBlockEnd: '0.5rem' },
65	inputIcon: { cursor: 'pointer', color: ThemingParameters.sapContent_IconColor }
66	};
67
68	const useStyles = createUseStyles(styles, { name: 'ManageViewsDialog' });	391✔
69
70	interface ManageViewsDialogPropTypes {
71	children: ReactNode \| ReactNode[];
72	onAfterClose: any;
73	handleSaveManageViews: (
74	e: MouseEventHandler<HTMLElement>,
75	payload: {
76	updatedRows: any;
77	defaultView: string;
78	deletedRows: any;
79	}
80	) => void;
81	showShare: boolean;
82	showApplyAutomatically: boolean;
83	showSetAsDefault: boolean;
84	showCreatedBy: boolean;
85	variantNames: string[];
86	portalContainer: Element;
87	showOnlyFavorites?: boolean;
88	onManageViewsCancel?: VariantManagementPropTypes['onManageViewsCancel'];
89	}
90
91	export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {	391✔
92	const {
93	children,
94	onAfterClose,
95	handleSaveManageViews,
96	showShare,
97	showApplyAutomatically,
98	showSetAsDefault,
99	showCreatedBy,
100	variantNames,
101	portalContainer,
102	showOnlyFavorites,
103	onManageViewsCancel
104	} = props;	815✔
105	const i18nBundle = useI18nBundle('@ui5/webcomponents-react');	815✔
106	const cancelText = i18nBundle.getText(CANCEL);	815✔
107	const saveText = i18nBundle.getText(SAVE);	815✔
108	const viewHeaderText = i18nBundle.getText(VIEW);	815✔
109	const sharingHeaderText = i18nBundle.getText(SHARING);	815✔
110	const defaultHeaderText = i18nBundle.getText(DEFAULT);	815✔
111	const applyAutomaticallyHeaderText = i18nBundle.getText(APPLY_AUTOMATICALLY);	815✔
112	const createdByHeaderText = i18nBundle.getText(CREATED_BY);	815✔
113	const manageViewsText = i18nBundle.getText(MANAGE_VIEWS);	815✔
114	const searchText = i18nBundle.getText(SEARCH);	815✔
115
116	const [changedVariantNames, setChangedVariantNames] = useState(new Map());	815✔
117	const [invalidVariants, setInvalidVariants] = useState<Record<string, InputDomRef & { isInvalid?: boolean }>>({});	815✔
118
119	const classes = useStyles();	815✔
120
121	const columns = (
122	<>	815✔
123	{showOnlyFavorites && <TableColumn key="favorite-variant-item" />}	1,086✔
124	<TableColumn>{viewHeaderText}</TableColumn>
125	{showShare && (	1,630✔
126	<TableColumn demandPopin minWidth={600}>
127	{sharingHeaderText}
128	</TableColumn>
129	)}
130	{showSetAsDefault && (	1,630✔
131	<TableColumn demandPopin minWidth={600} popinText={defaultHeaderText}>
132	{defaultHeaderText}
133	</TableColumn>
134	)}
135	{showApplyAutomatically && (	1,630✔
136	<TableColumn demandPopin minWidth={600} popinText={applyAutomaticallyHeaderText}>
137	{applyAutomaticallyHeaderText}
138	</TableColumn>
139	)}
140	{showCreatedBy && (	1,630✔
141	<TableColumn demandPopin minWidth={600} popinText={createdByHeaderText}>
142	{createdByHeaderText}
143	</TableColumn>
144	)}
145	<TableColumn key="delete-variant-item" />
146	</>
147	);
148
149	const [childrenProps, setChildrenProps] = useState(	815✔
150	Children.map(children, (child) => {
151	if (!React.isValidElement(child)) {	2,310!
152	return {};	×
153	}
154	return child.props;	2,310✔
155	})
156	);
157	useEffect(() => {	815✔
158	setChildrenProps(	154✔
159	Children.map(children, (child) => {
160	if (!React.isValidElement(child)) {	457!
161	return {};	×
162	}
163	return child.props;	457✔
164	})
165	);
166	}, [children]);
167
168	const [filteredProps, setFilteredProps] = useState(childrenProps);	815✔
169	useEffect(() => {	815✔
170	setFilteredProps(childrenProps);	256✔
171	}, [childrenProps]);
172
173	const [defaultView, setDefaultView] = useState<string>();	815✔
174
175	const changedTableRows = useRef({});	815✔
176	const handleTableRowChange = (e, payload) => {	815✔
177	if (payload) {	260✔
178	changedTableRows.current[payload.currentVariant] = {	260✔
179	...(changedTableRows.current[payload.currentVariant] ?? {}),	300✔
180	...payload
181	};
182	}
183	};
184	const deletedTableRows = useRef(new Set([]));	815✔
185	const handleDelete = (e) => {	815✔
186	deletedTableRows.current.add(e.target.dataset.children);	8✔
187	setChildrenProps((prev) =>	8✔
188	prev	8✔
189	.filter((item) => item.children !== e.target.dataset.children)	20✔
190	.map((item) => {
191	if (changedTableRows.current.hasOwnProperty(item.children)) {	12!
192	return { ...item, ...changedTableRows.current[item.children] };	×
193	}
194	return item;	12✔
195	})
196	);
197	};
198
199	const handleSave = (e) => {	815✔
200	if (Object.keys(invalidVariants).length === 0) {	69✔
201	handleSaveManageViews(e, {	48✔
202	updatedRows: changedTableRows.current,
203	defaultView,
204	deletedRows: deletedTableRows.current
205	});
206	} else {
207	Object.values(invalidVariants)[0].focus();	21✔
208	}
209	};
210
211	const handleClose = (e) => {	815✔
212	if (e.detail.escPressed) {	15!
213	handleCancel(e);	15✔
214	} else {
NEW 215	onAfterClose(e);	×
216	}
217	};
218
219	const handleCancel = (e) => {	815✔
220	if (typeof onManageViewsCancel === 'function') {	46✔
221	onManageViewsCancel(	30✔
222	enrichEventWithDetails(e, {
223	invalidVariants
224	})
225	);
226	}
227	setInvalidVariants((prev) => {	46✔
NEW 228	Object.values(prev).forEach((item) => {	×
NEW 229	item.isInvalid = false;	×
230	});
NEW 231	return {};	×
232	});
233	onAfterClose(e);	46✔
234	};
235
236	const handleSearchInput = (e) => {	815✔
237	const lowerCaseVal = e.target.value.toLowerCase();	×
238	setFilteredProps(	×
239	childrenProps.filter(
240	(item) =>
241	item.children?.toLowerCase()?.includes(lowerCaseVal) \|\| item.author?.toLowerCase()?.includes(lowerCaseVal)	×
242	)
243	);
244	};
245
246	const canRenderPortal = useCanRenderPortal();	815✔
247	if (!canRenderPortal) {	815✔
248	return null;	94✔
249	}
250
251	return createPortal(	721✔
252	<Dialog
253	open
254	className={classes.manageViewsDialog}
255	data-component-name="VariantManagementManageViewsDialog"
256	onAfterClose={onAfterClose}
257	onBeforeClose={handleClose}
258	headerText={manageViewsText}
259	header={
260	<FlexBox direction={FlexBoxDirection.Column} style={{ width: '100%' }} alignItems={FlexBoxAlignItems.Center}>
261	<h2 className={classes.headerText}>{manageViewsText}</h2>
262	<Input
263	className={classes.search}
264	placeholder={searchText}
265	showClearIcon
266	icon={<Icon name={searchIcon} className={classes.inputIcon} />}
267	onInput={handleSearchInput}
268	/>
269	</FlexBox>
270	}
271	resizable
272	footer={
273	<Bar
274	design={BarDesign.Footer}
275	endContent={
276	<>
277	<Button design={ButtonDesign.Emphasized} onClick={handleSave}>
278	{saveText}
279	</Button>
280	<Button design={ButtonDesign.Transparent} onClick={handleCancel}>
281	{cancelText}
282	</Button>
283	</>
284	}
285	/>
286	}
287	>
288	<Table columns={columns} stickyColumnHeader role="table">
289	{filteredProps.map((itemProps: VariantItemPropTypes) => {
290	return (	1,957✔
291	<ManageViewsTableRows
292	{...itemProps}
293	setInvalidVariants={setInvalidVariants}
294	setChangedVariantNames={setChangedVariantNames}
295	changedVariantNames={changedVariantNames}
296	variantNames={variantNames}
297	handleRowChange={handleTableRowChange}
298	handleDelete={handleDelete}
299	defaultView={defaultView}
300	setDefaultView={setDefaultView}
301	showShare={showShare}
302	showApplyAutomatically={showApplyAutomatically}
303	showSetAsDefault={showSetAsDefault}
304	showCreatedBy={showCreatedBy}
305	key={itemProps?.children}
306	showOnlyFavorites={showOnlyFavorites}
307	/>
308	);
309	})}
310	</Table>
311	</Dialog>,
312	portalContainer ?? document.body	1,442✔
313	);
314	};

SAP / ui5-webcomponents-react / 6429818523

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous