VariantManagement: impossible to trigger delete action for public (global) views

[superdyzio]

Describe the bug

There is no possibility to force delete icon to show next to the public (global: true variants). I was expecting hideDelete={false} to do the trick and according to the logic in ManageViewsTableRows.tsx:216 it should:

<TableCell>
        {!(hideDelete ?? global) && (
          <Button
            tooltip={a11yDeleteText}
            accessibleName={a11yDeleteText}
            icon={declineIcon}
            design={ButtonDesign.Transparent}
            onClick={handleDelete}
            data-children={children}
          />
        )}
      </TableCell>

but in our case it is not enough. All of my elements have data-hide-delete="false" attribute but hideDelete is still undefined. Do I need to provide some additional data?

Unfortunately it works correctly in the Stackblitz example 😅 so it's possible that the issue is actually on our side, but I cannot track it down and since I can see the attributes correctly added to the elements I have a feeling that something might be broken also on the library side

I'm looking forward to explanation of the issue and if needed, as usual, I'll be happy to provide a PR.

Isolated Example

https://stackblitz.com/edit/github-cbs6vz?file=src%2FApp.tsx

Reproduction steps

1. Have some public and some private views.
2. Set hideDelete={false} on all <VariantItem> instances.
3. Open manage views dialog.
   ❌ icon is visible only next to the private (global: false) views.

Expected Behaviour

When I set hideDelete={false} I get the delete variant icon no matter what. I expect boolean flags to be independent and predictable, if I'd like to hide delete button for public variants only I would do hideDelete={item.global}.

Screenshots or Videos

(apply automatically header visible in the screenshot is a different bug, tracked here: #6618)

UI5 Web Components for React Version

2.4.0

UI5 Web Components Version

2.4.0

Browser

Chrome

Operating System

MacOS Sequoia 15.1.1

Additional Context

Our usage of VariantItem:

<VariantItem
    favorite={favorite}
    labelReadOnly={labelReadOnly}
    isDefault={isDefault}
    global={global}
    hideDelete={false}
    // todo: we might be able to remove condition when https://github.com/SAP/ui5-webcomponents-react/issues/6617 is resolved
    {...(readOnly === true
      ? {
          readOnly,
        }
      : {})}
    selected={selected}
  >
    {children}
  </VariantItem>

Relevant log output

No response

Organization

SAP Fioneer

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @superdyzio

unfortunately, we can't assist you with this issue without a reproducible example. I tested the prop with both allowed values (false, true) and even with undefined (which only won't throw a TypeScript error if exactOptionalPropertyTypes is not enabled) and it works as intended for each value.

In v2.5.0, we addressed several issues related to boolean handling in the component, so updating might resolve this issue as well. If it doesn’t, please try to isolate the problem. If that's not feasible, feel free to contact me internally, and we can debug the component together.

[superdyzio]

thank you very much for the time spent on that @Lukas742! 🙏
we were playing around with our code this morning and we noticed that it works correctly when we remove our wrapper (UiVariantItem) - it is only passing props (we have a convention with wrappers, because sometimes we need to align something), but still it somehow breaks the functionality

do you have any ideas why? what to look for?
is there any logic that relies on VariantItem being direct children of VariantManagement? I didn't see it and I also tried adding wrapper component to the stackblitz example, but it's working correctly there

for now it's fixed by just removing the wrapper, and since I cannot reproduce it outside of our code, I'm perfectly fine with this issue being closed, I'm just hoping that your answers to above questions will give me some new leads 😄

it's awesome that you just released v2.5.0, it will resolve some todos on our side, thanks! 🎉

[Lukas742]

@superdyzio I played around a bit with wrapped items, but wasn't able to break the component. Still, I can't guarantee that wrapping is supported, or tell exactly what isn't. For this I would need to investigate a lot more, for which I unfortunately don't have the capacity at the moment. All I can say right now is that there could be issues, because we expect the VariantItem component as direct child (e.g. when iterating the children of the VariantManagement).

So, for now I'm going to close this issue, but in case you're able to isolate the problem, or if it becomes relevant again, please feel free to leave a comment or open a new issue.