Import modules using absolute paths

Uses Typescript and webpack to allow importing absolute paths, all
modules must now be imported using `@src` as the base path, a Typescript
error is thrown otherwise.

.eslintrc

@@ -36,7 +36,6 @@
   ],
   "rules": {
     "react/function-component-definition": "off",
-    "import/no-relative-packages": "off",
     "react/sort-comp": "off",
     "react/jsx-one-expression-per-line": "off",
     "@typescript-eslint/semi": [

.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"
 }

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 || ''

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 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/WizardPage'
 
-import Tooltip from './ui/Tooltip/Tooltip'
+import Tooltip from '@src/components/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 MinionPoolsPage from '@src/components/smart/MinionPoolsPage/MinionPoolsPage'
+import MinionPoolDetailsPage from '@src/components/smart/MinionPoolDetailsPage/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}

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/Checkbox'
+import InfoIcon from '@src/components/ui/InfoIcon/InfoIcon'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink/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/DetailsNavigation'
+import Button from '@src/components/ui/Button/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink/DropdownLink'
+import Table from '@src/components/ui/Table/Table'
+import AssessedVmListItem from '@src/components/modules/AssessmentModule/AssessedVmListItem/AssessedVmListItem'
+import DropdownFilter from '@src/components/ui/Dropdowns/DropdownFilter/DropdownFilter'
+import Checkbox from '@src/components/ui/Checkbox/Checkbox'
+import SmallLoading from '@src/components/ui/SmallLoading/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;

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/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/Button'
+import FieldInput from '@src/components/ui/FieldInput/FieldInput'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar/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'
 

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/StatusIcon'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import Button from '@src/components/ui/Button/Button'
 import {
   InfoColumn, MainItemInfo, ItemReplicaBadge, ItemTitle, ItemDescription,
-} from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
+} from '@src/components/ui/Dropdowns/NotificationDropdown/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;

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/DashboardInfoCount'
+import DashboardLicence from '@src/components/modules/DashboardModule/DashboardLicence/DashboardLicence'
+import DashboardActivity from '@src/components/modules/DashboardModule/DashboardActivity/DashboardActivity'
+import DashboardTopEndpoints from '@src/components/modules/DashboardModule/DashboardTopEndpoints/DashboardTopEndpoints'
+import DashboardExecutions from '@src/components/modules/DashboardModule/DashboardExecutions/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/StatusImage'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink/DropdownLink'
+import DashboardBarChart from '@src/components/modules/DashboardModule/DashboardBarChart/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/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/StatusImage'
+import InfoIcon from '@src/components/ui/InfoIcon/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/CopyValue'
+import Button from '@src/components/ui/Button/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,7 +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/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/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos/EndpointLogos'
+import DashboardPieChart from '@src/components/modules/DashboardModule/DashboardPieChart/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/StatusPill'
+import ActionDropdown from '@src/components/ui/Dropdowns/ActionDropdown/ActionDropdown'
+import type { Action as DropdownAction } from '@src/components/ui/Dropdowns/ActionDropdown/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/NavigationMini'
+import NotificationDropdown from '@src/components/ui/Dropdowns/NotificationDropdown/NotificationDropdown'
+import UserDropdown from '@src/components/ui/Dropdowns/UserDropdown/UserDropdown'
+import AboutModal from '@src/components/smart/AboutModal/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'

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/EndpointLogos'
+import Button from '@src/components/ui/Button/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/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/StatusIcon'
+import Button from '@src/components/ui/Button/Button'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos/EndpointLogos'
+import LoadingButton from '@src/components/ui/LoadingButton/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/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/EndpointLogos'
+import PasswordValue from '@src/components/ui/PasswordValue/PasswordValue'
+import Button from '@src/components/ui/Button/Button'
+import CopyValue from '@src/components/ui/CopyValue/CopyValue'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue/CopyMultilineValue'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/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/StatusImage'
+import Button from '@src/components/ui/Button/Button'
+import FieldInput from '@src/components/ui/FieldInput/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/Checkbox'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos/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/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/EndpointLogos'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon/StatusIcon'
+import CopyButton from '@src/components/ui/CopyButton/CopyButton'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import Button from '@src/components/ui/Button/Button'
+import LoadingButton from '@src/components/ui/LoadingButton/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;

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/Button'
+import CopyButton from '@src/components/ui/CopyButton/CopyButton'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/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/Button'
+import LoadingButton from '@src/components/ui/LoadingButton/LoadingButton'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import TextArea from '@src/components/ui/TextArea/TextArea'
+import CopyValue from '@src/components/ui/CopyValue/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,17 +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/Button'
+import LoginOptions from '@src/components/modules/LoginModule/LoginOptions/LoginOptions'
+import LoadingButton from '@src/components/ui/LoadingButton/LoadingButton'
+import LoginFormField from '@src/components/modules/LoginModule/LoginFormField/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/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/Modal'
+import { Providers, ProviderTypes } from '@src/@types/Providers'
+import { Endpoint } from '@src/@types/Endpoint'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import Switch from '@src/components/ui/Switch/Switch'
+import { providerTypes } from '@src/constants'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos/EndpointLogos'
+import Dropdown from '@src/components/ui/Dropdowns/Dropdown/Dropdown'
+import Button from '@src/components/ui/Button/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/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/StatusImage'
+import FieldInput from '@src/components/ui/FieldInput/FieldInput'
+import Modal from '@src/components/ui/Modal/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/Button'
+import DetailsNavigation from '@src/components/modules/NavigationModule/DetailsNavigation/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/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;

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/StatusIcon'
+import Pagination from '@src/components/ui/Pagination/Pagination'
+import configLoader from '@src/utils/Config'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink/DropdownLink'
+import InfoIcon from '@src/components/ui/InfoIcon/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/DropdownLink'
+import { ItemReplicaBadge } from '@src/components/ui/Dropdowns/NotificationDropdown/NotificationDropdown'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import Arrow from '@src/components/ui/Arrow/Arrow'
 
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill/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/EndpointLogos'
+import CopyValue from '@src/components/ui/CopyValue/CopyValue'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon/StatusIcon'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue/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/Checkbox'
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill/StatusPill'
+import EndpointLogos from '@src/components/modules/EndpointModule/EndpointLogos/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/StatusImage'
+import Button from '@src/components/ui/Button/Button'
+import LoadingButton from '@src/components/ui/LoadingButton/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/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/EndpointLogos'
+import { Endpoint } from '@src/@types/Endpoint'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar/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,11 +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/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'
@@ -36,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)

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/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/CopyMultilineValue'
+import Button from '@src/components/ui/Button/Button'
+import Modal from '@src/components/ui/Modal/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/AlertModal'
+import Table from '@src/components/ui/Table/Table'
+import CopyValue from '@src/components/ui/CopyValue/CopyValue'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue/CopyMultilineValue'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink/DropdownLink'
+import Button from '@src/components/ui/Button/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)}

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/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/Button'
+import Modal from '@src/components/ui/Modal/Modal'
+import FieldInput from '@src/components/ui/FieldInput/FieldInput'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar/ToggleButtonBar'
+import AutocompleteDropdown from '@src/components/ui/Dropdowns/AutocompleteDropdown/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/Button'
+import Modal from '@src/components/ui/Modal/Modal'
+import FieldInput from '@src/components/ui/FieldInput/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/Modal'
+import Button from '@src/components/ui/Button/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/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/StatusPill'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import CopyValue from '@src/components/ui/CopyValue/CopyValue'
+import Button from '@src/components/ui/Button/Button'
+import Timeline from '@src/components/modules/TransferModule/Timeline/Timeline'
+import Tasks from '@src/components/modules/TransferModule/Tasks/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/EndpointLogos'
+import CopyValue from '@src/components/ui/CopyValue/CopyValue'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon/StatusIcon'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import TransferDetailsTable from '@src/components/modules/TransferModule/TransferDetailsTable/TransferDetailsTable'
+import PasswordValue from '@src/components/ui/PasswordValue/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/Button'
+import DetailsNavigation from '@src/components/modules/NavigationModule/DetailsNavigation/DetailsNavigation'
+import MainDetails from '@src/components/modules/TransferModule/MainDetails/MainDetails'
+import Tasks from '@src/components/modules/TransferModule/Tasks/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/Button'
+import DetailsNavigation from '@src/components/modules/NavigationModule/DetailsNavigation/DetailsNavigation'
+import MainDetails from '@src/components/modules/TransferModule/MainDetails/MainDetails'
+import Executions from '@src/components/modules/TransferModule/Executions/Executions'
+import Schedule from '@src/components/modules/TransferModule/Schedule/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/Button'
+import FieldInput from '@src/components/ui/FieldInput/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/Button'
+import FieldInput from '@src/components/ui/FieldInput/FieldInput'
+import ToggleButtonBar from '@src/components/ui/ToggleButtonBar/ToggleButtonBar'
+import WizardScripts from '@src/components/modules/WizardModule/WizardScripts/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/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,21 +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 Button from '@src/components/ui/Button/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import Modal from '@src/components/ui/Modal/Modal'
+import DropdownLink from '@src/components/ui/Dropdowns/DropdownLink/DropdownLink'
+import AlertModal from '@src/components/ui/AlertModal/AlertModal'
+import ReplicaExecutionOptions from '@src/components/modules/TransferModule/ReplicaExecutionOptions/ReplicaExecutionOptions'
+import ScheduleItem from '@src/components/modules/TransferModule/ScheduleItem/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/LoadingButton'
 import scheduleImage from './images/schedule.svg'
