Move from “Atomic” to a “Modular” design pattern

This PR will just restructure the code into a different folder pattern,
no functionality was added or modified.

Previously, the code followed the “Atomic Design Pattern”, where React
components were divided into 3 groups based on their “scope”: atoms
(where we put our components with the smallest scope like inputs, icons,
fonts etc.), molecules (an intermediate step with components that group
atoms components) and organisms (groups components from the molecules
and atoms groups).

An issue with this pattern, in our application’s case, is that it
doesn’t scale so well, leaving us with a single folder holding a lot of
components with no clear way to avoid it. This also makes it difficult
to find a component by just browsing the folder structure.

In the current and future state of the application, a “Modular” design
pattern is more appropriate by solving the previous issues. The basic UI
components are stored separately, while the other components are grouped
in modules based on their purpose.

src/components/App.tsx

@@ -18,36 +18,36 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import styled, { createGlobalStyle } from 'styled-components'
 import { observe } from 'mobx'
 
-import Fonts from './atoms/Fonts'
-import Notifications from './organisms/Notifications'
-import LoginPage from './pages/LoginPage'
-import ReplicasPage from './pages/ReplicasPage'
-import MessagePage from './pages/MessagePage'
-import ReplicaDetailsPage from './pages/ReplicaDetailsPage'
-import MigrationsPage from './pages/MigrationsPage'
-import MigrationDetailsPage from './pages/MigrationDetailsPage'
-import EndpointsPage from './pages/EndpointsPage'
-import EndpointDetailsPage from './pages/EndpointDetailsPage'
-import WizardPage from './pages/WizardPage'
+import Fonts from './ui/Fonts'
+import NotificationsModule from './modules/NotificationsModule'
+import LoginPage from './smart/LoginPage'
+import ReplicasPage from './smart/ReplicasPage'
+import MessagePage from './smart/MessagePage'
+import ReplicaDetailsPage from './smart/ReplicaDetailsPage'
+import MigrationsPage from './smart/MigrationsPage'
+import MigrationDetailsPage from './smart/MigrationDetailsPage'
+import EndpointsPage from './smart/EndpointsPage'
+import EndpointDetailsPage from './smart/EndpointDetailsPage'
+import WizardPage from './smart/WizardPage'
 import userStore from '../stores/UserStore'
-import AssessmentsPage from './pages/AssessmentsPage'
-import AssessmentDetailsPage from './pages/AssessmentDetailsPage'
-import UsersPage from './pages/UsersPage'
-import UserDetailsPage from './pages/UserDetailsPage'
-import ProjectsPage from './pages/ProjectsPage'
-import ProjectDetailsPage from './pages/ProjectDetailsPage'
-import DashboardPage from './pages/DashboardPage'
-import LogsPage from './pages/LogsPage'
-import LogStreamPage from './pages/LogStreamPage'
-
-import Tooltip from './atoms/Tooltip/Tooltip'
+import AssessmentsPage from './smart/AssessmentsPage'
+import AssessmentDetailsPage from './smart/AssessmentDetailsPage'
+import UsersPage from './smart/UsersPage'
+import UserDetailsPage from './smart/UserDetailsPage'
+import ProjectsPage from './smart/ProjectsPage'
+import ProjectDetailsPage from './smart/ProjectDetailsPage'
+import DashboardPage from './smart/DashboardPage'
+import LogsPage from './smart/LogsPage'
+import LogStreamPage from './smart/LogStreamPage'
+
+import Tooltip from './ui/Tooltip/Tooltip'
 
 import { navigationMenu } from '../constants'
 import Palette from './styleUtils/Palette'
 import StyleProps from './styleUtils/StyleProps'
 import configLoader from '../utils/Config'
-import MinionPoolsPage from './pages/MinionPoolsPage/MinionPoolsPage'
-import MinionPoolDetailsPage from './pages/MinionPoolDetailsPage/MinionPoolDetailsPage'
+import MinionPoolsPage from './smart/MinionPoolsPage/MinionPoolsPage'
+import MinionPoolDetailsPage from './smart/MinionPoolDetailsPage/MinionPoolDetailsPage'
 
 const GlobalStyle = createGlobalStyle`
  ${Fonts}
@@ -202,7 +202,7 @@ class App extends React.Component<{}, State> {
             <Route component={MessagePage} />
           </Switch>
         </Router>
-        <Notifications />
+        <NotificationsModule />
         <Tooltip />
       </Wrapper>
     )

src/components/molecules/AssessedVmListItem/AssessedVmListItem.tsx → src/components/modules/AssessmentModule/AssessedVmListItem/AssessedVmListItem.tsx

@@ -16,12 +16,12 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Checkbox from '../../atoms/Checkbox'
-import InfoIcon from '../../atoms/InfoIcon'
-import DropdownLink from '../DropdownLink'
-import type { VmItem } from '../../../@types/Assessment'
+import Checkbox from '../../../ui/Checkbox/Checkbox'
+import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import type { VmItem } from '../../../../@types/Assessment'
 
-import Palette from '../../styleUtils/Palette'
+import Palette from '../../../styleUtils/Palette'
 
 const Wrapper = styled.div<any>`
   position: relative;

