ui: use admin-ui-components repo for Empty component

We are transitioning the `Empty` component dependency to the
`admin-ui-components` repo. In the long run, all components
shared between Admin UI and CockroachCloud will be extracted
in this manner.

Depends on cockroachdb/yarn-vendored#24

Resolves #51382

Release note: None

pkg/ui/package.json

@@ -49,6 +49,7 @@
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.7.4",
+    "@cockroachlabs/admin-ui-components": "^0.1.1",
     "@storybook/react": "5.0.6",
     "@types/analytics-node": "^0.0.32",
     "@types/assert": "^1.4.0",

pkg/ui/src/views/reports/containers/network/latency/index.tsx

@@ -18,7 +18,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { getValueFromString, Identity } from "..";
 import "./latency.styl";
-import { Empty } from "src/components/empty";
+import { Empty } from "@cockroachlabs/admin-ui-components";
 
 interface StdDev {
   stddev: number;

pkg/ui/src/views/shared/components/sortabletable/index.tsx

@@ -19,7 +19,7 @@ import { trackTableSort } from "src/util/analytics";
 import styles from "./sortabletable.module.styl";
 import { Spin, Icon } from "antd";
 import SpinIcon from "src/components/icon/spin";
-import { Empty, EmptyProps } from "src/components/empty";
+import { Empty, EmptyProps } from "@cockroachlabs/admin-ui-components";
 
 const cx = classNames.bind(styles);
 /**

pkg/ui/src/views/shared/components/sortedtable/index.tsx

@@ -14,7 +14,7 @@ import { Moment } from "moment";
 import React from "react";
 import { createSelector } from "reselect";
 import { ExpandableConfig, SortableColumn, SortableTable, SortSetting } from "src/views/shared/components/sortabletable";
-import { EmptyProps } from "oss/src/components/empty";
+import { EmptyProps } from "@cockroachlabs/admin-ui-components";
 
 export interface ISortedTablePagination {
   current: number;
@@ -234,7 +234,6 @@ export class SortedTable<T> extends React.Component<SortedTableProps<T>, SortedT
         rowClass={this.rowClass(this.props)}
         className={this.props.className}
         expandableConfig={expandableConfig}
-        drawer={this.props.drawer}
         firstCellBordered={firstCellBordered}
         renderNoResult={renderNoResult}
         loading={loading}

pkg/ui/src/views/statements/diagnostics/diagnosticsView.spec.tsx

@@ -13,17 +13,14 @@ import { assert } from "chai";
 import { mount, ReactWrapper } from "enzyme";
 import sinon, { SinonSpy } from "sinon";
 import Long from "long";
-import classNames from "classnames/bind";
 
 import "src/enzymeInit";
 import { DiagnosticsView, EmptyDiagnosticsView } from "./diagnosticsView";
 import { Table } from "src/components";
 import { connectedMount } from "src/test-utils";
 import { cockroach } from "src/js/protos";
 import IStatementDiagnosticsReport = cockroach.server.serverpb.IStatementDiagnosticsReport;
-import buttonStyles from "src/components/button/button.module.styl";
 
-const cx = classNames.bind(buttonStyles);
 const sandbox = sinon.createSandbox();
 
 describe("DiagnosticsView", () => {
@@ -53,7 +50,7 @@ describe("DiagnosticsView", () => {
     });
 
     it("calls activate callback with statementId when click on Activate button", () => {
-      const activateButtonComponent = wrapper.find(`.${cx("crl-button")}`).first();
+      const activateButtonComponent = wrapper.find("button").first();
       activateButtonComponent.simulate("click");
       activateFn.calledOnceWith(statementFingerprint);
     });
@@ -82,7 +79,7 @@ describe("DiagnosticsView", () => {
     });
 
     it("calls activate callback with statementId when click on Activate button", () => {
-      const activateButtonComponent = wrapper.find(`.${cx("crl-button")}`).first();
+      const activateButtonComponent = wrapper.find("button").first();
       activateButtonComponent.simulate("click");
       activateFn.calledOnceWith(statementFingerprint);
     });

pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx

@@ -45,7 +45,7 @@ import { getDiagnosticsStatus, sortByCompletedField, sortByRequestedAtField } fr
 import { statementDiagnostics } from "src/util/docs";
 import { createStatementDiagnosticsAlertLocalSetting } from "src/redux/alerts";
 import { trackActivateDiagnostics, trackDownloadDiagnosticsBundle } from "src/util/analytics";
-import { Empty } from "src/components/empty";
+import { Empty } from "@cockroachlabs/admin-ui-components";
 
 interface DiagnosticsViewOwnProps {
   statementFingerprint?: string;

pkg/ui/yarn.lock

@@ -1806,6 +1806,20 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@cockroachlabs/admin-ui-components@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@cockroachlabs/admin-ui-components/-/admin-ui-components-0.1.1.tgz#53769f3c2618f24e09829f51d5ac3b4486bb4b03"
+  integrity sha512-i6tWkHpIoBs7oiVfGHvyg79cYhL4gLQgKKdVz6KPyDGXcs5kwi0WwrTP176SHfgOpz8ODwwZdYa6OtGYhUXCyQ==
+  dependencies:
+    "@cockroachlabs/icons" "^0.2.2"
+    "@popperjs/core" "^2.4.0"
+    react-popper "^2.2.3"
+
+"@cockroachlabs/icons@^0.2.2":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@cockroachlabs/icons/-/icons-0.2.4.tgz#b800ed8fb7a23bab3b86217eedca9174b3ef18f3"
+  integrity sha512-hu9W37fzw30wM5FPEeGnOONL2AAW5uNOtRSdROrFyY6hlRtKli1piE/mfHmSiTfSoZ3SHravCl88ErH6WLqw8g==
+
 "@emotion/cache@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.27.tgz#7895db204e2c1a991ae33d51262a3a44f6737303"
@@ -1921,6 +1935,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@popperjs/core@^2.4.0":
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
+  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -10504,6 +10523,11 @@ react-fast-compare@^2.0.2:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-focus-lock@^1.17.7:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.19.1.tgz#2f3429793edaefe2d077121f973ce5a3c7a0651a"
@@ -10624,6 +10648,14 @@ react-popper@^1.3.6:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-popper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
+  integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-redux@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"