Merge pull request #670 from smiclea/import-absolute-paths

Import modules using absolute paths

.eslintrc

@@ -17,7 +17,8 @@
   ],
   "plugins": [
     "import",
-    "react"
+    "react",
+    "coriolis-web"
   ],
   "env": {
     "browser": true,
@@ -35,24 +36,9 @@
     "src/**/package.json"
   ],
   "rules": {
+    "coriolis-web/import-no-duplicate-name": "error",
     "react/function-component-definition": "off",
-    "import/no-relative-packages": "off",
     "react/sort-comp": "off",
-    "react/jsx-indent": [
-      2,
-      2,
-      {
-        "checkAttributes": true,
-        "indentLogicalExpressions": true
-      }
-    ],
-    "react/jsx-indent-props": [
-      2,
-      2
-    ],
-    "react/self-closing-comp": [
-      2
-    ],
     "react/jsx-one-expression-per-line": "off",
     "@typescript-eslint/semi": [
       2,
@@ -63,6 +49,7 @@
       "as-needed"
     ],
     "no-console": "off",
+    "react/require-default-props": "off",
     "class-methods-use-this": "off",
     "no-underscore-dangle": "off",
     "jsx-a11y/mouse-events-have-key-events": "off",

.storybook/preview.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { addDecorator } from '@storybook/react'
 import styled, { createGlobalStyle } from 'styled-components'
 
-import { ThemePalette, ThemeProps } from '../src/components/Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 import Fonts from '../src/components/atoms/Fonts'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 

.vscode/settings.json

@@ -16,5 +16,6 @@
     "source.fixAll.eslint": true
   },
   "files.eol": "\n",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

README.md