-import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 
 const Wrapper = styled.div<any>`
   ${ThemeProps.exactWidth(ThemeProps.contentWidth)}

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/Switch'
+import Dropdown from '@src/components/ui/Dropdowns/Dropdown/Dropdown'
+import DatetimePicker from '@src/components/ui/DatetimePicker/DatetimePicker'
+import Button from '@src/components/ui/Button/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/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/StatusIcon'
+import Arrow from '@src/components/ui/Arrow/Arrow'
+import StatusPill from '@src/components/ui/StatusComponents/StatusPill/StatusPill'
+import CopyValue from '@src/components/ui/CopyValue/CopyValue'
+import ProgressBar from '@src/components/ui/ProgressBar/ProgressBar'
+import CopyButton from '@src/components/ui/CopyButton/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/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/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/StatusImage'
 
 const ColumnWidths = ['26%', '18%', '36%', '20%']
 

src/components/modules/TransferModule/Tasks/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 Tasks from '.'
 
 const wrap = props => new TW(shallow(

src/components/modules/TransferModule/Timeline/Timeline.tsx

@@ -16,12 +16,12 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import type { Execution } from '../../../../@types/Execution'
-import Arrow from '../../../ui/Arrow/Arrow'
-import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
+import type { Execution } from '@src/@types/Execution'
+import Arrow from '@src/components/ui/Arrow/Arrow'
+import StatusIcon from '@src/components/ui/StatusComponents/StatusIcon/StatusIcon'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
-import DateUtils from '../../../../utils/DateUtils'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
+import DateUtils from '@src/utils/DateUtils'
 
 const ITEM_GAP = 96
 

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

@@ -14,8 +14,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { Execution } from '@src/@types/Execution'
 import Timeline from '.'
-import { Execution } from '../../../../@types/Execution'
 
 const items: any = [
   { id: 'item-1', status: 'ERROR', created_at: new Date() },

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

@@ -16,7 +16,7 @@ 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 Timeline from '.'
 
 const wrap = props => new TW(shallow(

src/components/modules/TransferModule/TransferDetailsTable/TransferDetailsTable.tsx

@@ -16,23 +16,23 @@ import * as React from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import { Collapse } from 'react-collapse'
 
-import Arrow from '../../../ui/Arrow/Arrow'
+import Arrow from '@src/components/ui/Arrow/Arrow'
 
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 import {
   TransferNetworkMap, isNetworkMapSecurityGroups,
   isNetworkMapSourceDest, TransferItem,
-} from '../../../../@types/MainItem'
-import type { Instance, Nic, Disk } from '../../../../@types/Instance'
-import { Network, NetworkUtils } from '../../../../@types/Network'
+} from '@src/@types/MainItem'
+import type { Instance, Nic, Disk } from '@src/@types/Instance'
+import { Network, NetworkUtils } from '@src/@types/Network'
 
+import { MinionPool } from '@src/@types/MinionPool'
+import { EndpointUtils, StorageBackend } from '@src/@types/Endpoint'
 import instanceIcon from './images/instance.svg'
 import networkIcon from './images/network.svg'
 import storageIcon from './images/storage.svg'
 import arrowIcon from './images/arrow.svg'
-import { MinionPool } from '../../../../@types/MinionPool'
-import { EndpointUtils, StorageBackend } from '../../../../@types/Endpoint'
 
 const GlobalStyle = createGlobalStyle`
   .ReactCollapse--collapse {

src/components/modules/TransferModule/TransferDetailsTable/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 type { MainItem } from '../../../../@types/MainItem'
-import type { Instance } from '../../../../@types/Instance'
-import TW from '../../../utils/TestWrapper'
+import type { MainItem } from '@src/@types/MainItem'
+import type { Instance } from '@src/@types/Instance'
+import TW from '@src/utils/TestWrapper'
 import Component, { TEST_ID } from './TransferDetailsTable'
 import type { Props } from './TransferDetailsTable'
 

src/components/modules/TransferModule/TransferItemModal/TransferItemModal.tsx

@@ -16,43 +16,43 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import providerStore, { getFieldChangeOptions } from '../../../../stores/ProviderStore'
-import replicaStore from '../../../../stores/ReplicaStore'
-import migrationStore from '../../../../stores/MigrationStore'
-import endpointStore from '../../../../stores/EndpointStore'
-import { OptionsSchemaPlugin } from '../../../../plugins'
-
-import Button from '../../../ui/Button/Button'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import Modal from '../../../ui/Modal/Modal'
-import Panel from '../../../ui/Panel/Panel'
-import { isOptionsPageValid } from '../../WizardModule/WizardPageContent/WizardPageContent'
-import WizardNetworks, { WizardNetworksChangeObject } from '../../WizardModule/WizardNetworks/WizardNetworks'
-import WizardOptions, { INSTANCE_OSMORPHING_MINION_POOL_MAPPINGS } from '../../WizardModule/WizardOptions/WizardOptions'
-import WizardStorage from '../../WizardModule/WizardStorage/WizardStorage'
+import providerStore, { getFieldChangeOptions } from '@src/stores/ProviderStore'
+import replicaStore from '@src/stores/ReplicaStore'
+import migrationStore from '@src/stores/MigrationStore'
+import endpointStore from '@src/stores/EndpointStore'
+import { OptionsSchemaPlugin } from '@src/plugins'
+
+import Button from '@src/components/ui/Button/Button'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import Modal from '@src/components/ui/Modal/Modal'
+import Panel from '@src/components/ui/Panel/Panel'
+import { isOptionsPageValid } from '@src/components/modules/WizardModule/WizardPageContent/WizardPageContent'
+import WizardNetworks, { WizardNetworksChangeObject } from '@src/components/modules/WizardModule/WizardNetworks/WizardNetworks'
+import WizardOptions, { INSTANCE_OSMORPHING_MINION_POOL_MAPPINGS } from '@src/components/modules/WizardModule/WizardOptions/WizardOptions'
+import WizardStorage from '@src/components/modules/WizardModule/WizardStorage/WizardStorage'
 
 import type {
   UpdateData, TransferItemDetails, MigrationItemDetails,
-} from '../../../../@types/MainItem'
-import type { NavigationItem } from '../../../ui/Panel/Panel'
+} from '@src/@types/MainItem'
+import type { NavigationItem } from '@src/components/ui/Panel/Panel'
 import {
   Endpoint, EndpointUtils, StorageBackend, StorageMap,
-} from '../../../../@types/Endpoint'
-import type { Field } from '../../../../@types/Field'
+} from '@src/@types/Endpoint'
+import type { Field } from '@src/@types/Field'
 import type {
   Instance, InstanceScript,
-} from '../../../../@types/Instance'
+} from '@src/@types/Instance'
 import {
   Network, NetworkMap, NetworkUtils, SecurityGroup,
-} from '../../../../@types/Network'
-
-import { providerTypes, migrationFields } from '../../../../constants'
-import configLoader from '../../../../utils/Config'
-import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
-import minionPoolStore from '../../../../stores/MinionPoolStore'
-import WizardScripts from '../../WizardModule/WizardScripts/WizardScripts'
-import networkStore from '../../../../stores/NetworkStore'
-import { ThemeProps } from '../../../Theme'
+} from '@src/@types/Network'
+
+import { providerTypes, migrationFields } from '@src/constants'
+import configLoader from '@src/utils/Config'
+import LoadingButton from '@src/components/ui/LoadingButton/LoadingButton'
+import minionPoolStore from '@src/stores/MinionPoolStore'
+import WizardScripts from '@src/components/modules/WizardModule/WizardScripts/WizardScripts'
+import networkStore from '@src/stores/NetworkStore'
+import { ThemeProps } from '@src/components/Theme'
 
 const PanelContent = styled.div<any>`
   display: flex;

src/components/modules/UserModule/UserDetailsContent/UserDetailsContent.tsx

@@ -17,14 +17,14 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import CopyValue from '../../../ui/CopyValue/CopyValue'
-import CopyMultilineValue from '../../../ui/CopyMultilineValue/CopyMultilineValue'
-import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
-import Button from '../../../ui/Button/Button'
-
-import type { User } from '../../../../@types/User'
-import type { Project } from '../../../../@types/Project'
-import { ThemePalette, ThemeProps } from '../../../Theme'
+import CopyValue from '@src/components/ui/CopyValue/CopyValue'
+import CopyMultilineValue from '@src/components/ui/CopyMultilineValue/CopyMultilineValue'
+import StatusImage from '@src/components/ui/StatusComponents/StatusImage/StatusImage'
+import Button from '@src/components/ui/Button/Button'
+
+import type { User } from '@src/@types/User'
+import type { Project } from '@src/@types/Project'
+import { ThemePalette, ThemeProps } from '@src/components/Theme'
 
 const Wrapper = styled.div<any>`
   ${ThemeProps.exactWidth(ThemeProps.contentWidth)}

src/components/modules/UserModule/UserDetailsContent/test.tsx

@@ -16,9 +16,9 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
 
-import type { User } from '../../../@types/User'
-import type { Project } from '../../../@types/Project'
-import TW from '../../../utils/TestWrapper'
+import type { User } from '@src/@types/User'
+import type { Project } from '@src/@types/Project'
+import TW from '@src/utils/TestWrapper'
 import Component, { TEST_ID } from '.'
 import type { Props } from '.'