Q search box in Secrets fails

[itdependsnetworks]

Environment

• Nautobot version (Docker tag too if applicable): 2.0
• Python version: 3.11
• Database platform, version: psql
• Middleware(s):

Steps to Reproduce

1. Go to https://next.demo.nautobot.com/extras/secrets/
2. Type in the search box for the model (not the global one) anything
3. Press enter

Expected Behavior

A filtered list view

Observed Behavior

JS crashes with:

[itdependsnetworks]

Whomever at core looks into this, please put your analysis here, even if not coding a fix. I have a similar issue in GC, and have to presume either this will be fixed in core (in which case I will just wait) or potentially need to implement same fix in GC, which I can potentially do right away even if this issue in core is not fixed.

[glennmatthews]

Looks related to #3574's changes.

[itdependsnetworks]

I put in a JS breakpoint, the one that worked said name before the length and the other did not, but I couldn't see what was populating that.

[jathanism]

I put in a JS breakpoint, the one that worked said name before the length and the other did not, but I couldn't see what was populating that.

Fortunately in this case the traceback tells us the exact line where the error is occurring (Line 615 in forms.js).

        let default_filter_form_query = $("#default-filter form").serialize().split("&").filter(params => params.split("=")[1].length)

At the time of initial rendering this value is undefined (the name field is not part of the "Default") filters for this object, only provider and tags are), so we need to add a little defensive programming on the .filter() argument:

        let default_filter_form_query = $("#default-filter form").serialize().split("&").filter(params => params.split("=")[1]?.length || 0 )

@itdependsnetworks FYI

You can introspect this in the console by calling $("#default-filter form").serialize(). It will return an empty string (''). If you populate a filter value in the "Default" dynamic form, such as Provider: Constant Value, you'll get this:

> $("#default-filter form").serialize()
<- 'provider=constant-value'

Lastly, you might be wondering "but I entered this in the Search box, not the dynamic filter form!" They're all processed as a single form input underneath the hood using a formset (a form of forms). So even the search form is included in the dynamic filter form processing.

[itdependsnetworks]

That was helpful, thanks!!! I now know what the question mark operator is in JS and I figured it just required some defensive programming (I was looking for a .get() 😆 ).

So I also get that the name is not defined on the filterform defaults (which aligns with my original issue), I still don't understand why that matters? Put another way, adding a name = forms.DynamicModelChoiceField() should fix my issue, but what is special about name in this context?

[jathanism]

That was helpful, thanks!!! I now know what the question mark operator is in JS and I figured it just required some defensive programming (I was looking for a .get() 😆 ).

So I also get that the name is not defined on the filterform defaults (which aligns with my original issue), I still don't understand why that matters? Put another way, adding a name = forms.DynamicModelChoiceField() should fix my issue, but what is special about name in this context?

I think it only matters for the two lines that look identical in the JS but one is "dynamic" and one is "default". It's really just this:

class SecretFilterForm(NautobotFilterForm):
    model = Secret
    q = forms.CharField(required=False, label="Search")
    provider = forms.MultipleChoiceField(
        choices=provider_choices_with_blank, widget=StaticSelect2Multiple(), required=False
    )
    tags = TagFilterField(model)

Since only provider and tags are defined there, they are the "default" filter fields. All others (such as name) get deferred to "dynamic" filter fields. So the only thing that is special about name in this context is that it's non-default for this particular object. The basis of the logic for that being (I believe) is that it is redundant to include a default field that is already covered by the search (q) filter.

For reference, here is the q filter for SecretFilterSet:

    q = SearchFilter(
        filter_predicates={
            "name": "icontains",
        },
    )