Replace view/app/Query/query.tsx components to more 'reactive' components

[abelzis]

In view/app/Query/query.tsx There are often some classes added to HTML elements, e.g. selected and then they're removed. It follows this syntax:

document.querySelectorAll('.autocomplete-list li')
        .item(0)
        .classList.add('selected');

which is not "reactive". The reactive way would be:
<CustomElement selected={isSelected} />
and the isSelected is a state element that would be modified in this way: setIsSelected(true).

There are other similar cases, where the code is vanilla js in a react environment.

So for this ticket:

1. Start with the mentioned query.tsx file and find components (e.g. look at a function getFooterTag). This should be a component in QueryFooter.tsx.
2. In the extracted component, replace the divs and other default html components with React components from Material UI which is already installed.
3. Add a prop "selected" to the component. Handle the selection outside the component (in the query.tsx file).
4. Go to step 1 and refactor other components.

Note: feel free to subdivide this ticket into smaller chunks. I would even suggest to start with a separate branch in a subticket, refactor single component and use it as an example for other components.

Edit: here's an example #508

Subtickets:

• Refactor footer in query.tsx #505
• Refactor handleKeyDown event functions in query.tsx #509
• Refactor the component return of query.tsx #510