Merge #58701

58701: ui: statement details import r=koorosh a=koorosh

Related to #57372
Depends on cockroachdb/ui#162
Depends on cockroachdb/yarn-vendored#51

Statement details and Diagnostics view pages are moved out
to `admin-ui-components` package and now they are imported back
as a reusable components.

In addition to changed imports, StatementDetails component now exposes
additional props for Diagnostics view tab. Before, StatementDetails
component used Diagnostics view connected to store and now it uses
pure component. This change were made to provide single point of
integration to redux store (the same way as other components connected).

Tracking analytics functionality for Diagnostics view was initially called directly
from components and now it's refactored out of component and involved
with redux actions and sagas. It was necessary to exclude this logic from pure
components and allow client apps which integrate Statement details to implement
their own logic for tracking analytics if necessary.

TODO:
- [x]  remove all exported components from this code base to avoid duplicates.
- [x]  update `admin-ui-components` package version in `package.json`

Release note: None

Co-authored-by: Andrii Vorobiov <[email protected]>

pkg/ui/ccl/src/views/clusterviz/containers/map/breadcrumbs.tsx

@@ -12,7 +12,7 @@ import { Link } from "react-router-dom";
 
 import { generateLocalityRoute } from "src/util/localities";
 import { LocalityTier } from "src/redux/localities";
-import { intersperse } from "src/util/intersperse";
+import { util } from "@cockroachlabs/admin-ui-components";
 import { getLocalityLabel } from "src/util/localities";
 import mapPinIcon from "!!raw-loader!assets/mapPin.svg";
 import { trustIcon } from "src/util/trust";
@@ -24,6 +24,8 @@ interface BreadcrumbsProps {
   tiers: LocalityTier[];
 }
 
+const { intersperse } = util;
+
 export class Breadcrumbs extends React.Component<BreadcrumbsProps> {
   render() {
     const paths = breadcrumbPaths(this.props.tiers);

pkg/ui/package.json

@@ -15,7 +15,7 @@
     "cypress:update-snapshots": "yarn cypress run --env updateSnapshots=true --spec 'cypress/integration/**/*.visual.spec.ts'"
   },
   "dependencies": {
-    "@cockroachlabs/admin-ui-components": "^0.1.28",
+    "@cockroachlabs/admin-ui-components": "^0.1.37",
     "analytics-node": "^3.4.0-beta.1",
     "antd": "^3.25.2",
     "babel-polyfill": "^6.26.0",

pkg/ui/src/app.spec.tsx

@@ -32,8 +32,10 @@ import {
 } from "src/views/databases/containers/databases";
 import { TableMain } from "src/views/databases/containers/tableDetails";
 import { DataDistributionPage } from "src/views/cluster/containers/dataDistribution";
-import { StatementsPage } from "@cockroachlabs/admin-ui-components";
-import { StatementDetails } from "src/views/statements/statementDetails";
+import {
+  StatementsPage,
+  StatementDetails,
+} from "@cockroachlabs/admin-ui-components";
 import Debug from "src/views/reports/containers/debug";
 import { ReduxDebug } from "src/views/reports/containers/redux";
 import { CustomChart } from "src/views/reports/containers/customChart";

pkg/ui/src/components/index.ts

@@ -18,10 +18,8 @@ export * from "./sideNavigation";
 export * from "./pageHeader";
 export * from "./text";
 export * from "./input";
-export * from "./table";
 export * from "./tooltip";
 export * from "./select";
-export * from "./downloadFile";
 export * from "./modal";
 export * from "./rangeCalendar";
 export * from "./link";

pkg/ui/src/redux/analyticsActions.ts

@@ -15,6 +15,10 @@ export const TRACK_STATEMENTS_SEARCH =
 export const TRACK_STATEMENTS_PAGINATION =
   "cockroachui/analytics/TRACK_STATEMENTS_PAGINATION";
 export const TRACK_TABLE_SORT = "cockroachui/analytics/TRACK_TABLE_SORT";
+export const TRACK_DOWNLOAD_DIAGNOSTIC_BUNDLE =
+  "cockroachui/analytics/TRACK_DOWNLOAD_DIAGNOSTIC_BUNDLE";
+export const TRACK_STATEMENT_DETAILS_SUBNAV_SELECTION =
+  "cockroachui/analytics/TRACK_STATEMENT_DETAILS_SUBNAV_SELECTION";
 
 export interface TableSortActionPayload {
   tableName: string;
@@ -54,3 +58,21 @@ export function trackTableSortAction(
     },
   };
 }
+
+export function trackDownloadDiagnosticsBundleAction(
+  statementFingerprint: string,
+): PayloadAction<string> {
+  return {
+    type: TRACK_DOWNLOAD_DIAGNOSTIC_BUNDLE,
+    payload: statementFingerprint,
+  };
+}
+
+export function trackStatementDetailsSubnavSelectionAction(
+  tabName: string,
+): PayloadAction<string> {
+  return {
+    type: TRACK_STATEMENT_DETAILS_SUBNAV_SELECTION,
+    payload: tabName,
+  };
+}