FEATURE: Improve user experience for Dimension Switcher

[markusguenther]

What I did
To improve the UX, we want to have just one layer when we have just one dimension configured.
Currently, the Dimension Selector is inside a dropdown.

How I did it
I separated the DimensionSelector into an own component and added a property to render the Selector without the label.
The DimensionSwitcher now renders a single DimensionSelector if we have only one dimension and for multiple Dimensions we use the old way.

How to verify it
Test the Backend with one and multiple dimensions.

Open To-dos

• Adjust the tests
• Add a Dimension Icon for the single dimension
• little CSS tweaks

Related: #3413

[markusguenther]

Eventually, also migrate to TS... depends on the amount of time as the Feature Freeze is close and we can do it also later.

[markusguenther]

Current State:

[markusguenther]

The tests work now:

• Multi-Dimensional https://app.saucelabs.com/tests/20c08d23c08843d19c99d270e609f767
• Single Dimension https://app.saucelabs.com/tests/bcf885d4af5346cd886fbf5ad6e9b422

[markusguenther]

Also added the Icon. So just some CSS glitches left, but the feature itself is done.

[markusguenther]

The only thing that puzzles me currently is the positioning of the icon. Sadly, the Selectbox can not only render the Icon in the header. When you add the icon to the options, all items will have the icon.

Maybe that would be a nice flag for the select box to render the icon just in the header.

But I think the CSS stuff can be perhaps also be a thing after feature freeze.

[markusguenther]

Ok, just did it and added a new prop to be able to render just an icon inside the header.
If this is not wanted, we can remove the two commits again.

But that solves a lot of CSS issues and would be nice to have it in other places as well.

[Sebobo]

Love the feature, left some comments

[markusguenther]

Love the feature, left some comments

Thanks for the valuable feedback. I introduced the headerIcon prop later in my local development and with that, I could drop the showIcon props now. So, it is less expanded and has the same value.

[mhsdesign]

the spacing to the arrow was previously a bit prettier ;) (noticed it even without comparison)

thanks for this pr @markusguenther this was previously hard to use ^^

[mhsdesign]

is it intentional that we still show the dropdown, if there is only one dimension?

[crydotsnake]

is it intentional that we still show the dropdown, if there is only one dimension?

As an idea, we could disable the dropdown if there is really only one dimension available.

[crydotsnake]

In functionality point of view it is working great!

[markusguenther]

I already tried to remove the padding right today but was not successful yet. Try it later this evening when I am back home.

[markusguenther]

is it intentional that we still show the dropdown, if there is only one dimension?

As an idea, we could disable the dropdown if there is really only one dimension available.

Don't get the point because this PR shows a single drop down when we have only one dimension, no dropdown for no dimension and the old behavior if we have more than one dimension.

Single:

Multi:

[markusguenther]

Ah now i see your point... hmm, guess if you have just one single dimension value you would normally create no dimension and then would see no drop down at all.

In your case it does not make so much sense.

[crydotsnake]

is it intentional that we still show the dropdown, if there is only one dimension?

As an idea, we could disable the dropdown if there is really only one dimension available.

Don't get the point because this PR shows a single drop down when we have only one dimension, no dropdown for no dimension and the old behavior if we have more than one dimension.

Single:

Multi:

I think @mhsdesign's point was, that you can still use the dropdown menu if you have only one dimension available. And with only one dimension avaialble, i dont know if we still need the dropdown. Because we have no other dimension that we could switch too.

[mhsdesign]

Ah now i see your point... hmm, guess if you have just one single dimension value you would normally create no dimension and then would see no drop down at all.

In your case it does not make so much sense.

uups yes sorry i was brain dumb - too much sun

you can leave it as you proposed ^^

[crydotsnake]

Ah now i see your point... hmm, guess if you have just one single dimension value you would normally create no dimension and then would see no drop down at all.

In your case it does not make so much sense.

Good point.. I have not thought about that 😅

[markusguenther]

Bit confused that the linter fails in a file I did not change 🤔

To be honest, your point is also valid, but I am uncertain if it were more confusion to configure a dimension and then see nothing in the UI. For this case, I would need to add another component that is no dropdown or button and just shows the dimension. So that you can see it but not change it.

An easy workaround would be to disable the select box if we have just one item.
Then it would look like that.

[crydotsnake]

An easy workaround would be to disable the select box if we have just one item.
Then it would look like that.

Hm. Wouldn't that be a bit confusing for the editor? Otherwise, this would be a good workaround IMO.

[crydotsnake]

An easy workaround would be to disable the select box if we have just one item.
Then it would look like that.

Hm. Wouldn't that be a bit confusing for the editor? Otherwise, this would be a good workaround IMO.

@markusguenther If you still fine with that, we can use your idea. So if only one dimension is available, the checkbox will be disabled.

It shouldn't be confusing for the editor. Because in general the editor should know how many dimensions the website has where he is working on.