src/components/organisms/AssessmentDetailsContent/AssessmentDetailsContent.tsx → src/components/modules/AssessmentModule/AssessmentDetailsContent/AssessmentDetailsContent.tsx

@@ -17,22 +17,22 @@ import styled, { css } from 'styled-components'
 import moment from 'moment'
 import { observer } from 'mobx-react'
 
-import DetailsNavigation from '../../molecules/DetailsNavigation'
-import Button from '../../atoms/Button'
-import StatusImage from '../../atoms/StatusImage'
-import DropdownLink from '../../molecules/DropdownLink'
-import Table from '../../molecules/Table'
-import AssessedVmListItem from '../../molecules/AssessedVmListItem'
-import DropdownFilter from '../../molecules/DropdownFilter'
-import Checkbox from '../../atoms/Checkbox'
-import SmallLoading from '../../atoms/SmallLoading'
-
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
-import type { Assessment, VmItem, AzureLocation } from '../../../@types/Assessment'
-import type { Endpoint } from '../../../@types/Endpoint'
-import type { Instance, Nic } from '../../../@types/Instance'
-import type { Network, NetworkMap } from '../../../@types/Network'
+import DetailsNavigation from '../../NavigationModule/DetailsNavigation/DetailsNavigation'
+import Button from '../../../ui/Button/Button'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import Table from '../../../ui/Table/Table'
+import AssessedVmListItem from '../AssessedVmListItem/AssessedVmListItem'
+import DropdownFilter from '../../../ui/Dropdowns/DropdownFilter/DropdownFilter'
+import Checkbox from '../../../ui/Checkbox/Checkbox'
+import SmallLoading from '../../../ui/SmallLoading/SmallLoading'
+
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
+import type { Assessment, VmItem, AzureLocation } from '../../../../@types/Assessment'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import type { Instance, Nic } from '../../../../@types/Instance'
+import type { Network, NetworkMap } from '../../../../@types/Network'
 
 import azureMigrateImage from './images/logo.svg'
 import arrowImage from './images/arrow.svg'

src/components/molecules/AssessmentListItem/AssessmentListItem.tsx → src/components/modules/AssessmentModule/AssessmentListItem/AssessmentListItem.tsx

@@ -16,11 +16,11 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StatusPill from '../../atoms/StatusPill'
+import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
-import type { Assessment } from '../../../@types/Assessment'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
+import type { Assessment } from '../../../../@types/Assessment'
 
 import assessmentImage from './images/assessment.svg'
 import azureMigrateImage from './images/azure-migrate.svg'

src/components/organisms/AssessmentMigrationOptions/AssessmentMigrationOptions.tsx → src/components/modules/AssessmentModule/AssessmentMigrationOptions/AssessmentMigrationOptions.tsx

@@ -16,14 +16,14 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Button from '../../atoms/Button'
-import FieldInput from '../../molecules/FieldInput'
-import ToggleButtonBar from '../../atoms/ToggleButtonBar'
+import Button from '../../../ui/Button/Button'
+import FieldInput from '../../../ui/FieldInput/FieldInput'
+import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
 
-import type { Field } from '../../../@types/Field'
+import type { Field } from '../../../../@types/Field'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import LabelDictionary from '../../../utils/LabelDictionary'
+import StyleProps from '../../../styleUtils/StyleProps'
+import LabelDictionary from '../../../../utils/LabelDictionary'
 
 import assessmentImage from './images/assessment.svg'
 

src/components/organisms/DashboardContent/modules/ActivityModule/ActivityModule.tsx → src/components/modules/DashboardModule/DashboardActivity/DashboardActivity.tsx

@@ -17,17 +17,17 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import StatusIcon from '../../../../atoms/StatusIcon'
-import StatusImage from '../../../../atoms/StatusImage'
-import Button from '../../../../atoms/Button'
+import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Button from '../../../ui/Button/Button'
 import {
   InfoColumn, MainItemInfo, ItemReplicaBadge, ItemTitle, ItemDescription,
-} from '../../../../molecules/NotificationDropdown'
+} from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
 
-import type { NotificationItemData } from '../../../../../@types/NotificationItem'
+import type { NotificationItemData } from '../../../../@types/NotificationItem'
 
 import replicaImage from './images/replica.svg'
 
@@ -95,7 +95,7 @@ type Props = {
   onNewClick: () => void,
 }
 @observer
