Merge pull request #4107 from influxdata/resuable/import-css-modules

Update CSS Imports

ui/src/dashboards/components/ImportDashboardOverlay.tsx

@@ -6,7 +6,7 @@ import Container from 'src/reusable_ui/components/overlays/OverlayContainer'
 import Heading from 'src/reusable_ui/components/overlays/OverlayHeading'
 import Body from 'src/reusable_ui/components/overlays/OverlayBody'
 import DragAndDrop from 'src/shared/components/DragAndDrop'
-import ImportDashboardMappings from 'src/dashboards/components/ImportDashboardMappings'
+import ImportDashboardMappings from 'src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings'
 import {notifyDashboardImportFailed} from 'src/shared/copy/notifications'
 
 import {Dashboard, Cell, Source} from 'src/types'

ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss

@@ -3,6 +3,8 @@
    -----------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 .dash-map--source,
 .dash-map--header,
 .dash-map--cell {

ui/src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.tsx

@@ -25,6 +25,9 @@ import {
   SourceItemValue,
 } from 'src/types/dashboards'
 
+// Styles
+import 'src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings.scss'
+
 interface Props {
   cells: Cell[]
   source: Source

ui/src/dashboards/components/rename_dashboard/RenameDashboard.scss

@@ -3,10 +3,7 @@
   ------------------------------------------------------------------------------
 */
 
-@import 'src/style/modules/influx-colors';
+@import 'src/style/modules/modules';
-@import 'src/style/modules/variables';
-@import 'src/style/modules/mixins';
-@import 'src/style/layout/page-header';
 
 $rename-dash-title-padding: 7px;
 

ui/src/dashboards/components/rename_dashboard/RenameDashboard.tsx

@@ -1,11 +1,17 @@
+// Libraries
 import React, {Component, KeyboardEvent} from 'react'
-import {ErrorHandling} from 'src/shared/decorators/errors'
+
-import './RenameDashboard.scss'
+// Constants
 import {
   DASHBOARD_NAME_MAX_LENGTH,
   DEFAULT_DASHBOARD_NAME,
 } from 'src/dashboards/constants/index'
 
+// Styles
+import 'src/dashboards/components/rename_dashboard/RenameDashboard.scss'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface Props {
   onRename: (name: string) => void
   name: string

ui/src/reusable_ui/components/Button/Button.scss

@@ -3,6 +3,8 @@
   ------------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 .button {
   font-weight: 700;
   font-family: $ix-text-font;

ui/src/reusable_ui/components/Button/index.tsx

@@ -11,6 +11,11 @@ import {
   IconFont,
 } from 'src/reusable_ui/types'
 
+// Styles
+import 'src/reusable_ui/components/Button/Button.scss'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface Props {
   text: string
   onClick?: () => void
@@ -22,6 +27,7 @@ interface Props {
   titleText?: string
 }
 
+@ErrorHandling
 class Button extends Component<Props> {
   public static defaultProps: Partial<Props> = {
     color: ComponentColor.Default,

ui/src/reusable_ui/components/card_select/CardSelectCard.scss

@@ -1,3 +1,10 @@
+/*
+  Card Selector Card
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
+
 $card-select--gutter: 4px;
 
 $card-breakpoint-col-2: 600px;

ui/src/reusable_ui/components/card_select/CardSelectCard.tsx

@@ -1,9 +1,14 @@
+// Libraries
 import React, {PureComponent} from 'react'
-import {ErrorHandling} from 'src/shared/decorators/errors'
+import classnames from 'classnames'
 
+// Types
 import {CardSelectCardProps} from 'src/types/cardSelect'
 
-import classnames from 'classnames'
+// Styles
+import 'src/reusable_ui/components/card_select/CardSelectCard.scss'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface State {
   checked: boolean

ui/src/reusable_ui/components/card_select/CardSelectList.scss

@@ -1,3 +1,10 @@
+/*
+  Card Selector Wrapper
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
+
 .card-select--wrapper {
   border: none;
   box-sizing: border-box;

ui/src/reusable_ui/components/dropdowns/Dropdown.scss

@@ -3,6 +3,8 @@
   ------------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 /* Dropdown Menu */
 .dropdown--menu-container {
   overflow: hidden;

ui/src/reusable_ui/components/dropdowns/Dropdown.tsx

@@ -18,6 +18,9 @@ import {
   IconFont,
 } from 'src/reusable_ui/types'
 
+// Styles
+import 'src/reusable_ui/components/dropdowns/Dropdown.scss'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/reusable_ui/components/dropdowns/DropdownButton.scss

@@ -3,6 +3,8 @@
   ------------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 /* Button */
 .dropdown--button {
   position: relative;

ui/src/reusable_ui/components/dropdowns/DropdownButton.tsx

@@ -11,6 +11,10 @@ import {
   DropdownChild,
 } from 'src/reusable_ui/types'
 
+// Styles
+import 'src/reusable_ui/components/Button/Button.scss'
+import 'src/reusable_ui/components/dropdowns/DropdownButton.scss'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/reusable_ui/components/form_layout/Form.scss

@@ -3,8 +3,9 @@
   ------------------------------------------------------------------------------
 */
 
-$grid--form-gutter: 6px;
+@import 'src/style/modules/modules';
 
+$grid--form-gutter: 6px;
 
 .form--wrapper {
   width: calc(100% + #{$grid--form-gutter * 2});

ui/src/reusable_ui/components/form_layout/Form.tsx

@@ -8,6 +8,9 @@ import FormLabel from 'src/reusable_ui/components/form_layout/FormLabel'
 import FormDivider from 'src/reusable_ui/components/form_layout/FormDivider'
 import FormFooter from 'src/reusable_ui/components/form_layout/FormFooter'
 
+// Styles
+import 'src/reusable_ui/components/form_layout/Form.scss'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/reusable_ui/components/inputs/Input.scss

@@ -3,6 +3,8 @@
   ------------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 $input-bg: $g2-kevlar;
 $input-disabled-bg: $g3-castle;
 

ui/src/reusable_ui/components/inputs/Input.tsx

@@ -10,6 +10,9 @@ import classnames from 'classnames'
 // Types
 import {ComponentStatus, ComponentSize, IconFont} from 'src/reusable_ui/types'
 
+// Styles
+import 'src/reusable_ui/components/inputs/Input.scss'
+
 export enum InputType {
   Text = 'text',
   Number = 'number',

ui/src/reusable_ui/components/overlays/Overlay.scss

@@ -3,6 +3,8 @@
    -----------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 $overlay-title-height: $chronograf-page-header-height;
 $overlay-gutter: 30px;
 $overlay-min-height: 150px;

ui/src/reusable_ui/components/overlays/OverlayTechnology.tsx

@@ -2,6 +2,9 @@
 import React, {Component} from 'react'
 import classnames from 'classnames'
 
+// Styles
+import 'src/reusable_ui/components/overlays/Overlay.scss'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/reusable_ui/components/panel/Panel.scss

@@ -3,6 +3,8 @@
    -----------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 $panel-gutter: 30px;
 $panel-background: $g3-castle;
 

ui/src/reusable_ui/components/panel/Panel.tsx

@@ -8,6 +8,9 @@ import PanelHeader from 'src/reusable_ui/components/panel/PanelHeader'
 import PanelBody from 'src/reusable_ui/components/panel/PanelBody'
 import PanelFooter from 'src/reusable_ui/components/panel/PanelFooter'
 
+// Styles
+import 'src/reusable_ui/components/panel/Panel.scss'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 export enum PanelType {

ui/src/reusable_ui/components/slide_toggle/SlideToggle.scss

@@ -3,6 +3,8 @@
   ------------------------------------------------------------------------------
 */
 
+@import 'src/style/modules/modules';
+
 .slide-toggle {
   background-color: $g1-raven;
   position: relative;

ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx

@@ -5,6 +5,9 @@ import classnames from 'classnames'
 // Types
 import {ComponentColor, ComponentSize} from 'src/reusable_ui/types'
 
+// Styles
+import 'src/reusable_ui/components/slide_toggle/SlideToggle.scss'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/reusable_ui/components/wizard/ProgressConnector.scss

@@ -1,4 +1,9 @@
-@import 'src/style/modules/influx-colors';
+/*
+  Wizard Progress Connector Styles
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
 
 .wizard-progress-connector {
   width: 50px;

ui/src/reusable_ui/components/wizard/ProgressConnector.tsx

@@ -1,9 +1,14 @@
+// Libraries
 import React, {PureComponent} from 'react'
-import {ConnectorState} from 'src/reusable_ui/constants/wizard'
-import {ErrorHandling} from 'src/shared/decorators/errors'
 
+// Types
+import {ConnectorState} from 'src/reusable_ui/constants/wizard'
+
+// Styles
 import 'src/reusable_ui/components/wizard/ProgressConnector.scss'
 
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface Props {
   status: ConnectorState
 }

ui/src/reusable_ui/components/wizard/WizardButtonBar.scss

@@ -1,4 +1,9 @@
-@import 'src/style/modules/variables';
+/*
+  Wizard Button Bar Styles
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
 
 .wizard-button-bar {
   display: flex;

ui/src/reusable_ui/components/wizard/WizardButtonBar.tsx

@@ -1,8 +1,11 @@
+// Libraries
 import React, {PureComponent} from 'react'
-import {ErrorHandling} from 'src/shared/decorators/errors'
 
+// Styles
 import 'src/reusable_ui/components/wizard/WizardButtonBar.scss'
 
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface Props {
   decrement?: () => void
   nextLabel?: string

ui/src/reusable_ui/components/wizard/WizardController.scss

@@ -1,6 +1,9 @@
-@import 'src/style/modules/influx-colors';
+/*
-@import 'src/style/modules/variables';
+  Wizard Controller Styles
-@import 'src/style/modules/mixins';
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
 
 .wizard-step-title {
   text-align: center;

ui/src/reusable_ui/components/wizard/WizardController.tsx

@@ -1,11 +1,18 @@
+// Libraries
 import React, {PureComponent, ReactElement} from 'react'
+
+// Components
 import WizardProgressBar from 'src/reusable_ui/components/wizard/WizardProgressBar'
-import {ErrorHandling} from 'src/shared/decorators/errors'
+
+// Types
 import {WizardStepProps, Step} from 'src/types/wizard'
 import {StepStatus} from 'src/reusable_ui/constants/wizard'
 
+// Styles
 import 'src/reusable_ui/components/wizard/WizardController.scss'
 
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface State {
   steps: Step[]
   currentStepIndex: number
@@ -20,7 +27,7 @@ interface Props {
 @ErrorHandling
 class WizardController extends PureComponent<Props, State> {
   public static defaultProps: Partial<Props> = {
-    skipLinkText: 'skip',
+    skipLinkText: 'Skip',
   }
 
   public static getDerivedStateFromProps(props: Props, state: State) {

ui/src/reusable_ui/components/wizard/WizardFullScreen.scss

@@ -1,6 +1,9 @@
-@import 'src/style/modules/influx-colors';
+/*
-@import 'src/style/modules/variables';
+  Full Screen Wizard Styles
-@import 'src/style/modules/mixins';
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
 
 .wizard-container {
   padding: 30px;

ui/src/reusable_ui/components/wizard/WizardFullScreen.tsx

@@ -1,12 +1,18 @@
+// Libraries
 import React, {PureComponent, ReactElement} from 'react'
 
+// Components
 import SplashPage from 'src/shared/components/SplashPage'
 import WizardController from 'src/reusable_ui/components/wizard/WizardController'
-import {ErrorHandling} from 'src/shared/decorators/errors'
 
+// Types
 import {WizardStepProps} from 'src/types/wizard'
 
+// Styles
 import 'src/reusable_ui/components/wizard/WizardFullScreen.scss'
+
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface Props {
   children: Array<ReactElement<WizardStepProps>>
   title: string

ui/src/reusable_ui/components/wizard/WizardOverlay.tsx

@@ -1,11 +1,16 @@
+// Libraries
 import React, {PureComponent, ReactElement} from 'react'
+
+// Components
 import OverlayBody from 'src/reusable_ui/components/overlays/OverlayBody'
 import OverlayContainer from 'src/reusable_ui/components/overlays/OverlayContainer'
 import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology'
 import WizardController from 'src/reusable_ui/components/wizard/WizardController'
 import OverlayHeading from 'src/reusable_ui/components/overlays/OverlayHeading'
 
+// Types
 import {WizardStepProps} from 'src/types/wizard'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {

ui/src/reusable_ui/components/wizard/WizardProgressBar.scss

@@ -1,6 +1,9 @@
-@import 'src/style/modules/influx-colors';
+/*
-@import 'src/style/modules/variables';
+  Wizard Progress Bar Styles
-@import 'src/style/modules/mixins';
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
 
 .wizard-progress-bar {
   display: inline-flex;

ui/src/reusable_ui/components/wizard/WizardProgressBar.tsx

@@ -1,12 +1,18 @@
+// Libraries
 import React, {PureComponent} from 'react'
-import ProgressConnector from 'src/reusable_ui/components/wizard/ProgressConnector'
-import {ErrorHandling} from 'src/shared/decorators/errors'
 
+// Components
+import ProgressConnector from 'src/reusable_ui/components/wizard/ProgressConnector'
+
+// Types
 import {Step} from 'src/types/wizard'
 import {ConnectorState, StepStatus} from 'src/reusable_ui/constants/wizard'
 
+// Types
 import 'src/reusable_ui/components/wizard/WizardProgressBar.scss'
 
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface Props {
   steps: Step[]
   currentStepIndex: number

ui/src/reusable_ui/components/wizard/WizardStep.scss

@@ -1,4 +1,9 @@
-@import 'src/style/modules/variables';
+/*
+  Wizard Step Styles
+  ------------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/modules';
 
 .wizard-step-content {
   margin: $ix-marg-b 0;

ui/src/reusable_ui/components/wizard/WizardStep.tsx

@@ -1,10 +1,15 @@
+// Libraries
 import React, {PureComponent, ReactNode} from 'react'
+
+// Components
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import WizardButtonBar from 'src/reusable_ui/components/wizard/WizardButtonBar'
-import {ErrorHandling} from 'src/shared/decorators/errors'
 
+// Styles
 import 'src/reusable_ui/components/wizard/WizardStep.scss'
 
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
 interface Props {
   children: ReactNode
   title: string

ui/src/reusable_ui/styles.scss

@@ -1,11 +0,0 @@
-// Reusable UI Components
-@import 'components/Button/Button';
-@import 'components/dropdowns/Dropdown';
-@import 'components/dropdowns/DropdownButton';
-@import 'components/form_layout/Form';
-@import 'components/inputs/Input';
-@import 'components/overlays/Overlay';
-@import 'components/panel/Panel';
-@import 'components/slide_toggle/SlideToggle';
-@import 'components/card_select/CardSelectCard.scss';
-@import 'components/card_select/CardSelectList.scss';

ui/src/style/chronograf.scss

@@ -71,10 +71,6 @@
 @import 'components/kapacitor-logs-table';
 @import 'components/dropdown-placeholder';
 @import 'components/histogram-chart';
-@import 'components/import-dashboard-mappings';
-
-// Reusable UI Components
-@import '../reusable_ui/styles';
 
 // Pages
 @import 'pages/config-endpoints';

ui/src/style/layout/page-header.scss

@@ -2,8 +2,6 @@
   Page Header
   ------------------------------------------------------------------------------
 */
-$page-header-size: 19px;
-$page-header-weight: 400 !important;
 
 .page-header {
   height: $chronograf-page-header-height;

ui/src/style/modules/_variables.scss

@@ -10,6 +10,9 @@ $page-wrapper-padding: 60px;
 $page-wrapper-max-width: 1300px;
 $chronograf-page-header-height: 60px;
 
+$page-header-size: 19px;
+$page-header-weight: 400 !important;
+
 $ix-marg-a: 4px;
 $ix-marg-b: 8px;
 $ix-marg-c: 16px;

ui/test/dashboards/components/ImportDashboardMappings.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {shallow} from 'enzyme'
 
-import ImportDashboardMappings from 'src/dashboards/components/ImportDashboardMappings'
+import ImportDashboardMappings from 'src/dashboards/components/import_dashboard_mappings/ImportDashboardMappings'
 import {source, cell, query} from 'test/fixtures'
 
 const setup = (override = {}) => {