From a2a44067be168ebe61ba8afee8d22f985f18cf64 Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Mon, 29 Jul 2019 08:13:20 -1000 Subject: [PATCH] refactor(clockface): replace local index list with Clockface index list (#14491) * refactor(clockface): replace index lists with clockface index lists * refactor(clockface): replace local index list import with clockface index list import * refactor(clockface): remove local index list components --- .../authorizations/components/TokenList.tsx | 5 +- ui/src/authorizations/components/TokenRow.tsx | 10 +- .../components/index_views/IndexList.scss | 215 -------------- .../components/index_views/IndexList.tsx | 33 --- .../components/index_views/IndexListBody.tsx | 36 --- .../index_views/IndexListHeader.tsx | 24 -- .../index_views/IndexListHeaderCell.tsx | 92 ------ .../components/index_views/IndexListRow.tsx | 42 --- .../index_views/IndexListRowCell.tsx | 50 ---- .../components/index_views/README.md | 118 -------- .../index_views/test/IndexList.test.tsx | 81 ----- .../__snapshots__/IndexList.test.tsx.snap | 277 ------------------ .../components/inputs/multipleInput/Row.tsx | 8 +- ui/src/clockface/index.ts | 2 - ui/src/clockface/styles.scss | 1 - ui/src/tasks/components/RunLogRow.tsx | 2 +- ui/src/tasks/components/RunLogsList.tsx | 3 +- ui/src/tasks/components/TaskRunsList.tsx | 3 +- ui/src/tasks/components/TaskRunsRow.tsx | 3 +- 19 files changed, 17 insertions(+), 988 deletions(-) delete mode 100644 ui/src/clockface/components/index_views/IndexList.scss delete mode 100644 ui/src/clockface/components/index_views/IndexList.tsx delete mode 100644 ui/src/clockface/components/index_views/IndexListBody.tsx delete mode 100644 ui/src/clockface/components/index_views/IndexListHeader.tsx delete mode 100644 ui/src/clockface/components/index_views/IndexListHeaderCell.tsx delete mode 100644 ui/src/clockface/components/index_views/IndexListRow.tsx delete mode 100644 ui/src/clockface/components/index_views/IndexListRowCell.tsx delete mode 100644 ui/src/clockface/components/index_views/README.md delete mode 100644 ui/src/clockface/components/index_views/test/IndexList.test.tsx delete mode 100644 ui/src/clockface/components/index_views/test/__snapshots__/IndexList.test.tsx.snap diff --git a/ui/src/authorizations/components/TokenList.tsx b/ui/src/authorizations/components/TokenList.tsx index 7a1b44cd9d..2c31f6abef 100644 --- a/ui/src/authorizations/components/TokenList.tsx +++ b/ui/src/authorizations/components/TokenList.tsx @@ -4,8 +4,7 @@ import _ from 'lodash' import memoizeOne from 'memoize-one' // Components -import {EmptyState, Overlay} from '@influxdata/clockface' -import {IndexList} from 'src/clockface' +import {EmptyState, Overlay, IndexList} from '@influxdata/clockface' import TokenRow from 'src/authorizations/components/TokenRow' import ViewTokenOverlay from 'src/authorizations/components/ViewTokenOverlay' @@ -59,12 +58,14 @@ export default class TokenList extends PureComponent { sort={sortKey === this.headerKeys[0] ? sortDirection : Sort.None} columnName="Description" onClick={onClickColumn} + width="50%" /> diff --git a/ui/src/authorizations/components/TokenRow.tsx b/ui/src/authorizations/components/TokenRow.tsx index 5e1bfb73ed..8ae9b5edf3 100644 --- a/ui/src/authorizations/components/TokenRow.tsx +++ b/ui/src/authorizations/components/TokenRow.tsx @@ -9,8 +9,14 @@ import { } from 'src/authorizations/actions' // Components -import {ComponentSize, SlideToggle, ComponentColor} from '@influxdata/clockface' -import {IndexList, ConfirmationButton, Alignment} from 'src/clockface' +import { + ComponentSize, + SlideToggle, + ComponentColor, + IndexList, + Alignment, +} from '@influxdata/clockface' +import {ConfirmationButton} from 'src/clockface' import EditableName from 'src/shared/components/EditableName' // Types diff --git a/ui/src/clockface/components/index_views/IndexList.scss b/ui/src/clockface/components/index_views/IndexList.scss deleted file mode 100644 index e2353bd531..0000000000 --- a/ui/src/clockface/components/index_views/IndexList.scss +++ /dev/null @@ -1,215 +0,0 @@ -/* - Index List Styles - ------------------------------------------------------------------------------ -*/ - -.index-list { - border: 0; - border-collapse: collapse; - width: 100%; -} - -.index-list--header-cell { - @include no-user-select(); - text-transform: uppercase; - letter-spacing: 0.03em; - padding: 0 13px; - font-size: $form-md-font; - font-weight: 600; - color: $g11-sidewalk; - white-space: nowrap; - height: 52px; -} - -.index-list--cell { - height: calc(100% - #{$ix-border}); - padding: $ix-marg-a + $ix-marg-b; - background-color: $g3-castle; - font-size: $form-md-font; - font-weight: 500; - color: $g13-mist; - display: flex; - align-items: center; - transition: background-color 0.25s ease, color 0.25s ease; -} - -// Alignment modifiers -.index-list--align-left { - text-align: left; -} -.index-list--align-left .index-list--cell { - justify-content: flex-start; -} - -.index-list--align-right { - text-align: right; -} -.index-list--align-right .index-list--cell { - justify-content: flex-end; -} - -.index-list--align-center { - text-align: center; -} -.index-list--align-center .index-list--cell { - justify-content: center; -} - -// TD Style -.index-list--row-cell { - position: relative; - height: 52px; - - &:first-child .index-list--cell { - border-radius: $radius 0 0 $radius; - } - - &:last-child .index-list--cell { - border-radius: 0 $radius $radius 0; - } -} - -// Row hover State -.index-list--row:hover .index-list--cell { - background-color: $g4-onyx; - color: $g18-cloud; -} - -// Show cell contents on row hover -.index-list--show-hover .index-list--cell > * { - transition: opacity 0.25s ease; - opacity: 0; -} -.index-list--row:hover .index-list--show-hover .index-list--cell > * { - opacity: 1; -} - -// Row Disabled State -.index-list--row.index-list--row-disabled - .index-list--row-cell - .index-list--cell { - background-color: rgba($g3-castle, 0.5); - color: $g9-mountain; - font-style: italic; - - a:link, - a:visited, - a:hover, - a:active { - transition: color 0.25s ease, opacity 0.25s ease; - opacity: 0.7; - } -} - -// Row Disabled Hover State -.index-list--row.index-list--row-disabled:hover - .index-list--row-cell - .index-list--cell { - background-color: rgba($g3-castle, 0.7); - color: $g15-platinum; - - a:link, - a:visited, - a:hover, - a:active { - opacity: 0.9; - } -} - -// Empty state -.index-list--empty-cell { - background-color: rgba($g3-castle, 0.5); - border-radius: $radius; - display: flex; - align-content: center; - justify-content: center; - color: $empty-state-text; -} - -/* - Depth Styling - ------------------------------------------------------------------------------ -*/ - -.tabs--contents, -// TODO: Remove this .tabbed-page rule when the component is phased out -.tabbed-page { - .index-list--cell { - background-color: $g4-onyx; - } - .index-list--row:hover .index-list--cell { - background-color: $g5-pepper; - } - .index-list--row-cell.index-list--row-disabled .index-list--cell { - background-color: rgba($g4-onyx, 0.5); - } - .index-list--row:hover - .index-list--row-cell.index-list--row-disabled - .index-list--cell { - background-color: rgba($g4-onyx, 0.7); - } - .index-list--empty-cell { - background-color: rgba($g4-onyx, 0.5); - } -} - -/* - Sortable Header Styling - ------------------------------------------------------------------------------ -*/ - -.index-list--sort-arrow { - display: inline-block; - vertical-align: middle; - width: 20px; - height: 20px; - margin-left: $ix-marg-a; - opacity: 0; - position: relative; - top: -1px; - transition: opacity 0.25s ease, transform 0.25s ease; - - > span.icon { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} - -.index-list--header-cell.index-list--sortable { - transition: color 0.25s ease; - - &:hover { - cursor: pointer; - color: $c-pool; - } -} - -.index-list--header-cell.index-list--sort-ascending, -.index-list--header-cell.index-list--sort-descending { - color: $g17-whisper; -} - -.index-list--sort-ascending .index-list--sort-arrow { - opacity: 1; - transform: rotate(180deg); -} - -.index-list--sort-descending .index-list--sort-arrow { - opacity: 1; - transform: rotate(00deg); -} - -/* - Margin for "Name" column in tables - ------------------------------------------------------------------------------ -*/ - -.index-list--labels { - margin-left: $ix-marg-b; -} - -.index-list--row-cell .index-list--cell a { - white-space: nowrap; -} diff --git a/ui/src/clockface/components/index_views/IndexList.tsx b/ui/src/clockface/components/index_views/IndexList.tsx deleted file mode 100644 index 4321f28c04..0000000000 --- a/ui/src/clockface/components/index_views/IndexList.tsx +++ /dev/null @@ -1,33 +0,0 @@ -// Libraries -import React, {Component} from 'react' - -// Components -import Body from 'src/clockface/components/index_views/IndexListBody' -import Header from 'src/clockface/components/index_views/IndexListHeader' -import HeaderCell from 'src/clockface/components/index_views/IndexListHeaderCell' -import Row from 'src/clockface/components/index_views/IndexListRow' -import Cell from 'src/clockface/components/index_views/IndexListRowCell' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -interface Props { - children: JSX.Element[] | JSX.Element -} - -@ErrorHandling -class IndexList extends Component { - public static Body = Body - public static Header = Header - public static HeaderCell = HeaderCell - public static Row = Row - public static Cell = Cell - - public render() { - const {children} = this.props - - return {children}
- } -} - -export default IndexList diff --git a/ui/src/clockface/components/index_views/IndexListBody.tsx b/ui/src/clockface/components/index_views/IndexListBody.tsx deleted file mode 100644 index ec26c578f7..0000000000 --- a/ui/src/clockface/components/index_views/IndexListBody.tsx +++ /dev/null @@ -1,36 +0,0 @@ -// Libraries -import React, {Component} from 'react' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -interface Props { - children?: JSX.Element[] | JSX.Element - emptyState: JSX.Element - columnCount: number -} - -@ErrorHandling -class IndexListBody extends Component { - public render() { - const {children, columnCount, emptyState} = this.props - - if (React.Children.count(children)) { - return {children} - } - - return ( - - - -
- {emptyState} -
- - - - ) - } -} - -export default IndexListBody diff --git a/ui/src/clockface/components/index_views/IndexListHeader.tsx b/ui/src/clockface/components/index_views/IndexListHeader.tsx deleted file mode 100644 index 2675e3b3f0..0000000000 --- a/ui/src/clockface/components/index_views/IndexListHeader.tsx +++ /dev/null @@ -1,24 +0,0 @@ -// Libraries -import React, {Component} from 'react' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -interface Props { - children: JSX.Element[] -} - -@ErrorHandling -class IndexListHeader extends Component { - public render() { - const {children} = this.props - - return ( - - {children} - - ) - } -} - -export default IndexListHeader diff --git a/ui/src/clockface/components/index_views/IndexListHeaderCell.tsx b/ui/src/clockface/components/index_views/IndexListHeaderCell.tsx deleted file mode 100644 index 300fc2a2f9..0000000000 --- a/ui/src/clockface/components/index_views/IndexListHeaderCell.tsx +++ /dev/null @@ -1,92 +0,0 @@ -// Libraries -import React, {Component} from 'react' -import classnames from 'classnames' - -// Types -import {Alignment, Sort} from 'src/clockface/types' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -export interface IndexHeaderCellProps { - width: string - columnName?: string - alignment?: Alignment - sort?: Sort - sortKey?: string - onClick?: (nextSort: Sort, sortKey: string) => void -} - -@ErrorHandling -class IndexListHeaderCell extends Component { - public static defaultProps: Partial = { - columnName: '', - alignment: Alignment.Left, - } - - public render() { - const {columnName, width} = this.props - - return ( - - {columnName} - {this.sortIndicator} - - ) - } - - private handleClick = (): void => { - const {onClick, sort, sortKey} = this.props - - if (!onClick || !sort) { - return - } - - if (sort === Sort.None) { - onClick(Sort.Ascending, sortKey) - } else if (sort === Sort.Ascending) { - onClick(Sort.Descending, sortKey) - } else if (sort === Sort.Descending) { - onClick(Sort.None, sortKey) - } - } - - private get sortIndicator(): JSX.Element { - if (this.isSortable) { - return ( - - - - ) - } - } - - private get isSortable(): boolean { - const {sort} = this.props - - if ( - sort === Sort.None || - sort === Sort.Ascending || - sort === Sort.Descending - ) { - return true - } - - return false - } - - private get className(): string { - const {alignment, sort} = this.props - - return classnames('index-list--header-cell', { - 'index-list--align-left': alignment === Alignment.Left, - 'index-list--align-center': alignment === Alignment.Center, - 'index-list--align-right': alignment === Alignment.Right, - 'index-list--sortable': this.isSortable, - 'index-list--sort-descending': sort === Sort.Descending, - 'index-list--sort-ascending': sort === Sort.Ascending, - }) - } -} - -export default IndexListHeaderCell diff --git a/ui/src/clockface/components/index_views/IndexListRow.tsx b/ui/src/clockface/components/index_views/IndexListRow.tsx deleted file mode 100644 index f211dee8e0..0000000000 --- a/ui/src/clockface/components/index_views/IndexListRow.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// Libraries -import React, {Component} from 'react' -import classnames from 'classnames' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -interface Props { - disabled: boolean - children: JSX.Element[] | JSX.Element - customClass?: string - testID: string -} - -@ErrorHandling -class IndexListRow extends Component { - public static defaultProps = { - disabled: false, - testID: 'table-row', - } - - public render() { - const {children, testID} = this.props - - return ( - - {children} - - ) - } - - private get className(): string { - const {disabled, customClass} = this.props - - return classnames('index-list--row', { - 'index-list--row-disabled': disabled, - [customClass]: !!customClass, - }) - } -} - -export default IndexListRow diff --git a/ui/src/clockface/components/index_views/IndexListRowCell.tsx b/ui/src/clockface/components/index_views/IndexListRowCell.tsx deleted file mode 100644 index c406597425..0000000000 --- a/ui/src/clockface/components/index_views/IndexListRowCell.tsx +++ /dev/null @@ -1,50 +0,0 @@ -// Libraries -import React, {Component} from 'react' -import classnames from 'classnames' - -// Types -import {Alignment} from 'src/clockface/types' - -// Decorators -import {ErrorHandling} from 'src/shared/decorators/errors' - -interface Props { - children: any - alignment: Alignment - revealOnHover: boolean - testID: string -} - -@ErrorHandling -class IndexListRowCell extends Component { - public static defaultProps = { - alignment: Alignment.Left, - revealOnHover: false, - testID: 'table-cell', - } - - public render() { - const {children, testID} = this.props - - return ( - -
- {children} -
- - ) - } - - private get className(): string { - const {alignment, revealOnHover} = this.props - - return classnames('index-list--row-cell', { - 'index-list--show-hover': revealOnHover, - 'index-list--align-left': alignment === Alignment.Left, - 'index-list--align-center': alignment === Alignment.Center, - 'index-list--align-right': alignment === Alignment.Right, - }) - } -} - -export default IndexListRowCell diff --git a/ui/src/clockface/components/index_views/README.md b/ui/src/clockface/components/index_views/README.md deleted file mode 100644 index ddf66f5825..0000000000 --- a/ui/src/clockface/components/index_views/README.md +++ /dev/null @@ -1,118 +0,0 @@ -# Index View Components - -These components are purely presentational and intended for use in index view pages (such as Dashboards index) -There are two types of index views: - -1. Index List -2. Index Grid (Coming soon) - -## How to Use Index List - -`IndexList` is essentially a configurable table. - -Import the component and associated types: - -``` -import {Alignment} from 'src/clockface' -import { - IndexListColumn, - IndexListRow, -} from 'src/clockface/components/index_views/IndexListTypes' - -import IndexList from 'src/clockface/components/index_views/IndexList' -``` - -#### Define Your Columns - -First define the columns present in your table. Each column has a few options for customization: - -| Option | Type | | -|-------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------| -| key | string | Unique identifier | -| title | string | Text that appears in column header | -| size | number | Use as a proportion not a unit of measurement. `IndexList` totals the sizes of all columns and calculates each column as a percentage | -| showOnHover | boolean | if `true` the column's contents will be hidden until a row is hovered | -| align | Alignment | Controls text alignment `Left | Center | Right` | - -Example columns: - -``` -const columns = [ - { - key: 'users--name', - title: 'Name', - size: 500, - showOnHover: false, - align: Alignment.Left, - }, - { - key: 'users--email', - title: 'Email', - size: 100, - showOnHover: false, - align: Alignment.Left, - }, - { - key: 'users--last-login', - title: 'Last Login', - size: 90, - showOnHover: false, - align: Alignment.Left, - }, - { - key: 'users--actions', - title: '', - size: 200, - showOnHover: true, - align: Alignment.Right, - }, -] -``` - -#### Define Your Rows - -Next step is to define your rows. It is crucial that the `key` of each column has a matching `key` within each row or else the component won't render properly. - -The `contents` field accepts any type of value. Setting `disabled` to true is just a visual style -- any interactive elements in that row should be individually disabled as well. - -``` -const rows = users.map(user => ({ - disabled: false, - columns: [ - { - key: 'users--name', - contents:

