From 786463a33fdb92f9ecc1f5b52e0997566f462dbf Mon Sep 17 00:00:00 2001 From: David Hartunian Date: Mon, 6 Jul 2020 17:55:19 -0400 Subject: [PATCH 1/2] ui: remove unused "drawer" component This component is no longer used as part of the `SortableTable`. We always link to a detail page instead of showing a "drawer" view for a table row. Release note: None --- .../components/drawer/drawer.module.styl | 82 ------------------- .../views/shared/components/drawer/index.tsx | 61 -------------- .../shared/components/sortabletable/index.tsx | 49 +---------- 3 files changed, 2 insertions(+), 190 deletions(-) delete mode 100644 pkg/ui/src/views/shared/components/drawer/drawer.module.styl delete mode 100644 pkg/ui/src/views/shared/components/drawer/index.tsx diff --git a/pkg/ui/src/views/shared/components/drawer/drawer.module.styl b/pkg/ui/src/views/shared/components/drawer/drawer.module.styl deleted file mode 100644 index 9d951a768b91..000000000000 --- a/pkg/ui/src/views/shared/components/drawer/drawer.module.styl +++ /dev/null @@ -1,82 +0,0 @@ -// Copyright 2020 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. - -.__actions - button, a - width auto - color #f6f6f6 - font-size 12px - font-family Lato-Bold - line-height 2 - letter-spacing 0.1px - &:hover - color #5f6c87 - -.drawer--preset-black - display flex - align-items center - /* width */ - ::-webkit-scrollbar { - width 7px - } - - /* Track */ - ::-webkit-scrollbar-track { - background transparent - border-radius 10px - } - - /* Handle */ - ::-webkit-scrollbar-thumb { - background #5f6c87 - border-radius 10px - } - - /* Handle on hover */ - ::-webkit-scrollbar-thumb:hover { - background #5f6c87ad - } - :global(.ant-divider) - width 1px - background #5f6c87 - margin: 0 15px - height 14px - .__actions - button, a - width auto - color #f6f6f6 - font-size 12px - font-family Lato-Bold - line-height 2 - letter-spacing 0.1px - &:hover - color #5f6c87 - :global(.ant-drawer-content) - overflow auto - :global(.ant-drawer-mask) - background-color transparent - :global(.ant-drawer-content-wrapper) - padding-left 80px - box-shadow none !important - :global(.ant-drawer-content) - background #242a35 - :global(.ant-drawer-header) - padding 15px 0 - margin 0 24px - background transparent - border-bottom: 1px solid #5f6c87; - :global(.ant-drawer-body) - padding 15px 20px - margin 0 4px - height 190px - overflow-x hidde - overflow-y auto - - diff --git a/pkg/ui/src/views/shared/components/drawer/index.tsx b/pkg/ui/src/views/shared/components/drawer/index.tsx deleted file mode 100644 index e7286b7962e7..000000000000 --- a/pkg/ui/src/views/shared/components/drawer/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -// 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 { Drawer, Button, Divider } from "antd"; -import { Link } from "react-router-dom"; -import classNames from "classnames/bind"; -import styles from "./drawer.module.styl"; - -const cx = classNames.bind(styles); - -interface IDrawerProps { - visible: boolean; - onClose: () => void; - details?: boolean; - children?: React.ReactNode | string; - data: any; -} - -const openDetails = (data: any) => { - const base = data.app && data.app.length > 0 ? `/statements/${data.app}/${data.implicitTxn}` : `/statement/${data.implicitTxn}`; - const link = `${base}/${encodeURIComponent(data.statement)}`; - return ( - View statement details - ); -}; - -// tslint:disable-next-line: variable-name -export const DrawerComponent = ({ visible, onClose, children, data, details, ...props }: IDrawerProps) => ( - - - {details && ( - - - {openDetails(data)} - - )} - - } - placement="bottom" - closable={false} - onClose={onClose} - visible={visible} - className={cx("drawer--preset-black")} - // getContainer={false} - {...props} - > - {children} - -); diff --git a/pkg/ui/src/views/shared/components/sortabletable/index.tsx b/pkg/ui/src/views/shared/components/sortabletable/index.tsx index d879b529bf45..9640de2b1288 100644 --- a/pkg/ui/src/views/shared/components/sortabletable/index.tsx +++ b/pkg/ui/src/views/shared/components/sortabletable/index.tsx @@ -14,8 +14,6 @@ import map from "lodash/map"; import isUndefined from "lodash/isUndefined"; import times from "lodash/times"; -import getHighlightedText from "src/util/highlightedText"; -import { DrawerComponent } from "../drawer"; import { trackTableSort } from "src/util/analytics"; import styles from "./sortabletable.module.styl"; @@ -77,7 +75,6 @@ interface TableProps { // i.e. each row has an expand/collapse arrow on its left, and renders // a full-width area below it when expanded. expandableConfig?: ExpandableConfig; - drawer?: boolean; firstCellBordered?: boolean; renderNoResult?: React.ReactNode; loading?: boolean; @@ -120,11 +117,6 @@ export class SortableTable extends React.Component { }; state = { - visible: false, - drawerData: { - statement: "", - search: "", - }, activeIndex: NaN, }; @@ -161,7 +153,7 @@ export class SortableTable extends React.Component { } renderRow = (rowIndex: number) => { - const { columns, expandableConfig, drawer, firstCellBordered } = this.props; + const { columns, expandableConfig, firstCellBordered } = this.props; const classes = cx( "sort-table__row", "sort-table__row--body", @@ -176,10 +168,6 @@ export class SortableTable extends React.Component { key={rowIndex} className={classes} onClick={() => { - if (drawer) { - this.setState({ activeIndex: rowIndex }); - this.showDrawer(rowIndex); - } if (onClickExpand) { onClickExpand(rowIndex, !expanded); } @@ -228,36 +216,8 @@ export class SortableTable extends React.Component { return output; } - showDrawer = (rowIndex: number) => { - const { drawer, columns } = this.props; - const { drawerData } = this.state; - const values: any = columns[0].cell(rowIndex); - this.setState({ - visible: true, - drawerData: drawer ? values.props : drawerData, - }); - } - - onClose = () => { - this.setState({ - visible: false, - drawerData: { - statement: "", - search: "", - }, - activeIndex: NaN, - }); - } - - onChange = (e: { target: { value: any; }; }) => { - this.setState({ - placement: e.target.value, - }); - } - render() { - const { sortSetting, columns, expandableConfig, drawer, firstCellBordered, count, renderNoResult, className, loading, loadingLabel, empty, emptyProps } = this.props; - const { visible, drawerData } = this.state; + const { sortSetting, columns, expandableConfig, firstCellBordered, count, renderNoResult, className, loading, loadingLabel, empty, emptyProps } = this.props; if (empty) { return ; } @@ -310,11 +270,6 @@ export class SortableTable extends React.Component { {loadingLabel && {loadingLabel}} )} - {drawer && ( - - {getHighlightedText(drawerData.statement, drawerData.search, true)} - - )} {count === 0 && (
{renderNoResult} From 15232beac640864d508ce2aea5e752563a29d23b Mon Sep 17 00:00:00 2001 From: David Hartunian Date: Tue, 14 Jul 2020 15:03:11 -0400 Subject: [PATCH 2/2] 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 https://github.com/cockroachdb/yarn-vendored/pull/24 Resolves #51382 Release note: None --- pkg/ui/package.json | 1 + pkg/ui/src/components/empty/empty.module.styl | 86 ------------------ pkg/ui/src/components/empty/empty.tsx | 90 ------------------- pkg/ui/src/components/empty/index.tsx | 11 --- .../containers/network/latency/index.tsx | 2 +- .../shared/components/sortabletable/index.tsx | 2 +- .../shared/components/sortedtable/index.tsx | 3 +- .../diagnostics/diagnosticsView.spec.tsx | 7 +- .../diagnostics/diagnosticsView.tsx | 2 +- pkg/ui/yarn-vendor | 2 +- pkg/ui/yarn.lock | 32 +++++++ 11 files changed, 40 insertions(+), 198 deletions(-) delete mode 100644 pkg/ui/src/components/empty/empty.module.styl delete mode 100644 pkg/ui/src/components/empty/empty.tsx delete mode 100644 pkg/ui/src/components/empty/index.tsx diff --git a/pkg/ui/package.json b/pkg/ui/package.json index 61acc77b51e1..136636d5e066 100644 --- a/pkg/ui/package.json +++ b/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", diff --git a/pkg/ui/src/components/empty/empty.module.styl b/pkg/ui/src/components/empty/empty.module.styl deleted file mode 100644 index 7c52868dde36..000000000000 --- a/pkg/ui/src/components/empty/empty.module.styl +++ /dev/null @@ -1,86 +0,0 @@ -// Copyright 2019 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. - -@require '~src/components/core/index.styl' - -.cl-empty-view - display flex - flex-direction column - background-color $colors--white - position relative - padding $spacing-large 0 $spacing-large $spacing-large - background-position top right - background-size contain - background-repeat no-repeat - - &__title - display flex - flex-direction row - justify-content space-between - font-size $font-size--x-large - color $colors--neutral-7 - line-height $line-height--x-large - margin-bottom 0 - - &__footer - margin 20px 0 0 - - &__content - max-width 600px - - &__main - &--text - color $colors--neutral-6 - font-size $font-size--medium - line-height $line-height--medium-small - &--anchor - margin-left 6px - - &__actions-column - display flex - flex-direction row - flex-wrap nowrap - - &__vertical-line - width 1px - min-height 100% - border-left 1px solid $colors--neutral-3 - margin 0 $spacing-x-small - - &__icon - display inline-block - color inherit - font-style normal - line-height 0 - text-align center - text-transform none - vertical-align -0.125em - margin-right $spacing-x-small - - &__actions-column - display flex - flex-direction row - flex-wrap nowrap - - &__vertical-line - width 1px - min-height 100% - border-left 1px solid $colors--neutral-3 - margin 0 $spacing-x-small - - &__icon - display inline-block - color inherit - font-style normal - line-height 0 - text-align center - text-transform none - vertical-align -0.125em - margin-right $spacing-x-small diff --git a/pkg/ui/src/components/empty/empty.tsx b/pkg/ui/src/components/empty/empty.tsx deleted file mode 100644 index 0c159d79f82b..000000000000 --- a/pkg/ui/src/components/empty/empty.tsx +++ /dev/null @@ -1,90 +0,0 @@ -// Copyright 2019 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 heroBannerLp from "assets/heroBannerLp.png"; -import React from "react"; -import classnames from "classnames/bind"; -import { Anchor, Button, Text, TextTypes } from "src/components"; -import styles from "./empty.module.styl"; - -const cx = classnames.bind(styles); - -interface IMainEmptyProps { - title?: string; - description?: string; - label?: React.ReactNode; - link?: string; - anchor?: string; - backgroundImage?: string; -} - -type OnClickXORHref = - | { - onClick?: () => void; - buttonHref?: never; - } - | { - onClick?: never; - buttonHref?: string; - }; - -export type EmptyProps = OnClickXORHref & IMainEmptyProps; - -export const Empty = ({ - title, - description, - anchor, - label, - link, - backgroundImage, - onClick, - buttonHref, -}: EmptyProps) => ( -
- - {title} - -
-
- - {description} - {link && ( - - {anchor} - - )} - -
-
- -
-
-
-); - -Empty.defaultProps = { - backgroundImage: heroBannerLp, - anchor: "Learn more", - label: "Learn more", - title: "No results", -}; diff --git a/pkg/ui/src/components/empty/index.tsx b/pkg/ui/src/components/empty/index.tsx deleted file mode 100644 index d5f82504cd5b..000000000000 --- a/pkg/ui/src/components/empty/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -// Copyright 2019 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. - -export * from "./empty"; diff --git a/pkg/ui/src/views/reports/containers/network/latency/index.tsx b/pkg/ui/src/views/reports/containers/network/latency/index.tsx index 28e62863b4f4..567ee5400bef 100644 --- a/pkg/ui/src/views/reports/containers/network/latency/index.tsx +++ b/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; diff --git a/pkg/ui/src/views/shared/components/sortabletable/index.tsx b/pkg/ui/src/views/shared/components/sortabletable/index.tsx index 9640de2b1288..1a63c6f86450 100644 --- a/pkg/ui/src/views/shared/components/sortabletable/index.tsx +++ b/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); /** diff --git a/pkg/ui/src/views/shared/components/sortedtable/index.tsx b/pkg/ui/src/views/shared/components/sortedtable/index.tsx index 9383865bf9e4..acd3e8ad312a 100644 --- a/pkg/ui/src/views/shared/components/sortedtable/index.tsx +++ b/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 extends React.Component, SortedT rowClass={this.rowClass(this.props)} className={this.props.className} expandableConfig={expandableConfig} - drawer={this.props.drawer} firstCellBordered={firstCellBordered} renderNoResult={renderNoResult} loading={loading} diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.spec.tsx b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.spec.tsx index a57b486eaeaf..1802fd9fdcd9 100644 --- a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.spec.tsx +++ b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.spec.tsx @@ -13,7 +13,6 @@ 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"; @@ -21,9 +20,7 @@ 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); }); diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx index 0bb5a08d7c8f..931f74478e80 100644 --- a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx +++ b/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; diff --git a/pkg/ui/yarn-vendor b/pkg/ui/yarn-vendor index f6c8931d5567..7852504c7ed3 160000 --- a/pkg/ui/yarn-vendor +++ b/pkg/ui/yarn-vendor @@ -1 +1 @@ -Subproject commit f6c8931d5567cfc891a20e1886ea03e756ff5459 +Subproject commit 7852504c7ed3d477e03d272293a271e1f4e9d21c diff --git a/pkg/ui/yarn.lock b/pkg/ui/yarn.lock index 24451bc6d5d3..7b8f969f69f1 100644 --- a/pkg/ui/yarn.lock +++ b/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"