-class ActivityModule extends React.Component<Props> {
+class DashboardActivity extends React.Component<Props> {
   renderList() {
     return (
       <List>
@@ -168,4 +168,4 @@ class ActivityModule extends React.Component<Props> {
   }
 }
 
-export default ActivityModule
+export default DashboardActivity

src/components/modules/DashboardModule/DashboardActivity/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardActivity",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardActivity.tsx"
+}

src/components/organisms/DashboardContent/charts/BarChart/NiceScale.ts → src/components/modules/DashboardModule/DashboardBarChart/BarChartNiceScale.ts

@@ -1,4 +1,4 @@
-class NiceScale {
+class BarChartNiceScale {
   minPoint: number
 
   maxPoint: number
@@ -67,4 +67,4 @@ class NiceScale {
   }
 }
 
-export default NiceScale
+export default BarChartNiceScale

src/components/organisms/DashboardContent/charts/BarChart/BarChart.tsx → src/components/modules/DashboardModule/DashboardBarChart/DashboardBarChart.tsx

@@ -16,9 +16,9 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StyleProps from '../../../../styleUtils/StyleProps'
+import StyleProps from '../../../styleUtils/StyleProps'
 
-import NiceScale from './NiceScale'
+import BarChartNiceScale from './BarChartNiceScale'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -105,7 +105,7 @@ type Props = {
 }
 
 @observer
-class BarChart extends React.Component<Props> {
+class DashboardBarChart extends React.Component<Props> {
   barsRef: HTMLElement | null | undefined
 
   ticks: { value: number }[] = []
@@ -124,7 +124,7 @@ class BarChart extends React.Component<Props> {
     this.range = props.data.reduce((max, item) => Math.max(
       max, item.values.reduce((sum, value) => sum + value, 0),
     ), 1)
-    const niceScale = new NiceScale(0, this.range, props.yNumTicks)
+    const niceScale = new BarChartNiceScale(0, this.range, props.yNumTicks)
     this.ticks = []
     const numTicks = Math.floor(this.range / niceScale.tickSpacing) + 1
     for (let i = 0; i < numTicks; i += 1) {
@@ -229,4 +229,4 @@ class BarChart extends React.Component<Props> {
   }
 }
 
-export default BarChart
+export default DashboardBarChart

src/components/modules/DashboardModule/DashboardBarChart/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardBarChart",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardBarChart.tsx"
+}

src/components/organisms/DashboardContent/DashboardContent.tsx → src/components/modules/DashboardModule/DashboardContent/DashboardContent.tsx

@@ -17,20 +17,20 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import autobind from 'autobind-decorator'
 
-import InfoCountModule from './modules/InfoCountModule'
-import LicenceModule from './modules/LicenceModule'
-import ActivityModule from './modules/ActivityModule'
-import TopEndpointsModule from './modules/TopEndpointsModule'
-import ExecutionsModule from './modules/ExecutionsModule'
+import DashboardInfoCount from '../DashboardInfoCount/DashboardInfoCount'
+import DashboardLicence from '../DashboardLicence/DashboardLicence'
+import DashboardActivity from '../DashboardActivity/DashboardActivity'
+import DashboardTopEndpoints from '../DashboardTopEndpoints/DashboardTopEndpoints'
+import DashboardExecutions from '../DashboardExecutions/DashboardExecutions'
 
-import Palette from '../../styleUtils/Palette'
+import Palette from '../../../styleUtils/Palette'
 
-import type { Endpoint } from '../../../@types/Endpoint'
-import type { Project } from '../../../@types/Project'
-import type { User } from '../../../@types/User'
-import type { Licence, LicenceServerStatus } from '../../../@types/Licence'
-import type { NotificationItemData } from '../../../@types/NotificationItem'
-import { ReplicaItem, MigrationItem } from '../../../@types/MainItem'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import type { Project } from '../../../../@types/Project'
+import type { User } from '../../../../@types/User'
+import type { Licence, LicenceServerStatus } from '../../../../@types/Licence'
+import type { NotificationItemData } from '../../../../@types/NotificationItem'
+import { ReplicaItem, MigrationItem } from '../../../../@types/MainItem'
 
 const MIDDLE_WIDTHS = ['264px', '264px', '450px']
 
@@ -109,7 +109,7 @@ class DashboardContent extends React.Component<Props, State> {
 
   renderMiddleModules() {
     const modules = [
-      <ActivityModule
+      <DashboardActivity
         large={this.state.useMobileLayout || this.state.useLargeActivity}
         notificationItems={this.props.notificationItems}
         loading={this.props.notificationItemsLoading}
@@ -119,7 +119,7 @@ class DashboardContent extends React.Component<Props, State> {
         }}
         onNewClick={this.props.onNewReplicaClick}
       />,
-      <TopEndpointsModule
+      <DashboardTopEndpoints
         replicas={this.props.replicas}
         migrations={this.props.migrations}
         endpoints={this.props.endpoints}
@@ -131,7 +131,7 @@ class DashboardContent extends React.Component<Props, State> {
         }}
         onNewClick={this.props.onNewEndpointClick}
       />,
-      <LicenceModule
+      <DashboardLicence
         licence={this.props.licence}
         loading={this.props.licenceLoading}
         licenceServerStatus={this.props.licenceServerStatus}
@@ -211,11 +211,11 @@ class DashboardContent extends React.Component<Props, State> {
 
     return (
       <Wrapper>
-        <InfoCountModule
+        <DashboardInfoCount
           data={infoCountData}
         />
         {this.renderMiddleModules()}
-        <ExecutionsModule
+        <DashboardExecutions
           replicas={this.props.replicas}
           migrations={this.props.migrations}
           loading={this.props.replicasLoading || this.props.migrationsLoading}

src/components/organisms/DashboardContent/modules/ExecutionsModule/ExecutionsModule.tsx → src/components/modules/DashboardModule/DashboardExecutions/DashboardExecutions.tsx

@@ -17,15 +17,15 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import moment from 'moment'
 
-import StatusImage from '../../../../atoms/StatusImage'
-import DropdownLink from '../../../../molecules/DropdownLink'
-import BarChart from '../../charts/BarChart'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import DashboardBarChart from '../DashboardBarChart/DashboardBarChart'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
 
 import emptyBackgroundImage from './images/empty-background.svg'
-import { ReplicaItem, MigrationItem, TransferItem } from '../../../../../@types/MainItem'
+import { ReplicaItem, MigrationItem, TransferItem } from '../../../../@types/MainItem'
 
 const INTERVALS = [
   { label: 'Last {x} days', value: '30-days' },
@@ -153,7 +153,7 @@ type State = {
 const COLORS = ['#F91661', '#0044CB']
 
 @observer
-class ExecutionsModule extends React.Component<Props, State> {
+class DashboardExecutions extends React.Component<Props, State> {
   state: State = {
     selectedPeriod: INTERVALS[0].value,
     groupedData: [],
@@ -281,7 +281,7 @@ class ExecutionsModule extends React.Component<Props, State> {
   renderBarChart() {
     return (
       <BarChartWrapper>
-        <BarChart
+        <DashboardBarChart
           style={{ height: '164px' }}
           yNumTicks={3}
           data={this.state.groupedData}
@@ -333,4 +333,4 @@ class ExecutionsModule extends React.Component<Props, State> {
   }
 }
 
-export default ExecutionsModule
+export default DashboardExecutions

src/components/modules/DashboardModule/DashboardExecutions/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardExecutions",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardExecutions.tsx"
+}

src/components/organisms/DashboardContent/modules/InfoCountModule/InfoCountModule.tsx → src/components/modules/DashboardModule/DashboardInfoCount/DashboardInfoCount.tsx

@@ -17,10 +17,10 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import StatusImage from '../../../../atoms/StatusImage'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
 
 const Wrapper = styled.div<any>`
   background: ${Palette.grayscale[0]};
@@ -73,7 +73,7 @@ type Props = {
   }[],
 }
 @observer
-class InfoCountModule extends React.Component<Props> {
+class DashboardInfoCount extends React.Component<Props> {
   render() {
     return (
       <Wrapper>
@@ -91,4 +91,4 @@ class InfoCountModule extends React.Component<Props> {
   }
 }
 
-export default InfoCountModule
+export default DashboardInfoCount

src/components/modules/DashboardModule/DashboardInfoCount/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardInfoCount",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardInfoCount.tsx"
+}

src/components/organisms/DashboardContent/modules/LicenceModule/LicenceModule.tsx → src/components/modules/DashboardModule/DashboardLicence/DashboardLicence.tsx

@@ -17,17 +17,17 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import moment from 'moment'
 
-import StatusImage from '../../../../atoms/StatusImage'
-import InfoIcon from '../../../../atoms/InfoIcon'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
 
-import type { Licence, LicenceServerStatus } from '../../../../../@types/Licence'
-import CopyValue from '../../../../atoms/CopyValue/CopyValue'
-import Button from '../../../../atoms/Button/Button'
+import type { Licence, LicenceServerStatus } from '../../../../@types/Licence'
+import CopyValue from '../../../ui/CopyValue/CopyValue'
+import Button from '../../../ui/Button/Button'
 
-import licenceImage from '../../../Licence/images/licence'
+import licenceImage from '../../LicenceModule/images/licence'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;
@@ -155,7 +155,7 @@ type Props = {
   onAddClick: () => void,
 }
 @observer
-class LicenceModule extends React.Component<Props> {
+class DashboardLicence extends React.Component<Props> {
   renderExpiration(date: Date) {
     const dateMoment = moment(date)
     const days = dateMoment.diff(new Date(), 'days')
@@ -311,4 +311,4 @@ class LicenceModule extends React.Component<Props> {
   }
 }
 
-export default LicenceModule
+export default DashboardLicence

src/components/modules/DashboardModule/DashboardLicence/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardLicence",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardLicence.tsx"
+}

src/components/organisms/DashboardContent/charts/PieChart/PieChart.tsx → src/components/modules/DashboardModule/DashboardPieChart/DashboardPieChart.tsx

@@ -17,7 +17,7 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import autobind from 'autobind-decorator'
 
-import StyleProps from '../../../../styleUtils/StyleProps'
+import StyleProps from '../../../styleUtils/StyleProps'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -58,7 +58,7 @@ type Props = {
 }
 
 @observer
-class PieChart extends React.Component<Props> {
+class DashboardPieChart extends React.Component<Props> {
   canvas: HTMLCanvasElement | null | undefined
 
   angles: number[] = []
@@ -219,4 +219,4 @@ class PieChart extends React.Component<Props> {
   }
 }
 
-export default PieChart
+export default DashboardPieChart

src/components/organisms/DashboardContent/modules/TopEndpointsModule/TopEndpointsModule.tsx → src/components/modules/DashboardModule/DashboardTopEndpoints/DashboardTopEndpoints.tsx

@@ -17,18 +17,18 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import Button from '../../../../atoms/Button'
-import StatusImage from '../../../../atoms/StatusImage'
-import EndpointLogos from '../../../../atoms/EndpointLogos'
-import PieChart from '../../charts/PieChart'
+import Button from '../../../ui/Button/Button'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
+import DashboardPieChart from '../DashboardPieChart/DashboardPieChart'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
 
-import type { Endpoint } from '../../../../../@types/Endpoint'
+import type { Endpoint } from '../../../../@types/Endpoint'
 
 import endpointImage from './images/endpoint.svg'
-import { ReplicaItem, MigrationItem, TransferItem } from '../../../../../@types/MainItem'
+import { ReplicaItem, MigrationItem, TransferItem } from '../../../../@types/MainItem'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;
@@ -153,7 +153,7 @@ type State = {
 }
 const COLORS = ['#280E4C', '#FF2D55', '#FDC02F', '#0044CA', '#39DA55', '#A4AAB5']
 @observer
-class TopEndpointsModule extends React.Component<Props, State> {
+class DashboardTopEndpoints extends React.Component<Props, State> {
   state: State = {
     tooltipPosition: { x: 0, y: 0 },
     groupedEndpoint: null,
@@ -247,7 +247,7 @@ class TopEndpointsModule extends React.Component<Props, State> {
   renderChart() {
     return (
       <ChartWrapper>
-        <PieChart
+        <DashboardPieChart
           customRef={ref => { this.chartRef = ref }}
           size={144}
           data={this.state.groupedEndpoints}
@@ -294,4 +294,4 @@ class TopEndpointsModule extends React.Component<Props, State> {
   }
 }
 
-export default TopEndpointsModule
+export default DashboardTopEndpoints

src/components/modules/DashboardModule/DashboardTopEndpoints/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardTopEndpoints",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardTopEndpoints.tsx"
+}

src/components/organisms/DetailsContentHeader/DetailsContentHeader.tsx → src/components/modules/DetailsModule/DetailsContentHeader/DetailsContentHeader.tsx

@@ -17,12 +17,12 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import StatusPill from '../../atoms/StatusPill'
-import ActionDropdown from '../../molecules/ActionDropdown'
-import type { Action as DropdownAction } from '../../molecules/ActionDropdown'
+import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
+import ActionDropdown from '../../../ui/Dropdowns/ActionDropdown/ActionDropdown'
+import type { Action as DropdownAction } from '../../../ui/Dropdowns/ActionDropdown/ActionDropdown'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
 
 import backArrowImage from './images/back-arrow.svg'
 

src/components/organisms/DetailsPageHeader/DetailsPageHeader.tsx → src/components/modules/DetailsModule/DetailsPageHeader/DetailsPageHeader.tsx

@@ -17,14 +17,14 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import NavigationMini from '../../molecules/NavigationMini'
-import NotificationDropdown from '../../molecules/NotificationDropdown'
-import UserDropdown from '../../molecules/UserDropdown'
-import AboutModal from '../../pages/AboutModal'
+import NavigationMini from '../../NavigationModule/NavigationMini/NavigationMini'
+import NotificationDropdown from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
+import UserDropdown from '../../../ui/Dropdowns/UserDropdown/UserDropdown'
+import AboutModal from '../../../smart/AboutModal/AboutModal'
 
-import type { User as UserType } from '../../../@types/User'
+import type { User as UserType } from '../../../../@types/User'
 
-import notificationStore from '../../../stores/NotificationStore'
+import notificationStore from '../../../../stores/NotificationStore'
 
 import backgroundImage from './images/star-bg.jpg'
 import logoImage from './images/logo.svg'

src/components/organisms/DetailsPageHeader/test.tsx → src/components/modules/DetailsModule/DetailsPageHeader/test.tsx

@@ -16,7 +16,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import TW from '../../../utils/TestWrapper'
-import type { User } from '../../../@types/User'
+import type { User } from '../../../../@types/User'
 import DetailsPageHeader from '.'
 
 type Props = {

src/components/organisms/ChooseProvider/ChooseProvider.tsx → src/components/modules/EndpointModule/ChooseProvider/ChooseProvider.tsx

@@ -16,23 +16,23 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import notificationStore from '../../../stores/NotificationStore'
+import notificationStore from '../../../../stores/NotificationStore'
 
-import EndpointLogos from '../../atoms/EndpointLogos'
-import Button from '../../atoms/Button'
-import StatusImage from '../../atoms/StatusImage'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import Button from '../../../ui/Button/Button'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
-import FileUtils from '../../../utils/FileUtils'
-import configLoader from '../../../utils/Config'
+import StyleProps from '../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import FileUtils from '../../../../utils/FileUtils'
+import configLoader from '../../../../utils/Config'
 
-import type { FileContent } from '../../../utils/FileUtils'
-import type { Endpoint, MultiValidationItem } from '../../../@types/Endpoint'
+import type { FileContent } from '../../../../utils/FileUtils'
+import type { Endpoint, MultiValidationItem } from '../../../../@types/Endpoint'
 
 import MultipleUploadedEndpoints from './MultipleUploadedEndpoints'
-import { ProviderTypes } from '../../../@types/Providers'
-import { Region } from '../../../@types/Region'
+import { ProviderTypes } from '../../../../@types/Providers'
+import { Region } from '../../../../@types/Region'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/organisms/ChooseProvider/MultipleUploadedEndpoints.tsx → src/components/modules/EndpointModule/ChooseProvider/MultipleUploadedEndpoints.tsx

@@ -16,19 +16,19 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import type { Endpoint, MultiValidationItem } from '../../../@types/Endpoint'
+import type { Endpoint, MultiValidationItem } from '../../../../@types/Endpoint'
 
-import StatusIcon from '../../atoms/StatusIcon'
-import Button from '../../atoms/Button'
-import EndpointLogos from '../../atoms/EndpointLogos'
-import LoadingButton from '../../molecules/LoadingButton'
+import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
+import Button from '../../../ui/Button/Button'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 
 import deleteImage from './images/delete.svg'
 import deleteHoverImage from './images/delete-hover.svg'
-import DomUtils from '../../../utils/DomUtils'
-import notificationStore from '../../../stores/NotificationStore'
-import DropdownLink from '../../molecules/DropdownLink/DropdownLink'
-import { Region } from '../../../@types/Region'
+import DomUtils from '../../../../utils/DomUtils'
+import notificationStore from '../../../../stores/NotificationStore'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import { Region } from '../../../../@types/Region'
 
 const Wrapper = styled.div`
   width: 100%;

src/components/organisms/EndpointDetailsContent/EndpointDetailsContent.tsx → src/components/modules/EndpointModule/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -17,25 +17,25 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import EndpointLogos from '../../atoms/EndpointLogos'
-import PasswordValue from '../../atoms/PasswordValue'
-import Button from '../../atoms/Button'
-import CopyValue from '../../atoms/CopyValue'
-import CopyMultilineValue from '../../atoms/CopyMultilineValue'
-import StatusImage from '../../atoms/StatusImage'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import PasswordValue from '../../../ui/PasswordValue/PasswordValue'
+import Button from '../../../ui/Button/Button'
+import CopyValue from '../../../ui/CopyValue/CopyValue'
+import CopyMultilineValue from '../../../ui/CopyMultilineValue/CopyMultilineValue'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import type { Endpoint } from '../../../@types/Endpoint'
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
-import DateUtils from '../../../utils/DateUtils'
-import LabelDictionary from '../../../utils/LabelDictionary'
-import configLoader from '../../../utils/Config'
-import { Region } from '../../../@types/Region'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import StyleProps from '../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import DateUtils from '../../../../utils/DateUtils'
+import LabelDictionary from '../../../../utils/LabelDictionary'
+import configLoader from '../../../../utils/Config'
+import { Region } from '../../../../@types/Region'
 import {
   getTransferItemTitle, MigrationItem, ReplicaItem, TransferItem,
-} from '../../../@types/MainItem'
-import { Field as FieldType } from '../../../@types/Field'
-import DomUtils from '../../../utils/DomUtils'
+} from '../../../../@types/MainItem'
+import { Field as FieldType } from '../../../../@types/Field'
+import DomUtils from '../../../../utils/DomUtils'
 
 const Wrapper = styled.div<any>`
   ${StyleProps.exactWidth(StyleProps.contentWidth)}

src/components/organisms/EndpointDetailsContent/test.tsx → src/components/modules/EndpointModule/EndpointDetailsContent/test.tsx

@@ -19,10 +19,10 @@ import moment from 'moment'
 import TW from '../../../utils/TestWrapper'
 import EndpointDetailsContent from '.'
 
-import configLoader from '../../../utils/Config'
+import configLoader from '../../../../utils/Config'
 
 const wrap = props => new TW(shallow(
-  
+
   <EndpointDetailsContent usage={{ replicas: [], migrations: [] }}{...props} />
 ), 'edContent')
 
@@ -47,7 +47,7 @@ let connectionInfo = {
 
 describe('EndpointDetailsContent Component', () => {
   beforeAll(() => {
-    
+
     configLoader.config = { passwordFields: [] }
   })
 

src/components/organisms/EndpointDuplicateOptions/EndpointDuplicateOptions.tsx → src/components/modules/EndpointModule/EndpointDuplicateOptions/EndpointDuplicateOptions.tsx

@@ -16,13 +16,13 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StatusImage from '../../atoms/StatusImage'
-import Button from '../../atoms/Button'
-import FieldInput from '../../molecules/FieldInput'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Button from '../../../ui/Button/Button'
+import FieldInput from '../../../ui/FieldInput/FieldInput'
 
-import KeyboardManager from '../../../utils/KeyboardManager'
-import type { Project } from '../../../@types/Project'
-import Palette from '../../styleUtils/Palette'
+import KeyboardManager from '../../../../utils/KeyboardManager'
+import type { Project } from '../../../../@types/Project'
+import Palette from '../../../styleUtils/Palette'
 
 import duplicateImage from './images/duplicate.svg'
 

src/components/organisms/EndpointDuplicateOptions/test.tsx → src/components/modules/EndpointModule/EndpointDuplicateOptions/test.tsx

@@ -16,7 +16,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import TW from '../../../utils/TestWrapper'
-import type { Project } from '../../../@types/Project'
+import type { Project } from '../../../../@types/Project'
 import EndpointDuplicateOptions from '.'
 
 type Props = {

src/components/molecules/EndpointListItem/EndpointListItem.tsx → src/components/modules/EndpointModule/EndpointListItem/EndpointListItem.tsx

@@ -16,12 +16,12 @@ import React from 'react'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import type { Endpoint } from '../../../@types/Endpoint'
-import Checkbox from '../../atoms/Checkbox'
-import EndpointLogos from '../../atoms/EndpointLogos'
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
-import DateUtils from '../../../utils/DateUtils'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import Checkbox from '../../../ui/Checkbox/Checkbox'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
+import DateUtils from '../../../../utils/DateUtils'
 
 import endpointImage from './images/endpoint.svg'
 

src/components/atoms/EndpointLogos/EndpointLogos.tsx → src/components/modules/EndpointModule/EndpointLogos/EndpointLogos.tsx

@@ -17,7 +17,7 @@ import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
 import Generic from './resources/Generic'
-import configLoader from '../../../utils/Config'
+import configLoader from '../../../../utils/Config'
 
 const Wrapper = styled.div<any>``
 const Logo = styled.div<any>`

src/components/atoms/EndpointLogos/resources/Generic.tsx → src/components/modules/EndpointModule/EndpointLogos/resources/Generic.tsx

@@ -15,8 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled from 'styled-components'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import Palette from '../../../../styleUtils/Palette'
+import StyleProps from '../../../../styleUtils/StyleProps'
 import generic64Image from './generic-64.svg'
 import generic128Image from './generic-128.svg'
 import generic128DisabledImage from './generic-128-disabled.svg'

src/components/organisms/Endpoint/Endpoint.tsx → src/components/modules/EndpointModule/EndpointModal/EndpointModal.tsx

@@ -17,25 +17,25 @@ import styled from 'styled-components'
 import { observer } from 'mobx-react'
 import { observe } from 'mobx'
 
-import EndpointLogos from '../../atoms/EndpointLogos'
-import StatusIcon from '../../atoms/StatusIcon'
-import CopyButton from '../../atoms/CopyButton'
-import StatusImage from '../../atoms/StatusImage'
-import Button from '../../atoms/Button'
-import LoadingButton from '../../molecules/LoadingButton'
-
-import type { Endpoint as EndpointType } from '../../../@types/Endpoint'
-import type { Field } from '../../../@types/Field'
-import notificationStore from '../../../stores/NotificationStore'
-import endpointStore from '../../../stores/EndpointStore'
-import providerStore from '../../../stores/ProviderStore'
-import ObjectUtils from '../../../utils/ObjectUtils'
-import Palette from '../../styleUtils/Palette'
-import DomUtils from '../../../utils/DomUtils'
-import { ContentPlugin } from '../../../plugins/endpoint'
-import DefaultContentPlugin from '../../../plugins/endpoint/default/ContentPlugin'
-import KeyboardManager from '../../../utils/KeyboardManager'
-import { ProviderTypes } from '../../../@types/Providers'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
+import CopyButton from '../../../ui/CopyButton/CopyButton'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Button from '../../../ui/Button/Button'
+import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
+
+import type { Endpoint as EndpointType } from '../../../../@types/Endpoint'
+import type { Field } from '../../../../@types/Field'
+import notificationStore from '../../../../stores/NotificationStore'
+import endpointStore from '../../../../stores/EndpointStore'
+import providerStore from '../../../../stores/ProviderStore'
+import ObjectUtils from '../../../../utils/ObjectUtils'
+import Palette from '../../../styleUtils/Palette'
+import DomUtils from '../../../../utils/DomUtils'
+import { ContentPlugin } from '../../../../plugins/endpoint'
+import DefaultContentPlugin from '../../../../plugins/endpoint/default/ContentPlugin'
+import KeyboardManager from '../../../../utils/KeyboardManager'
+import { ProviderTypes } from '../../../../@types/Providers'
 
 const Wrapper = styled.div<any>`
   padding: 48px 0 32px 0;
@@ -122,7 +122,7 @@ type State = {
   isNew: boolean | null,
 }
 @observer
-class Endpoint extends React.Component<Props, State> {
+class EndpointModal extends React.Component<Props, State> {
   static defaultProps = {
     cancelButtonText: 'Cancel',
   }
@@ -504,4 +504,4 @@ class Endpoint extends React.Component<Props, State> {
   }
 }
 
-export default Endpoint
+export default EndpointModal

src/components/organisms/EndpointValidation/EndpointValidation.tsx → src/components/modules/EndpointModule/EndpointValidation/EndpointValidation.tsx

@@ -16,15 +16,15 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Button from '../../atoms/Button'
-import CopyButton from '../../atoms/CopyButton'
-import StatusImage from '../../atoms/StatusImage'
+import Button from '../../../ui/Button/Button'
+import CopyButton from '../../../ui/CopyButton/CopyButton'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../styleUtils/Palette'
-import type { Validation as ValidationType } from '../../../@types/Endpoint'
+import Palette from '../../../styleUtils/Palette'
+import type { Validation as ValidationType } from '../../../../@types/Endpoint'
 
-import notificationStore from '../../../stores/NotificationStore'
-import DomUtils from '../../../utils/DomUtils'
+import notificationStore from '../../../../stores/NotificationStore'
+import DomUtils from '../../../../utils/DomUtils'
 
 const Wrapper = styled.div<any>`
   padding: 48px 32px 32px 32px;

src/components/organisms/Licence/Licence.tsx → src/components/modules/LicenceModule/LicenceModule.tsx

@@ -17,11 +17,11 @@ import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 import moment from 'moment'
 
-import Button from '../../atoms/Button'
-import LoadingButton from '../../molecules/LoadingButton'
-import StatusImage from '../../atoms/StatusImage'
-import TextArea from '../../atoms/TextArea'
-import CopyValue from '../../atoms/CopyValue'
+import Button from '../../ui/Button/Button'
+import LoadingButton from '../../ui/LoadingButton/LoadingButton'
+import StatusImage from '../../ui/StatusComponents/StatusImage/StatusImage'
+import TextArea from '../../ui/TextArea/TextArea'
+import CopyValue from '../../ui/CopyValue/CopyValue'
 
 import StyleProps from '../../styleUtils/StyleProps'
 import Palette from '../../styleUtils/Palette'
@@ -120,7 +120,7 @@ type State = {
 }
 
 @observer
-class LicenceC extends React.Component<Props, State> {
+class LicenceModule extends React.Component<Props, State> {
   state = {
     licence: '',
     isValid: false,
@@ -389,4 +389,4 @@ class LicenceC extends React.Component<Props, State> {
   }
 }
 
-export default LicenceC
+export default LicenceModule

src/components/organisms/DashboardContent/modules/LicenceModule/package.json → src/components/modules/LicenceModule/package.json

@@ -4,4 +4,3 @@
   "private": true,
   "main": "./LicenceModule.tsx"
 }
-

src/components/organisms/LoginForm/LoginForm.tsx → src/components/modules/LoginModule/LoginForm/LoginForm.tsx

@@ -16,17 +16,17 @@ import React, { FormEvent } from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Button from '../../atoms/Button'
-import LoginOptions from '../../molecules/LoginOptions'
-import LoadingButton from '../../molecules/LoadingButton'
-import LoginFormField from '../../molecules/LoginFormField'
+import Button from '../../../ui/Button/Button'
+import LoginOptions from '../LoginOptions/LoginOptions'
+import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
+import LoginFormField from '../LoginFormField/LoginFormField'
 
-import StyleProps from '../../styleUtils/StyleProps'
+import StyleProps from '../../../styleUtils/StyleProps'
 
 import errorIcon from './images/error.svg'
 
-import { loginButtons } from '../../../constants'
-import notificationStore from '../../../stores/NotificationStore'
+import { loginButtons } from '../../../../constants'
+import notificationStore from '../../../../stores/NotificationStore'
 
 const Form = styled.form`
   background: rgba(221, 224, 229, 0.5);

src/components/molecules/LoginFormField/LoginFormField.tsx → src/components/modules/LoginModule/LoginFormField/LoginFormField.tsx

@@ -15,8 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled from 'styled-components'
 
-import TextInput from '../../atoms/TextInput'
-import StyleProps from '../../styleUtils/StyleProps'
+import TextInput from '../../../ui/TextInput/TextInput'
+import StyleProps from '../../../styleUtils/StyleProps'
 
 const Wrapper = styled.div<any>`
   margin-bottom: 16px;

src/components/molecules/LoginOptions/LoginOptions.tsx → src/components/modules/LoginModule/LoginOptions/LoginOptions.tsx

@@ -15,9 +15,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled, { css } from 'styled-components'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
-import { loginButtons } from '../../../constants'
+import StyleProps from '../../../styleUtils/StyleProps'
+import Palette from '../../../styleUtils/Palette'
+import { loginButtons } from '../../../../constants'
 import googleLogo from './images/google-logo.svg'
 import microsoftLogo from './images/microsoft-logo.svg'
 import facebookLogo from './images/facebook-logo.svg'

src/components/organisms/MinionEndpointModal/MinionEndpointModal.tsx → src/components/modules/MinionModule/MinionEndpointModal/MinionEndpointModal.tsx

@@ -17,16 +17,16 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { CSSTransitionGroup } from 'react-transition-group'
 
-import Modal from '../../molecules/Modal'
-import { Providers, ProviderTypes } from '../../../@types/Providers'
-import { Endpoint } from '../../../@types/Endpoint'
-import StatusImage from '../../atoms/StatusImage/StatusImage'
-import Switch from '../../atoms/Switch'
-import { providerTypes } from '../../../constants'
-import EndpointLogos from '../../atoms/EndpointLogos/EndpointLogos'
-import Dropdown from '../../molecules/Dropdown/Dropdown'
-import Button from '../../atoms/Button/Button'
-import Palette from '../../styleUtils/Palette'
+import Modal from '../../../ui/Modal/Modal'
+import { Providers, ProviderTypes } from '../../../../@types/Providers'
+import { Endpoint } from '../../../../@types/Endpoint'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Switch from '../../../ui/Switch/Switch'
+import { providerTypes } from '../../../../constants'
+import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
+import Dropdown from '../../../ui/Dropdowns/Dropdown/Dropdown'
+import Button from '../../../ui/Button/Button'
+import Palette from '../../../styleUtils/Palette'
 
 const Wrapper = styled.div``
 const LoadingWrapper = styled.div`