Fix/tags active inactive behaviour

[cvetankanechevska]

Description

Resolves #920

Development notes

Added new check if items list is empty or not, according to that toggle button will behave properly. And text label for that row will be displayed with less opacity.

Here we have disabled button for Tags:

QA notes

Tests that we already have for node-list-groups and node-list-group are modified.

• In node-list-groups - I am checking if DOM element has a disabled class for the button, if not we can than simulate click() event.
• In node-list-group - I've added empty array as in mock data from spaceflights we don't have items data

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[comym]

Hi @cvetankanechevska , I just had a look and it looks like you've built it correctly as the design reference. However, one thing that I just noticed is that, logically we could also make sure that, it the tags subgroup is disabled - as you're already showing - it would make more sense that the arrow indicator in the cell shows to be in it's "closed" position.

What do you think?

At the moment we are showing it like this, with the arrow pointing down.

The idea is to instead, make it point to the left as if it's closed. Like, "this is disabled, closed, nothing to see here" :)

Would it be ok to tweak it this way? Many thanks

[cvetankanechevska]

Hi @cvetankanechevska , I just had a look and it looks like you've built it correctly as the design reference. However, one thing that I just noticed is that, logically we could also make sure that, it the tags subgroup is disabled - as you're already showing - it would make more sense that the arrow indicator in the cell shows to be in it's "closed" position.

What do you think?

At the moment we are showing it like this, with the arrow pointing down.

The idea is to instead, make it point to the left as if it's closed. Like, "this is disabled, closed, nothing to see here" :)

Would it be ok to tweak it this way? Many thanks

Yes, I agree with you. Will make the change.

[tynandebold]

Looks great, and thanks for sorting some props. I'm approving with one thought:

I'd suggest you add a test to check that when items is 0 the new class name (pipeline-type-group-toggle--disabled) is actually set. I don't think you're doing that at the moment, are you?

[cvetankanechevska]

Looks great, and thanks for sorting some props. I'm approving with one thought:

I'd suggest you add a test to check that when items is 0 the new class name (pipeline-type-group-toggle--disabled) is actually set. I don't think you're doing that at the moment, are you?

No, I don't have that check. I will try to add it.

[rashidakanchwala]

LGTM