Skip to content

Commit d060030

Browse files
MarcusNotheisMarcusNotheis
authored
Merge branch 'main' into renovate/major-nextjs-monorepo
2 parents 92f4b9b + fe389bc commit d060030

File tree

7 files changed

+69
-42
lines changed

7 files changed

+69
-42
lines changed

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,8 @@
6262
display: flex;
6363
justify-content: center;
6464
}
65+
66+
.icon {
67+
height: 0.8125rem;
68+
width: 0.8125rem;
69+
}

‎packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
2+
import IconDesign from '@ui5/webcomponents/dist/types/IconDesign.js';
23
import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
34
import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
45
import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
@@ -108,16 +109,16 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
108109
style.textAlign = column.hAlign.toLowerCase();
109110
}
110111

111-
if (column.isSorted) margin++;
112-
if (column.isGrouped) margin++;
113-
if (isFiltered) margin++;
112+
if (column.isSorted) margin += 0.8125;
113+
if (column.isGrouped) margin += 0.8125;
114+
if (isFiltered) margin += 0.8125;
114115

115116
if (margin === 0) {
116117
return style;
117118
}
118119

119120
if (margin > 0) {
120-
margin += 0.625;
121+
margin += 0.75;
121122
}
122123

123124
style.marginInlineEnd = `${margin}rem`;
@@ -234,11 +235,20 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
234235
className={classNames.iconContainer}
235236
data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`}
236237
>
237-
{isFiltered && <Icon name={iconFilter} aria-hidden />}
238+
{isFiltered && (
239+
<Icon design={IconDesign.NonInteractive} name={iconFilter} aria-hidden className={classNames.icon} />
240+
)}
238241
{column.isSorted && (
239-
<Icon name={column.isSortedDesc ? iconSortDescending : iconSortAscending} aria-hidden />
242+
<Icon
243+
design={IconDesign.NonInteractive}
244+
name={column.isSortedDesc ? iconSortDescending : iconSortAscending}
245+
aria-hidden
246+
className={classNames.icon}
247+
/>
248+
)}
249+
{column.isGrouped && (
250+
<Icon design={IconDesign.NonInteractive} name={iconGroup} aria-hidden className={classNames.icon} />
240251
)}
241-
{column.isGrouped && <Icon name={iconGroup} aria-hidden />}
242252
</div>
243253
</div>
244254
{hasPopover &&

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
103103
{defaultHeaderText}
104104
</TableHeaderCell>
105105
)}
106-
{TableHeaderCell && (
106+
{showApplyAutomatically && (
107107
<TableHeaderCell minWidth={hasApplyAutomaticallyText ? '25rem' : '5rem'}>
108108
{applyAutomaticallyHeaderText}
109109
</TableHeaderCell>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,15 @@ describe('VariantManagement', () => {
337337
cy.get('[text="Apply Automatically"]').should('be.visible');
338338
cy.get('[ui5-checkbox]').should('have.length', 3);
339339

340+
cy.realPress('Escape');
341+
342+
cy.get('[icon="navigation-down-arrow"]').click();
343+
cy.findByText('Manage').click();
344+
cy.get('[ui5-table]').contains('Apply Automatically').should('be.visible');
345+
cy.get('[ui5-table]').contains('Default').should('be.visible');
346+
cy.get('[ui5-table]').contains('Sharing').should('be.visible');
347+
cy.get('[ui5-table]').contains('Created By').should('be.visible');
348+
340349
cy.mount(
341350
<VariantManagement hideApplyAutomatically hideSetAsDefault hideShare hideCreatedBy>
342351
{TwoVariantItems}
@@ -348,6 +357,15 @@ describe('VariantManagement', () => {
348357
cy.get('[text="Public"]', { timeout: 50 }).should('not.exist');
349358
cy.get('[text="Apply Automatically"]', { timeout: 50 }).should('not.exist');
350359
cy.get('[ui5-checkbox]').should('not.exist');
360+
361+
cy.realPress('Escape');
362+
363+
cy.get('[icon="navigation-down-arrow"]').click();
364+
cy.findByText('Manage').click();
365+
cy.get('[ui5-table]').contains('Apply Automatically').should('not.exist');
366+
cy.get('[ui5-table]').contains('Default').should('not.exist');
367+
cy.get('[ui5-table]').contains('Sharing').should('not.exist');
368+
cy.get('[ui5-table]').contains('Created By').should('not.exist');
351369
});
352370

353371
it('Save As', () => {

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

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -268,11 +268,11 @@ function FilterBarWithVariantManagement() {
268268
const hasChanged = Object.entries(initialVariantValues.current[selectedVariant]).some(([key, val]) => {
269269
if (key === 'selectedCodes') {
270270
const selectedCodesLength = Object.keys(filters.selectedCodes).length;
271-
if (selectedCodesLength > 0 && Object.keys(val).length !== selectedCodesLength) {
271+
if (Object.keys(val).length !== selectedCodesLength) {
272272
return true;
273273
}
274274
return Object.entries(filters.selectedCodes).some(([code, bool]) => {
275-
return val[code] !== bool;
275+
return val?.[code] !== bool;
276276
});
277277
}
278278
return filters[key] !== val;
@@ -319,7 +319,7 @@ function FilterBarWithVariantManagement() {
319319
</VariantManagement>
320320
}
321321
>
322-
<FilterGroupItem label="Countries">
322+
<FilterGroupItem label="Countries" filterKey={0}>
323323
<Select onChange={handleSelectChange}>
324324
<Option selected={selectedCountry === 'Indonesia'}>Indonesia</Option>
325325
<Option selected={selectedCountry === 'Costa Rica'}>Costa Rica</Option>
@@ -331,10 +331,10 @@ function FilterBarWithVariantManagement() {
331331
<Option selected={selectedCountry === 'Austria'}>Austria</Option>
332332
</Select>
333333
</FilterGroupItem>
334-
<FilterGroupItem label="Date">
334+
<FilterGroupItem label="Date" filterKey={1}>
335335
<DatePicker value={date} onChange={handleDateChange} />
336336
</FilterGroupItem>
337-
<FilterGroupItem label="Company Code">
337+
<FilterGroupItem label="Company Code" filterKey={2}>
338338
<MultiComboBox onSelectionChange={handleSelectedCodesChange}>
339339
<MultiComboBoxItem text="001" selected={selectedCodes['001']} data-code="001" />
340340
<MultiComboBoxItem text="002" selected={selectedCodes['002']} data-code="002" />
@@ -344,27 +344,20 @@ function FilterBarWithVariantManagement() {
344344
</MultiComboBox>
345345
</FilterGroupItem>
346346
</FilterBar>
347-
<Form
348-
style={{ marginBlockStart: '2rem' }}
349-
columnsS={1}
350-
columnsM={1}
351-
columnsL={1}
352-
columnsXL={1}
353-
labelSpanM={2}
354-
labelSpanL={2}
355-
labelSpanXL={2}
356-
>
357-
<FormItem label="Current View">
358-
<Text>{selectedVariant}</Text>
359-
</FormItem>
360-
<FormGroup titleText="Filters">
361-
<FormItem label="Selected Country">
347+
<Form style={{ marginBlockStart: '2rem' }} layout={'S1 M1 L1 XL1'} labelSpan={'S3 M3 L3 XL3'}>
348+
<FormGroup headerText="Variant">
349+
<FormItem labelContent={<Label showColon>Current View</Label>}>
350+
<Text>{selectedVariant}</Text>
351+
</FormItem>
352+
</FormGroup>
353+
<FormGroup headerText="Filters">
354+
<FormItem labelContent={<Label showColon>Selected Country</Label>}>
362355
<Text>{selectedCountry}</Text>
363356
</FormItem>
364-
<FormItem label="Selected Date">
357+
<FormItem labelContent={<Label showColon>Selected Date</Label>}>
365358
<Text>{date}</Text>
366359
</FormItem>
367-
<FormItem label="Selected Company Codes">
360+
<FormItem labelContent={<Label showColon>Selected Company Codes</Label>}>
368361
<Text>{Object.keys(selectedCodes).join(', ')}</Text>
369362
</FormItem>
370363
</FormGroup>

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ export const WithFilterBarImplementation: Story = {
324324
</VariantManagement>
325325
}
326326
>
327-
<FilterGroupItem label="Countries">
327+
<FilterGroupItem label="Countries" filterKey={0}>
328328
<Select onChange={handleSelectChange}>
329329
<Option selected={selectedCountry === 'Indonesia'}>Indonesia</Option>
330330
<Option selected={selectedCountry === 'Costa Rica'}>Costa Rica</Option>
@@ -336,10 +336,10 @@ export const WithFilterBarImplementation: Story = {
336336
<Option selected={selectedCountry === 'Austria'}>Austria</Option>
337337
</Select>
338338
</FilterGroupItem>
339-
<FilterGroupItem label="Date">
339+
<FilterGroupItem label="Date" filterKey={1}>
340340
<DatePicker value={date} onChange={handleDateChange} />
341341
</FilterGroupItem>
342-
<FilterGroupItem label="Company Code">
342+
<FilterGroupItem label="Company Code" filterKey={2}>
343343
<MultiComboBox onSelectionChange={handleSelectedCodesChange}>
344344
<MultiComboBoxItem text="001" selected={selectedCodes['001']} data-code="001" />
345345
<MultiComboBoxItem text="002" selected={selectedCodes['002']} data-code="002" />
@@ -349,18 +349,20 @@ export const WithFilterBarImplementation: Story = {
349349
</MultiComboBox>
350350
</FilterGroupItem>
351351
</FilterBar>
352-
<Form style={{ marginBlockStart: '2rem' }} layout={'S1 M1 L1 XL1'} labelSpan={'M2 L2 XL2'}>
353-
<FormItem labelContent={<Label>Current View</Label>}>
354-
<Text>{selectedVariant}</Text>
355-
</FormItem>
352+
<Form style={{ marginBlockStart: '2rem' }} layout={'S1 M1 L1 XL1'} labelSpan={'S3 M3 L3 XL3'}>
353+
<FormGroup headerText="Variant">
354+
<FormItem labelContent={<Label showColon>Current View</Label>}>
355+
<Text>{selectedVariant}</Text>
356+
</FormItem>
357+
</FormGroup>
356358
<FormGroup headerText="Filters">
357-
<FormItem labelContent={<Label>Selected Country</Label>}>
359+
<FormItem labelContent={<Label showColon>Selected Country</Label>}>
358360
<Text>{selectedCountry}</Text>
359361
</FormItem>
360-
<FormItem labelContent={<Label>Selected Date</Label>}>
362+
<FormItem labelContent={<Label showColon>Selected Date</Label>}>
361363
<Text>{date}</Text>
362364
</FormItem>
363-
<FormItem labelContent={<Label>Selected Company Codes</Label>}>
365+
<FormItem labelContent={<Label showColon>Selected Company Codes</Label>}>
364366
<Text>{Object.keys(selectedCodes).join(', ')}</Text>
365367
</FormItem>
366368
</FormGroup>

‎packages/main/src/components/VariantManagement/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,8 +317,7 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
317317
}
318318
}, [safeChildrenWithFavorites]);
319319

320-
// todo: this applies if `readOnly` is set to `false` as well since the value is read via data-attribute and is therefore a string not a boolean
321-
const showSaveBtn = dirtyState && !Object.prototype.hasOwnProperty.call(selectedVariant, 'readOnly');
320+
const showSaveBtn = dirtyState && selectedVariant && !selectedVariant.readOnly;
322321

323322
return (
324323
<div className={variantManagementClasses} style={style} {...rest} ref={ref}>

0 commit comments

Comments
 (0)