{user.name}

, - }, - { - key: 'users--email', - contents:

{user.email}

, - }, - { - key: 'users--login', - contents: this.userLastLogin(user), - }, - { - key: 'users--actions', - contents: ( - - - - - ), - }, - ], -})) -``` - -#### Define Your Empty State - -`IndexList` can be passed a `JSX.Element` that will appear when the list of `rows` is empty. This can be utilized a few different ways. For example, if you are allowing users to sort using a filter then you would pass the filtered list of rows into `IndexList`. The empty state you pass in would then depend on the presence of a `searchTerm` state to show either `No users exist` or `No users match your query`. - -#### Render - -Now that everything is defined and ready: - -``` - -``` - diff --git a/ui/src/clockface/components/index_views/test/IndexList.test.tsx b/ui/src/clockface/components/index_views/test/IndexList.test.tsx deleted file mode 100644 index 57c82e61e6..0000000000 --- a/ui/src/clockface/components/index_views/test/IndexList.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import {mount} from 'enzyme' - -import IndexList from 'src/clockface/components/index_views/IndexList' - -describe('IndexList', () => { - let wrapper - - const wrapperSetup = (empty: boolean) => { - const emptyState =
Empty
- - const header = ( - - - - - ) - - const body = ( - - - Apple - 500 - - - Pear - 1000 - - - Banana - 100 - - - ) - - const emptyBody = ( - - ) - - let children = [header, body] - - if (empty) { - children = [header, emptyBody] - } - - const props = { - children, - } - - return mount() - } - - it('mounts without exploding', () => { - wrapper = wrapperSetup(false) - expect(wrapper).toHaveLength(1) - }) - - it('matches snapshot with minimal props', () => { - wrapper = wrapperSetup(false) - expect(wrapper).toMatchSnapshot() - }) - - it('renders empty state when 0 rows exist', () => { - wrapper = wrapperSetup(true) - - const emptyDiv = wrapper - .find('div') - .filterWhere(div => div.prop('data-testid')) - - expect(emptyDiv.prop('data-testid')).toBe('empty-state') - }) - - it('matches snapshot when 0 rows exist', () => { - wrapper = wrapperSetup(true) - expect(wrapper).toMatchSnapshot() - }) -}) diff --git a/ui/src/clockface/components/index_views/test/__snapshots__/IndexList.test.tsx.snap b/ui/src/clockface/components/index_views/test/__snapshots__/IndexList.test.tsx.snap deleted file mode 100644 index 16c86b7df9..0000000000 --- a/ui/src/clockface/components/index_views/test/__snapshots__/IndexList.test.tsx.snap +++ /dev/null @@ -1,277 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`IndexList matches snapshot when 0 rows exist 1`] = ` - - - - - - - - - - - - - - - - Empty - - } - key="index-body" - > - - - - - - -
- Fruit - - Calories -
-
-
- Empty -
-
-
- -`; - -exports[`IndexList matches snapshot with minimal props 1`] = ` - - - - - - - - - - - - - - - - Empty - - } - key="index-body" - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Fruit - - Calories -
-
- Apple -
- 		-
- 500 -
-
-
- Pear -
- 		-
- 1000 -
-
-
- Banana -
- 		-
- 100 -
-
- -`; diff --git a/ui/src/clockface/components/inputs/multipleInput/Row.tsx b/ui/src/clockface/components/inputs/multipleInput/Row.tsx index dd8d9a460e..9957539892 100644 --- a/ui/src/clockface/components/inputs/multipleInput/Row.tsx +++ b/ui/src/clockface/components/inputs/multipleInput/Row.tsx @@ -4,12 +4,8 @@ import uuid from 'uuid' import {ErrorHandling} from 'src/shared/decorators/errors' // Components -import { - IndexList, - ConfirmationButton, - ComponentSize, - Alignment, -} from 'src/clockface' +import {ConfirmationButton} from 'src/clockface' +import {IndexList, ComponentSize, Alignment} from '@influxdata/clockface' import EditableDescription from 'src/shared/components/editable_description/EditableDescription' interface Item { diff --git a/ui/src/clockface/index.ts b/ui/src/clockface/index.ts index 378e38767c..18f6c96567 100644 --- a/ui/src/clockface/index.ts +++ b/ui/src/clockface/index.ts @@ -9,7 +9,6 @@ import WizardFullScreen from './components/wizard/WizardFullScreen' import WizardOverlay from './components/wizard/WizardOverlay' import WizardProgressHeader from './components/wizard/WizardProgressHeader' import ProgressBar from './components/wizard/ProgressBar' -import IndexList from './components/index_views/IndexList' import ResourceList from './components/resource_list/ResourceList' import Context from './components/context_menu/Context' import FormElement from 'src/clockface/components/form_layout/FormElement' @@ -58,7 +57,6 @@ export { Greys, GridSizer, IconFont, - IndexList, MultiInputType, MultipleInput, NavMenuType, diff --git a/ui/src/clockface/styles.scss b/ui/src/clockface/styles.scss index 4aa37af07e..da8a29ecea 100644 --- a/ui/src/clockface/styles.scss +++ b/ui/src/clockface/styles.scss @@ -17,7 +17,6 @@ @import 'components/auto_input/AutoInput.scss'; @import 'components/confirmation_button/ConfirmationButton.scss'; @import 'components/context_menu/ContextMenu.scss'; -@import 'components/index_views/IndexList.scss'; @import 'components/resource_list/ResourceList.scss'; @import 'components/resource_list/ResourceDescription.scss'; @import 'components/resource_list/ResourceEditableName.scss'; diff --git a/ui/src/tasks/components/RunLogRow.tsx b/ui/src/tasks/components/RunLogRow.tsx index 1947addd24..10038367d6 100644 --- a/ui/src/tasks/components/RunLogRow.tsx +++ b/ui/src/tasks/components/RunLogRow.tsx @@ -4,7 +4,7 @@ import _ from 'lodash' import moment from 'moment' // Components -import {IndexList} from 'src/clockface' +import {IndexList} from '@influxdata/clockface' // Types import {LogEvent} from '@influxdata/influx' diff --git a/ui/src/tasks/components/RunLogsList.tsx b/ui/src/tasks/components/RunLogsList.tsx index 6afc56c426..49c1fb567e 100644 --- a/ui/src/tasks/components/RunLogsList.tsx +++ b/ui/src/tasks/components/RunLogsList.tsx @@ -3,8 +3,7 @@ import React, {PureComponent} from 'react' import _ from 'lodash' //Components -import {Overlay} from '@influxdata/clockface' -import {IndexList} from 'src/clockface' +import {Overlay, IndexList} from '@influxdata/clockface' import RunLogRow from 'src/tasks/components/RunLogRow' import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar' diff --git a/ui/src/tasks/components/TaskRunsList.tsx b/ui/src/tasks/components/TaskRunsList.tsx index d8cd5dae0d..d70e610e03 100644 --- a/ui/src/tasks/components/TaskRunsList.tsx +++ b/ui/src/tasks/components/TaskRunsList.tsx @@ -3,8 +3,7 @@ import React, {PureComponent} from 'react' import memoizeOne from 'memoize-one' // Components -import {EmptyState} from '@influxdata/clockface' -import {IndexList} from 'src/clockface' +import {EmptyState, IndexList} from '@influxdata/clockface' import TaskRunsRow from 'src/tasks/components/TaskRunsRow' // Types diff --git a/ui/src/tasks/components/TaskRunsRow.tsx b/ui/src/tasks/components/TaskRunsRow.tsx index 092cafbaa2..833335efa8 100644 --- a/ui/src/tasks/components/TaskRunsRow.tsx +++ b/ui/src/tasks/components/TaskRunsRow.tsx @@ -4,8 +4,7 @@ import {connect} from 'react-redux' import moment from 'moment' // Components -import {Overlay} from '@influxdata/clockface' -import {IndexList} from 'src/clockface' +import {Overlay, IndexList} from '@influxdata/clockface' import RunLogsOverlay from 'src/tasks/components/RunLogsList' // Actions