React client-side UI: Address noted differences

[MikeEdgar]

Each of the following differences noted by @alexcreasy needs to be fixed following the merge of #2465. Many are minor but this list is a blocker for 0.13.0.

---

These are the differences I've found in the console after the changes have been applied.

Landing Page

• Missing Welcome banner with graphic (OK 👍)
• Missing Recommended learning resources (fixed by Fix several issues/differences in new React client-side application #2520)

Anonymous Login Page

• Missing entirely (I think in our discussion we both agreed this is actually desirable)

Toolbar header

• Cluster context selector has a different style, but also it uses the term "Namespace" instead of "Project" and its no longer in bold. (OK, consistent with namespace for users/connectors)

Cluster Overview Page

Page Header

• Breadcrumbs missing server name link - before change: "Home > kafka1 > Overview" / after change: "Home > Overview" (OK 👍)
• Missing Last updated time stamp and refresh button (added data reload button in masthead for use on any page, Fix several issues/differences in new React client-side application #2520)
• Cluster connection details button has a different style: before: filled blue no border / after: transparent with border (fixed by Fix several issues/differences in new React client-side application #2520)

Kafka cluster details card

• Text under metrics difference: before "groups" after "consumer groups" (fixed by Fix several issues/differences in new React client-side application #2520)
• Slight differences in padding and spacing - nothing looks out of place though (OK 👍)

Recent topics card

• Empty state is different: before: has text "When you start looking at specific topics ……." after "No recent topics, cubes icon, Topics you view will appear here for quick access" (fixed)
• no docs link to "Using the Topic Operator to manage Kafka topics. (fixed by Fix several issues/differences in new React client-side application #2520)
• When the list is not empty before the recent topics are presented in a table with a title "Name" and lines between rows. After there is no rows and title

Cluster metrics card

• Difference in text on filter dropdown, before: "All Nodes" / after: "All brokers" (fixed by Fix several issues/differences in new React client-side application #2520)
• Used disk space chart appears to have a different scale. Also it appears to be missing certain lines - I can't be sure but before the changes there appear to be all the dashed lines plotted for storage thresholds whereas after it appears to be missing them. (fixed by Fix several issues/differences in new React client-side application #2520)
• After the changes there are no filters controls for CPU or Memory Usage. (OK 👍)

Topics card

• Changes to text: Before red exclamation point is "Unavailable" after is "Offline". (fixed by Fix several issues/differences in new React client-side application #2520)
• No dashed underlines on the links.
• Change in link text: before "View all" after "View all Topics" (fixed by Fix several issues/differences in new React client-side application #2520)
• Changes to text: before: "14 topics | 114 partitions" after "114 Total topics | 114 Total partitions" (fixed by Fix several issues/differences in new React client-side application #2520)
• Tooltips are vastly different, far more information is given before the changes than after. (fixed by Fix several issues/differences in new React client-side application #2520)

Topic metrics

• Missing subtitle and tooltip: before "Topics bytes incoming and outgoing" (fixed)
• After changes All topics dropdown doesn't sit nicely in line when at a medium width breakpoint - pressing it causes the layout to jump around and the dropdown to be out of place. Note this behaviour doesn't happen when you have the page width beyond the xl breakpoint.
• Tooltip text next to Hide internal topics is different, after the change it doesn't have the information about internal topics being prefixed with an _ (fixed by Fix several issues/differences in new React client-side application #2520)

Topics page

• Missing last updated timestamp and refresh button (added data reload button in masthead for use on any page, Fix several issues/differences in new React client-side application #2520)
• Missing button next to filter by name text box
• Different colour badges before: blue badge is used for in sync topics after: green. (OK 👍)
• Pagination works differently, when switching pages, before the table neatly changes view using skeletons in the rows, after it has a pretty ugly loading spinner replace the whole table which leads to a fairly janky landing when the table loads. Not this only happens on first data load - I guess it's using caching the switch is seamless when you've loaded all the data.
• Missing tooltip next to the Status column title after changes. (fixed by Fix several issues/differences in new React client-side application #2520)

Kafka Nodes page

• One the primary navbar this page is called Kafka nodes before and is called Nodes after (fixed)
• Overview tab gives me a 403 Forbidden after, this could just be my setup? (security configuration issue)
• Rebalance tab: Missing name dropdown filter and also new status and mode drop-down added that didn't exist before

Kafka Connect Page

• Missing last updated timestamp and refresh button (added data reload button in masthead for use on any page, Fix several issues/differences in new React client-side application #2520)

Connectors Tab

• Filter by name box replaced by Search connectors box
• When clicking through to a connector detail under the tasks tab instead of it simply saying "No Task" it now says "common.noEntityAvailable" with the cubes icon. (fixed)

Connect clusters tab

• Tab name has been renamed to Clusters
• Filter by name input box has been replaces by Search connect clusters, the button has been removed and a spyglass icon added.
• The table column "Connect Version" is not called "Version" and has a control for ordering that didn't exist previously.

Kafka Users page

• I get an "Api Error: 403 Forbidden" now… again probably a configuration issue my end, but wanted to note it in case it's a bug. (security configuration issue)

Groups page

• Missing last updated timestamp and refresh button (added data reload button in masthead for use on any page, Fix several issues/differences in new React client-side application #2520)
• Missing info banner with "Group types identify how kafka client applications coordinate work…… learn more link" (fixed by Fix several issues/differences in new React client-side application #2520)
• The filter by (Name | Type | State) selector is removed and replaced by Filter by name box it's added a separate control for Type and State filtering.
• Reset offsets kebab option is now a modal rather than a separate page - it misses the dropdown options of the dry run button and adds a CLI command section. It also has a clear button in addition to cancel which I'm not sure what it's supposed to do - it seemingly does nothing. (modal OK, functionality refined in Fixes and Enhancements to group reset functionality #2546)

Originally posted by @alexcreasy in #2465 (comment)