From 3e9234f999774f1c295dcd73ce2157795cc206fe Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Mon, 11 Mar 2019 13:14:47 -0700 Subject: [PATCH] Remove unused labels components (#12513) --- ui/src/clockface/components/label/Label.tsx | 5 - .../components/label/LabelContainer.scss | 167 ---------- .../components/label/LabelContainer.tsx | 118 ------- .../components/label/LabelSelector.scss | 82 ----- .../components/label/LabelSelector.tsx | 312 ------------------ .../components/label/LabelSelectorMenu.tsx | 95 ------ .../label/LabelSelectorMenuItem.tsx | 54 --- .../components/label/LabelTooltip.tsx | 14 - ui/src/clockface/index.ts | 2 - .../dashboard_index/TableRow.test.tsx | 47 --- .../components/dashboard_index/TableRow.tsx | 222 ------------- .../components/dashboard_index/TableRows.tsx | 51 --- .../shared/components/EditLabelsOverlay.tsx | 175 ---------- 13 files changed, 1344 deletions(-) delete mode 100644 ui/src/clockface/components/label/LabelContainer.scss delete mode 100644 ui/src/clockface/components/label/LabelContainer.tsx delete mode 100644 ui/src/clockface/components/label/LabelSelector.scss delete mode 100644 ui/src/clockface/components/label/LabelSelector.tsx delete mode 100644 ui/src/clockface/components/label/LabelSelectorMenu.tsx delete mode 100644 ui/src/clockface/components/label/LabelSelectorMenuItem.tsx delete mode 100644 ui/src/clockface/components/label/LabelTooltip.tsx delete mode 100644 ui/src/dashboards/components/dashboard_index/TableRow.test.tsx delete mode 100644 ui/src/dashboards/components/dashboard_index/TableRow.tsx delete mode 100644 ui/src/dashboards/components/dashboard_index/TableRows.tsx delete mode 100644 ui/src/shared/components/EditLabelsOverlay.tsx diff --git a/ui/src/clockface/components/label/Label.tsx b/ui/src/clockface/components/label/Label.tsx index 8e822f681d..28a9d56ad3 100644 --- a/ui/src/clockface/components/label/Label.tsx +++ b/ui/src/clockface/components/label/Label.tsx @@ -6,9 +6,6 @@ import classnames from 'classnames' // Types import {ComponentSize, Greys} from 'src/clockface/types' -// Components -import LabelContainer from 'src/clockface/components/label/LabelContainer' - // Styles import './Label.scss' @@ -41,8 +38,6 @@ class Label extends Component { testID: 'label--pill', } - public static Container = LabelContainer - constructor(props: Props) { super(props) diff --git a/ui/src/clockface/components/label/LabelContainer.scss b/ui/src/clockface/components/label/LabelContainer.scss deleted file mode 100644 index 245f1aebe0..0000000000 --- a/ui/src/clockface/components/label/LabelContainer.scss +++ /dev/null @@ -1,167 +0,0 @@ -/* - Label Container Styles - ------------------------------------------------------------------------------ -*/ - -@import 'src/style/modules'; - -$label-margin: 1px; -$label-edit-button-diameter: 18px; - -.label--container { - width: 100%; -} - -.label--container-margin { - width: calc(100% + #{$label-margin * 2}); - position: relative; - left: $label-margin * -2; - display: flex; - flex-wrap: wrap; - padding: $label-margin; - - > .label { - margin: $label-margin; - } -} - -/* - Additional Labels Indicator - ------------------------------------------------------------------------------ -*/ - -.additional-labels { - position: relative; - user-select: none; - font-weight: 700; - margin: $label-margin; - transition: background-color 0.25s ease, color 0.25s ease; - background-color: rgba($g6-smoke, 0.5); - color: $g11-sidewalk; - - &:hover { - cursor: pointer; - background-color: $g6-smoke; - color: $g15-platinum; - } -} - -.label--tooltip { - z-index: 9999; - visibility: hidden; - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - transition-property: all; -} - -.label--tooltip-container { - @extend %drop-shadow; - opacity: 0; - background-color: $g0-obsidian; - border-radius: $radius; - padding: $ix-marg-c; - margin-top: $ix-marg-b + $ix-border; - transition: opacity 0.25s ease; - position: relative; - - &:after { - content: ''; - position: absolute; - top: 0; - left: 50%; - border: $ix-marg-b solid transparent; - border-bottom-color: $g0-obsidian; - transform: translate(-50%, -100%); - } - - > .label { - margin: $label-margin; - } -} - -.additional-labels:hover .label--tooltip { - visibility: visible; -} - -.additional-labels:hover .label--tooltip-container { - opacity: 1; -} - -/* - Edit Labels on Resource - ------------------------------------------------------------------------------ -*/ - -.label--edit-button { - width: $label-edit-button-diameter; - height: $label-edit-button-diameter; - margin: $label-margin; - position: relative; - transition: opacity 0.25s ease; - - &:before, - &:after { - content: ''; - pointer-events: none; - background-color: $g20-white; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - z-index: 3; - transition: width 0.25s ease; - height: $ix-border; - width: $label-edit-button-diameter - $ix-marg-b; - border-radius: $ix-border / 2; - } - - &:after { - transform: translate(-50%,-50%) rotate(90deg); - } - - > .button.button-sm { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - width: $label-edit-button-diameter; - height: $label-edit-button-diameter; - transform: translate(-50%, -50%); - border-radius: 50%; - color: transparent; - transition: - background-color 0.25s ease, - border-color 0.25s ease, - box-shadow 0.25s ease, - height 0.25s ease, - width 0.25s ease; - - > .button-icon { - font-size: $form-sm-font; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - } - } - - &:hover > .button.button-sm { - width: $form-sm-height - $ix-marg-a; - height: $form-sm-height - $ix-marg-a; - } - - &:hover:before, - &:hover:after { - width: $form-sm-height - $ix-marg-c; - } -} - -/* When used inside an index list, hide until row hover */ - .index-list--row-cell .label--edit-button { - opacity: 0; - } - .index-list--row-cell:hover .label--edit-button { - opacity: 1; - } diff --git a/ui/src/clockface/components/label/LabelContainer.tsx b/ui/src/clockface/components/label/LabelContainer.tsx deleted file mode 100644 index 3fc6e1db99..0000000000 --- a/ui/src/clockface/components/label/LabelContainer.tsx +++ /dev/null @@ -1,118 +0,0 @@ -// Libraries -import React, {Component} from 'react' -import classnames from 'classnames' -import _ from 'lodash' - -// Components -import LabelTooltip from 'src/clockface/components/label/LabelTooltip' -import {Button} from '@influxdata/clockface' - -// Types -import {ButtonShape, IconFont, ComponentColor} from '@influxdata/clockface' - -// Styles -import 'src/clockface/components/label/LabelContainer.scss' - -interface Props { - children?: JSX.Element[] - className?: string - limitChildCount?: number - resourceName?: string - onEdit?: () => void - testID?: string -} - -class LabelContainer extends Component { - public static defaultProps: Partial = { - limitChildCount: 999, - resourceName: 'this resource', - testID: 'labels-con', - } - - public render() { - const {className, testID} = this.props - - return ( -
-
- {this.children} - {this.additionalChildrenIndicator} - {this.editButton} -
-
- ) - } - - private get sortedChildren(): JSX.Element[] { - const {children} = this.props - - if (children && React.Children.count(children) > 1) { - return children.sort((a: JSX.Element, b: JSX.Element) => { - const textA = a.props.name.toUpperCase() - const textB = b.props.name.toUpperCase() - return textA < textB ? -1 : textA > textB ? 1 : 0 - }) - } - - return children - } - - private get children(): JSX.Element[] | JSX.Element { - const {children, limitChildCount} = this.props - - if (children) { - return React.Children.map( - this.sortedChildren, - (child: JSX.Element, i: number) => { - if (i < limitChildCount) { - return child - } - } - ) - } - } - - private get additionalChildrenIndicator(): JSX.Element { - const {children, limitChildCount} = this.props - - const childCount = React.Children.count(children) - - if (limitChildCount < childCount) { - const additionalCount = childCount - limitChildCount - return ( -
- +{additionalCount} more - -
- ) - } - } - - private get editButton(): JSX.Element { - const {onEdit, children, resourceName} = this.props - - const titleText = React.Children.count(children) - ? `Edit Labels for ${resourceName}` - : `Add Labels to ${resourceName}` - - if (onEdit) { - return ( -
-
- ) - } - } -} -export default LabelContainer diff --git a/ui/src/clockface/components/label/LabelSelector.scss b/ui/src/clockface/components/label/LabelSelector.scss deleted file mode 100644 index 47181ad34b..0000000000 --- a/ui/src/clockface/components/label/LabelSelector.scss +++ /dev/null @@ -1,82 +0,0 @@ -/* - Label Selector Styles - ------------------------------------------------------------------------------ -*/ - -@import 'src/style/modules'; - -.label-selector--input { - position: relative; -} - -.label-selector--menu-container { - overflow: hidden; - z-index: 999; - width: 100%; - position: absolute; - top: 100%; - left: 0; - @include gradient-h($g2-kevlar, $g4-onyx); - border-radius: $radius; - box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.7); -} - -.label-selector--menu-container .fancy-scroll--track-h { - display: none; -} - -.label-selector--menu { - display: flex; - flex-wrap: wrap; - width: 100%; - padding: $ix-marg-b - ($ix-border / 2); -} - -.label-selector--menu-item { - display: inline-flex; - align-items: flex-start; - margin: $ix-border / 2; -} - -.label-selector--empty { - width: 100%; - font-size: 13px; - font-weight: 500; - user-select: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: $g9-mountain; - font-style: italic; - min-height: 30px; - line-height: 30px; - - &:first-child { - margin-bottom: $ix-marg-b - ($ix-border / 2); - } -} - -.label-selector--selection { - display: flex; - flex-wrap: nowrap; - margin-bottom: $ix-marg-c; -} - -.label-selector--remove-all { - margin-top: $ix-marg-b; - margin-left: $ix-marg-b; -} - -.label-selector--selected, -.label-selector--none-selected { - flex: 1 0 0; - margin-top: $ix-marg-b; -} - -.label-selector--none-selected { - font-size: 13px; - color: $g10-wolf; - font-weight: 500; - font-style: italic; - user-select: none; -} diff --git a/ui/src/clockface/components/label/LabelSelector.tsx b/ui/src/clockface/components/label/LabelSelector.tsx deleted file mode 100644 index 98f7b7dcd4..0000000000 --- a/ui/src/clockface/components/label/LabelSelector.tsx +++ /dev/null @@ -1,312 +0,0 @@ -// Libraries -import React, {Component, ChangeEvent, KeyboardEvent} from 'react' -import _ from 'lodash' - -// APIs -import {client} from 'src/utils/api' - -// Components -import {Button} from '@influxdata/clockface' -import Input from 'src/clockface/components/inputs/Input' -import Label from 'src/clockface/components/label/Label' -import LabelContainer from 'src/clockface/components/label/LabelContainer' -import LabelSelectorMenu from 'src/clockface/components/label/LabelSelectorMenu' -import {ClickOutside} from 'src/shared/components/ClickOutside' - -// Types -import {ComponentSize} from 'src/clockface/types' -import {Label as APILabel} from 'src/types/v2/labels' - -// Styles -import './LabelSelector.scss' - -import {ErrorHandling} from 'src/shared/decorators/errors' - -enum ArrowDirection { - Up = -1, - Down = 1, -} - -interface Props { - selectedLabels: APILabel[] - allLabels: APILabel[] - onAddLabel: (label: APILabel) => void - onRemoveLabel: (label: APILabel) => void - onRemoveAllLabels: () => void - onCreateLabel: (label: APILabel) => void - resourceType: string - inputSize?: ComponentSize -} - -interface State { - filterValue: string - filteredLabels: APILabel[] - isSuggesting: boolean - highlightedID: string -} - -@ErrorHandling -class LabelSelector extends Component { - public static defaultProps: Partial = { - inputSize: ComponentSize.Small, - } - - constructor(props: Props) { - super(props) - - const initialFilteredLabels = _.differenceBy( - props.allLabels, - props.selectedLabels, - label => label.name - ) - - this.state = { - highlightedID: null, - filterValue: '', - filteredLabels: initialFilteredLabels, - isSuggesting: false, - } - } - - public componentDidMount() { - this.handleStartSuggesting() - } - - public render() { - return ( -
-
- {this.selectedLabels} - {this.clearSelectedButton} -
- - {this.input} - -
- ) - } - - private get selectedLabels(): JSX.Element { - const {selectedLabels, resourceType} = this.props - - if (selectedLabels && selectedLabels.length) { - return ( - - {selectedLabels.map(label => ( - - ) - } - - return ( -
{`${_.upperFirst( - resourceType - )} has no labels`}
- ) - } - - private get suggestionMenu(): JSX.Element { - const {allLabels, selectedLabels} = this.props - const {isSuggesting, highlightedID, filterValue} = this.state - - const allLabelsUsed = allLabels.length === selectedLabels.length - - if (isSuggesting) { - return ( - - ) - } - } - - private get input(): JSX.Element { - const {resourceType, inputSize} = this.props - const {filterValue} = this.state - - return ( -
- - {this.suggestionMenu} -
- ) - } - - private handleAddLabel = (labelID: string): void => { - const {onAddLabel, allLabels} = this.props - - const label = allLabels.find(label => label.name === labelID) - - onAddLabel(label) - this.handleStopSuggesting() - } - - private handleItemHighlight = (highlightedID: string): void => { - this.setState({highlightedID}) - } - - private handleStartSuggesting = () => { - const {availableLabels} = this - const {isSuggesting} = this.state - - if (_.isEmpty(availableLabels) && !isSuggesting) { - return this.setState({ - isSuggesting: true, - highlightedID: null, - filterValue: '', - }) - } - - const highlightedID = this.availableLabels[0].name - this.setState({isSuggesting: true, highlightedID, filterValue: ''}) - } - - private handleStopSuggesting = () => { - const {allLabels: filteredLabels} = this.props - - this.setState({isSuggesting: false, filterValue: '', filteredLabels}) - } - - private handleInputChange = (e: ChangeEvent): void => { - let highlightedID = this.state.highlightedID - const {allLabels, selectedLabels} = this.props - const filterValue = e.target.value - - const availableLabels = _.differenceBy( - allLabels, - selectedLabels, - l => l.name - ) - - const filteredLabels = availableLabels.filter(label => { - return label.name.includes(filterValue) - }) - - const highlightedIDAvailable = filteredLabels.find( - al => al.name === highlightedID - ) - - if (!highlightedIDAvailable && filteredLabels.length) { - highlightedID = filteredLabels[0].name - } - - if (filterValue.length === 0) { - return this.setState({ - isSuggesting: true, - filteredLabels: this.props.allLabels, - highlightedID: null, - filterValue: '', - }) - } - - this.setState({filterValue, filteredLabels, highlightedID}) - } - - private get availableLabels(): APILabel[] { - const {selectedLabels} = this.props - const {filteredLabels} = this.state - - return _.differenceBy(filteredLabels, selectedLabels, label => label.name) - } - - private handleDelete = (labelID: string): void => { - const {onRemoveLabel, selectedLabels} = this.props - - const label = selectedLabels.find(l => l.name === labelID) - - onRemoveLabel(label) - } - - private handleHighlightAdjacentItem = (direction: ArrowDirection): void => { - const {highlightedID} = this.state - const {availableLabels} = this - - if (!availableLabels.length || !highlightedID) { - return null - } - - const highlightedIndex = _.findIndex( - availableLabels, - label => label.name === highlightedID - ) - - const adjacentIndex = Math.min( - Math.max(highlightedIndex + direction, 0), - availableLabels.length - 1 - ) - - const adjacentID = availableLabels[adjacentIndex].name - - this.setState({highlightedID: adjacentID}) - } - - private handleKeyDown = (e: KeyboardEvent): void => { - const {highlightedID} = this.state - - if (!highlightedID) { - return - } - - switch (e.key) { - case 'Escape': - e.currentTarget.blur() - return this.handleStopSuggesting() - case 'Enter': - e.currentTarget.blur() - return this.handleAddLabel(highlightedID) - case 'ArrowUp': - return this.handleHighlightAdjacentItem(ArrowDirection.Up) - case 'ArrowDown': - return this.handleHighlightAdjacentItem(ArrowDirection.Down) - default: - break - } - } - - private get clearSelectedButton(): JSX.Element { - const {selectedLabels, onRemoveAllLabels} = this.props - - if (_.isEmpty(selectedLabels)) { - return - } - - return ( -