From 5c47160deb395c9632662b97c2b821bb55d4a946 Mon Sep 17 00:00:00 2001
From: Andrii Vorobiov <and.vorobiov@gmail.com>
Date: Tue, 31 Mar 2020 13:54:54 +0300
Subject: [PATCH] ui: Default sort by Execution Count column for Statements

Before, default sorting was set to Latency column in
Statements page that was unintuitive.
Now it is sorted by Execution count column.

Release note (admin ui change): Change default sorting column on Statements
page to Execution Count

Release justification: bug fixes and low-risk updates to new functionality
---
 .../views/statements/statementsPage.spec.tsx  | 34 +++++++++++++++++++
 .../src/views/statements/statementsPage.tsx   | 12 ++++---
 2 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 pkg/ui/src/views/statements/statementsPage.spec.tsx

diff --git a/pkg/ui/src/views/statements/statementsPage.spec.tsx b/pkg/ui/src/views/statements/statementsPage.spec.tsx
new file mode 100644
index 000000000000..59b2c044c64c
--- /dev/null
+++ b/pkg/ui/src/views/statements/statementsPage.spec.tsx
@@ -0,0 +1,34 @@
+// Copyright 2018 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import { assert } from "chai";
+import { ReactWrapper } from "enzyme";
+
+import { connectedMount } from "src/test-utils";
+import StatementsPageConnected, {
+  StatementsPage,
+  StatementsPageProps,
+  StatementsPageState,
+} from "src/views/statements/statementsPage";
+
+describe("StatementsPage", () => {
+  describe("Statements table", () => {
+    it("sorts data by Execution Count DESC as default option", () => {
+      const rootWrapper = connectedMount(() => <StatementsPageConnected />);
+
+      const statementsPageWrapper: ReactWrapper<StatementsPageProps, StatementsPageState> = rootWrapper.find(StatementsPage).first();
+      const statementsPageInstance = statementsPageWrapper.instance();
+
+      assert.equal(statementsPageInstance.state.sortSetting.sortKey, 3);
+      assert.equal(statementsPageInstance.state.sortSetting.ascending, false);
+    });
+  });
+});
diff --git a/pkg/ui/src/views/statements/statementsPage.tsx b/pkg/ui/src/views/statements/statementsPage.tsx
index e1ae62197262..3e45d7ad5dac 100644
--- a/pkg/ui/src/views/statements/statementsPage.tsx
+++ b/pkg/ui/src/views/statements/statementsPage.tsx
@@ -47,7 +47,7 @@ import "./statements.styl";
 
 type ICollectedStatementStatistics = protos.cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics;
 
-interface StatementsPageProps {
+interface OwnProps {
   statements: AggregateStatistics[];
   statementsError: Error | null;
   apps: string[];
@@ -62,20 +62,22 @@ type PaginationSettings = {
   current: number;
 };
 
-interface StatementsPageState {
+export interface StatementsPageState {
   sortSetting: SortSetting;
   pagination: PaginationSettings;
   search?: string;
 }
 
-export class StatementsPage extends React.Component<StatementsPageProps & RouteComponentProps<any>, StatementsPageState> {
+export type StatementsPageProps = OwnProps & RouteComponentProps<any>;
+
+export class StatementsPage extends React.Component<StatementsPageProps, StatementsPageState> {
   activateDiagnosticsRef: React.RefObject<ActivateDiagnosticsModalRef>;
 
-  constructor(props: StatementsPageProps & RouteComponentProps<any>) {
+  constructor(props: StatementsPageProps) {
     super(props);
     const defaultState = {
       sortSetting: {
-        sortKey: 6, // Latency column is default for sorting
+        sortKey: 3, // Sort by Execution Count column as default option
         ascending: false,
       },
       pagination: {