Tickets - Add/Remove columns in tabular view

[sanmont3drepo]

Description

Product issue: https://github.com/3drepo/3D-Repo-Product-Team/issues/443
For providing more flexibility to users to be able to customize the view in tabular view we want to add the abilty to add and remove columns.
In this new feature we are going to add a gear representing the configuration of the table. After clicking there we are going to show a searchable select box (like the one in multi select in tickets) showing all the possible columns which includes all the current columns + properties + moduleproperties.
After the user selects or deselect the columns for the table the columns are added or removed to each table group

(there is some overlap of goals with #5310)

Goals

• As a viewer+ I want to be able to remove some columns i do not care about
• As a viewer+ I want to be able to add additional columns for custom properties that I want to see
• As a viewer+, when I change the table, retain the column width if the column remains.
• As a viewer+, when I remove a column, retain the preferred width if I were to reinstate it within that session.

Tasks

• Add the extra column with the gear
• Add the multi-select option with the available/selected columns
• Modify redux files to update the table with the new columns values

Related Resources

MockUp

[Didi-Kwan]

Acceptance criteria

• User clicking on the gear icon able to open the columns selection dialogue.
• User able to search columns inside the dialogue.
• User able to select/deselect columns inside the dialogue.
• User able to scroll through the dialogue to view all columns.
• If the length of column name exceed the dialogue box, make sure to shorten it and generate a tooltip to display full name if cursor hovering on it.
• The available columns should include both active and deprecated properties inside the selected ticket template.
• Selected columns should move to the front of the column list.
• The column should be added to the table immediately after selecting the column in the dialogue.
• The new column should be added at the end of the table with default width.
• The new column data should update immediately.
• If the length of column name exceed the column width, make sure to shorten it and generate a tooltip to display full name if cursor hovering on it.
• When adding new column, other columns width should not be affected.
• If two or more columns have the same name, adding new column to the table should be based on selection in the dialogue, not label.
• The column should be removed from the table immediately after deselecting the column in the dialogue.
• No data loss, misalignment or overlapping should occur in other cells after removing the column.
• When removing a column, other columns width should not be affected.
• If two or more columns have the same name, removing a column from the table should be based on deselection in the dialogue, not label.
• If the user select the removed column again, the column width should be the same as before it got removed.
• Make sure the columns stays the same when user use existing functions which updates the table such as add/remove models, change to other ticket type back and forth, apply grouping.
• If user change to other ticket type which some columns are not available, the columns should be removed automatically.
• Ensure adding/removing column of a table also applied to other tables when grouping is applied.
• Refresh the page/Re-enter the tabular view should restore everything back to default state. (e.g. Display the table with default columns and default column width.)