✨ Issues: Add single application table mode, add "Issues" link to app inventory detail drawer

[mturley]

Implements the contents of the "Single application" tab of the Issues page, which is also reachable from a link in each application's details drawer on the Application Inventory page.

• When navigating to /issues/single-app with no app id, an empty state is shown that directs the user to select an application from a dropdown in the toolbar above the table.
  • If the user is navigating here from the "all issues" tab and they have filters applied, they will get a warning modal confirming that it is okay to clear those filters in order to navigate away. The same warning appears if you have filters in the "single application" tab and you click the "all issues" tab. See the ConfirmDialog now rendered in the issues.tsx page.
• After selecting an application (or clicking the Issues link in the app inventory details drawer), the user is redirected to the new /issues/single-app/:applicationId route, where the table is rendered.
  • When doing this redirect, if there are any filters applied to a previously selected application, they get preserved. See getIssuesSingleAppSelectedLocation.
• This table renders AnalysisIssueReport objects, which are almost identical to the AnalysisRuleReport except that they have the issue id on them, and they have a number of files instead of a number of applications.
• The "single application" issues table and the "all issues" table are nearly identical: the only difference is that instead of an "Affected applications" column, we have an "Affected files" column and clicking the number of files opens the IssueDetailDrawer directly instead of navigating to another page that uses that drawer (as the "All issues" view does by opening the "Affected applications" table). To support this:
  • The table code has been moved from issues.tsx to issues-table.tsx, where it has a prop mode: "allIssues" | "singleApp", and some pieces of the table conditionally render depending on the mode.
  • In addition to useFetchRuleReports, the table now also calls useFetchIssueReports. Only one of these queries will be enabled depending on the table's mode, and the data array passed into useTableControlProps comes from whichever is the active query, and has the type (AnalysisRuleReport | AnalysisIssueReport)[]. Because these two types share most of the same properties, most of the table code still works as-is without caring which type is being used. In the places where we need to access a property specific to RuleReport or IssueReport, we use an as type assertion localized to those few lines of code.
  • The issue-detail-drawer folder and all its components has been moved out of the affected-applications folder and is now a sibling of issues-table.tsx, where it is used directly if you are in singleApp mode. It is still used in the affected applications table with updated imports.
    • This drawer is identical between the "issues -> single application" table and the "issues -> all issues -> affected applications" table -- selecting a row in either table means you are selecting one Issue object (identified uniquely by the intersection of app id, ruleset and rule).
    • However, the two tables where this drawer is used are listing different types of objects: IssueReport and AppReport respectively. The drawer component previously accepted ruleReport as a prop. It has been refactored to simply accept an issueId and an applicationName, and it fetches the underlying Issue object internally instead of relying on the issue-related properties on the report (which are structured differently between the IssueReport and AppReport models). This will also make it easier in the future if we want to show more Issue-object-related fields in additional tabs in this drawer.
  • Filter categories which were already abstracted out into useSharedFilterCategoriesForIssuesAndAffectedApps() are now only used for the allIssues mode.
• Query hooks and axios fetch calls have been added for listing AnalysisIssueReports and fetching individual AnalysisIssue objects. Some constants in these files have been renamed for readability.
  • Note: this is a new model introduced in ✨ Add new IssueReport. tackle2-hub#417.
• The hub URL for fetching AnalysisAppReport objects has been renamed from /analyses/report/applications to /analyses/report/issues/applications, for compatibility with ✨ Add Dep.provider. tackle2-hub#421.
• In the drawer's Affected Files table, the effort filter has been enabled because it is now supported in the hub.
• The FilterToolbar components have been updated to support an isDisabled prop, so we can disable all filters on the single-app issues table when there is no application selected.

NOTE FOR REVIEWERS

• The issues-table.tsx and issue-detail-drawer.tsx diffs are hard to read because git treated them as full rewrites.
  • Most of the contents of issues-table.tsx are moved as-is from issues.tsx, the only changes being the conditionals to support multiple modes and fetch the two types of reports. To see only the part of the diff after this file was moved, click here, wait for the auto-scroll after the page fully loads, then click "Load diff": cf3d2b3...mturley:issues-single-app#diff-fb394ab07ab689b297c8bc6c036ca7c501cbcdc5e7ff84e4f6127a48af46680b
  • Most of the contents of issue-detail-drawer.tsx are the same, except that the file has moved and it now has a useFetchIssue call at the top. To see only the part of the diff after this file was moved, click here and wait for the auto-scroll after the page fully loads: 37fdbce...mturley:issues-single-app#diff-764c7126e9c4a05ad639b4bb9fbcff8bee0b9cfbb0c9df812c4b9f4f4b5128ee
• Due to model changes in the hub, you will need to delete your hub database and bounce the hub pod before testing these changes.

Screenshots

Clicking the "single application" tab while filters are applied on the "all issues" tab:

The "single application" tab with no app selected:

The dropdown for selecting an app, with an inline filter by app name:

The details drawer on the Application Inventory page with the Issues link to take you to "single application" with an app selected:

The "single application" tab after selecting an app (via the dropdown or via the Issues link in the app inventory details drawer):

The "single application" tab with the issue details drawer open, after clicking the number of affected files in a row. This is the same exact drawer view that is reachable by finding this issue on the "all issues" table, clicking the number of affected apps, then clicking this app.

[codecov]

Codecov Report

Patch coverage: 47.61% and project coverage change: -0.06 ⚠️

Comparison is base (7fd4726) 47.05% compared to head (4a245ef) 46.99%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1069      +/-   ##
==========================================
- Coverage   47.05%   46.99%   -0.06%     
==========================================
  Files         177      177              
  Lines        4416     4430      +14     
  Branches      983      990       +7     
==========================================
+ Hits         2078     2082       +4     
- Misses       2324     2334      +10     
  Partials       14       14              

Flag	Coverage Δ
unitests	46.99% <47.61%> (-0.06%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
.../shared/components/FilterToolbar/FilterControl.tsx	37.50% <ø> (ø)
.../shared/components/FilterToolbar/FilterToolbar.tsx	19.64% <0.00%> (-0.36%)	⬇️
...ponents/FilterToolbar/MultiselectFilterControl.tsx	6.77% <0.00%> (-0.24%)	⬇️
...d/components/FilterToolbar/SearchFilterControl.tsx	21.05% <0.00%> (-1.17%)	⬇️
...d/components/FilterToolbar/SelectFilterControl.tsx	8.10% <0.00%> (-0.47%)	⬇️
client/src/app/api/rest.ts	54.76% <54.54%> (-0.26%)	⬇️
client/src/app/Constants.ts	100.00% <100.00%> (ø)
client/src/app/Paths.ts	90.00% <100.00%> (+0.25%)	⬆️

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.