@@ -21,7 +21,7 @@ Your server will be running at `http://localhost:3000/` (the port is configurabl
 ## Testing
 
 - unit tests can be run using `yarn test`
-- e2e integration tests can be run using `yarn e2e`. First though, you have to create the `private/cypress/config.js` file using `private/cypress/config.template.js` as a template and then run `yarn build` and `node server`.
+- run `yarn test-release` to check for Typescript and ESLint errors, to run the unit tests and to build and start a production build.
 
 ## Development mode
 

package.json

@@ -13,6 +13,7 @@
     "server-debug": "node --inspect server",
     "tsc": "npx tsc --skipLibCheck",
     "eslint": "npx eslint \"src/**\" \"server/**\"",
+    "test-release": "node ./server/testRelease",
     "storybook": "start-storybook"
   },
   "devDependencies": {
@@ -35,6 +36,7 @@
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "19.0.0",
     "eslint-config-airbnb-typescript": "^14.0.2",
+    "eslint-plugin-coriolis-web": "./src/utils/eslint-plugin-coriolis-web",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.0",

server/api/ConfigApi.ts

@@ -17,7 +17,7 @@ import path from 'path'
 import fs from 'fs'
 import requireWithoutCache from 'require-without-cache'
 
-import type { Services } from '../../src/@types/Config'
+import type { Services } from '@src/@types/Config'
 
 const getBaseUrl = () => {
   const BASE_URL = process.env.CORIOLIS_URL || ''

server/api/LogosApi.ts

@@ -28,7 +28,7 @@ const getModJsonProviders = (jsonPath: string) => {
 const getOptimalLogoHeightKey = (
   availableHeightKeys: string[],
   requestedHeight: number,
-  style: string | null,
+  style?: string | null,
 ): string => {
   let heightKeys = availableHeightKeys
   if (style) {

server/azureProxy.ts

@@ -42,9 +42,7 @@ export default (app: express.Application) => {
     if (userCred && userCred.username && userCred.password) {
       MsRest.loginWithUsernamePassword(userCred.username, userCred.password, handleResponse)
     } else if (servicePrin && servicePrin.client_id && servicePrin.client_secret) {
-      MsRest.loginWithServicePrincipalSecret(
-        servicePrin.client_id, servicePrin.client_secret, connInfo.tenant, handleResponse,
-      )
+      MsRest.loginWithServicePrincipalSecret(servicePrin.client_id, servicePrin.client_secret, connInfo.tenant, handleResponse)
     } else {
       res.status(401).send(buildError('Azure API authentication error'))
     }

server/testRelease.js

@@ -0,0 +1,63 @@
+const spawn = require('child_process').spawn
+
+const TOTAL_SPAWN_STEPS = 7
+
+const main = async () => {
+  let currentSpawnStep = 0
+
+  const logProgress = (message) => {
+    currentSpawnStep += 1
+    console.log(`\n\x1b[36m${currentSpawnStep}/${TOTAL_SPAWN_STEPS} ${message}...\x1b[0m\n`)
+  }
+
+  const spawnPromise = (command, args, message) => new Promise((resolve, reject) => {
+    logProgress(message)
+    const childProcess = spawn(command, args, { stdio: 'inherit' })
+    childProcess.on('close', (code) => {
+      if (code === 0) {
+        resolve()
+      } else {
+        reject(new Error(`${command} ${args.join(' ')} exited with code ${code}`))
+      }
+    })
+  })
+
+  const spawnYarnStart = async (message) => new Promise((resolve, reject) => {
+    logProgress(message)
+    process.env.FORCE_COLOR = true
+    const childProcess = spawn('yarn', ['start'], { env: process.env })
+    childProcess.stdout.on('data', data => {
+      process.stdout.write(data)
+      if (data.toString().includes('server is up')) {
+        console.log('\nContinue to next step? (Y/n)...')
+      }
+    })
+    childProcess.stderr.on('data', data => { process.stderr.write(data) })
+    process.stdin.setRawMode(true)
+    process.stdin.once('data', data => {
+      childProcess.kill()
+      process.stdin.setRawMode(false)
+      if (data.toString() === 'n') {
+        reject(new Error('Aborted'))
+      } else {
+        resolve()
+      }
+    })
+  })
+
+  try {
+    await spawnPromise('yarn', ['install'], 'Preparing install for TSC and ESLint checks')
+    await spawnPromise('yarn', ['tsc'], 'Typescript checks')
+    await spawnPromise('yarn', ['eslint'], 'ESLint checks')
+    await spawnPromise('yarn', ['install', '--production'], 'Preparing install for production launch')
+    await spawnPromise('yarn', ['build'], 'Production build')
+    await spawnYarnStart('Production start')
+    await spawnPromise('yarn', ['install'], 'Testing successful! Reverting to development install')
+  } catch (e) {
+    console.error(e)
+  } finally {
+    process.exit(0)
+  }
+}
+
+main()

src/@types/Field.ts

@@ -12,8 +12,8 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { OptionsSchemaPlugin } from '../plugins'
-import LabelDictionary from '../utils/LabelDictionary'
+import { OptionsSchemaPlugin } from '@src/plugins'
+import LabelDictionary from '@src/utils/LabelDictionary'
 import { ProviderTypes } from './Providers'
 
 type Separator = { separator: boolean }

src/components/App.tsx

@@ -18,35 +18,35 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import styled, { createGlobalStyle } from 'styled-components'
 import { observe } from 'mobx'
 
-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 './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 configLoader from '../utils/Config'
-import MinionPoolsPage from './smart/MinionPoolsPage/MinionPoolsPage'
-import MinionPoolDetailsPage from './smart/MinionPoolDetailsPage/MinionPoolDetailsPage'
-import { ThemePalette, ThemeProps } from './Theme'
+import Fonts from '@src/components/ui/Fonts'
+import NotificationsModule from '@src/components/modules/NotificationsModule'
+import LoginPage from '@src/components/smart/LoginPage'
+import ReplicasPage from '@src/components/smart/ReplicasPage'
+import MessagePage from '@src/components/smart/MessagePage'
+import ReplicaDetailsPage from '@src/components/smart/ReplicaDetailsPage'
+import MigrationsPage from '@src/components/smart/MigrationsPage'
+import MigrationDetailsPage from '@src/components/smart/MigrationDetailsPage'
+import EndpointsPage from '@src/components/smart/EndpointsPage'
+import EndpointDetailsPage from '@src/components/smart/EndpointDetailsPage'
+import AssessmentsPage from '@src/components/smart/AssessmentsPage'
+import AssessmentDetailsPage from '@src/components/smart/AssessmentDetailsPage'
+import UsersPage from '@src/components/smart/UsersPage'
+import UserDetailsPage from '@src/components/smart/UserDetailsPage'
+import ProjectsPage from '@src/components/smart/ProjectsPage'
+import ProjectDetailsPage from '@src/components/smart/ProjectDetailsPage'
+import DashboardPage from '@src/components/smart/DashboardPage'
+import LogsPage from '@src/components/smart/LogsPage'
+import LogStreamPage from '@src/components/smart/LogStreamPage'
+import WizardPage from '@src/components/smart/WizardPage'
+
+import Tooltip from '@src/components/ui/Tooltip'
+
+import MinionPoolsPage from '@src/components/smart/MinionPoolsPage'
+import MinionPoolDetailsPage from '@src/components/smart/MinionPoolDetailsPage'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import configLoader from '@src/utils/Config'
+import { navigationMenu } from '@src/constants'
+import userStore from '@src/stores/UserStore'
 
 const GlobalStyle = createGlobalStyle`
  ${Fonts}
@@ -86,8 +86,6 @@ class App extends React.Component<{}, State> {
     isConfigReady: false,
   }
 
-  awaitingRefresh: boolean = false
-
   async componentDidMount() {
     observe(userStore, 'loggedUser', () => {
       this.setState({})

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

@@ -16,11 +16,11 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-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 { ThemePalette } from '../../../Theme'
+import Checkbox from '@src/components/ui/Checkbox'
+import InfoIcon from '@src/components/ui/InfoIcon'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import type { VmItem } from '@src/@types/Assessment'
+import { ThemePalette } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   position: relative;

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

@@ -17,24 +17,24 @@ import styled, { css } from 'styled-components'
 import moment from 'moment'
 import { observer } from 'mobx-react'
 
-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 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 '@src/components/modules/NavigationModule/DetailsNavigation'
+import Button from '@src/components/ui/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import Table from '@src/components/ui/Table'
+import AssessedVmListItem from '@src/components/modules/AssessmentModule/AssessedVmListItem'
+import DropdownFilter from '@src/components/ui/Dropdowns/DropdownFilter'
+import Checkbox from '@src/components/ui/Checkbox'
+import SmallLoading from '@src/components/ui/SmallLoading'
+
+import type { Assessment, VmItem, AzureLocation } from '@src/@types/Assessment'
+import type { Endpoint } from '@src/@types/Endpoint'
+import type { Instance, Nic } from '@src/@types/Instance'
+import type { Network, NetworkMap } from '@src/@types/Network'
+
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 import azureMigrateImage from './images/logo.svg'
 import arrowImage from './images/arrow.svg'
-import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -225,19 +225,6 @@ class AssessmentDetailsContent extends React.Component<Props> {
       === vm.properties.datacenterManagementServerName
   }
 
-  renderBottomControls() {
-    return (
-      <Buttons>
-        <Button
-          alert
-          hollow
-          onClick={() => { }}
-        >Migrate
-        </Button>
-      </Buttons>
-    )
-  }
-
   renderMainDetails() {
     if (this.props.page !== '' || !this.props.item || !this.props.item.id) {
       return null

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

@@ -16,13 +16,13 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill'
 
-import type { Assessment } from '../../../../@types/Assessment'
+import type { Assessment } from '@src/@types/Assessment'
 
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 import assessmentImage from './images/assessment.svg'
 import azureMigrateImage from './images/azure-migrate.svg'
-import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Content = styled.div<any>`
   display: flex;

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

@@ -16,15 +16,15 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Button from '../../../ui/Button/Button'
-import FieldInput from '../../../ui/FieldInput/FieldInput'
-import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
+import Button from '@src/components/ui/Button'
+import FieldInput from '@src/components/ui/FieldInput'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar'
 
-import type { Field } from '../../../../@types/Field'
+import type { Field } from '@src/@types/Field'
 
-import { ThemeProps } from '../../../Theme'
+import { ThemeProps } from '@src/components/Theme'
 
-import LabelDictionary from '../../../../utils/LabelDictionary'
+import LabelDictionary from '@src/utils/LabelDictionary'
 
 import assessmentImage from './images/assessment.svg'
 
@@ -115,7 +115,7 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     showAdvancedOptions: false,
   }
 
-  scrollableRef: HTMLElement | undefined | null
+  // scrollableRef: HTMLElement | undefined | null
 
   getFieldValue(fieldName: string) {
     if (this.state.fieldValues[fieldName] != null) {
@@ -140,12 +140,12 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     })
   }
 
-  UNSAFE_componentDidUpdate(_: Props, prevState: State) {
-    if (prevState.showAdvancedOptions !== this.state.showAdvancedOptions
-      && this.props.onResizeUpdate && this.scrollableRef) {
-      this.props.onResizeUpdate(this.scrollableRef)
-    }
-  }
+  // UNSAFE_componentDidUpdate(_: Props, prevState: State) {
+  //   if (prevState.showAdvancedOptions !== this.state.showAdvancedOptions
+  //     && this.props.onResizeUpdate && this.scrollableRef) {
+  //     this.props.onResizeUpdate(this.scrollableRef)
+  //   }
+  // }
 
   handleObjectValueChange(fieldName: string, propName: string, value: any) {
     this.setState(prevState => {
@@ -263,7 +263,8 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     })
 
     return (
-      <Fields ref={(ref: HTMLElement | null | undefined) => { this.scrollableRef = ref }}>
+      // <Fields ref={(ref: HTMLElement | null | undefined) => { this.scrollableRef = ref }}>
+      <Fields>
         {rows}
       </Fields>
     )

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 '../../../ui/StatusComponents/StatusIcon/StatusIcon'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import Button from '../../../ui/Button/Button'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import Button from '@src/components/ui/Button'
 import {
   InfoColumn, MainItemInfo, ItemReplicaBadge, ItemTitle, ItemDescription,
-} from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
+} from '@src/components/ui/Dropdowns/NotificationDropdown'
 
-import type { NotificationItemData } from '../../../../@types/NotificationItem'
+import type { NotificationItemData } from '@src/@types/NotificationItem'
 
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 import replicaImage from './images/replica.svg'
-import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;

src/components/modules/DashboardModule/DashboardBarChart/DashboardBarChart.tsx

@@ -16,8 +16,8 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
+import { ThemeProps } from '@src/components/Theme'
 import BarChartNiceScale from './BarChartNiceScale'
-import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -120,9 +120,7 @@ class DashboardBarChart extends React.Component<Props> {
   }
 
   calculateYTicks(props: Props) {
-    this.range = props.data.reduce((max, item) => Math.max(
-      max, item.values.reduce((sum, value) => sum + value, 0),
-    ), 1)
+    this.range = props.data.reduce((max, item) => Math.max(max, item.values.reduce((sum, value) => sum + value, 0)), 1)
     const niceScale = new BarChartNiceScale(0, this.range, props.yNumTicks)
     this.ticks = []
     const numTicks = Math.floor(this.range / niceScale.tickSpacing) + 1

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 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 { ThemePalette } from '../../../Theme'
-
-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 DashboardInfoCount from '@src/components/modules/DashboardModule/DashboardInfoCount'
+import DashboardLicence from '@src/components/modules/DashboardModule/DashboardLicence'
+import DashboardActivity from '@src/components/modules/DashboardModule/DashboardActivity'
+import DashboardTopEndpoints from '@src/components/modules/DashboardModule/DashboardTopEndpoints'
+import DashboardExecutions from '@src/components/modules/DashboardModule/DashboardExecutions'
+
+import { ThemePalette } from '@src/components/Theme'
+
+import type { Endpoint } from '@src/@types/Endpoint'
+import type { Project } from '@src/@types/Project'
+import type { User } from '@src/@types/User'
+import type { Licence, LicenceServerStatus } from '@src/@types/Licence'
+import type { NotificationItemData } from '@src/@types/NotificationItem'
+import { ReplicaItem, MigrationItem } from '@src/@types/MainItem'
 
 const MIDDLE_WIDTHS = ['264px', '264px', '450px']
 

src/components/modules/DashboardModule/DashboardExecutions/DashboardExecutions.tsx

@@ -17,14 +17,14 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import moment from 'moment'
 
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
-import DashboardBarChart from '../DashboardBarChart/DashboardBarChart'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import DashboardBarChart from '@src/components/modules/DashboardModule/DashboardBarChart'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
+import { ReplicaItem, MigrationItem, TransferItem } from '@src/@types/MainItem'
 import emptyBackgroundImage from './images/empty-background.svg'
-import { ReplicaItem, MigrationItem, TransferItem } from '../../../../@types/MainItem'
 
 const INTERVALS = [
   { label: 'Last {x} days', value: '30-days' },

src/components/modules/DashboardModule/DashboardInfoCount/DashboardInfoCount.tsx

@@ -17,9 +17,9 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   background: ${ThemePalette.grayscale[0]};

src/components/modules/DashboardModule/DashboardLicence/DashboardLicence.tsx

@@ -17,16 +17,16 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import moment from 'moment'
 
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import InfoIcon from '@src/components/ui/InfoIcon'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
-import type { Licence, LicenceServerStatus } from '../../../../@types/Licence'
-import CopyValue from '../../../ui/CopyValue/CopyValue'
-import Button from '../../../ui/Button/Button'
+import type { Licence, LicenceServerStatus } from '@src/@types/Licence'
+import CopyValue from '@src/components/ui/CopyValue'
+import Button from '@src/components/ui/Button'
 
-import licenceImage from '../../LicenceModule/images/licence'
+import licenceImage from '@src/components/modules/LicenceModule/images/licence'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;

src/components/modules/DashboardModule/DashboardPieChart/DashboardPieChart.tsx

@@ -16,8 +16,7 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import autobind from 'autobind-decorator'
-import { ThemeProps } from '../../../Theme'
-
+import { ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   position: relative;

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

@@ -1,7 +1,6 @@
 {
-  "name": "PieChart",
+  "name": "DashboardPieChart",
   "version": "0.0.0",
   "private": true,
-  "main": "./PieChart.tsx"
+  "main": "./DashboardPieChart.tsx"
 }
-

src/components/modules/DashboardModule/DashboardTopEndpoints/DashboardTopEndpoints.tsx

@@ -17,17 +17,17 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-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 Button from '@src/components/ui/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import DashboardPieChart from '@src/components/modules/DashboardModule/DashboardPieChart'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
-import type { Endpoint } from '../../../../@types/Endpoint'
+import type { Endpoint } from '@src/@types/Endpoint'
 
+import { ReplicaItem, MigrationItem, TransferItem } from '@src/@types/MainItem'
 import endpointImage from './images/endpoint.svg'
-import { ReplicaItem, MigrationItem, TransferItem } from '../../../../@types/MainItem'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;

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

@@ -17,11 +17,11 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-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 StatusPill from '@src/components/ui/StatusComponents/StatusPill'
+import ActionDropdown from '@src/components/ui/Dropdowns/ActionDropdown'
+import type { Action as DropdownAction } from '@src/components/ui/Dropdowns/ActionDropdown'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 import backArrowImage from './images/back-arrow.svg'
 

src/components/modules/DetailsModule/DetailsContentHeader/test.tsx

@@ -14,11 +14,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import DetailsContentHeader from '.'
 
 const wrap = props => new TW(shallow(
-  
+
   <DetailsContentHeader {...props} />
 ), 'dcHeader')
 

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 '../../NavigationModule/NavigationMini/NavigationMini'
-import NotificationDropdown from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
-import UserDropdown from '../../../ui/Dropdowns/UserDropdown/UserDropdown'
-import AboutModal from '../../../smart/AboutModal/AboutModal'
+import NavigationMini from '@src/components/modules/NavigationModule/NavigationMini'
+import NotificationDropdown from '@src/components/ui/Dropdowns/NotificationDropdown'
+import UserDropdown from '@src/components/ui/Dropdowns/UserDropdown'
+import AboutModal from '@src/components/smart/AboutModal'
 
-import type { User as UserType } from '../../../../@types/User'
+import type { User as UserType } from '@src/@types/User'
 
-import notificationStore from '../../../../stores/NotificationStore'
+import notificationStore from '@src/stores/NotificationStore'
 
 import backgroundImage from './images/star-bg.jpg'
 import logoImage from './images/logo.svg'
@@ -106,7 +106,7 @@ class DetailsPageHeader extends React.Component<Props, State> {
     }
 
     await notificationStore.loadData(showLoading)
-    this.pollTimeout = setTimeout(() => { this.pollData() }, 15000)
+    this.pollTimeout = window.setTimeout(() => { this.pollData() }, 15000)
   }
 
   render() {

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

@@ -15,8 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
-import type { User } from '../../../../@types/User'
+import TW from '@src/utils/TestWrapper'
+import type { User } from '@src/@types/User'
 import DetailsPageHeader from '.'
 
 type Props = {

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

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

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 '@src/@types/Endpoint'
 
-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 StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
+import Button from '@src/components/ui/Button'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import LoadingButton from '@src/components/ui/LoadingButton'
 
-import deleteImage from './images/delete.svg'
+import DomUtils from '@src/utils/DomUtils'
+import notificationStore from '@src/stores/NotificationStore'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import { Region } from '@src/@types/Region'
 import deleteHoverImage from './images/delete-hover.svg'
-import DomUtils from '../../../../utils/DomUtils'
-import notificationStore from '../../../../stores/NotificationStore'
-import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
-import { Region } from '../../../../@types/Region'
+import deleteImage from './images/delete.svg'
 
 const Wrapper = styled.div`
   width: 100%;

src/components/modules/EndpointModule/ChooseProvider/test.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import ChooseProvider from '.'
 
 const wrap = props => new TW(shallow(

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

@@ -17,24 +17,24 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-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 EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import PasswordValue from '@src/components/ui/PasswordValue'
+import Button from '@src/components/ui/Button'
+import CopyValue from '@src/components/ui/CopyValue'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
 
-import type { Endpoint } from '../../../../@types/Endpoint'
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
-import LabelDictionary from '../../../../utils/LabelDictionary'
-import configLoader from '../../../../utils/Config'
-import { Region } from '../../../../@types/Region'
+import type { Endpoint } from '@src/@types/Endpoint'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
+import LabelDictionary from '@src/utils/LabelDictionary'
+import configLoader from '@src/utils/Config'
+import { Region } from '@src/@types/Region'
 import {
   getTransferItemTitle, MigrationItem, ReplicaItem, TransferItem,
-} from '../../../../@types/MainItem'
-import { Field as FieldType } from '../../../../@types/Field'
-import DomUtils from '../../../../utils/DomUtils'
+} from '@src/@types/MainItem'
+import { Field as FieldType } from '@src/@types/Field'
+import DomUtils from '@src/utils/DomUtils'
 
 const Wrapper = styled.div<any>`
   ${ThemeProps.exactWidth(ThemeProps.contentWidth)}

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

@@ -16,10 +16,10 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import moment from 'moment'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import EndpointDetailsContent from '.'
 
-import configLoader from '../../../../utils/Config'
+import configLoader from '@src/utils/Config'
 
 const wrap = props => new TW(shallow(
 

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 '../../../ui/StatusComponents/StatusImage/StatusImage'
-import Button from '../../../ui/Button/Button'
-import FieldInput from '../../../ui/FieldInput/FieldInput'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import Button from '@src/components/ui/Button'
+import FieldInput from '@src/components/ui/FieldInput'
 
-import KeyboardManager from '../../../../utils/KeyboardManager'
-import type { Project } from '../../../../@types/Project'
-import { ThemePalette } from '../../../Theme'
+import KeyboardManager from '@src/utils/KeyboardManager'
+import type { Project } from '@src/@types/Project'
+import { ThemePalette } from '@src/components/Theme'
 
 import duplicateImage from './images/duplicate.svg'
 

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

@@ -15,8 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
-import type { Project } from '../../../../@types/Project'
+import TW from '@src/utils/TestWrapper'
+import type { Project } from '@src/@types/Project'
 import EndpointDuplicateOptions from '.'
 
 type Props = {

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

@@ -16,11 +16,11 @@ import React from 'react'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import type { Endpoint } from '../../../../@types/Endpoint'
-import Checkbox from '../../../ui/Checkbox/Checkbox'
-import EndpointLogos from '../EndpointLogos/EndpointLogos'
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
+import type { Endpoint } from '@src/@types/Endpoint'
+import Checkbox from '@src/components/ui/Checkbox'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
 
 import endpointImage from './images/endpoint.svg'
 

src/components/modules/EndpointModule/EndpointListItem/test.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TestWrapper from '../../../utils/TestWrapper'
+import TestWrapper from '@src/utils/TestWrapper'
 import EndpointListItem from '.'
 
 const wrap = props => new TestWrapper(shallow(

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

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

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

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled from 'styled-components'
 
-import { ThemePalette, ThemeProps } from '../../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 import generic64Image from './generic-64.svg'
 import generic128Image from './generic-128.svg'
 import generic128DisabledImage from './generic-128-disabled.svg'

src/components/modules/EndpointModule/EndpointLogos/story.tsx

@@ -32,7 +32,8 @@ const Wrapper = styled.div<any>`
 const wrap = (
   endpoint: string | null | undefined,
   height: number | undefined,
-  disabled = false, white = false,
+  disabled = false,
+  white = false,
 ) => (
   <EndpointLogos
     endpoint={endpoint as any}

src/components/modules/EndpointModule/EndpointLogos/test.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TestWrapper from '../../../utils/TestWrapper'
+import TestWrapper from '@src/utils/TestWrapper'
 import EndpointLogos from '.'
 
 const wrap = props => new TestWrapper(shallow(<EndpointLogos {...props} />), 'endpointLogos')

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 '../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 { ThemePalette } from '../../../Theme'
-import DomUtils from '../../../../utils/DomUtils'
-import { ContentPlugin } from '../../../../plugins'
-import DefaultContentPlugin from '../../../../plugins/default/ContentPlugin'
-import KeyboardManager from '../../../../utils/KeyboardManager'
-import { ProviderTypes } from '../../../../@types/Providers'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
+import CopyButton from '@src/components/ui/CopyButton'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import Button from '@src/components/ui/Button'
+import LoadingButton from '@src/components/ui/LoadingButton'
+
+import type { Endpoint as EndpointType } from '@src/@types/Endpoint'
+import type { Field } from '@src/@types/Field'
+import notificationStore from '@src/stores/NotificationStore'
+import endpointStore from '@src/stores/EndpointStore'
+import providerStore from '@src/stores/ProviderStore'
+import ObjectUtils from '@src/utils/ObjectUtils'
+import { ThemePalette } from '@src/components/Theme'
+import DomUtils from '@src/utils/DomUtils'
+import { ContentPlugin } from '@src/plugins'
+import DefaultContentPlugin from '@src/plugins/default/ContentPlugin'
+import KeyboardManager from '@src/utils/KeyboardManager'
+import { ProviderTypes } from '@src/@types/Providers'
 
 const Wrapper = styled.div<any>`
   padding: 48px 0 32px 0;
@@ -185,10 +185,14 @@ class EndpointModal extends React.Component<Props, State> {
           ? (prevState.isNew === null || prevState.isNew) : prevState.isNew,
         endpoint: {
           ...prevState.endpoint,
-          ...ObjectUtils.flatten(props.endpoint || {},
-            plugin.REQUIRES_PARENT_OBJECT_PATH),
-          ...ObjectUtils.flatten(endpointStore.connectionInfo || {},
-            plugin.REQUIRES_PARENT_OBJECT_PATH),
+          ...ObjectUtils.flatten(
+            props.endpoint || {},
+            plugin.REQUIRES_PARENT_OBJECT_PATH,
+          ),
+          ...ObjectUtils.flatten(
+            endpointStore.connectionInfo || {},
+            plugin.REQUIRES_PARENT_OBJECT_PATH,
+          ),
         },
       }))
     } else {
@@ -489,7 +493,7 @@ class EndpointModal extends React.Component<Props, State> {
   render() {
     if (endpointStore.validation && endpointStore.validation.valid
       && !this.closeTimeout) {
-      this.closeTimeout = setTimeout(() => {
+      this.closeTimeout = window.setTimeout(() => {
         this.props.onCancelClick({ autoClose: true })
       }, 2000)
     }

src/components/modules/EndpointModule/EndpointModal/package.json

@@ -1,7 +1,6 @@
 {
-  "name": "Endpoint",
+  "name": "EndpointModal",
   "version": "0.0.0",
   "private": true,
-  "main":"./Endpoint.tsx"
+  "main": "./EndpointModal.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 '../../../ui/Button/Button'
-import CopyButton from '../../../ui/CopyButton/CopyButton'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Button from '@src/components/ui/Button'
+import CopyButton from '@src/components/ui/CopyButton'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
 
-import { ThemePalette } from '../../../Theme'
-import type { Validation as ValidationType } from '../../../../@types/Endpoint'
+import { ThemePalette } from '@src/components/Theme'
+import type { Validation as ValidationType } from '@src/@types/Endpoint'
 
-import notificationStore from '../../../../stores/NotificationStore'
-import DomUtils from '../../../../utils/DomUtils'
+import notificationStore from '@src/stores/NotificationStore'
+import DomUtils from '@src/utils/DomUtils'
 
 const Wrapper = styled.div<any>`
   padding: 48px 32px 32px 32px;

src/components/modules/EndpointModule/EndpointValidation/test.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import EndpointValidation from '.'
 
 const wrap = props => new TW(shallow(

src/components/modules/LicenceModule/LicenceModule.tsx

@@ -17,16 +17,16 @@ import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 import moment from 'moment'
 
-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 Button from '@src/components/ui/Button'
+import LoadingButton from '@src/components/ui/LoadingButton'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import TextArea from '@src/components/ui/TextArea'
+import CopyValue from '@src/components/ui/CopyValue'
 
-import { ThemePalette, ThemeProps } from '../../Theme'
-import FileUtils from '../../../utils/FileUtils'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import FileUtils from '@src/utils/FileUtils'
 
-import type { Licence, LicenceServerStatus } from '../../../@types/Licence'
+import type { Licence, LicenceServerStatus } from '@src/@types/Licence'
 
 import licenceImage from './images/licence'
 

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

@@ -16,18 +16,16 @@ import React, { FormEvent } from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Button from '../../../ui/Button/Button'
-import LoginOptions from '../LoginOptions/LoginOptions'
-import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
-import LoginFormField from '../LoginFormField/LoginFormField'
-
-
+import Button from '@src/components/ui/Button'
+import LoginOptions from '@src/components/modules/LoginModule/LoginOptions'
+import LoadingButton from '@src/components/ui/LoadingButton'
+import LoginFormField from '@src/components/modules/LoginModule/LoginFormField'
+
+import { loginButtons } from '@src/constants'
+import notificationStore from '@src/stores/NotificationStore'
+import { ThemeProps } from '@src/components/Theme'
 import errorIcon from './images/error.svg'
 
-import { loginButtons } from '../../../../constants'
-import notificationStore from '../../../../stores/NotificationStore'
-import { ThemeProps } from '../../../Theme'
-
 const Form = styled.form`
   background: rgba(221, 224, 229, 0.5);
   padding: 16px 32px 32px 32px;

src/components/modules/LoginModule/LoginForm/test.tsx

@@ -15,11 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import LoginForm from '.'
 
 const wrap = props => new TW(shallow(
-  
+
   <LoginForm {...props} domain="default" />
 ), 'loginForm')
 

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

@@ -14,9 +14,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import styled from 'styled-components'
-import { ThemeProps } from '../../../Theme'
+import { ThemeProps } from '@src/components/Theme'
 
-import TextInput from '../../../ui/TextInput/TextInput'
+import TextInput from '@src/components/ui/TextInput'
 
 const Wrapper = styled.div<any>`
   margin-bottom: 16px;

src/components/modules/LoginModule/LoginFormField/test.tsx

@@ -15,11 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TestWrapper from '../../../utils/TestWrapper'
+import TestWrapper from '@src/utils/TestWrapper'
 import LoginFormField from '.'
 
 const wrap = props => new TestWrapper(shallow(
-  
+
   <LoginFormField {...props} />
 ), 'loginFormField')
 

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

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

src/components/modules/LoginModule/LoginOptions/test.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TestWrapper from '../../../utils/TestWrapper'
+import TestWrapper from '@src/utils/TestWrapper'
 import LoginOptions from '.'
 
 const wrap = props => new TestWrapper(shallow(<LoginOptions {...props} />), 'loginOptions')

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 '../../../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 { ThemePalette } from '../../../Theme'
+import Modal from '@src/components/ui/Modal'
+import { Providers, ProviderTypes } from '@src/@types/Providers'
+import { Endpoint } from '@src/@types/Endpoint'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import Switch from '@src/components/ui/Switch'
+import { providerTypes } from '@src/constants'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import Dropdown from '@src/components/ui/Dropdowns/Dropdown'
+import Button from '@src/components/ui/Button'
+import { ThemePalette } from '@src/components/Theme'
 
 const Wrapper = styled.div``
 const LoadingWrapper = styled.div`

src/components/modules/MinionModule/MinionPoolConfirmationModal/MinionPoolConfirmationModal.tsx

@@ -16,12 +16,12 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Button from '../../../ui/Button/Button'
+import Button from '@src/components/ui/Button'
 
-import KeyboardManager from '../../../../utils/KeyboardManager'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import FieldInput from '../../../ui/FieldInput/FieldInput'
-import Modal from '../../../ui/Modal/Modal'
+import KeyboardManager from '@src/utils/KeyboardManager'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import FieldInput from '@src/components/ui/FieldInput'
+import Modal from '@src/components/ui/Modal'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolDetailsContent.tsx

@@ -16,17 +16,17 @@ import React from 'react'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import Button from '../../../ui/Button/Button'
-import DetailsNavigation from '../../NavigationModule/DetailsNavigation/DetailsNavigation'
-import type { Endpoint } from '../../../../@types/Endpoint'
-import type { Field } from '../../../../@types/Field'
-import MinionPoolMainDetails from './MinionPoolMainDetails'
-import { ReplicaItem, MigrationItem } from '../../../../@types/MainItem'
-import { MinionPoolDetails } from '../../../../@types/MinionPool'
+import Button from '@src/components/ui/Button'
+import DetailsNavigation from '@src/components/modules/NavigationModule/DetailsNavigation'
+import type { Endpoint } from '@src/@types/Endpoint'
+import type { Field } from '@src/@types/Field'
+import { ReplicaItem, MigrationItem } from '@src/@types/MainItem'
+import { MinionPoolDetails } from '@src/@types/MinionPool'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import { ThemeProps } from '@src/components/Theme'
 import MinionPoolMachines from './MinionPoolMachines'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 import MinionPoolEvents from './MinionPoolEvents'
-import { ThemeProps } from '../../../Theme'
+import MinionPoolMainDetails from './MinionPoolMainDetails'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -87,10 +87,6 @@ type Props = {
 }
 @observer
 class MinionPoolDetailsContent extends React.Component<Props> {
-  getStatus() {
-    return this.props.item?.status
-  }
-
   isEndpointMissing() {
     const endpoint = this.props.endpoints
       .find(e => e.id === this.props.item?.endpoint_id)

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolEvents.tsx

@@ -17,13 +17,13 @@ import moment from 'moment'
 import styled from 'styled-components'
 import {
   MinionPoolDetails, MinionPoolEventProgressUpdate,
-} from '../../../../@types/MinionPool'
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
-import Pagination from '../../../ui/Pagination/Pagination'
-import configLoader from '../../../../utils/Config'
-import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
-import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
+} from '@src/@types/MinionPool'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
+import Pagination from '@src/components/ui/Pagination'
+import configLoader from '@src/utils/Config'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import InfoIcon from '@src/components/ui/InfoIcon'
 
 const Wrapper = styled.div``
 const Filters = styled.div`

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolMachines.tsx

@@ -18,15 +18,15 @@ import moment from 'moment'
 import { Collapse } from 'react-collapse'
 
 import { Link } from 'react-router-dom'
-import { MinionMachine, MinionPool } from '../../../../@types/MinionPool'
-import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
-import { ItemReplicaBadge } from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import Arrow from '../../../ui/Arrow/Arrow'
+import { MinionMachine, MinionPool } from '@src/@types/MinionPool'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import { ItemReplicaBadge } from '@src/components/ui/Dropdowns/NotificationDropdown'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import Arrow from '@src/components/ui/Arrow'
 
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill'
+import { MigrationItem, ReplicaItem, TransferItem } from '@src/@types/MainItem'
 import networkImage from './images/network.svg'
-import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
-import { MigrationItem, ReplicaItem, TransferItem } from '../../../../@types/MainItem'
 
 const GlobalStyle = createGlobalStyle`
   .ReactCollapse--collapse {

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolMainDetails.tsx

@@ -17,22 +17,22 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
-import CopyValue from '../../../ui/CopyValue/CopyValue'
-import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
-import CopyMultilineValue from '../../../ui/CopyMultilineValue/CopyMultilineValue'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import CopyValue from '@src/components/ui/CopyValue'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue'
 
-import type { Endpoint } from '../../../../@types/Endpoint'
-import type { Field as FieldType } from '../../../../@types/Field'
-import fieldHelper from '../../../../@types/Field'
+import type { Endpoint } from '@src/@types/Endpoint'
+import type { Field as FieldType } from '@src/@types/Field'
+import fieldHelper from '@src/@types/Field'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
-import LabelDictionary from '../../../../utils/LabelDictionary'
-import { OptionsSchemaPlugin } from '../../../../plugins'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
+import LabelDictionary from '@src/utils/LabelDictionary'
+import { OptionsSchemaPlugin } from '@src/plugins'
 
-import { TransferItem, ReplicaItem, MigrationItem } from '../../../../@types/MainItem'
-import { MinionPool } from '../../../../@types/MinionPool'
+import { TransferItem, ReplicaItem, MigrationItem } from '@src/@types/MainItem'
+import { MinionPool } from '@src/@types/MinionPool'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/MinionModule/MinionPoolListItem/MinionPoolListItem.tsx

@@ -16,16 +16,16 @@ import React from 'react'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import Checkbox from '../../../ui/Checkbox/Checkbox'
-import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
-import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import Checkbox from '@src/components/ui/Checkbox'
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+
+import DateUtils from '@src/utils/DateUtils'
+import { MinionPool } from '@src/@types/MinionPool'
+import { ProviderTypes } from '@src/@types/Providers'
 import itemImage from './images/minion-pool-list-item.svg'
 
-import DateUtils from '../../../../utils/DateUtils'
-import { MinionPool } from '../../../../@types/MinionPool'
-import { ProviderTypes } from '../../../../@types/Providers'
-
 const CheckboxStyled = styled(Checkbox)`
   opacity: ${props => (props.checked ? 1 : 0)};
   transition: all ${ThemeProps.animations.swift};

src/components/modules/MinionModule/MinionPoolModal/MinionPoolModal.tsx

@@ -17,22 +17,22 @@ import styled from 'styled-components'
 import { observer } from 'mobx-react'
 import { observe } from 'mobx'
 
-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 { Field, isEnumSeparator } from '../../../../@types/Field'
-import ObjectUtils from '../../../../utils/ObjectUtils'
-import KeyboardManager from '../../../../utils/KeyboardManager'
-import MinionPoolModalContent from './MinionPoolModalContent'
-import minionPoolStore from '../../../../stores/MinionPoolStore'
-
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import Button from '@src/components/ui/Button'
+import LoadingButton from '@src/components/ui/LoadingButton'
+
+import type { Endpoint as EndpointType } from '@src/@types/Endpoint'
+import { Field, isEnumSeparator } from '@src/@types/Field'
+import ObjectUtils from '@src/utils/ObjectUtils'
+import KeyboardManager from '@src/utils/KeyboardManager'
+import minionPoolStore from '@src/stores/MinionPoolStore'
+
+import notificationStore from '@src/stores/NotificationStore'
+import providerStore, { getFieldChangeOptions } from '@src/stores/ProviderStore'
+import { MinionPool } from '@src/@types/MinionPool'
+import { ThemeProps } from '@src/components/Theme'
 import minionPoolImage from './images/minion-pool.svg'
-import notificationStore from '../../../../stores/NotificationStore'
-import providerStore, { getFieldChangeOptions } from '../../../../stores/ProviderStore'
-import { MinionPool } from '../../../../@types/MinionPool'
-import { ThemeProps } from '../../../Theme'
+import MinionPoolModalContent from './MinionPoolModalContent'
 
 const Wrapper = styled.div<any>`
   padding: 24px 0 32px 0;

src/components/modules/MinionModule/MinionPoolModal/MinionPoolModalContent.tsx

@@ -15,15 +15,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as React from 'react'
 import styled from 'styled-components'
 
-import LabelDictionary from '../../../../utils/LabelDictionary'
+import LabelDictionary from '@src/utils/LabelDictionary'
 
-import FieldInput from '../../../ui/FieldInput/FieldInput'
-import type { Field } from '../../../../@types/Field'
+import FieldInput from '@src/components/ui/FieldInput'
+import type { Field } from '@src/@types/Field'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
-import { Endpoint } from '../../../../@types/Endpoint'
-import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import { Endpoint } from '@src/@types/Endpoint'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/NavigationModule/DetailsNavigation/DetailsNavigation.tsx

@@ -17,7 +17,7 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   ${ThemeProps.exactWidth('128px')}

src/components/modules/NavigationModule/DetailsNavigation/test.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TestWrapper from '../../../utils/TestWrapper'
+import TestWrapper from '@src/utils/TestWrapper'
 import DetailsNavigation from '.'
 
 const wrap = props => new TestWrapper(shallow(<DetailsNavigation {...props} />), 'detailsNavigation')

src/components/modules/NavigationModule/Navigation/Navigation.tsx

@@ -18,12 +18,12 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import autobind from 'autobind-decorator'
 
-import Logo from '../../../ui/Logo/Logo'
-import userStore from '../../../../stores/UserStore'
-import configLoader from '../../../../utils/Config'
+import Logo from '@src/components/ui/Logo'
+import userStore from '@src/stores/UserStore'
+import configLoader from '@src/utils/Config'
 
-
-import { navigationMenu } from '../../../../constants'
+import { navigationMenu } from '@src/constants'
+import { ThemeProps } from '@src/components/Theme'
 import backgroundImage from './images/star-bg.jpg'
 import cbsImage from './images/cbsl-logo.svg'
 import cbsImageSmall from './images/cbsl-logo-small.svg'
@@ -37,7 +37,6 @@ import userImage from './images/user-menu.svg'
 import logsImage from './images/logs-menu.svg'
 import dashboardImage from './images/dashboard-menu.svg'
 import minionPoolsImage from './images/minion-pool-menu.svg'
-import { ThemeProps } from '../../../Theme'
 
 const isCollapsed = (props: any) => props.collapsed
   || (window.outerWidth <= ThemeProps.mobileMaxWidth)
@@ -305,7 +304,7 @@ class Navigation extends React.Component<Props> {
       return
     }
 
-    this.resizeTimeout = setTimeout(() => {
+    this.resizeTimeout = window.setTimeout(() => {
       this.resizeTimeout = null
       this.toggleMenu(window.outerWidth <= ThemeProps.mobileMaxWidth)
     }, 100)

src/components/modules/NavigationModule/Navigation/test.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import Navigation from '.'
 
 const wrap = props => new TW(shallow(<Navigation {...props} />), 'navigation')

src/components/modules/NavigationModule/NavigationMini/NavigationMini.tsx

@@ -16,10 +16,10 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Navigation from '../Navigation/Navigation'
+import Navigation from '@src/components/modules/NavigationModule/Navigation'
 
+import { ThemeProps } from '@src/components/Theme'
 import menuImage from './images/menu'
-import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   margin-right: 38px;

src/components/modules/NavigationModule/NavigationMini/test.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import NavigationMini, { TEST_ID } from '.'
 
 const wrap = () => new TW(shallow(

src/components/modules/NotificationsModule/NotificationsModule.tsx

@@ -19,17 +19,17 @@ import NotificationSystem from 'react-notification-system'
 import { observe } from 'mobx'
 
 import { AxiosRequestConfig } from 'axios'
-import notificationStore from '../../../stores/NotificationStore'
+import notificationStore from '@src/stores/NotificationStore'
 
-import CopyMultilineValue from '../../ui/CopyMultilineValue/CopyMultilineValue'
-import Button from '../../ui/Button/Button'
-import Modal from '../../ui/Modal/Modal'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue'
+import Button from '@src/components/ui/Button'
+import Modal from '@src/components/ui/Modal'
 
-import { ThemePalette, ThemeProps } from '../../Theme'
-import NotificationsStyle from './style'
-import DomUtils from '../../../utils/DomUtils'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DomUtils from '@src/utils/DomUtils'
 
-import type { AlertInfo } from '../../../@types/NotificationItem'
+import type { AlertInfo } from '@src/@types/NotificationItem'
+import NotificationsStyle from './style'
 
 const GlobalStyle = createGlobalStyle`
   ${NotificationsStyle}

src/components/modules/NotificationsModule/style.ts

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { css } from 'styled-components'
-import { ThemePalette, ThemeProps } from '../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 import closeImage from './images/close.svg'
 

src/components/modules/ProjectModule/ProjectDetailsContent/ProjectDetailsContent.tsx

@@ -17,17 +17,17 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import AlertModal from '../../../ui/AlertModal/AlertModal'
-import Table from '../../../ui/Table/Table'
-import CopyValue from '../../../ui/CopyValue/CopyValue'
-import CopyMultilineValue from '../../../ui/CopyMultilineValue/CopyMultilineValue'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
-import Button from '../../../ui/Button/Button'
+import AlertModal from '@src/components/ui/AlertModal'
+import Table from '@src/components/ui/Table'
+import CopyValue from '@src/components/ui/CopyValue'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import Button from '@src/components/ui/Button'
 
-import type { Project, RoleAssignment, Role } from '../../../../@types/Project'
-import type { User } from '../../../../@types/User'
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import type { Project, RoleAssignment, Role } from '@src/@types/Project'
+import type { User } from '@src/@types/User'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
@@ -255,8 +255,11 @@ class ProjectDetailsContent extends React.Component<Props, State> {
           disabled={!user.enabled}
           style={{ opacity: user.enabled ? 1 : 0.7 }}
           onChange={item => {
-            this.props.onUserRoleChange(user,
-              item.value, !userRoles.find(i => i.value === item.value))
+            this.props.onUserRoleChange(
+              user,
+              item.value,
+              !userRoles.find(i => i.value === item.value),
+            )
           }}
         />,
         <UserColumn disabled={!user.enabled}>{user.enabled ? 'Enabled' : 'Disabled'}</UserColumn>,

src/components/modules/ProjectModule/ProjectDetailsContent/test.tsx

@@ -14,9 +14,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TW from '../../../utils/TestWrapper'
-import type { Project, Role, RoleAssignment } from '../../../../@types/Project'
-import type { User } from '../../../../@types/User'
+import TW from '@src/utils/TestWrapper'
+import type { Project, Role, RoleAssignment } from '@src/@types/Project'
+import type { User } from '@src/@types/User'
 import ProjectDetailsContent from '.'
 
 type Props = {

src/components/modules/ProjectModule/ProjectListItem/ProjectListItem.tsx

@@ -16,9 +16,9 @@ import React from 'react'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import Button from '../../../ui/Button/Button'
-import type { Project } from '../../../../@types/Project'
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import Button from '@src/components/ui/Button'
+import type { Project } from '@src/@types/Project'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 import projectImage from './images/project.svg'
 

src/components/modules/ProjectModule/ProjectListItem/test.tsx

@@ -15,9 +15,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import ProjectListItem from '.'
-import type { Project } from '../../../../@types/Project'
+import type { Project } from '@src/@types/Project'
 
 type Props = {
   item: Project,

src/components/modules/ProjectModule/ProjectMemberModal/ProjectMemberModal.tsx

@@ -16,17 +16,17 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import type { Field as FieldType } from '../../../../@types/Field'
-import type { User } from '../../../../@types/User'
-import type { Project, Role } from '../../../../@types/Project'
-import Button from '../../../ui/Button/Button'
-import Modal from '../../../ui/Modal/Modal'
-import FieldInput from '../../../ui/FieldInput/FieldInput'
-import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
-import AutocompleteDropdown from '../../../ui/Dropdowns/AutocompleteDropdown/AutocompleteDropdown'
+import type { Field as FieldType } from '@src/@types/Field'
+import type { User } from '@src/@types/User'
+import type { Project, Role } from '@src/@types/Project'
+import Button from '@src/components/ui/Button'
+import Modal from '@src/components/ui/Modal'
+import FieldInput from '@src/components/ui/FieldInput'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar'
+import AutocompleteDropdown from '@src/components/ui/Dropdowns/AutocompleteDropdown'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import KeyboardManager from '../../../../utils/KeyboardManager'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import KeyboardManager from '@src/utils/KeyboardManager'
 
 import userImage from './images/user.svg'
 

src/components/modules/ProjectModule/ProjectMemberModal/test.tsx

@@ -15,9 +15,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 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 { Project, Role } from '../../../../@types/Project'
+import TW from '@src/utils/TestWrapper'
+import type { User } from '@src/@types/User'
+import type { Project, Role } from '@src/@types/Project'
 import ProjectMemberModal from '.'
 
 type Props = {

src/components/modules/ProjectModule/ProjectModal/ProjectModal.tsx

@@ -16,16 +16,16 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import type { Project } from '../../../../@types/Project'
-import type { Field as FieldType } from '../../../../@types/Field'
-import Button from '../../../ui/Button/Button'
-import Modal from '../../../ui/Modal/Modal'
-import FieldInput from '../../../ui/FieldInput/FieldInput'
-
+import type { Project } from '@src/@types/Project'
+import type { Field as FieldType } from '@src/@types/Field'
+import Button from '@src/components/ui/Button'
+import Modal from '@src/components/ui/Modal'
+import FieldInput from '@src/components/ui/FieldInput'
+
+import LabelDictionary from '@src/utils/LabelDictionary'
+import KeyboardManager from '@src/utils/KeyboardManager'
+import { ThemeProps } from '@src/components/Theme'
 import projectImage from './images/project.svg'
-import LabelDictionary from '../../../../utils/LabelDictionary'
-import KeyboardManager from '../../../../utils/KeyboardManager'
-import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   padding: 48px 32px 32px 32px;

src/components/modules/ProjectModule/ProjectModal/test.tsx

@@ -15,8 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
-import type { Project } from '../../../../@types/Project'
+import TW from '@src/utils/TestWrapper'
+import type { Project } from '@src/@types/Project'
 import ProjectModal from '.'
 
 type Props = {

src/components/modules/TemplateModule/MainTemplate/MainTemplate.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import * as React from 'react'
 import styled from 'styled-components'
-import { ThemeProps } from '../../../Theme'
+import { ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/TransferModule/DeleteReplicaModal/DeleteReplicaModal.tsx

@@ -16,11 +16,11 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Modal from '../../../ui/Modal/Modal'
-import Button from '../../../ui/Button/Button'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Modal from '@src/components/ui/Modal'
+import Button from '@src/components/ui/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
 
-import { ThemePalette } from '../../../Theme'
+import { ThemePalette } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/TransferModule/Executions/Executions.tsx

@@ -16,16 +16,16 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import CopyValue from '../../../ui/CopyValue/CopyValue'
-import Button from '../../../ui/Button/Button'
-import Timeline from '../Timeline/Timeline'
-import Tasks from '../Tasks/Tasks'
-
-import type { Execution, ExecutionTasks } from '../../../../@types/Execution'
-import { ThemePalette } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import CopyValue from '@src/components/ui/CopyValue'
+import Button from '@src/components/ui/Button'
+import Timeline from '@src/components/modules/TransferModule/Timeline'
+import Tasks from '@src/components/modules/TransferModule/Tasks'
+
+import type { Execution, ExecutionTasks } from '@src/@types/Execution'
+import { ThemePalette } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
 
 import executionImage from './images/execution.svg'
 

src/components/modules/TransferModule/Executions/test.tsx

@@ -15,11 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import Executions from '.'
 
 const wrap = props => new TW(shallow(
-  
+
   <Executions {...props} />
 ), 'executions')
 

src/components/modules/TransferModule/MainDetails/MainDetails.tsx

@@ -17,27 +17,27 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
-import CopyValue from '../../../ui/CopyValue/CopyValue'
-import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import TransferDetailsTable from '../TransferDetailsTable/TransferDetailsTable'
-import PasswordValue from '../../../ui/PasswordValue/PasswordValue'
-
-import type { Instance } from '../../../../@types/Instance'
-import type { Endpoint, StorageBackend } from '../../../../@types/Endpoint'
-import type { Network } from '../../../../@types/Network'
-import type { Field as FieldType } from '../../../../@types/Field'
-import fieldHelper from '../../../../@types/Field'
-
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
-import LabelDictionary from '../../../../utils/LabelDictionary'
-import { OptionsSchemaPlugin } from '../../../../plugins'
-
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos'
+import CopyValue from '@src/components/ui/CopyValue'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import TransferDetailsTable from '@src/components/modules/TransferModule/TransferDetailsTable'
+import PasswordValue from '@src/components/ui/PasswordValue'
+
+import type { Instance } from '@src/@types/Instance'
+import type { Endpoint, StorageBackend } from '@src/@types/Endpoint'
+import type { Network } from '@src/@types/Network'
+import type { Field as FieldType } from '@src/@types/Field'
+import fieldHelper from '@src/@types/Field'
+
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
+import LabelDictionary from '@src/utils/LabelDictionary'
+import { OptionsSchemaPlugin } from '@src/plugins'
+
+import { TransferItem } from '@src/@types/MainItem'
+import { MinionPool } from '@src/@types/MinionPool'
 import arrowImage from './images/arrow.svg'
-import { TransferItem } from '../../../../@types/MainItem'
-import { MinionPool } from '../../../../@types/MinionPool'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/TransferModule/MainDetails/test.tsx

@@ -15,11 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import moment from 'moment'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import MainDetails from '.'
 
 const wrap = props => new TW(shallow(
-  
+
   <MainDetails {...props} />
 ), 'mainDetails')
 

src/components/modules/TransferModule/MigrationDetailsContent/MigrationDetailsContent.tsx

@@ -16,18 +16,18 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Button from '../../../ui/Button/Button'
-import DetailsNavigation from '../../NavigationModule/DetailsNavigation/DetailsNavigation'
-import MainDetails from '../MainDetails/MainDetails'
-import Tasks from '../Tasks/Tasks'
+import Button from '@src/components/ui/Button'
+import DetailsNavigation from '@src/components/modules/NavigationModule/DetailsNavigation'
+import MainDetails from '@src/components/modules/TransferModule/MainDetails'
+import Tasks from '@src/components/modules/TransferModule/Tasks'
 
-import type { Instance } from '../../../../@types/Instance'
-import type { Endpoint, StorageBackend } from '../../../../@types/Endpoint'
-import type { Field } from '../../../../@types/Field'
-import { MigrationItemDetails } from '../../../../@types/MainItem'
-import { MinionPool } from '../../../../@types/MinionPool'
-import { Network } from '../../../../@types/Network'
-import { ThemeProps } from '../../../Theme'
+import type { Instance } from '@src/@types/Instance'
+import type { Endpoint, StorageBackend } from '@src/@types/Endpoint'
+import type { Field } from '@src/@types/Field'
+import { MigrationItemDetails } from '@src/@types/MainItem'
+import { MinionPool } from '@src/@types/MinionPool'
+import { Network } from '@src/@types/Network'
+import { ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/TransferModule/MigrationDetailsContent/test.tsx

@@ -15,11 +15,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import MigrationDetailsContent from '.'
 
 const wrap = props => new TW(shallow(
-  
+
   <MigrationDetailsContent {...props} />
 ), 'mdContent')
 

src/components/modules/TransferModule/ReplicaDetailsContent/ReplicaDetailsContent.tsx

@@ -16,21 +16,21 @@ import React from 'react'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import scheduleStore from '../../../../stores/ScheduleStore'
-import Button from '../../../ui/Button/Button'
-import DetailsNavigation from '../../NavigationModule/DetailsNavigation/DetailsNavigation'
-import MainDetails from '../MainDetails/MainDetails'
-import Executions from '../Executions/Executions'
-import Schedule from '../Schedule/Schedule'
-import type { Instance } from '../../../../@types/Instance'
-import type { Endpoint, StorageBackend } from '../../../../@types/Endpoint'
-import type { Execution, ExecutionTasks } from '../../../../@types/Execution'
-import type { Network } from '../../../../@types/Network'
-import type { Field } from '../../../../@types/Field'
-import type { Schedule as ScheduleType } from '../../../../@types/Schedule'
-import { ReplicaItemDetails } from '../../../../@types/MainItem'
-import { MinionPool } from '../../../../@types/MinionPool'
-import { ThemeProps } from '../../../Theme'
+import scheduleStore from '@src/stores/ScheduleStore'
+import Button from '@src/components/ui/Button'
+import DetailsNavigation from '@src/components/modules/NavigationModule/DetailsNavigation'
+import MainDetails from '@src/components/modules/TransferModule/MainDetails'
+import Executions from '@src/components/modules/TransferModule/Executions'
+import Schedule from '@src/components/modules/TransferModule/Schedule'
+import type { Instance } from '@src/@types/Instance'
+import type { Endpoint, StorageBackend } from '@src/@types/Endpoint'
+import type { Execution, ExecutionTasks } from '@src/@types/Execution'
+import type { Network } from '@src/@types/Network'
+import type { Field } from '@src/@types/Field'
+import type { Schedule as ScheduleType } from '@src/@types/Schedule'
+import { ReplicaItemDetails } from '@src/@types/MainItem'
+import { MinionPool } from '@src/@types/MinionPool'
+import { ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/TransferModule/ReplicaDetailsContent/test.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import ReplicaDetailsContent from '.'
 
 const wrap = props => new TW(

src/components/modules/TransferModule/ReplicaExecutionOptions/ReplicaExecutionOptions.tsx

@@ -16,13 +16,13 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Button from '../../../ui/Button/Button'
-import FieldInput from '../../../ui/FieldInput/FieldInput'
+import Button from '@src/components/ui/Button'
+import FieldInput from '@src/components/ui/FieldInput'
 
-import LabelDictionary from '../../../../utils/LabelDictionary'
-import KeyboardManager from '../../../../utils/KeyboardManager'
-import { executionOptions } from '../../../../constants'
-import type { Field } from '../../../../@types/Field'
+import LabelDictionary from '@src/utils/LabelDictionary'
+import KeyboardManager from '@src/utils/KeyboardManager'
+import { executionOptions } from '@src/constants'
+import type { Field } from '@src/@types/Field'
 
 import executionImage from './images/execution.svg'
 

src/components/modules/TransferModule/ReplicaExecutionOptions/test.tsx

@@ -15,10 +15,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import ReplicaExecutionOptions from '.'
 
-import { executionOptions } from '../../../../constants'
+import { executionOptions } from '@src/constants'
 
 const wrap = props => new TW(shallow(<ReplicaExecutionOptions {...props} />), 'reOptions')
 

src/components/modules/TransferModule/ReplicaMigrationOptions/ReplicaMigrationOptions.tsx

@@ -16,23 +16,22 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Button from '../../../ui/Button/Button'
-import FieldInput from '../../../ui/FieldInput/FieldInput'
-import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
-import WizardScripts from '../../WizardModule/WizardScripts/WizardScripts'
+import Button from '@src/components/ui/Button'
+import FieldInput from '@src/components/ui/FieldInput'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar'
+import WizardScripts from '@src/components/modules/WizardModule/WizardScripts'
 
-import LabelDictionary from '../../../../utils/LabelDictionary'
-import KeyboardManager from '../../../../utils/KeyboardManager'
+import LabelDictionary from '@src/utils/LabelDictionary'
+import KeyboardManager from '@src/utils/KeyboardManager'
 
-import replicaMigrationImage from './images/replica-migration.svg'
+import type { Field } from '@src/@types/Field'
+import type { Instance, InstanceScript } from '@src/@types/Instance'
+import { TransferItemDetails } from '@src/@types/MainItem'
+import { MinionPool } from '@src/@types/MinionPool'
+import { INSTANCE_OSMORPHING_MINION_POOL_MAPPINGS } from '@src/components/modules/WizardModule/WizardOptions'
+import { ThemeProps } from '@src/components/Theme'
 import replicaMigrationFields from './replicaMigrationFields'
-
-import type { Field } from '../../../../@types/Field'
-import type { Instance, InstanceScript } from '../../../../@types/Instance'
-import { TransferItemDetails } from '../../../../@types/MainItem'
-import { MinionPool } from '../../../../@types/MinionPool'
-import { INSTANCE_OSMORPHING_MINION_POOL_MAPPINGS } from '../../WizardModule/WizardOptions/WizardOptions'
-import { ThemeProps } from '../../../Theme'
+import replicaMigrationImage from './images/replica-migration.svg'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/TransferModule/ReplicaMigrationOptions/replicaMigrationFields.ts

@@ -12,7 +12,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Field } from '../../../../@types/Field'
+import { Field } from '@src/@types/Field'
 
 const replicaMigrationFields: Field[] = [
   {

src/components/modules/TransferModule/ReplicaMigrationOptions/test.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import ReplicaMigrationOptions from '.'
 
 const wrap = props => new TW(shallow(

src/components/modules/TransferModule/Schedule/Schedule.tsx

@@ -17,22 +17,21 @@ import styled from 'styled-components'
 import moment from 'moment-timezone'
 import { observer } from 'mobx-react'
 
-import Button from '../../../ui/Button/Button'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import Modal from '../../../ui/Modal/Modal'
-import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
-import AlertModal from '../../../ui/AlertModal/AlertModal'
-import ReplicaExecutionOptions from '../ReplicaExecutionOptions/ReplicaExecutionOptions'
-import ScheduleItem from '../ScheduleItem/ScheduleItem'
-
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
-import type { Schedule as ScheduleType } from '../../../../@types/Schedule'
-import type { Field } from '../../../../@types/Field'
-import { executionOptions } from '../../../../constants'
-
+import Button from '@src/components/ui/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
+import Modal from '@src/components/ui/Modal'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink'
+import AlertModal from '@src/components/ui/AlertModal'
+import ReplicaExecutionOptions from '@src/components/modules/TransferModule/ReplicaExecutionOptions'
+import ScheduleItem from '@src/components/modules/TransferModule/ScheduleItem'
+
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
+import type { Schedule as ScheduleType } from '@src/@types/Schedule'
+import type { Field } from '@src/@types/Field'
+
+import LoadingButton from '@src/components/ui/LoadingButton'
 import scheduleImage from './images/schedule.svg'
-import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 
 const Wrapper = styled.div<any>`
   ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
@@ -200,39 +199,6 @@ class Schedule extends React.Component<Props, State> {
     this.props.onAddScheduleClick({ schedule: { hour, minute: 0 } })
   }
 
-  areExecutionOptionsChanged(schedule: ScheduleType) {
-    let isChanged = false
-    executionOptions.forEach(o => {
-      const usableSchedule: any = schedule
-      const scheduleValue = usableSchedule[o.name]
-      const optionValue = o.defaultValue !== undefined ? o.defaultValue : false
-      if (scheduleValue != null && scheduleValue !== optionValue) {
-        isChanged = true
-      }
-    })
-    return isChanged
-  }
-
-  padNumber(number: number) {
-    if (number < 10) {
-      return `0${number}`
-    }
-
-    return number.toString()
-  }
-
-  shouldUseBold(scheduleId: string | null, fieldName: string, isRootField?: boolean) {
-    const unsavedSchedule = this.props.unsavedSchedules.find(s => s.id === scheduleId)
-    if (!unsavedSchedule) {
-      return false
-    }
-    const data: any = isRootField ? unsavedSchedule : unsavedSchedule.schedule
-    if (data && data[fieldName] != null) {
-      return true
-    }
-    return false
-  }
-
   renderLoading() {
     if (!this.props.loading) {
       return null

src/components/modules/TransferModule/Schedule/test.tsx

@@ -16,7 +16,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import moment from 'moment'
 import sinon from 'sinon'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import Schedule from '.'
 
 const wrap = props => new TW(shallow(<Schedule {...props} />), 'schedule')

src/components/modules/TransferModule/ScheduleItem/ScheduleItem.tsx

@@ -17,21 +17,21 @@ import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 import moment from 'moment'
 
-import Switch from '../../../ui/Switch/Switch'
-import Dropdown from '../../../ui/Dropdowns/Dropdown/Dropdown'
-import DatetimePicker from '../../../ui/DatetimePicker/DatetimePicker'
-import Button from '../../../ui/Button/Button'
-import type { Schedule, ScheduleFieldName } from '../../../../@types/Schedule'
-
-import { executionOptions } from '../../../../constants'
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
-import notificationStore from '../../../../stores/NotificationStore'
+import Switch from '@src/components/ui/Switch'
+import Dropdown from '@src/components/ui/Dropdowns/Dropdown'
+import DatetimePicker from '@src/components/ui/DatetimePicker'
+import Button from '@src/components/ui/Button'
+import type { Schedule, ScheduleFieldName } from '@src/@types/Schedule'
+
+import { executionOptions } from '@src/constants'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
+import notificationStore from '@src/stores/NotificationStore'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
 import deleteImage from './images/delete.svg'
 import deleteHoverImage from './images/delete-hover.svg'
 import saveImage from './images/save.svg'
 import saveHoverImage from './images/save-hover.svg'
-import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
 
 const Wrapper = styled.div<any>`
   display: flex;

src/components/modules/TransferModule/ScheduleItem/test.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import ScheduleItem from '.'
 
 const wrap = props => new TW(shallow(

src/components/modules/TransferModule/TaskItem/TaskItem.tsx

@@ -17,17 +17,17 @@ import { observer } from 'mobx-react'
 import styled, { css, createGlobalStyle } from 'styled-components'
 import { Collapse } from 'react-collapse'
 
-import type { ProgressUpdate, Task } from '../../../../@types/Task'
-import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
-import Arrow from '../../../ui/Arrow/Arrow'
-import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
-import CopyValue from '../../../ui/CopyValue/CopyValue'
-import ProgressBar from '../../../ui/ProgressBar/ProgressBar'
-import CopyButton from '../../../ui/CopyButton/CopyButton'
-import notificationStore from '../../../../stores/NotificationStore'
-import DomUtils from '../../../../utils/DomUtils'
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
+import type { ProgressUpdate, Task } from '@src/@types/Task'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon'
+import Arrow from '@src/components/ui/Arrow'
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill'
+import CopyValue from '@src/components/ui/CopyValue'
+import ProgressBar from '@src/components/ui/ProgressBar'
+import CopyButton from '@src/components/ui/CopyButton'
+import notificationStore from '@src/stores/NotificationStore'
+import DomUtils from '@src/utils/DomUtils'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
 
 const GlobalStyle = createGlobalStyle`
   .ReactCollapse--collapse {

src/components/modules/TransferModule/TaskItem/story.tsx

@@ -72,7 +72,6 @@ storiesOf('TaskItem', module)
           item={newItem}
           columnWidths={columnWidths}
           onDependsOnClick={() => { }}
-
           open
         />
       </div>
@@ -87,7 +86,6 @@ storiesOf('TaskItem', module)
           item={newItem}
           columnWidths={columnWidths}
           onDependsOnClick={() => { }}
-
           open
         />
       </div>
@@ -102,7 +100,6 @@ storiesOf('TaskItem', module)
           item={newItem}
           columnWidths={columnWidths}
           onDependsOnClick={() => { }}
-
           open
         />
       </div>

src/components/modules/TransferModule/TaskItem/test.tsx

@@ -14,11 +14,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { shallow } from 'enzyme'
-import TW from '../../../utils/TestWrapper'
+import TW from '@src/utils/TestWrapper'
 import TaskItem from '.'
 
 const wrap = props => new TW(shallow(
-  
+
   <TaskItem {...props} />
 ), 'taskItem')
 

src/components/modules/TransferModule/Tasks/Tasks.tsx

@@ -16,11 +16,11 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import TaskItem from '../TaskItem/TaskItem'
+import TaskItem from '@src/components/modules/TransferModule/TaskItem'
 
-import type { Task } from '../../../../@types/Task'
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import type { Task } from '@src/@types/Task'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage'
 
 const ColumnWidths = ['26%', '18%', '36%', '20%']