Submission form hierarchical tree view has two add buttons, one enabled and the other disabled

[aseyedia]

Describe the bug

The tree view in the submission form renders two "Add" buttons, one enabled and the other disabled. I'm guessing it's supposed to be one disabled button when the field is empty and the button is later enabled when the field has a query or entry in it.

To Reproduce

Steps to reproduce the behavior:

1. Open the Submission Form Hierarchical Tree View

Expected behavior

I think the "Add" button should be greyed out when no selection is in the field and active when there is.

[Andrea-Guevara]

Good morning @aseyedia and @tdonohue, my name is Andrea and I'm with Neki-it.

We've been analyzing this issue and saw that the “add” button is really buggy. It should be disabled when nothing is typed in the search field and enabled when the user wants to search for a term, right?

Could someone explain to us what action the “add” button should have? Is it the same logic as the “search” button that appears at the bottom of the page?

Is the “add” button really necessary? We looked at other versions of DSpace where the controlled vocabulary is used in the submission form and, for example, in version 7.5 the “add” button is not an option.

We are interested in contributing in some way to solving this problem. We look forward to hearing from you!

[aseyedia]

@Andrea-Guevara oh yeah I already fixed this issue, I just haven't opened a PR for it yet. But I think the add button is supposed to just add whatever plaintext you have entered into the field, and I guess it's supposed to be greyed out if it's a closed Controlled Vocabulary. Not sure if that part works (the greying out under closed Controlled Vocabulary conditions) but there is one instead of two "Add" buttons now.

In src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html, I replaced

        <button *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()">
          {{'vocabulary-treeview.search.form.add' | translate}}
        </button>
        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">
          {{'vocabulary-treeview.search.form.add' | translate}}
        </button>

with this:

        <button *ngIf="showAdd" class="btn btn-outline-primary" type="button" (click)="add()"
          [disabled]="this.vocabularyOptions.closed">
          {{'vocabulary-treeview.search.form.add' | translate}}
        </button>

The problem appears to be that in the original one, the button is in there twice for closed Controlled Vocabularies. That's it. If showAdd && this.vocabularyOptions.closed both equal true (showAdd is true by default), the first button shows. Directly beneath it, the button also shows again, but this time it appears greyed-out and disabled if this.vocabularyOptions.closed is true.

In the fix I stuck in there, there is only one button and it is disabled only if it's a closed Controlled Vocabulary. I don't think they've fixed this yet in the most recent version of DSpace 9. I guess I could open a PR now.

[Andrea-Guevara]

@aseyedia Ahh yes... good that you were already working on a solution to this problem. Thank you very much for your feedback!