Hide filtered items in KeyValue

[momesgin]

Summary

Fixes #13470 , #13471

Technical notes summary

The filtering toggle in KeyValue.vue has never worked properly. There were two sources of truth in there, first filteredRows which was filtering items that are a system label, passed as protectedKeys prop, and the second was this.rows which includes the whole items. When rendering, the component was using filteredRows but when adding or removing items, this.rows was being mutated by using the index of items in filteredRows.

You can see this issue by going to Explorer => Projects/Namespaces => Edit Config => Check Pod Security Admission Tab => enable any of the items there => Check Labels & Annotations Tab => Add a label using "Z" for its key and label => Try to Remove

Because there's no unique property in a label to rely on, you need to either create a temporary local id/index to track, or hide the filtered items without removing them from the list. I implemented the hiding approach since this component has many functionalities relied on the index which makes it tricky to update all the places, specially when it supports both arrays and objects, and also it's been vastly used throughout the app that makes it hard to test for the possible regressions. I've tested the performance of the component with 1000 items and didn't notice any slowness, though it's not the most accurate testing.

Areas or cases that should be tested

What's been mentioned on the issues, and also the case mentioned above

Areas which could experience regressions

Screenshot/Video

kv.mov

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

[codyrancher]

We could replace the hidden class with the hide class. I figure we might as well use the global style since it exists.

https://github.com/rancher/dashboard/blob/master/shell/assets/styles/base/_helpers.scss#L134

[codyrancher]

Other than the class it lgtm

[richard-cox]

Would this obsolete #11125, and solve it's issue #11115?