diff --git a/frontend/cypress/integration/feature/feature.spec.ts b/frontend/cypress/integration/feature/feature.spec.ts
index 9c0d1fb9ac..ae8b3672ad 100644
--- a/frontend/cypress/integration/feature/feature.spec.ts
+++ b/frontend/cypress/integration/feature/feature.spec.ts
@@ -1,23 +1,32 @@
///
-import { disableFeatureStrategiesProductionGuard } from '../../../src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard';
-import { activeSplashIds } from '../../../src/component/splash/splash';
+export {};
+const AUTH_USER = Cypress.env('AUTH_USER');
+const AUTH_PASSWORD = Cypress.env('AUTH_PASSWORD');
+const ENTERPRISE = Boolean(Cypress.env('ENTERPRISE'));
const randomId = String(Math.random()).split('.')[1];
const featureToggleName = `unleash-e2e-${randomId}`;
const baseUrl = Cypress.config().baseUrl;
let strategyId = '';
-const AUTH_USER = Cypress.env('AUTH_USER');
-const AUTH_PASSWORD = Cypress.env('AUTH_PASSWORD');
-const ENTERPRISE = Boolean(Cypress.env('ENTERPRISE'));
+// Disable the prod guard modal by marking it as seen.
+const disableFeatureStrategiesProdGuard = () => {
+ localStorage.setItem(
+ 'useFeatureStrategyProdGuardSettings:v2',
+ JSON.stringify({ hide: true })
+ );
+};
+
+// Disable all active splash pages by visiting them.
+const disableActiveSplashScreens = () => {
+ cy.visit(`/splash/operators`);
+};
describe('feature', () => {
before(() => {
- // Visit all splash pages to mark them as seen.
- activeSplashIds.forEach(splashId => {
- cy.visit(`/splash/${splashId}`);
- });
+ disableFeatureStrategiesProdGuard();
+ disableActiveSplashScreens();
});
after(() => {
@@ -32,7 +41,6 @@ describe('feature', () => {
});
beforeEach(() => {
- disableFeatureStrategiesProductionGuard();
cy.visit('/');
cy.get('[data-test="LOGIN_EMAIL_ID"]').type(AUTH_USER);
diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index 64b200ea02..2a9af14b33 100644
--- a/frontend/src/component/App.tsx
+++ b/frontend/src/component/App.tsx
@@ -1,14 +1,14 @@
-import ConditionallyRender from './common/ConditionallyRender';
-import Feedback from './common/Feedback/Feedback';
-import LayoutPicker from './layout/LayoutPicker/LayoutPicker';
-import Loader from './common/Loader/Loader';
-import NotFound from './common/NotFound/NotFound';
-import ProtectedRoute from './common/ProtectedRoute/ProtectedRoute';
-import SWRProvider from './providers/SWRProvider/SWRProvider';
-import ToastRenderer from './common/ToastRenderer/ToastRenderer';
-import styles from './styles.module.scss';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import Feedback from 'component/common/Feedback/Feedback';
+import LayoutPicker from 'component/layout/LayoutPicker/LayoutPicker';
+import Loader from 'component/common/Loader/Loader';
+import NotFound from 'component/common/NotFound/NotFound';
+import ProtectedRoute from 'component/common/ProtectedRoute/ProtectedRoute';
+import SWRProvider from 'component/providers/SWRProvider/SWRProvider';
+import ToastRenderer from 'component/common/ToastRenderer/ToastRenderer';
+import styles from 'component/styles.module.scss';
import { Redirect, Route, Switch } from 'react-router-dom';
-import { routes } from './menu/routes';
+import { routes } from 'component/menu/routes';
import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
diff --git a/frontend/src/component/Reporting/ReportCard/ReportCard.tsx b/frontend/src/component/Reporting/ReportCard/ReportCard.tsx
index 02c535ca35..671b7c59c1 100644
--- a/frontend/src/component/Reporting/ReportCard/ReportCard.tsx
+++ b/frontend/src/component/Reporting/ReportCard/ReportCard.tsx
@@ -2,10 +2,10 @@ import classnames from 'classnames';
import { Paper } from '@material-ui/core';
import CheckIcon from '@material-ui/icons/Check';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
import styles from './ReportCard.module.scss';
import ReactTimeAgo from 'react-timeago';
-import { IProjectHealthReport } from '../../../interfaces/project';
+import { IProjectHealthReport } from 'interfaces/project';
interface IReportCardProps {
healthReport: IProjectHealthReport;
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.jsx b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.jsx
index 7f5ae57d84..2d394a46e9 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.jsx
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.jsx
@@ -3,8 +3,8 @@ import { Paper, MenuItem } from '@material-ui/core';
import PropTypes from 'prop-types';
import ReportToggleListItem from './ReportToggleListItem/ReportToggleListItem';
import ReportToggleListHeader from './ReportToggleListHeader/ReportToggleListHeader';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
-import DropdownMenu from '../../common/DropdownMenu/DropdownMenu';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import DropdownMenu from 'component/common/DropdownMenu/DropdownMenu';
import {
getObjectProperties,
getCheckedState,
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.jsx b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.jsx
index 805287d97b..e14fb82e0f 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.jsx
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.jsx
@@ -2,11 +2,14 @@ import React from 'react';
import { Checkbox } from '@material-ui/core';
import UnfoldMoreOutlinedIcon from '@material-ui/icons/UnfoldMoreOutlined';
import PropTypes from 'prop-types';
-
-import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
-
-import { NAME, LAST_SEEN, CREATED, EXPIRED, STATUS } from '../../constants';
-
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import {
+ NAME,
+ LAST_SEEN,
+ CREATED,
+ EXPIRED,
+ STATUS,
+} from 'component/Reporting/constants';
import { useStyles } from '../ReportToggleList.styles';
const ReportToggleListHeader = ({
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.jsx b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.jsx
index 8f8c0a57c0..ed021876c4 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.jsx
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.jsx
@@ -2,27 +2,21 @@ import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
-
import { Checkbox } from '@material-ui/core';
import CheckIcon from '@material-ui/icons/Check';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
-import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
-import FeatureStatus from '../../../feature/FeatureView/FeatureStatus/FeatureStatus';
-
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import FeatureStatus from 'component/feature/FeatureView/FeatureStatus/FeatureStatus';
import {
pluralize,
getDates,
expired,
toggleExpiryByTypeMap,
getDiffInDays,
-} from '../../utils';
-import {
- KILLSWITCH,
- PERMISSION,
-} from '../../../../constants/featureToggleTypes';
-
+} from 'component/Reporting/utils';
+import { KILLSWITCH, PERMISSION } from 'constants/featureToggleTypes';
import { useStyles } from '../ReportToggleList.styles';
-import { getTogglePath } from '../../../../utils/routePathHelpers';
+import { getTogglePath } from 'utils/routePathHelpers';
const ReportToggleListItem = ({
name,
diff --git a/frontend/src/component/Reporting/utils.js b/frontend/src/component/Reporting/utils.js
index 4a3c2db506..e142b489ae 100644
--- a/frontend/src/component/Reporting/utils.js
+++ b/frontend/src/component/Reporting/utils.js
@@ -1,11 +1,7 @@
import parseISO from 'date-fns/parseISO';
import differenceInDays from 'date-fns/differenceInDays';
-import {
- EXPERIMENT,
- OPERATIONAL,
- RELEASE,
-} from '../../constants/featureToggleTypes';
+import { EXPERIMENT, OPERATIONAL, RELEASE } from 'constants/featureToggleTypes';
import { FOURTYDAYS, SEVENDAYS } from './constants';
diff --git a/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx b/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx
index 8e70661277..1e7680cb49 100644
--- a/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx
+++ b/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
-import { styles as commonStyles } from '../../../common';
-import { IAddonProvider } from '../../../../interfaces/addons';
+import { styles as commonStyles } from 'component/common';
+import { IAddonProvider } from 'interfaces/addons';
interface IAddonProps {
provider: IAddonProvider;
diff --git a/frontend/src/component/addons/AddonForm/AddonForm.jsx b/frontend/src/component/addons/AddonForm/AddonForm.jsx
index 889d20c51f..7b47cb1f94 100644
--- a/frontend/src/component/addons/AddonForm/AddonForm.jsx
+++ b/frontend/src/component/addons/AddonForm/AddonForm.jsx
@@ -1,15 +1,15 @@
import { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { TextField, FormControlLabel, Switch, Button } from '@material-ui/core';
-import { styles as commonStyles } from '../../common';
-import { trim } from '../../common/util';
+import { styles as commonStyles } from 'component/common';
+import { trim } from 'component/common/util';
import { AddonParameters } from './AddonParameters/AddonParameters';
import { AddonEvents } from './AddonEvents/AddonEvents';
import cloneDeep from 'lodash.clonedeep';
-import PageContent from '../../common/PageContent/PageContent';
+import PageContent from 'component/common/PageContent/PageContent';
import { useHistory } from 'react-router-dom';
-import useAddonsApi from '../../../hooks/api/actions/useAddonsApi/useAddonsApi';
-import useToast from '../../../hooks/useToast';
+import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
+import useToast from 'hooks/useToast';
import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles(theme => ({
diff --git a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx
index 67824c586d..9b396492ed 100644
--- a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx
+++ b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx
@@ -3,7 +3,7 @@ import {
IAddonConfig,
IAddonProvider,
IAddonProviderParams,
-} from '../../../../../interfaces/addons';
+} from 'interfaces/addons';
const resolveType = ({ type = 'text', sensitive = false }, value: string) => {
if (sensitive && value === MASKED_VALUE) {
diff --git a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameters.tsx b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameters.tsx
index 8648817c85..b9e93e3782 100644
--- a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameters.tsx
+++ b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameters.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { IAddonConfig, IAddonProvider } from '../../../../interfaces/addons';
+import { IAddonConfig, IAddonProvider } from 'interfaces/addons';
import { AddonParameter } from './AddonParameter/AddonParameter';
interface IAddonParametersProps {
diff --git a/frontend/src/component/addons/AddonList/AddonList.tsx b/frontend/src/component/addons/AddonList/AddonList.tsx
index 2fa8e28135..80b5ed9283 100644
--- a/frontend/src/component/addons/AddonList/AddonList.tsx
+++ b/frontend/src/component/addons/AddonList/AddonList.tsx
@@ -3,14 +3,14 @@ import { ConfiguredAddons } from './ConfiguredAddons/ConfiguredAddons';
import { AvailableAddons } from './AvailableAddons/AvailableAddons';
import { Avatar } from '@material-ui/core';
import { DeviceHub } from '@material-ui/icons';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
-import slackIcon from '../../../assets/icons/slack.svg';
-import jiraIcon from '../../../assets/icons/jira.svg';
-import webhooksIcon from '../../../assets/icons/webhooks.svg';
-import teamsIcon from '../../../assets/icons/teams.svg';
-import dataDogIcon from '../../../assets/icons/datadog.svg';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import slackIcon from 'assets/icons/slack.svg';
+import jiraIcon from 'assets/icons/jira.svg';
+import webhooksIcon from 'assets/icons/webhooks.svg';
+import teamsIcon from 'assets/icons/teams.svg';
+import dataDogIcon from 'assets/icons/datadog.svg';
import { formatAssetPath } from 'utils/formatPath';
-import useAddons from '../../../hooks/api/getters/useAddons/useAddons';
+import useAddons from 'hooks/api/getters/useAddons/useAddons';
const style: React.CSSProperties = {
width: '40px',
diff --git a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
index b9d470291a..4a1e27ace1 100644
--- a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
+++ b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
@@ -1,5 +1,5 @@
import { ReactElement } from 'react';
-import PageContent from '../../../common/PageContent/PageContent';
+import PageContent from 'component/common/PageContent/PageContent';
import {
List,
ListItem,
@@ -7,9 +7,9 @@ import {
ListItemSecondaryAction,
ListItemText,
} from '@material-ui/core';
-import { CREATE_ADDON } from '../../../providers/AccessProvider/permissions';
+import { CREATE_ADDON } from 'component/providers/AccessProvider/permissions';
import { useHistory } from 'react-router-dom';
-import PermissionButton from '../../../common/PermissionButton/PermissionButton';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
interface IProvider {
name: string;
diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
index f617f8018f..0fd9042907 100644
--- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
+++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
@@ -6,21 +6,21 @@ import {
ListItemText,
} from '@material-ui/core';
import { Delete, Edit, Visibility, VisibilityOff } from '@material-ui/icons';
-import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
import {
DELETE_ADDON,
UPDATE_ADDON,
-} from '../../../providers/AccessProvider/permissions';
+} from 'component/providers/AccessProvider/permissions';
import { Link, useHistory } from 'react-router-dom';
-import PageContent from '../../../common/PageContent/PageContent';
-import useAddons from '../../../../hooks/api/getters/useAddons/useAddons';
-import useToast from '../../../../hooks/useToast';
-import useAddonsApi from '../../../../hooks/api/actions/useAddonsApi/useAddonsApi';
+import PageContent from 'component/common/PageContent/PageContent';
+import useAddons from 'hooks/api/getters/useAddons/useAddons';
+import useToast from 'hooks/useToast';
+import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
import { ReactElement, useContext, useState } from 'react';
-import AccessContext from '../../../../contexts/AccessContext';
-import { IAddon } from '../../../../interfaces/addons';
-import PermissionIconButton from '../../../common/PermissionIconButton/PermissionIconButton';
-import Dialogue from '../../../common/Dialogue';
+import AccessContext from 'contexts/AccessContext';
+import { IAddon } from 'interfaces/addons';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import Dialogue from 'component/common/Dialogue';
import { formatUnknownError } from 'utils/formatUnknownError';
interface IConfigureAddonsProps {
diff --git a/frontend/src/component/addons/CreateAddon/CreateAddon.tsx b/frontend/src/component/addons/CreateAddon/CreateAddon.tsx
index 9d18048388..72943851ea 100644
--- a/frontend/src/component/addons/CreateAddon/CreateAddon.tsx
+++ b/frontend/src/component/addons/CreateAddon/CreateAddon.tsx
@@ -1,5 +1,5 @@
import { useParams } from 'react-router-dom';
-import useAddons from '../../../hooks/api/getters/useAddons/useAddons';
+import useAddons from 'hooks/api/getters/useAddons/useAddons';
import { AddonForm } from '../AddonForm/AddonForm';
import cloneDeep from 'lodash.clonedeep';
diff --git a/frontend/src/component/addons/EditAddon/EditAddon.tsx b/frontend/src/component/addons/EditAddon/EditAddon.tsx
index 16d9541fdf..7518627ad4 100644
--- a/frontend/src/component/addons/EditAddon/EditAddon.tsx
+++ b/frontend/src/component/addons/EditAddon/EditAddon.tsx
@@ -1,8 +1,8 @@
import { useParams } from 'react-router-dom';
-import useAddons from '../../../hooks/api/getters/useAddons/useAddons';
+import useAddons from 'hooks/api/getters/useAddons/useAddons';
import { AddonForm } from '../AddonForm/AddonForm';
import cloneDeep from 'lodash.clonedeep';
-import { IAddon } from '../../../interfaces/addons';
+import { IAddon } from 'interfaces/addons';
interface IAddonEditParams {
addonId: string;
diff --git a/frontend/src/component/admin/api/index.js b/frontend/src/component/admin/api/index.js
index 54d75c0286..fa2a0c16f9 100644
--- a/frontend/src/component/admin/api/index.js
+++ b/frontend/src/component/admin/api/index.js
@@ -1,7 +1,7 @@
import { ApiTokenList } from '../apiToken/ApiTokenList/ApiTokenList';
import AdminMenu from '../menu/AdminMenu';
-import ConditionallyRender from '../../common/ConditionallyRender';
-import AccessContext from '../../../contexts/AccessContext';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
import { useContext } from 'react';
const ApiPage = () => {
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
index 2f8790423f..0c45ea030f 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
@@ -1,10 +1,10 @@
import { Button } from '@material-ui/core';
import { KeyboardArrowDownOutlined } from '@material-ui/icons';
import React from 'react';
-import { useEnvironments } from '../../../../hooks/api/getters/useEnvironments/useEnvironments';
-import useProjects from '../../../../hooks/api/getters/useProjects/useProjects';
-import GeneralSelect from '../../../common/GeneralSelect/GeneralSelect';
-import Input from '../../../common/Input/Input';
+import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import Input from 'component/common/Input/Input';
import { useStyles } from './ApiTokenForm.styles';
interface IApiTokenFormProps {
username: string;
diff --git a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
index a958c7e50d..eb24cdb6b8 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
@@ -9,28 +9,28 @@ import {
TableHead,
TableRow,
} from '@material-ui/core';
-import AccessContext from '../../../../contexts/AccessContext';
-import useToast from '../../../../hooks/useToast';
-import useLoading from '../../../../hooks/useLoading';
-import useApiTokens from '../../../../hooks/api/getters/useApiTokens/useApiTokens';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import useApiTokensApi from '../../../../hooks/api/actions/useApiTokensApi/useApiTokensApi';
-import ApiError from '../../../common/ApiError/ApiError';
-import PageContent from '../../../common/PageContent';
-import HeaderTitle from '../../../common/HeaderTitle';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
+import useToast from 'hooks/useToast';
+import useLoading from 'hooks/useLoading';
+import useApiTokens from 'hooks/api/getters/useApiTokens/useApiTokens';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
+import ApiError from 'component/common/ApiError/ApiError';
+import PageContent from 'component/common/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import {
CREATE_API_TOKEN,
DELETE_API_TOKEN,
-} from '../../../providers/AccessProvider/permissions';
+} from 'component/providers/AccessProvider/permissions';
import { useStyles } from './ApiTokenList.styles';
import Secret from './secret';
import { Delete, FileCopy } from '@material-ui/icons';
-import Dialogue from '../../../common/Dialogue';
-import { CREATE_API_TOKEN_BUTTON } from '../../../../testIds';
+import Dialogue from 'component/common/Dialogue';
+import { CREATE_API_TOKEN_BUTTON } from 'testIds';
import { Alert } from '@material-ui/lab';
import copy from 'copy-to-clipboard';
-import { useLocationSettings } from '../../../../hooks/useLocationSettings';
+import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD } from 'utils/formatDate';
interface IApiToken {
diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx
index 500c074bbb..4a15aa5b0a 100644
--- a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx
+++ b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx
@@ -1,6 +1,6 @@
import { Typography } from '@material-ui/core';
-import { useCommonStyles } from '../../../../common.styles';
-import Dialogue from '../../../common/Dialogue';
+import { useCommonStyles } from 'common.styles';
+import Dialogue from 'component/common/Dialogue';
import { UserToken } from './UserToken/UserToken';
interface IConfirmUserLink {
diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
index 80de357f6f..b0bc6144b2 100644
--- a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
+++ b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
@@ -1,7 +1,7 @@
import { IconButton } from '@material-ui/core';
import CopyIcon from '@material-ui/icons/FileCopy';
import copy from 'copy-to-clipboard';
-import useToast from '../../../../../hooks/useToast';
+import useToast from 'hooks/useToast';
interface IUserTokenProps {
token: string;
diff --git a/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx b/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx
index c1bd011f94..16da7b9df2 100644
--- a/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx
+++ b/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx
@@ -9,7 +9,7 @@ import { useApiTokenForm } from '../hooks/useApiTokenForm';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { ConfirmToken } from '../ConfirmToken/ConfirmToken';
import { useState } from 'react';
-import { scrollToTop } from '../../../common/util';
+import { scrollToTop } from 'component/common/util';
import { formatUnknownError } from 'utils/formatUnknownError';
export const CreateApiToken = () => {
diff --git a/frontend/src/component/admin/auth/AuthSettings.tsx b/frontend/src/component/admin/auth/AuthSettings.tsx
index 616e95330f..017d36cda1 100644
--- a/frontend/src/component/admin/auth/AuthSettings.tsx
+++ b/frontend/src/component/admin/auth/AuthSettings.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import AdminMenu from '../menu/AdminMenu';
import { Alert } from '@material-ui/lab';
-import TabNav from '../../common/TabNav/TabNav';
-import PageContent from '../../common/PageContent/PageContent';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
+import TabNav from 'component/common/TabNav/TabNav';
+import PageContent from 'component/common/PageContent/PageContent';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { OidcAuth } from './OidcAuth/OidcAuth';
import { SamlAuth } from './SamlAuth/SamlAuth';
import { PasswordAuth } from './PasswordAuth/PasswordAuth';
diff --git a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
index 0631739d5b..7492e2c1f1 100644
--- a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
+++ b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
@@ -7,13 +7,13 @@ import {
TextField,
} from '@material-ui/core';
import { Alert } from '@material-ui/lab';
-import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../../providers/AccessProvider/permissions';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
-import useAuthSettingsApi from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
-import useToast from '../../../../hooks/useToast';
+import PageContent from 'component/common/PageContent/PageContent';
+import AccessContext from 'contexts/AccessContext';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
+import useAuthSettingsApi from 'hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
index 6d1af9f229..7212fc5bd6 100644
--- a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
+++ b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
@@ -7,14 +7,14 @@ import {
TextField,
} from '@material-ui/core';
import { Alert } from '@material-ui/lab';
-import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import PageContent from 'component/common/PageContent/PageContent';
+import AccessContext from 'contexts/AccessContext';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import useAuthSettingsApi from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
-import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
-import useToast from '../../../../hooks/useToast';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import useAuthSettingsApi from 'hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
+import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
diff --git a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
index 4bae9c6251..f655ca2e76 100644
--- a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
+++ b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
@@ -1,14 +1,14 @@
import React, { useContext, useEffect, useState } from 'react';
import { Button, FormControlLabel, Grid, Switch } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
-import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../../providers/AccessProvider/permissions';
-import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
+import PageContent from 'component/common/PageContent/PageContent';
+import AccessContext from 'contexts/AccessContext';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
import useAuthSettingsApi, {
ISimpleAuthSettings,
-} from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
-import useToast from '../../../../hooks/useToast';
+} from 'hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
export const PasswordAuth = () => {
diff --git a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
index 5a1c317bdb..dc3b2f2605 100644
--- a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
+++ b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
@@ -7,14 +7,14 @@ import {
TextField,
} from '@material-ui/core';
import { Alert } from '@material-ui/lab';
-import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import PageContent from 'component/common/PageContent/PageContent';
+import AccessContext from 'contexts/AccessContext';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
-import useToast from '../../../../hooks/useToast';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
-import useAuthSettingsApi from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useToast from 'hooks/useToast';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
+import useAuthSettingsApi from 'hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
import { formatUnknownError } from 'utils/formatUnknownError';
import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
diff --git a/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx b/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx
index 0eca248673..a0f2a262da 100644
--- a/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx
+++ b/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx
@@ -1,8 +1,8 @@
import { useContext } from 'react';
import InvoiceList from './InvoiceList';
-import AccessContext from '../../../contexts/AccessContext';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { Alert } from '@material-ui/lab';
const InvoiceAdminPage = () => {
diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx
index 83ab3bc63b..2bc1d59a66 100644
--- a/frontend/src/component/admin/invoice/InvoiceList.tsx
+++ b/frontend/src/component/admin/invoice/InvoiceList.tsx
@@ -8,13 +8,13 @@ import {
Button,
} from '@material-ui/core';
import OpenInNew from '@material-ui/icons/OpenInNew';
-import PageContent from '../../common/PageContent';
-import HeaderTitle from '../../common/HeaderTitle';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import PageContent from 'component/common/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { formatApiPath } from 'utils/formatPath';
-import useInvoices from '../../../hooks/api/getters/useInvoices/useInvoices';
-import { IInvoice } from '../../../interfaces/invoice';
-import { useLocationSettings } from '../../../hooks/useLocationSettings';
+import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
+import { IInvoice } from 'interfaces/invoice';
+import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD } from 'utils/formatDate';
const PORTAL_URL = formatApiPath('api/admin/invoices/portal');
diff --git a/frontend/src/component/admin/menu/AdminMenu.tsx b/frontend/src/component/admin/menu/AdminMenu.tsx
index 1866957dac..8f1614209b 100644
--- a/frontend/src/component/admin/menu/AdminMenu.tsx
+++ b/frontend/src/component/admin/menu/AdminMenu.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { Paper, Tab, Tabs } from '@material-ui/core';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
const navLinkStyle = {
display: 'flex',
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
index 1569f80c39..23bb956453 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
@@ -10,9 +10,9 @@ import { useEffect, useState } from 'react';
import {
IPermission,
IProjectEnvironmentPermissions,
-} from '../../../../../interfaces/project';
-import StringTruncator from '../../../../common/StringTruncator/StringTruncator';
-import { ICheckedPermission } from '../../hooks/useProjectRoleForm';
+} from 'interfaces/project';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { ICheckedPermission } from 'component/admin/projectRoles/hooks/useProjectRoleForm';
import { useStyles } from './EnvironmentPermissionAccordion.styles';
type PermissionMap = { [key: string]: boolean };
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
index 01e27cc3fd..56827861d2 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
@@ -1,4 +1,4 @@
-import Input from '../../../common/Input/Input';
+import Input from 'component/common/Input/Input';
import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion';
import {
Button,
@@ -6,12 +6,12 @@ import {
FormControlLabel,
TextField,
} from '@material-ui/core';
-import useProjectRolePermissions from '../../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
+import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
import { useStyles } from './ProjectRoleForm.styles';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import React, { ReactNode } from 'react';
-import { IPermission } from '../../../../interfaces/project';
+import { IPermission } from 'interfaces/project';
import {
ICheckedPermission,
PROJECT_CHECK_ALL_KEY,
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx
index ba0bd06058..0356647915 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx
@@ -1,8 +1,8 @@
import { Alert } from '@material-ui/lab';
import React from 'react';
-import { IProjectRole } from '../../../../../interfaces/role';
-import Dialogue from '../../../../common/Dialogue';
-import Input from '../../../../common/Input/Input';
+import { IProjectRole } from 'interfaces/role';
+import Dialogue from 'component/common/Dialogue';
+import Input from 'component/common/Input/Input';
import { useStyles } from './ProjectRoleDeleteConfirm.styles';
interface IProjectRoleDeleteConfirmProps {
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
index d3a5a2faaf..0e6d411621 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
@@ -6,15 +6,15 @@ import {
TableHead,
TableRow,
} from '@material-ui/core';
-import AccessContext from '../../../../../contexts/AccessContext';
-import usePagination from '../../../../../hooks/usePagination';
-import { ADMIN } from '../../../../providers/AccessProvider/permissions';
-import PaginateUI from '../../../../common/PaginateUI/PaginateUI';
+import AccessContext from 'contexts/AccessContext';
+import usePagination from 'hooks/usePagination';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import PaginateUI from 'component/common/PaginateUI/PaginateUI';
import ProjectRoleListItem from './ProjectRoleListItem/ProjectRoleListItem';
-import useProjectRoles from '../../../../../hooks/api/getters/useProjectRoles/useProjectRoles';
-import IRole, { IProjectRole } from '../../../../../interfaces/role';
-import useProjectRolesApi from '../../../../../hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
-import useToast from '../../../../../hooks/useToast';
+import useProjectRoles from 'hooks/api/getters/useProjectRoles/useProjectRoles';
+import IRole, { IProjectRole } from 'interfaces/role';
+import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
+import useToast from 'hooks/useToast';
import ProjectRoleDeleteConfirm from '../ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useStyles } from './ProjectRoleListItem/ProjectRoleListItem.styles';
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
index 9fc2d17bac..8738b6eb12 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
@@ -1,10 +1,10 @@
import { useStyles } from './ProjectRoleListItem.styles';
import { TableCell, TableRow, Typography } from '@material-ui/core';
import { Delete, Edit } from '@material-ui/icons';
-import { ADMIN } from '../../../../../providers/AccessProvider/permissions';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
-import PermissionIconButton from '../../../../../common/PermissionIconButton/PermissionIconButton';
-import { IProjectRole } from '../../../../../../interfaces/role';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { IProjectRole } from 'interfaces/role';
import { useHistory } from 'react-router-dom';
import React from 'react';
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
index c7dfdaf2c0..5739af8999 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
@@ -2,12 +2,12 @@ import { Button } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import { useContext } from 'react';
import { useHistory } from 'react-router-dom';
-import AccessContext from '../../../../contexts/AccessContext';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import HeaderTitle from '../../../common/HeaderTitle';
-import PageContent from '../../../common/PageContent';
-import { ADMIN } from '../../../providers/AccessProvider/permissions';
-import AdminMenu from '../../menu/AdminMenu';
+import AccessContext from 'contexts/AccessContext';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import HeaderTitle from 'component/common/HeaderTitle';
+import PageContent from 'component/common/PageContent';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import AdminMenu from 'component/admin/menu/AdminMenu';
import { useStyles } from './ProjectRoles.styles';
import ProjectRoleList from './ProjectRoleList/ProjectRoleList';
diff --git a/frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts b/frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts
index bd45e9a0bc..1c91cb63a0 100644
--- a/frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts
+++ b/frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts
@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
-import { IPermission } from '../../../../interfaces/project';
+import { IPermission } from 'interfaces/project';
import cloneDeep from 'lodash.clonedeep';
-import useProjectRolePermissions from '../../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
-import useProjectRolesApi from '../../../../hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
+import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
+import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
export interface ICheckedPermission {
[key: string]: IPermission;
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx
index 99575f7008..0eafa574f2 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx
@@ -1,7 +1,7 @@
import { Typography } from '@material-ui/core';
-import Dialogue from '../../../../common/Dialogue';
+import Dialogue from 'component/common/Dialogue';
-import { ReactComponent as EmailIcon } from '../../../../../assets/icons/email.svg';
+import { ReactComponent as EmailIcon } from 'assets/icons/email.svg';
import { useStyles } from './ConfirmUserEmail.styles';
import UserInviteLink from '../ConfirmUserLink/UserInviteLink/UserInviteLink';
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx
index 2299dbf287..ebaf970a38 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx
@@ -1,7 +1,7 @@
import { Typography } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
-import { useCommonStyles } from '../../../../../common.styles';
-import Dialogue from '../../../../common/Dialogue';
+import { useCommonStyles } from 'common.styles';
+import Dialogue from 'component/common/Dialogue';
import UserInviteLink from './UserInviteLink/UserInviteLink';
interface IConfirmUserLink {
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
index 8c070c4bae..5548f4c007 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
@@ -1,6 +1,6 @@
import { IconButton } from '@material-ui/core';
import CopyIcon from '@material-ui/icons/FileCopy';
-import useToast from '../../../../../../hooks/useToast';
+import useToast from 'hooks/useToast';
interface IInviteLinkProps {
inviteLink: string;
diff --git a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx
index fda1fb0b5f..5c5f5c95db 100644
--- a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx
+++ b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx
@@ -7,7 +7,7 @@ import useToast from 'hooks/useToast';
import useAddUserForm from '../hooks/useAddUserForm';
import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded';
import { useState } from 'react';
-import { scrollToTop } from '../../../common/util';
+import { scrollToTop } from 'component/common/util';
import { CreateButton } from 'component/common/CreateButton/CreateButton';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { formatUnknownError } from 'utils/formatUnknownError';
diff --git a/frontend/src/component/admin/users/EditUser/EditUser.tsx b/frontend/src/component/admin/users/EditUser/EditUser.tsx
index 7f8c32301e..11ca6645ca 100644
--- a/frontend/src/component/admin/users/EditUser/EditUser.tsx
+++ b/frontend/src/component/admin/users/EditUser/EditUser.tsx
@@ -1,7 +1,7 @@
import { useHistory, useParams } from 'react-router-dom';
import UserForm from '../UserForm/UserForm';
import useAddUserForm from '../hooks/useAddUserForm';
-import { scrollToTop } from '../../../common/util';
+import { scrollToTop } from 'component/common/util';
import { useEffect } from 'react';
import { UpdateButton } from 'component/common/UpdateButton/UpdateButton';
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
diff --git a/frontend/src/component/admin/users/UserForm/UserForm.tsx b/frontend/src/component/admin/users/UserForm/UserForm.tsx
index 9bc72d5649..bbd6c701cc 100644
--- a/frontend/src/component/admin/users/UserForm/UserForm.tsx
+++ b/frontend/src/component/admin/users/UserForm/UserForm.tsx
@@ -1,4 +1,4 @@
-import Input from '../../../common/Input/Input';
+import Input from 'component/common/Input/Input';
import {
FormControlLabel,
Button,
@@ -10,10 +10,10 @@ import {
} from '@material-ui/core';
import { useStyles } from './UserForm.styles';
import React from 'react';
-import useUsers from '../../../../hooks/api/getters/useUsers/useUsers';
-import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
-import { EDIT } from '../../../../constants/misc';
-import useUiBootstrap from '../../../../hooks/api/getters/useUiBootstrap/useUiBootstrap';
+import useUsers from 'hooks/api/getters/useUsers/useUsers';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import { EDIT } from 'constants/misc';
+import useUiBootstrap from 'hooks/api/getters/useUiBootstrap/useUiBootstrap';
interface IUserForm {
email: string;
diff --git a/frontend/src/component/admin/users/UsersAdmin.tsx b/frontend/src/component/admin/users/UsersAdmin.tsx
index bb16b611d9..ae47c1a33a 100644
--- a/frontend/src/component/admin/users/UsersAdmin.tsx
+++ b/frontend/src/component/admin/users/UsersAdmin.tsx
@@ -1,12 +1,12 @@
import { useContext } from 'react';
import UsersList from './UsersList/UsersList';
import AdminMenu from '../menu/AdminMenu';
-import PageContent from '../../common/PageContent/PageContent';
-import AccessContext from '../../../contexts/AccessContext';
-import ConditionallyRender from '../../common/ConditionallyRender';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
+import PageContent from 'component/common/PageContent/PageContent';
+import AccessContext from 'contexts/AccessContext';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { Alert } from '@material-ui/lab';
-import HeaderTitle from '../../common/HeaderTitle';
+import HeaderTitle from 'component/common/HeaderTitle';
import { Button } from '@material-ui/core';
import { useStyles } from './UserAdmin.styles';
import { useHistory } from 'react-router-dom';
diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
index bf0e5f6794..ad6632b1e5 100644
--- a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
+++ b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
@@ -1,15 +1,15 @@
import { useState } from 'react';
import classnames from 'classnames';
import { Avatar, TextField, Typography } from '@material-ui/core';
-import { trim } from '../../../../common/util';
-import { modalStyles } from '../../util';
-import Dialogue from '../../../../common/Dialogue/Dialogue';
-import PasswordChecker from '../../../../user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
-import { useCommonStyles } from '../../../../../common.styles';
-import PasswordMatcher from '../../../../user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
+import { trim } from 'component/common/util';
+import { modalStyles } from 'component/admin/users/util';
+import Dialogue from 'component/common/Dialogue/Dialogue';
+import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
+import { useCommonStyles } from 'common.styles';
+import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { Alert } from '@material-ui/lab';
-import { IUser } from '../../../../../interfaces/user';
+import { IUser } from 'interfaces/user';
interface IChangePasswordProps {
showDialog: boolean;
diff --git a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
index c20481362c..88ca110b63 100644
--- a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
+++ b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import Dialogue from '../../../../common/Dialogue/Dialogue';
-import ConditionallyRender from '../../../../common/ConditionallyRender/ConditionallyRender';
-import { REMOVE_USER_ERROR } from '../../../../../hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
+import Dialogue from 'component/common/Dialogue/Dialogue';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import { REMOVE_USER_ERROR } from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
import { Alert } from '@material-ui/lab';
-import useLoading from '../../../../../hooks/useLoading';
+import useLoading from 'hooks/useLoading';
import { Avatar, Typography } from '@material-ui/core';
-import { useCommonStyles } from '../../../../../common.styles';
-import { IUser } from '../../../../../interfaces/user';
+import { useCommonStyles } from 'common.styles';
+import { IUser } from 'interfaces/user';
interface IDeleteUserProps {
showDialog: boolean;
diff --git a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
index 1ca7b03871..a28583a293 100644
--- a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
+++ b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
@@ -7,13 +7,13 @@ import {
} from '@material-ui/core';
import { Delete, Edit, Lock } from '@material-ui/icons';
import { SyntheticEvent, useContext } from 'react';
-import { ADMIN } from '../../../../providers/AccessProvider/permissions';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
-import AccessContext from '../../../../../contexts/AccessContext';
-import { IUser } from '../../../../../interfaces/user';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
+import { IUser } from 'interfaces/user';
import { useStyles } from './UserListItem.styles';
import { useHistory } from 'react-router-dom';
-import { ILocationSettings } from '../../../../../hooks/useLocationSettings';
+import { ILocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD } from 'utils/formatDate';
interface IUserListItemProps {
diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
index f1a1abd3e6..386bc902fb 100644
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -9,21 +9,21 @@ import {
} from '@material-ui/core';
import ChangePassword from './ChangePassword/ChangePassword';
import DeleteUser from './DeleteUser/DeleteUser';
-import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
-import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded';
-import useUsers from '../../../../hooks/api/getters/useUsers/useUsers';
-import useAdminUsersApi from '../../../../hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
+import useUsers from 'hooks/api/getters/useUsers/useUsers';
+import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
import UserListItem from './UserListItem/UserListItem';
import loadingData from './loadingData';
-import useLoading from '../../../../hooks/useLoading';
-import usePagination from '../../../../hooks/usePagination';
-import PaginateUI from '../../../common/PaginateUI/PaginateUI';
-import { IUser } from '../../../../interfaces/user';
-import IRole from '../../../../interfaces/role';
-import useToast from '../../../../hooks/useToast';
-import { useLocationSettings } from '../../../../hooks/useLocationSettings';
+import useLoading from 'hooks/useLoading';
+import usePagination from 'hooks/usePagination';
+import PaginateUI from 'component/common/PaginateUI/PaginateUI';
+import { IUser } from 'interfaces/user';
+import IRole from 'interfaces/role';
+import useToast from 'hooks/useToast';
+import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useStyles } from './UserListItem/UserListItem.styles';
diff --git a/frontend/src/component/admin/users/UsersList/loadingData.ts b/frontend/src/component/admin/users/UsersList/loadingData.ts
index e216574171..120a0105aa 100644
--- a/frontend/src/component/admin/users/UsersList/loadingData.ts
+++ b/frontend/src/component/admin/users/UsersList/loadingData.ts
@@ -1,4 +1,4 @@
-import { IUser } from '../../../../interfaces/user';
+import { IUser } from 'interfaces/user';
const loadingData: IUser[] = [
{
diff --git a/frontend/src/component/admin/users/hooks/useAddUserForm.ts b/frontend/src/component/admin/users/hooks/useAddUserForm.ts
index 7d1bbbd937..11e0563b77 100644
--- a/frontend/src/component/admin/users/hooks/useAddUserForm.ts
+++ b/frontend/src/component/admin/users/hooks/useAddUserForm.ts
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
-import useUiBootstrap from '../../../../hooks/api/getters/useUiBootstrap/useUiBootstrap';
-import useUsers from '../../../../hooks/api/getters/useUsers/useUsers';
+import useUiBootstrap from 'hooks/api/getters/useUiBootstrap/useUiBootstrap';
+import useUsers from 'hooks/api/getters/useUsers/useUsers';
const useCreateUserForm = (
initialName = '',
diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx
index a020f8d258..8cb0be696c 100644
--- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx
+++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx
@@ -2,10 +2,10 @@ import { ThemeProvider } from '@material-ui/core';
import { ApplicationEdit } from './ApplicationEdit';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
-import theme from '../../../themes/mainTheme';
-import AccessProvider from '../../providers/AccessProvider/AccessProvider';
-import UIProvider from '../../providers/UIProvider/UIProvider';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import theme from 'themes/mainTheme';
+import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
+import UIProvider from 'component/providers/UIProvider/UIProvider';
test('renders correctly if no application', () => {
const tree = renderer
diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
index 80a6657d1d..e017ef2e7f 100644
--- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
+++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
@@ -9,21 +9,21 @@ import {
Typography,
} from '@material-ui/core';
import { Link as LinkIcon } from '@material-ui/icons';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
-import { UPDATE_APPLICATION } from '../../providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions';
import { ApplicationView } from '../ApplicationView/ApplicationView';
import { ApplicationUpdate } from '../ApplicationUpdate/ApplicationUpdate';
-import TabNav from '../../common/TabNav/TabNav';
-import Dialogue from '../../common/Dialogue';
-import PageContent from '../../common/PageContent';
-import HeaderTitle from '../../common/HeaderTitle';
-import AccessContext from '../../../contexts/AccessContext';
-import useApplicationsApi from '../../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
-import useApplication from '../../../hooks/api/getters/useApplication/useApplication';
+import TabNav from 'component/common/TabNav/TabNav';
+import Dialogue from 'component/common/Dialogue';
+import PageContent from 'component/common/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
+import AccessContext from 'contexts/AccessContext';
+import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
+import useApplication from 'hooks/api/getters/useApplication/useApplication';
import { useHistory, useParams } from 'react-router-dom';
-import { useLocationSettings } from '../../../hooks/useLocationSettings';
-import useToast from '../../../hooks/useToast';
-import PermissionButton from '../../common/PermissionButton/PermissionButton';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import useToast from 'hooks/useToast';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { formatDateYMD } from 'utils/formatDate';
import { formatUnknownError } from 'utils/formatUnknownError';
diff --git a/frontend/src/component/application/ApplicationList/ApplicationList.tsx b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
index 972743e70c..017e8781cb 100644
--- a/frontend/src/component/application/ApplicationList/ApplicationList.tsx
+++ b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
@@ -1,12 +1,12 @@
import { useMemo, useState } from 'react';
import { CircularProgress } from '@material-ui/core';
import { Warning } from '@material-ui/icons';
-import { AppsLinkList, styles as commonStyles } from '../../common';
+import { AppsLinkList, styles as commonStyles } from 'component/common';
import { SearchField } from 'component/common/SearchField/SearchField';
-import PageContent from '../../common/PageContent/PageContent';
-import HeaderTitle from '../../common/HeaderTitle';
-import useApplications from '../../../hooks/api/getters/useApplications/useApplications';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import PageContent from 'component/common/PageContent/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
+import useApplications from 'hooks/api/getters/useApplications/useApplications';
+import ConditionallyRender from 'component/common/ConditionallyRender';
export const ApplicationList = () => {
const { applications, loading } = useApplications();
diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
index be9d285d08..724496f743 100644
--- a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
+++ b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
@@ -1,12 +1,12 @@
import { ChangeEvent, useState } from 'react';
import { Grid, TextField } from '@material-ui/core';
-import { useCommonStyles } from '../../../common.styles';
+import { useCommonStyles } from 'common.styles';
import icons from 'component/application/iconNames';
-import GeneralSelect from '../../common/GeneralSelect/GeneralSelect';
-import useApplicationsApi from '../../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
-import useToast from '../../../hooks/useToast';
-import { IApplication } from '../../../interfaces/application';
-import useApplication from '../../../hooks/api/getters/useApplication/useApplication';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
+import useToast from 'hooks/useToast';
+import { IApplication } from 'interfaces/application';
+import useApplication from 'hooks/api/getters/useApplication/useApplication';
import { formatUnknownError } from 'utils/formatUnknownError';
interface IApplicationUpdateProps {
diff --git a/frontend/src/component/application/ApplicationView/ApplicationView.tsx b/frontend/src/component/application/ApplicationView/ApplicationView.tsx
index be34424325..0fe60dbca6 100644
--- a/frontend/src/component/application/ApplicationView/ApplicationView.tsx
+++ b/frontend/src/component/application/ApplicationView/ApplicationView.tsx
@@ -18,13 +18,13 @@ import {
import {
CREATE_FEATURE,
CREATE_STRATEGY,
-} from '../../providers/AccessProvider/permissions';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+} from 'component/providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
import { getTogglePath } from 'utils/routePathHelpers';
-import useApplication from '../../../hooks/api/getters/useApplication/useApplication';
-import AccessContext from '../../../contexts/AccessContext';
+import useApplication from 'hooks/api/getters/useApplication/useApplication';
+import AccessContext from 'contexts/AccessContext';
import { formatDateYMDHMS } from 'utils/formatDate';
-import { useLocationSettings } from '../../../hooks/useLocationSettings';
+import { useLocationSettings } from 'hooks/useLocationSettings';
export const ApplicationView = () => {
const { hasAccess } = useContext(AccessContext);
diff --git a/frontend/src/component/archive/ArchiveListContainer.tsx b/frontend/src/component/archive/ArchiveListContainer.tsx
index 698259fd57..1031b18de8 100644
--- a/frontend/src/component/archive/ArchiveListContainer.tsx
+++ b/frontend/src/component/archive/ArchiveListContainer.tsx
@@ -1,10 +1,10 @@
-import { useFeaturesArchive } from '../../hooks/api/getters/useFeaturesArchive/useFeaturesArchive';
+import { useFeaturesArchive } from 'hooks/api/getters/useFeaturesArchive/useFeaturesArchive';
import FeatureToggleList from '../feature/FeatureToggleList/FeatureToggleList';
-import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig';
-import { useFeaturesFilter } from '../../hooks/useFeaturesFilter';
-import { useFeatureArchiveApi } from '../../hooks/api/actions/useFeatureArchiveApi/useReviveFeatureApi';
-import useToast from '../../hooks/useToast';
-import { useFeaturesSort } from '../../hooks/useFeaturesSort';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useFeaturesFilter } from 'hooks/useFeaturesFilter';
+import { useFeatureArchiveApi } from 'hooks/api/actions/useFeatureArchiveApi/useReviveFeatureApi';
+import useToast from 'hooks/useToast';
+import { useFeaturesSort } from 'hooks/useFeaturesSort';
export const ArchiveListContainer = () => {
const { setToastData, setToastApiError } = useToast();
diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
index 749e80cce4..1aff6f9064 100644
--- a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
@@ -2,7 +2,7 @@ import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import { Link, useLocation } from 'react-router-dom';
import ConditionallyRender from '../ConditionallyRender';
import { useStyles } from './BreadcrumbNav.styles';
-import AccessContext from '../../../contexts/AccessContext';
+import AccessContext from 'contexts/AccessContext';
import { useContext } from 'react';
import StringTruncator from '../StringTruncator/StringTruncator';
diff --git a/frontend/src/component/common/Constraint/Constraint.tsx b/frontend/src/component/common/Constraint/Constraint.tsx
index 52cfb0bc84..928e5c6b41 100644
--- a/frontend/src/component/common/Constraint/Constraint.tsx
+++ b/frontend/src/component/common/Constraint/Constraint.tsx
@@ -3,10 +3,10 @@ import classnames from 'classnames';
import { IN, NOT_IN } from 'constants/operators';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useParams } from 'react-router';
-import { IFeatureViewParams } from '../../../interfaces/params';
-import { IConstraint } from '../../../interfaces/strategy';
+import { IFeatureViewParams } from 'interfaces/params';
+import { IConstraint } from 'interfaces/strategy';
import { StrategySeparator } from '../StrategySeparator/StrategySeparator';
-import { UPDATE_FEATURE } from '../../providers/AccessProvider/permissions';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import ConditionallyRender from '../ConditionallyRender';
import PermissionIconButton from '../PermissionIconButton/PermissionIconButton';
import StringTruncator from '../StringTruncator/StringTruncator';
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx
index dc78cc6122..56ce020049 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx
@@ -1,5 +1,5 @@
-import { IConstraint } from '../../../interfaces/strategy';
-import ConditionallyRender from '../ConditionallyRender';
+import { IConstraint } from 'interfaces/strategy';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { ConstraintAccordionEdit } from './ConstraintAccordionEdit/ConstraintAccordionEdit';
import { ConstraintAccordionView } from './ConstraintAccordionView/ConstraintAccordionView';
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
index 68d1e3ccab..7ac0dde533 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
@@ -1,6 +1,6 @@
import { useCallback, useEffect, useState } from 'react';
import classnames from 'classnames';
-import { IConstraint } from '../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
import { useStyles } from '../ConstraintAccordion.styles';
import { ConstraintAccordionEditBody } from './ConstraintAccordionEditBody/ConstraintAccordionEditBody';
import { ConstraintAccordionEditHeader } from './ConstraintAccordionEditHeader/ConstraintAccordionEditHeader';
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
index d33be2ef9b..ae3fc66b5d 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
@@ -1,5 +1,5 @@
import { Button, FormControlLabel, Switch } from '@material-ui/core';
-import { IConstraint } from '../../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
import { CANCEL } from '../ConstraintAccordionEdit';
import { ConstraintFormHeader } from './ConstraintFormHeader/ConstraintFormHeader';
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
index 6dcf2d59de..12f4c42781 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
@@ -2,7 +2,7 @@ import { Checkbox, FormControlLabel } from '@material-ui/core';
import { useCommonStyles } from 'common.styles';
import ConditionallyRender from 'component/common/ConditionallyRender';
import { useEffect, useState } from 'react';
-import { ConstraintValueSearch } from '../../../ConstraintValueSearch/ConstraintValueSearch';
+import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
// Parent component
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
index 2a1750bade..ce53076c6a 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
@@ -7,8 +7,8 @@ import {
RadioGroup,
Radio,
} from '@material-ui/core';
-import { ConstraintValueSearch } from '../../../ConstraintValueSearch/ConstraintValueSearch';
-import ConditionallyRender from '../../../../ConditionallyRender';
+import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useCommonStyles } from 'common.styles';
// Parent component
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
index eca43dca45..448db11630 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
@@ -1,17 +1,17 @@
-import { IConstraint } from '../../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
-import { useStyles } from '../../ConstraintAccordion.styles';
-import useUnleashContext from '../../../../../hooks/api/getters/useUnleashContext/useUnleashContext';
-import GeneralSelect from '../../../GeneralSelect/GeneralSelect';
-import { ConstraintIcon } from '../../ConstraintIcon';
+import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
+import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
import { Help } from '@material-ui/icons';
-import ConditionallyRender from '../../../ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import {
allOperators,
dateOperators,
DATE_AFTER,
IN,
-} from '../../../../../constants/operators';
+} from 'constants/operators';
import { SAVE } from '../ConstraintAccordionEdit';
import { resolveText } from './helpers';
import { oneOf } from 'utils/oneOf';
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts
index 186008a99c..f0d2b13384 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts
@@ -15,7 +15,7 @@ import {
SEMVER_GT,
SEMVER_LT,
Operator,
-} from '../../../../../constants/operators';
+} from 'constants/operators';
export const resolveText = (operator: Operator, contextName: string) => {
const base = `To satisfy this constraint, values passed into the SDK as ${contextName} must`;
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index 2134772754..0b1a8717b0 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -4,7 +4,7 @@ import {
AccordionDetails,
} from '@material-ui/core';
import { ExpandMore } from '@material-ui/icons';
-import { IConstraint } from '../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
import { ConstraintAccordionViewHeader } from './ConstraintAccordionViewHeader/ConstraintAccordionViewHeader';
@@ -13,7 +13,7 @@ import {
dateOperators,
numOperators,
semVerOperators,
-} from '../../../../constants/operators';
+} from 'constants/operators';
import { useStyles } from '../ConstraintAccordion.styles';
interface IConstraintAccordionViewProps {
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
index 63fa2b22b8..dcaaa4fc82 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
@@ -2,12 +2,12 @@ import { Chip } from '@material-ui/core';
import { ImportExportOutlined, TextFormatOutlined } from '@material-ui/icons';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { useState } from 'react';
-import { stringOperators } from '../../../../../constants/operators';
-import { IConstraint } from '../../../../../interfaces/strategy';
+import { stringOperators } from 'constants/operators';
+import { IConstraint } from 'interfaces/strategy';
import { oneOf } from 'utils/oneOf';
-import ConditionallyRender from '../../../ConditionallyRender';
-import { useStyles } from '../../ConstraintAccordion.styles';
-import { ConstraintValueSearch } from '../../ConstraintValueSearch/ConstraintValueSearch';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
+import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
import { formatConstraintValue } from 'component/common/Constraint/formatConstraintValue';
import { useLocationSettings } from 'hooks/useLocationSettings';
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
index 5ea34ae4ce..e5366e2a37 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -1,11 +1,11 @@
-import StringTruncator from '../../../StringTruncator/StringTruncator';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { Chip, useMediaQuery } from '@material-ui/core';
-import { ConstraintIcon } from '../../ConstraintIcon';
+import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
import { Delete, Edit } from '@material-ui/icons';
-import { IConstraint } from '../../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
-import { useStyles } from '../../ConstraintAccordion.styles';
-import ConditionallyRender from '../../../ConditionallyRender';
+import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { UPDATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { useParams } from 'react-router-dom';
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx
index 00170ef6ee..75094f0392 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx
@@ -1,6 +1,6 @@
import { TextField, InputAdornment, Chip } from '@material-ui/core';
import { Search } from '@material-ui/icons';
-import ConditionallyRender from '../../ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
interface IConstraintValueSearchProps {
filter: string;
diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx
index 4a9570bf70..b093722f10 100644
--- a/frontend/src/component/common/Dialogue/Dialogue.tsx
+++ b/frontend/src/component/common/Dialogue/Dialogue.tsx
@@ -9,7 +9,7 @@ import {
import ConditionallyRender from '../ConditionallyRender/ConditionallyRender';
import { useStyles } from './Dialogue.styles';
-import { DIALOGUE_CONFIRM_ID } from '../../../testIds';
+import { DIALOGUE_CONFIRM_ID } from 'testIds';
interface IDialogue {
primaryButtonText?: string;
diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
index 24223c8a73..362b9b218c 100644
--- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
+++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
@@ -1,5 +1,5 @@
import { useHistory } from 'react-router-dom';
-import { CREATE_FEATURE_STRATEGY } from '../../providers/AccessProvider/permissions';
+import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import Dialogue from '../Dialogue';
import PermissionButton from '../PermissionButton/PermissionButton';
import { useStyles } from './EnvironmentStrategyDialog.styles';
diff --git a/frontend/src/component/common/Feedback/Feedback.tsx b/frontend/src/component/common/Feedback/Feedback.tsx
index 928ede3e8c..a8f92ee1fc 100644
--- a/frontend/src/component/common/Feedback/Feedback.tsx
+++ b/frontend/src/component/common/Feedback/Feedback.tsx
@@ -3,14 +3,14 @@ import { Button, IconButton } from '@material-ui/core';
import classnames from 'classnames';
import CloseIcon from '@material-ui/icons/Close';
import { ReactComponent as Logo } from 'assets/icons/logoPlain.svg';
-import { useCommonStyles } from '../../../common.styles';
+import { useCommonStyles } from 'common.styles';
import { useStyles } from './Feedback.styles';
import AnimateOnMount from '../AnimateOnMount/AnimateOnMount';
import ConditionallyRender from '../ConditionallyRender';
import { formatApiPath } from 'utils/formatPath';
-import UIContext from '../../../contexts/UIContext';
+import UIContext from 'contexts/UIContext';
import { PNPS_FEEDBACK_ID, showPnpsFeedback } from '../util';
-import { useAuthFeedback } from '../../../hooks/api/getters/useAuth/useAuthFeedback';
+import { useAuthFeedback } from 'hooks/api/getters/useAuth/useAuthFeedback';
interface IFeedbackProps {
openUrl: string;
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 3bec14be6b..49b267b37b 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -6,7 +6,7 @@ import { FileCopy, Info } from '@material-ui/icons';
import ConditionallyRender from '../ConditionallyRender';
import Loader from '../Loader/Loader';
import copy from 'copy-to-clipboard';
-import useToast from '../../../hooks/useToast';
+import useToast from 'hooks/useToast';
import React, { useState } from 'react';
import classNames from 'classnames';
import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg';
diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
index 7055cb2487..061ef8c491 100644
--- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
+++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
-import { SELECT_ITEM_ID } from '../../../testIds';
+import { SELECT_ITEM_ID } from 'testIds';
import { KeyboardArrowDownOutlined } from '@material-ui/icons';
export interface ISelectOption {
diff --git a/frontend/src/component/common/Input/Input.tsx b/frontend/src/component/common/Input/Input.tsx
index 546896a924..2982a8dfac 100644
--- a/frontend/src/component/common/Input/Input.tsx
+++ b/frontend/src/component/common/Input/Input.tsx
@@ -1,5 +1,5 @@
import { InputLabelProps, InputProps, TextField } from '@material-ui/core';
-import { INPUT_ERROR_TEXT } from '../../../testIds';
+import { INPUT_ERROR_TEXT } from 'testIds';
import { useStyles } from './Input.styles';
import React from 'react';
diff --git a/frontend/src/component/common/NoItems/NoItems.tsx b/frontend/src/component/common/NoItems/NoItems.tsx
index 3b9bcbf656..e6fc1c858b 100644
--- a/frontend/src/component/common/NoItems/NoItems.tsx
+++ b/frontend/src/component/common/NoItems/NoItems.tsx
@@ -1,4 +1,4 @@
-import { ReactComponent as NoItemsIcon } from '../../../assets/icons/addfiles.svg';
+import { ReactComponent as NoItemsIcon } from 'assets/icons/addfiles.svg';
import { useStyles } from './NoItems.styles';
import React from 'react';
diff --git a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
index 5fd81788f8..5c49431417 100644
--- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
+++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
@@ -1,6 +1,6 @@
import { IconButton, Tooltip, IconButtonProps } from '@material-ui/core';
import React, { useContext } from 'react';
-import AccessContext from '../../../contexts/AccessContext';
+import AccessContext from 'contexts/AccessContext';
interface IPermissionIconButtonProps extends IconButtonProps {
permission: string;
diff --git a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
index a131aea118..f3b8be06ed 100644
--- a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
+++ b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
@@ -1,5 +1,5 @@
import { Switch, Tooltip, SwitchProps } from '@material-ui/core';
-import AccessContext from '../../../contexts/AccessContext';
+import AccessContext from 'contexts/AccessContext';
import React, { useContext } from 'react';
interface IPermissionSwitchProps extends SwitchProps {
diff --git a/frontend/src/component/common/Proclamation/Proclamation.tsx b/frontend/src/component/common/Proclamation/Proclamation.tsx
index f34e469eb7..ea4a61b2ca 100644
--- a/frontend/src/component/common/Proclamation/Proclamation.tsx
+++ b/frontend/src/component/common/Proclamation/Proclamation.tsx
@@ -3,7 +3,7 @@ import { Alert } from '@material-ui/lab';
import ConditionallyRender from '../ConditionallyRender';
import { Typography } from '@material-ui/core';
import { useStyles } from './Proclamation.styles';
-import { IProclamationToast } from '../../../interfaces/uiConfig';
+import { IProclamationToast } from 'interfaces/uiConfig';
interface IProclamationProps {
toast?: IProclamationToast;
diff --git a/frontend/src/component/common/ProjectSelect/ProjectSelect.jsx b/frontend/src/component/common/ProjectSelect/ProjectSelect.jsx
index cdd9ddbe0a..45493aade4 100644
--- a/frontend/src/component/common/ProjectSelect/ProjectSelect.jsx
+++ b/frontend/src/component/common/ProjectSelect/ProjectSelect.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { MenuItem } from '@material-ui/core';
import PropTypes from 'prop-types';
import DropdownMenu from '../DropdownMenu/DropdownMenu';
-import useProjects from '../../../hooks/api/getters/useProjects/useProjects';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
const ALL_PROJECTS = { id: '*', name: '> All projects' };
diff --git a/frontend/src/component/common/TagSelect/TagSelect.tsx b/frontend/src/component/common/TagSelect/TagSelect.tsx
index ea7d66ab1c..119d9b0e86 100644
--- a/frontend/src/component/common/TagSelect/TagSelect.tsx
+++ b/frontend/src/component/common/TagSelect/TagSelect.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import GeneralSelect from '../GeneralSelect/GeneralSelect';
-import useTagTypes from '../../../hooks/api/getters/useTagTypes/useTagTypes';
+import useTagTypes from 'hooks/api/getters/useTagTypes/useTagTypes';
interface ITagSelect extends React.SelectHTMLAttributes {
value: string;
diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
index 397c7252d0..b67f7df784 100644
--- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
+++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
@@ -2,11 +2,11 @@ import { useStyles } from './Toast.styles';
import classnames from 'classnames';
import { useContext } from 'react';
import { IconButton } from '@material-ui/core';
-import CheckMarkBadge from '../../CheckmarkBadge/CheckMarkBadge';
-import UIContext from '../../../../contexts/UIContext';
-import ConditionallyRender from '../../ConditionallyRender';
+import CheckMarkBadge from 'component/common/CheckmarkBadge/CheckMarkBadge';
+import UIContext from 'contexts/UIContext';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import Close from '@material-ui/icons/Close';
-import { IToast } from '../../../../interfaces/toast';
+import { IToast } from 'interfaces/toast';
const Toast = ({ title, text, type, confetti }: IToast) => {
const { setToast } = useContext(UIContext);
diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
index 5f9d21cbbf..4b8aaa3b6f 100644
--- a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
+++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
@@ -1,11 +1,11 @@
import { Portal } from '@material-ui/core';
import { useContext, useEffect } from 'react';
-import { useCommonStyles } from '../../../common.styles';
-import UIContext from '../../../contexts/UIContext';
+import { useCommonStyles } from 'common.styles';
+import UIContext from 'contexts/UIContext';
import { useStyles } from './ToastRenderer.styles';
import AnimateOnMount from '../AnimateOnMount/AnimateOnMount';
import Toast from './Toast/Toast';
-import { IToast } from '../../../interfaces/toast';
+import { IToast } from 'interfaces/toast';
const ToastRenderer = () => {
const { toastData, setToast } = useContext(UIContext);
diff --git a/frontend/src/component/common/select.tsx b/frontend/src/component/common/select.tsx
index 2c5c397134..d1775853ed 100644
--- a/frontend/src/component/common/select.tsx
+++ b/frontend/src/component/common/select.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
-import { SELECT_ITEM_ID } from '../../testIds';
+import { SELECT_ITEM_ID } from 'testIds';
export interface ISelectOption {
key: string;
diff --git a/frontend/src/component/context/ContextList/ContextList.jsx b/frontend/src/component/context/ContextList/ContextList.jsx
index 097d94c0f5..10c56b5bde 100644
--- a/frontend/src/component/context/ContextList/ContextList.jsx
+++ b/frontend/src/component/context/ContextList/ContextList.jsx
@@ -1,11 +1,11 @@
-import PageContent from '../../common/PageContent/PageContent';
-import HeaderTitle from '../../common/HeaderTitle';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+import PageContent from 'component/common/PageContent/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
import {
CREATE_CONTEXT_FIELD,
DELETE_CONTEXT_FIELD,
UPDATE_CONTEXT_FIELD,
-} from '../../providers/AccessProvider/permissions';
+} from 'component/providers/AccessProvider/permissions';
import {
Button,
IconButton,
@@ -20,12 +20,12 @@ import { Add, Album, Delete, Edit } from '@material-ui/icons';
import { useContext, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { useStyles } from './styles';
-import ConfirmDialogue from '../../common/Dialogue';
-import AccessContext from '../../../contexts/AccessContext';
-import useUnleashContext from '../../../hooks/api/getters/useUnleashContext/useUnleashContext';
-import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi';
-import useToast from '../../../hooks/useToast';
-import { formatUnknownError } from '../../../utils/formatUnknownError';
+import ConfirmDialogue from 'component/common/Dialogue';
+import AccessContext from 'contexts/AccessContext';
+import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
+import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
const ContextList = () => {
const { hasAccess } = useContext(AccessContext);
diff --git a/frontend/src/component/context/EditContext/EditContext.tsx b/frontend/src/component/context/EditContext/EditContext.tsx
index 891d280678..7675f0fe51 100644
--- a/frontend/src/component/context/EditContext/EditContext.tsx
+++ b/frontend/src/component/context/EditContext/EditContext.tsx
@@ -7,7 +7,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import useToast from 'hooks/useToast';
import { useEffect } from 'react';
import { useHistory, useParams } from 'react-router-dom';
-import { scrollToTop } from '../../common/util';
+import { scrollToTop } from 'component/common/util';
import { formatUnknownError } from 'utils/formatUnknownError';
import { ContextForm } from '../ContextForm/ContextForm';
import { useContextForm } from '../hooks/useContextForm';
diff --git a/frontend/src/component/context/hooks/useContextForm.ts b/frontend/src/component/context/hooks/useContextForm.ts
index cd9e31eb3b..a146a07e59 100644
--- a/frontend/src/component/context/hooks/useContextForm.ts
+++ b/frontend/src/component/context/hooks/useContextForm.ts
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi';
+import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
export const useContextForm = (
initialcontextName = '',
diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
index 965043d5cd..13418ef688 100644
--- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
+++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
@@ -1,7 +1,7 @@
import { useHistory } from 'react-router-dom';
import useEnvironmentForm from '../hooks/useEnvironmentForm';
import EnvironmentForm from '../EnvironmentForm/EnvironmentForm';
-import FormTemplate from '../../common/FormTemplate/FormTemplate';
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import { Alert } from '@material-ui/lab';
import { Button } from '@material-ui/core';
import { CreateButton } from 'component/common/CreateButton/CreateButton';
diff --git a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
index 2371cac304..c758ec4d87 100644
--- a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
+++ b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
@@ -6,7 +6,7 @@ import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissio
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import useToast from 'hooks/useToast';
import { useHistory, useParams } from 'react-router-dom';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
import EnvironmentForm from '../EnvironmentForm/EnvironmentForm';
import useEnvironmentForm from '../hooks/useEnvironmentForm';
import { formatUnknownError } from 'utils/formatUnknownError';
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
index abb7fab8e9..984e8b2d4d 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
@@ -1,9 +1,9 @@
import { Button } from '@material-ui/core';
import { useStyles } from './EnvironmentForm.styles';
import React from 'react';
-import Input from '../../common/Input/Input';
+import Input from 'component/common/Input/Input';
import EnvironmentTypeSelector from './EnvironmentTypeSelector/EnvironmentTypeSelector';
-import { trim } from '../../common/util';
+import { trim } from 'component/common/util';
interface IEnvironmentForm {
name: string;
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx
index d7b6c34bf1..5804384f52 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx
@@ -1,5 +1,5 @@
import { CloudCircle } from '@material-ui/icons';
-import StringTruncator from '../../../common/StringTruncator/StringTruncator';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { useStyles } from './EnvironmentCard.styles';
interface IEnvironmentProps {
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
index 0e1c8bd119..aa6f2456f1 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
@@ -1,8 +1,8 @@
import { Alert } from '@material-ui/lab';
import React from 'react';
-import { IEnvironment } from '../../../../interfaces/environments';
-import Dialogue from '../../../common/Dialogue';
-import Input from '../../../common/Input/Input';
+import { IEnvironment } from 'interfaces/environments';
+import Dialogue from 'component/common/Dialogue';
+import Input from 'component/common/Input/Input';
import EnvironmentCard from '../EnvironmentCard/EnvironmentCard';
import { useStyles } from './EnvironmentDeleteConfirm.styles';
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
index e0d78a68c3..157dce099c 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
@@ -1,21 +1,18 @@
-import HeaderTitle from '../../common/HeaderTitle';
-import ResponsiveButton from '../../common/ResponsiveButton/ResponsiveButton';
+import HeaderTitle from 'component/common/HeaderTitle';
+import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
import { Add } from '@material-ui/icons';
-import PageContent from '../../common/PageContent';
+import PageContent from 'component/common/PageContent';
import { List } from '@material-ui/core';
-import { useEnvironments } from '../../../hooks/api/getters/useEnvironments/useEnvironments';
-import {
- IEnvironment,
- ISortOrderPayload,
-} from '../../../interfaces/environments';
+import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
+import { IEnvironment, ISortOrderPayload } from 'interfaces/environments';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import EnvironmentDeleteConfirm from './EnvironmentDeleteConfirm/EnvironmentDeleteConfirm';
-import useToast from '../../../hooks/useToast';
-import useEnvironmentApi from '../../../hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
+import useToast from 'hooks/useToast';
+import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
import EnvironmentListItem from './EnvironmentListItem/EnvironmentListItem';
import EnvironmentToggleConfirm from './EnvironmentToggleConfirm/EnvironmentToggleConfirm';
-import useProjectRolePermissions from '../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
+import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { formatUnknownError } from 'utils/formatUnknownError';
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
index e29b86710f..7d17693989 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
@@ -12,19 +12,19 @@ import {
Edit,
OfflineBolt,
} from '@material-ui/icons';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
-import { IEnvironment } from '../../../../interfaces/environments';
+import { IEnvironment } from 'interfaces/environments';
import React, { useContext, useRef } from 'react';
-import AccessContext from '../../../../contexts/AccessContext';
+import AccessContext from 'contexts/AccessContext';
import {
DELETE_ENVIRONMENT,
UPDATE_ENVIRONMENT,
-} from '../../../providers/AccessProvider/permissions';
+} from 'component/providers/AccessProvider/permissions';
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
import { XYCoord } from 'dnd-core';
-import DisabledIndicator from '../../../common/DisabledIndicator/DisabledIndicator';
-import StringTruncator from '../../../common/StringTruncator/StringTruncator';
+import DisabledIndicator from 'component/common/DisabledIndicator/DisabledIndicator';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { useHistory } from 'react-router-dom';
interface IEnvironmentListItemProps {
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx
index 0414700f05..e0ce15a3a4 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx
@@ -1,9 +1,9 @@
import { capitalize } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import React from 'react';
-import { IEnvironment } from '../../../../interfaces/environments';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import Dialogue from '../../../common/Dialogue';
+import { IEnvironment } from 'interfaces/environments';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import Dialogue from 'component/common/Dialogue';
import EnvironmentCard from '../EnvironmentCard/EnvironmentCard';
interface IEnvironmentToggleConfirmProps {
diff --git a/frontend/src/component/environments/hooks/useEnvironmentForm.ts b/frontend/src/component/environments/hooks/useEnvironmentForm.ts
index d19cce2fad..937f91482c 100644
--- a/frontend/src/component/environments/hooks/useEnvironmentForm.ts
+++ b/frontend/src/component/environments/hooks/useEnvironmentForm.ts
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import useEnvironmentApi from '../../../hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
+import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
const useEnvironmentForm = (initialName = '', initialType = 'development') => {
const NAME_EXISTS_ERROR = 'Error: Environment';
diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.jsx b/frontend/src/component/feature/CopyFeature/CopyFeature.jsx
index 695c812ba3..853b9faded 100644
--- a/frontend/src/component/feature/CopyFeature/CopyFeature.jsx
+++ b/frontend/src/component/feature/CopyFeature/CopyFeature.jsx
@@ -1,7 +1,5 @@
import { useState, useRef, useEffect } from 'react';
-
import { Link, useHistory, useParams } from 'react-router-dom';
-
import {
Button,
TextField,
@@ -10,17 +8,15 @@ import {
FormControlLabel,
} from '@material-ui/core';
import { FileCopy } from '@material-ui/icons';
-
-import { styles as commonStyles } from '../../common';
+import { styles as commonStyles } from 'component/common';
import styles from './CopyFeature.module.scss';
-
-import { trim } from '../../common/util';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import { trim } from 'component/common/util';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { Alert } from '@material-ui/lab';
-import { getTogglePath } from '../../../utils/routePathHelpers';
-import useFeatureApi from '../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import { useFeature } from '../../../hooks/api/getters/useFeature/useFeature';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
+import { getTogglePath } from 'utils/routePathHelpers';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
export const CopyFeatureToggle = () => {
const [replaceGroupId, setReplaceGroupId] = useState(true);
diff --git a/frontend/src/component/feature/EditFeature/EditFeature.tsx b/frontend/src/component/feature/EditFeature/EditFeature.tsx
index 9d01af101e..135d413b39 100644
--- a/frontend/src/component/feature/EditFeature/EditFeature.tsx
+++ b/frontend/src/component/feature/EditFeature/EditFeature.tsx
@@ -1,4 +1,4 @@
-import FormTemplate from '../../common/FormTemplate/FormTemplate';
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import { useHistory, useParams } from 'react-router-dom';
import FeatureForm from '../FeatureForm/FeatureForm';
import useFeatureForm from '../hooks/useFeatureForm';
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
index f0fd5c69db..d7a0fd6d54 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
@@ -7,18 +7,18 @@ import {
} from '@material-ui/core';
import { useStyles } from './FeatureForm.styles';
import FeatureTypeSelect from '../FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect';
-import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from '../../../testIds';
-import useFeatureTypes from '../../../hooks/api/getters/useFeatureTypes/useFeatureTypes';
+import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from 'testIds';
+import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
import { KeyboardArrowDownOutlined } from '@material-ui/icons';
import { projectFilterGenerator } from 'utils/projectFilterGenerator';
import FeatureProjectSelect from '../FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect';
-import ConditionallyRender from '../../common/ConditionallyRender';
-import { trim } from '../../common/util';
-import Input from '../../common/Input/Input';
-import { CREATE_FEATURE } from '../../providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { trim } from 'component/common/util';
+import Input from 'component/common/Input/Input';
+import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { useHistory } from 'react-router-dom';
import React from 'react';
-import { useAuthPermissions } from '../../../hooks/api/getters/useAuth/useAuthPermissions';
+import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
interface IFeatureToggleForm {
type: string;
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx
index 01408e7b8a..b17876d3db 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx
@@ -1,15 +1,15 @@
import { IConstraint, IFeatureStrategy } from 'interfaces/strategy';
-import Constraint from '../../../common/Constraint/Constraint';
-import Dialogue from '../../../common/Dialogue/Dialogue';
+import Constraint from 'component/common/Constraint/Constraint';
+import Dialogue from 'component/common/Dialogue/Dialogue';
import React, { useState } from 'react';
-import StrategyConstraints from '../../StrategyConstraints/StrategyConstraints';
+import StrategyConstraints from 'component/feature/StrategyConstraints/StrategyConstraints';
import { List, ListItem } from '@material-ui/core';
import produce from 'immer';
import {
CREATE_FEATURE_STRATEGY,
UPDATE_FEATURE_STRATEGY,
-} from '../../../providers/AccessProvider/permissions';
-import PermissionButton from '../../../common/PermissionButton/PermissionButton';
+} from 'component/providers/AccessProvider/permissions';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
interface IFeatureStrategyConstraintsProps {
projectId: string;
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
index 577dc57e1b..88114d45b2 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
@@ -3,12 +3,12 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useRequiredQueryParam } from 'hooks/useRequiredQueryParam';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { FeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm';
-import FormTemplate from '../../../common/FormTemplate/FormTemplate';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import useFeatureStrategyApi from '../../../../hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useHistory } from 'react-router-dom';
-import useToast from '../../../../hooks/useToast';
+import useToast from 'hooks/useToast';
import { IFeatureStrategy } from 'interfaces/strategy';
import {
featureStrategyDocsLink,
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
index ae4504875d..5a8d3301f7 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx
@@ -1,14 +1,14 @@
import React, { useEffect, useState } from 'react';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { FeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm';
-import FormTemplate from '../../../common/FormTemplate/FormTemplate';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useRequiredQueryParam } from 'hooks/useRequiredQueryParam';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import useFeatureStrategyApi from '../../../../hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
+import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useHistory } from 'react-router-dom';
-import useToast from '../../../../hooks/useToast';
+import useToast from 'hooks/useToast';
import { IFeatureStrategy, IStrategyPayload } from 'interfaces/strategy';
import { UPDATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
index bf3106436a..f432ef58b8 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
@@ -1,5 +1,5 @@
-import NoItems from '../../../common/NoItems/NoItems';
-import StringTruncator from '../../../common/StringTruncator/StringTruncator';
+import NoItems from 'component/common/NoItems/NoItems';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { useStyles } from './FeatureStrategyEmpty.styles';
import { FeatureStrategyMenu } from '../FeatureStrategyMenu/FeatureStrategyMenu';
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
index bc236433c9..420ba59317 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { Alert } from '@material-ui/lab';
import { IFeatureToggle } from 'interfaces/featureToggle';
import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit';
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index e6fce2e570..505396cb50 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -16,9 +16,9 @@ import { IFeatureToggle } from 'interfaces/featureToggle';
import { useStyles } from './FeatureStrategyForm.styles';
import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit';
import { useHistory } from 'react-router-dom';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import { C } from '../../../common/flags';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { C } from 'component/common/flags';
import { STRATEGY_FORM_SUBMIT_ID } from 'testIds';
import { FeatureStrategyConstraints2 } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints2/FeatureStrategyConstraints2';
import { useConstraintsValidation } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints2/useConstraintsValidation';
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
index c36fe7be3f..0616ca7446 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
@@ -1,8 +1,8 @@
import PermissionButton, {
IPermissionButtonProps,
-} from '../../../common/PermissionButton/PermissionButton';
+} from 'component/common/PermissionButton/PermissionButton';
import React, { useState } from 'react';
-import { CREATE_FEATURE_STRATEGY } from '../../../providers/AccessProvider/permissions';
+import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { Popover } from '@material-ui/core';
import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards';
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
index 9f26298b97..ea5f5751b0 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
@@ -5,7 +5,7 @@ import {
getFeatureStrategyIcon,
formatStrategyName,
} from 'utils/strategyNames';
-import { formatCreateStrategyPath } from '../../FeatureStrategyCreate/FeatureStrategyCreate';
+import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
interface IFeatureStrategyMenuCardProps {
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx
index 1cf4d17a29..76a8b14098 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx
@@ -1,11 +1,9 @@
-import { getBasePath } from 'utils/formatPath';
-import Dialogue from '../../../common/Dialogue';
+import Dialogue from 'component/common/Dialogue';
import { Alert } from '@material-ui/lab';
import { Checkbox, FormControlLabel } from '@material-ui/core';
import { PRODUCTION } from 'constants/environmentTypes';
import { IFeatureToggle } from 'interfaces/featureToggle';
import { createPersistentGlobalStateHook } from 'hooks/usePersistentGlobalState';
-import { setLocalStorageItem } from 'utils/storage';
interface IFeatureStrategyProdGuardProps {
open: boolean;
@@ -80,13 +78,8 @@ export const useFeatureStrategyProdGuard = (
return environment?.type === PRODUCTION;
};
-export const disableFeatureStrategiesProductionGuard = () => {
- const settings: IFeatureStrategyProdGuardSettings = { hide: true };
- setLocalStorageItem(localStorageKey, settings);
-};
-
// Store the "always hide" prod guard dialog setting in localStorage.
-const localStorageKey = `${getBasePath()}:useFeatureStrategyProdGuardSettings:v1`;
+const localStorageKey = 'useFeatureStrategyProdGuardSettings:v2';
const useFeatureStrategyProdGuardSettings =
createPersistentGlobalStateHook(
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
index bf8a7d09c6..d4829e2085 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
@@ -4,10 +4,10 @@ import { formatUnknownError } from 'utils/formatUnknownError';
import { useHistory } from 'react-router-dom';
import useToast from 'hooks/useToast';
import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit';
-import Dialogue from '../../../common/Dialogue';
+import Dialogue from 'component/common/Dialogue';
import { Alert } from '@material-ui/lab';
-import PermissionButton from '../../../common/PermissionButton/PermissionButton';
-import { DELETE_FEATURE_STRATEGY } from '../../../providers/AccessProvider/permissions';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
+import { DELETE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { STRATEGY_FORM_REMOVE_ID } from 'testIds';
import ConditionallyRender from 'component/common/ConditionallyRender';
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyType/FeatureStrategyType.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyType/FeatureStrategyType.tsx
index f089dcfd67..321cc8b8e9 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyType/FeatureStrategyType.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyType/FeatureStrategyType.tsx
@@ -1,10 +1,10 @@
import { IFeatureStrategy } from 'interfaces/strategy';
-import DefaultStrategy from '../../StrategyTypes/DefaultStrategy/DefaultStrategy';
-import FlexibleStrategy from '../../StrategyTypes/FlexibleStrategy/FlexibleStrategy';
-import UserWithIdStrategy from '../../StrategyTypes/UserWithIdStrategy/UserWithId';
-import GeneralStrategy from '../../StrategyTypes/GeneralStrategy/GeneralStrategy';
+import DefaultStrategy from 'component/feature/StrategyTypes/DefaultStrategy/DefaultStrategy';
+import FlexibleStrategy from 'component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy';
+import UserWithIdStrategy from 'component/feature/StrategyTypes/UserWithIdStrategy/UserWithId';
+import GeneralStrategy from 'component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
-import useUnleashContext from '../../../../hooks/api/getters/useUnleashContext/useUnleashContext';
+import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import produce from 'immer';
import React from 'react';
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx
index 43d2e9046c..ad2770f95f 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx
@@ -6,19 +6,19 @@ import { Button, IconButton, List, ListItem, Tooltip } from '@material-ui/core';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { Add } from '@material-ui/icons';
import FeatureToggleListItem from './FeatureToggleListItem';
-import { SearchField } from '../../common/SearchField/SearchField';
+import { SearchField } from 'component/common/SearchField/SearchField';
import FeatureToggleListActions from './FeatureToggleListActions';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
-import PageContent from '../../common/PageContent/PageContent';
-import HeaderTitle from '../../common/HeaderTitle';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import PageContent from 'component/common/PageContent/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
import loadingFeatures from './loadingFeatures';
-import { CREATE_FEATURE } from '../../providers/AccessProvider/permissions';
-import AccessContext from '../../../contexts/AccessContext';
+import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import AccessContext from 'contexts/AccessContext';
import { useStyles } from './styles';
-import ListPlaceholder from '../../common/ListPlaceholder/ListPlaceholder';
-import { getCreateTogglePath } from '../../../utils/routePathHelpers';
-import { NAVIGATE_TO_CREATE_FEATURE } from '../../../testIds';
-import { resolveFilteredProjectId } from '../../../hooks/useFeaturesFilter';
+import ListPlaceholder from 'component/common/ListPlaceholder/ListPlaceholder';
+import { getCreateTogglePath } from 'utils/routePathHelpers';
+import { NAVIGATE_TO_CREATE_FEATURE } from 'testIds';
+import { resolveFilteredProjectId } from 'hooks/useFeaturesFilter';
const FeatureToggleList = ({
features,
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.test.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.test.jsx
index f2d2c20d50..cacb9ec768 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.test.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.test.jsx
@@ -3,16 +3,16 @@ import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core';
import FeatureToggleList from './FeatureToggleList';
import renderer from 'react-test-renderer';
-import theme from '../../../themes/mainTheme';
-import { CREATE_FEATURE } from '../../providers/AccessProvider/permissions';
-import AccessProvider from '../../providers/AccessProvider/AccessProvider';
+import theme from 'themes/mainTheme';
+import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
jest.mock('./FeatureToggleListItem/FeatureToggleListItem', () => ({
__esModule: true,
default: 'ListItem',
}));
-jest.mock('../../common/ProjectSelect/ProjectSelect');
+jest.mock('component/common/ProjectSelect/ProjectSelect');
test('renders correctly with one feature', () => {
const features = [
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
index 814ee3d630..e8236c5a90 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
@@ -2,13 +2,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import { MenuItem, Typography } from '@material-ui/core';
-import DropdownMenu from '../../../common/DropdownMenu/DropdownMenu';
-import ProjectSelect from '../../../common/ProjectSelect/ProjectSelect';
+import DropdownMenu from 'component/common/DropdownMenu/DropdownMenu';
+import ProjectSelect from 'component/common/ProjectSelect/ProjectSelect';
import { useStyles } from './styles';
-import useLoading from '../../../../hooks/useLoading';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import { createFeaturesFilterSortOptions } from '../../../../hooks/useFeaturesSort';
+import useLoading from 'hooks/useLoading';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { createFeaturesFilterSortOptions } from 'hooks/useFeaturesSort';
const sortOptions = createFeaturesFilterSortOptions();
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListContainer.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListContainer.tsx
index 84a7f94a3c..067b4756fa 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListContainer.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListContainer.tsx
@@ -1,8 +1,8 @@
-import { useFeatures } from '../../../hooks/api/getters/useFeatures/useFeatures';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
-import { useFeaturesFilter } from '../../../hooks/useFeaturesFilter';
+import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useFeaturesFilter } from 'hooks/useFeaturesFilter';
import FeatureToggleList from './FeatureToggleList';
-import { useFeaturesSort } from '../../../hooks/useFeaturesSort';
+import { useFeaturesSort } from 'hooks/useFeaturesSort';
export const FeatureToggleListContainer = () => {
const { uiConfig } = useUiConfig();
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
index 1f6a42b77f..71f446e754 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
@@ -1,24 +1,20 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-
import { Link } from 'react-router-dom';
import { Chip, ListItem, Tooltip } from '@material-ui/core';
import { Undo } from '@material-ui/icons';
-
import TimeAgo from 'react-timeago';
-import StatusChip from '../../../common/StatusChip/StatusChip';
-import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
-
-import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions';
-import { styles as commonStyles } from '../../../common';
-
+import StatusChip from 'component/common/StatusChip/StatusChip';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import { styles as commonStyles } from 'component/common';
import { useStyles } from './styles';
-import { getTogglePath } from '../../../../utils/routePathHelpers';
-import FeatureStatus from '../../FeatureView/FeatureStatus/FeatureStatus';
-import FeatureType from '../../FeatureView/FeatureType/FeatureType';
-import useProjects from '../../../../hooks/api/getters/useProjects/useProjects';
-import PermissionIconButton from '../../../common/PermissionIconButton/PermissionIconButton';
+import { getTogglePath } from 'utils/routePathHelpers';
+import FeatureStatus from 'component/feature/FeatureView/FeatureStatus/FeatureStatus';
+import FeatureType from 'component/feature/FeatureView/FeatureType/FeatureType';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
const FeatureToggleListItem = ({
feature,
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.test.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.test.jsx
index 18cd7ef7b2..4a3cc68d61 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.test.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.test.jsx
@@ -5,7 +5,7 @@ import { ThemeProvider } from '@material-ui/core';
import FeatureToggleListItem from './index';
import renderer from 'react-test-renderer';
-import theme from '../../../../themes/mainTheme';
+import theme from 'themes/mainTheme';
test('renders correctly with one feature', () => {
const feature = {
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
index 34d37d7d1b..2cc3cc2a6e 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
@@ -1,5 +1,5 @@
import { Tooltip } from '@material-ui/core';
-import { useLocationSettings } from '../../../../hooks/useLocationSettings';
+import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD, formatDateYMDHMS } from 'utils/formatDate';
interface CreatedAtProps {
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
index 2fe566b804..a49f9edddb 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
@@ -1,20 +1,20 @@
import React, { useRef, useState } from 'react';
import { TableCell, TableRow } from '@material-ui/core';
import { useStyles } from '../FeatureToggleListNew.styles';
-import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
-import { IEnvironments } from '../../../../interfaces/featureToggle';
-import useToast from '../../../../hooks/useToast';
+import useToggleFeatureByEnv from 'hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
+import { IEnvironments } from 'interfaces/featureToggle';
+import useToast from 'hooks/useToast';
import { getTogglePath } from 'utils/routePathHelpers';
-import FeatureStatus from '../../FeatureView/FeatureStatus/FeatureStatus';
-import FeatureType from '../../FeatureView/FeatureType/FeatureType';
+import FeatureStatus from 'component/feature/FeatureView/FeatureStatus/FeatureStatus';
+import FeatureType from 'component/feature/FeatureView/FeatureType/FeatureType';
import classNames from 'classnames';
import CreatedAt from './CreatedAt';
-import useProject from '../../../../hooks/api/getters/useProject/useProject';
-import { UPDATE_FEATURE_ENVIRONMENT } from '../../../providers/AccessProvider/permissions';
-import PermissionSwitch from '../../../common/PermissionSwitch/PermissionSwitch';
+import useProject from 'hooks/api/getters/useProject/useProject';
+import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
+import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
import { Link } from 'react-router-dom';
-import { ENVIRONMENT_STRATEGY_ERROR } from '../../../../constants/apiErrors';
-import EnvironmentStrategyDialog from '../../../common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
+import { ENVIRONMENT_STRATEGY_ERROR } from 'constants/apiErrors';
+import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
interface IFeatureToggleListNewItemProps {
name: string;
diff --git a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
index 6bbdbf5912..1e3e13843e 100644
--- a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
@@ -1,8 +1,8 @@
import { useParams } from 'react-router';
-import { useFeature } from '../../../../hooks/api/getters/useFeature/useFeature';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useStyles } from './FeatureLog.styles';
-import { IFeatureViewParams } from '../../../../interfaces/params';
-import { FeatureEventHistory } from '../../../history/FeatureEventHistory/FeatureEventHistory';
+import { IFeatureViewParams } from 'interfaces/params';
+import { FeatureEventHistory } from 'component/history/FeatureEventHistory/FeatureEventHistory';
const FeatureLog = () => {
const styles = useStyles();
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
index f0ad98339c..ceec40abfa 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
@@ -1,20 +1,20 @@
import { useParams } from 'react-router';
-import { IFeatureViewParams } from '../../../../interfaces/params';
-import { useFeatureMetricsRaw } from '../../../../hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw';
-import PageContent from '../../../common/PageContent';
+import { IFeatureViewParams } from 'interfaces/params';
+import { useFeatureMetricsRaw } from 'hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw';
+import PageContent from 'component/common/PageContent';
import { useEffect, useMemo, useState } from 'react';
import {
FEATURE_METRIC_HOURS_BACK_MAX,
FeatureMetricsHours,
} from './FeatureMetricsHours/FeatureMetricsHours';
-import { IFeatureMetricsRaw } from '../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import { Grid } from '@material-ui/core';
import { FeatureMetricsContent } from './FeatureMetricsContent/FeatureMetricsContent';
-import { useQueryStringNumberState } from '../../../../hooks/useQueryStringNumberState';
-import { useQueryStringState } from '../../../../hooks/useQueryStringState';
+import { useQueryStringNumberState } from 'hooks/useQueryStringNumberState';
+import { useQueryStringState } from 'hooks/useQueryStringState';
import { FeatureMetricsChips } from './FeatureMetricsChips/FeatureMetricsChips';
-import { useFeature } from '../../../../hooks/api/getters/useFeature/useFeature';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from './FeatureMetrics.styles';
export const FeatureMetrics = () => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
index 4c409a2125..3f9045518b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
@@ -1,4 +1,4 @@
-import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import React, { useMemo } from 'react';
import { Line } from 'react-chartjs-2';
import {
@@ -12,7 +12,7 @@ import {
Title,
Tooltip,
} from 'chart.js';
-import { useLocationSettings } from '../../../../../hooks/useLocationSettings';
+import { useLocationSettings } from 'hooks/useLocationSettings';
import { FEATURE_METRICS_TABLE_ID } from '../FeatureMetricsTable/FeatureMetricsTable';
import 'chartjs-adapter-date-fns';
import { createChartData } from './createChartData';
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts
index c58a0cd669..dbda736c00 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts
@@ -1,6 +1,6 @@
-import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import { ChartData } from 'chart.js';
-import { ILocationSettings } from '../../../../../hooks/useLocationSettings';
+import { ILocationSettings } from 'hooks/useLocationSettings';
import theme from 'themes/mainTheme';
import 'chartjs-adapter-date-fns';
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
index 7ae6fda9e1..43549ff765 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
@@ -1,7 +1,7 @@
-import { ILocationSettings } from '../../../../../hooks/useLocationSettings';
+import { ILocationSettings } from 'hooks/useLocationSettings';
import 'chartjs-adapter-date-fns';
import { ChartOptions, defaults } from 'chart.js';
-import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import theme from 'themes/mainTheme';
import { formatDateHM } from 'utils/formatDate';
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
index 80e2a04fdf..c53748d453 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
@@ -1,5 +1,5 @@
import { FeatureMetricsTable } from '../FeatureMetricsTable/FeatureMetricsTable';
-import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import { FeatureMetricsStatsRaw } from '../FeatureMetricsStats/FeatureMetricsStatsRaw';
import { FeatureMetricsChart } from '../FeatureMetricsChart/FeatureMetricsChart';
import { FeatureMetricsEmpty } from '../FeatureMetricsEmpty/FeatureMetricsEmpty';
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
index ee74a51b2e..4938791833 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
@@ -1,6 +1,6 @@
import GeneralSelect, {
OnGeneralSelectChange,
-} from '../../../../common/GeneralSelect/GeneralSelect';
+} from 'component/common/GeneralSelect/GeneralSelect';
interface IFeatureMetricsHoursProps {
hoursBack: number;
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStatsRaw.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStatsRaw.tsx
index d070e6d72f..ee4ca225ab 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStatsRaw.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStatsRaw.tsx
@@ -1,4 +1,4 @@
-import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import { useMemo } from 'react';
import { FeatureMetricsStats } from './FeatureMetricsStats';
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
index 800073496f..559c99e420 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
@@ -1,4 +1,4 @@
-import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
import {
Table,
TableBody,
@@ -8,7 +8,7 @@ import {
useMediaQuery,
useTheme,
} from '@material-ui/core';
-import { useLocationSettings } from '../../../../../hooks/useLocationSettings';
+import { useLocationSettings } from 'hooks/useLocationSettings';
import { useMemo } from 'react';
import { formatDateYMDHMS } from 'utils/formatDate';
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
index a0ee98defb..7289f71d52 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
@@ -1,15 +1,15 @@
import { DialogContentText } from '@material-ui/core';
import { useParams } from 'react-router';
import React, { useState } from 'react';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
-import Dialogue from '../../../../common/Dialogue';
-import Input from '../../../../common/Input/Input';
+import { IFeatureViewParams } from 'interfaces/params';
+import Dialogue from 'component/common/Dialogue';
+import Input from 'component/common/Input/Input';
import { useStyles } from './AddTagDialog.styles';
-import { trim } from '../../../../common/util';
-import TagSelect from '../../../../common/TagSelect/TagSelect';
-import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import useTags from '../../../../../hooks/api/getters/useTags/useTags';
-import useToast from '../../../../../hooks/useToast';
+import { trim } from 'component/common/util';
+import TagSelect from 'component/common/TagSelect/TagSelect';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import useTags from 'hooks/api/getters/useTags/useTags';
+import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
interface IAddTagDialogProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
index 9a54543263..a815d5351a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
@@ -1,13 +1,13 @@
import { useParams } from 'react-router';
-import { ENVIRONMENT_STRATEGY_ERROR } from '../../../../../../constants/apiErrors';
-import useFeatureApi from '../../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import { useFeature } from '../../../../../../hooks/api/getters/useFeature/useFeature';
-import useToast from '../../../../../../hooks/useToast';
-import { IFeatureEnvironment } from '../../../../../../interfaces/featureToggle';
-import { IFeatureViewParams } from '../../../../../../interfaces/params';
-import PermissionSwitch from '../../../../../common/PermissionSwitch/PermissionSwitch';
-import StringTruncator from '../../../../../common/StringTruncator/StringTruncator';
-import { UPDATE_FEATURE_ENVIRONMENT } from '../../../../../providers/AccessProvider/permissions';
+import { ENVIRONMENT_STRATEGY_ERROR } from 'constants/apiErrors';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import useToast from 'hooks/useToast';
+import { IFeatureEnvironment } from 'interfaces/featureToggle';
+import { IFeatureViewParams } from 'interfaces/params';
+import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
import React from 'react';
import { formatUnknownError } from 'utils/formatUnknownError';
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
index a36d1d2f99..de5685186d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
@@ -1,10 +1,10 @@
import { Tooltip } from '@material-ui/core';
import { useState } from 'react';
import { useParams } from 'react-router';
-import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
-import EnvironmentStrategyDialog from '../../../../common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import { IFeatureViewParams } from 'interfaces/params';
+import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch';
import { useStyles } from './FeatureOverviewEnvSwitches.styles';
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index d95dc1957a..407ab04fd3 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -7,19 +7,19 @@ import {
import { ExpandMore } from '@material-ui/icons';
import React from 'react';
import { useParams } from 'react-router';
-import { useFeature } from '../../../../../../hooks/api/getters/useFeature/useFeature';
-import useFeatureMetrics from '../../../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
-import { IFeatureEnvironment } from '../../../../../../interfaces/featureToggle';
-import { IFeatureViewParams } from '../../../../../../interfaces/params';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import useFeatureMetrics from 'hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
+import { IFeatureEnvironment } from 'interfaces/featureToggle';
+import { IFeatureViewParams } from 'interfaces/params';
import { getFeatureMetrics } from 'utils/getFeatureMetrics';
import {
getFeatureStrategyIcon,
formatStrategyName,
} from 'utils/strategyNames';
-import ConditionallyRender from '../../../../../common/ConditionallyRender';
-import DisabledIndicator from '../../../../../common/DisabledIndicator/DisabledIndicator';
-import EnvironmentIcon from '../../../../../common/EnvironmentIcon/EnvironmentIcon';
-import StringTruncator from '../../../../../common/StringTruncator/StringTruncator';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import DisabledIndicator from 'component/common/DisabledIndicator/DisabledIndicator';
+import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { useStyles } from './FeatureOverviewEnvironment.styles';
import FeatureOverviewEnvironmentBody from './FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody';
import FeatureOverviewEnvironmentFooter from './FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter';
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx
index 8cf79e7005..4af9ce1c03 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx
@@ -4,7 +4,7 @@ import ConditionallyRender from 'component/common/ConditionallyRender';
import FeatureOverviewEnvironmentStrategies from '../FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategies';
import { useStyles } from '../FeatureOverviewEnvironment.styles';
import { IFeatureEnvironment } from 'interfaces/featureToggle';
-import { FeatureStrategyEmpty } from '../../../../../FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty';
+import { FeatureStrategyEmpty } from 'component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty';
interface IFeatureOverviewEnvironmentBodyProps {
getOverviewText: () => string;
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx
index 6ddb9e42e6..67de3d8ff4 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx
@@ -1,6 +1,6 @@
-import { IFeatureEnvironmentMetrics } from '../../../../../../../interfaces/featureToggle';
+import { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle';
import { useStyles } from '../FeatureOverviewEnvironment.styles';
-import { FeatureMetricsStats } from '../../../../FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats';
+import { FeatureMetricsStats } from 'component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats';
interface IFeatureOverviewEnvironmentFooterProps {
environmentMetric?: IFeatureEnvironmentMetrics;
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
index f766104bf1..bac79fbf3b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
@@ -1,7 +1,7 @@
import { FiberManualRecord } from '@material-ui/icons';
-import { IFeatureEnvironmentMetrics } from '../../../../../../../interfaces/featureToggle';
+import { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle';
import { calculatePercentage } from 'utils/calculatePercentage';
-import PercentageCircle from '../../../../../../common/PercentageCircle/PercentageCircle';
+import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
import { useStyles } from './FeatureOverviewEnvironmentMetrics.styles';
interface IFeatureOverviewEnvironmentMetrics {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategies.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategies.tsx
index 1f28149797..117f706138 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategies.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategies.tsx
@@ -1,4 +1,4 @@
-import { IFeatureStrategy } from '../../../../../../../interfaces/strategy';
+import { IFeatureStrategy } from 'interfaces/strategy';
import FeatureOverviewEnvironmentStrategy from './FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy';
interface FeatureOverviewEnvironmentStrategiesProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
index 4782071a6e..a7196d25ae 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
@@ -1,17 +1,17 @@
import { Edit } from '@material-ui/icons';
import { useTheme } from '@material-ui/core/styles';
import { Link, useParams } from 'react-router-dom';
-import { IFeatureViewParams } from '../../../../../../../../interfaces/params';
-import { IFeatureStrategy } from '../../../../../../../../interfaces/strategy';
+import { IFeatureViewParams } from 'interfaces/params';
+import { IFeatureStrategy } from 'interfaces/strategy';
import {
getFeatureStrategyIcon,
formatStrategyName,
} from 'utils/strategyNames';
-import PermissionIconButton from '../../../../../../../common/PermissionIconButton/PermissionIconButton';
-import { UPDATE_FEATURE_STRATEGY } from '../../../../../../../providers/AccessProvider/permissions';
-import FeatureOverviewExecution from '../../../../FeatureOverviewExecution/FeatureOverviewExecution';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { UPDATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
+import FeatureOverviewExecution from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution';
import { useStyles } from './FeatureOverviewEnvironmentStrategy.styles';
-import { formatEditStrategyPath } from '../../../../../../FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit';
+import { formatEditStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit';
import { FeatureStrategyRemove } from 'component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironments.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironments.tsx
index af6c450d1d..5e0bbc8f0d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironments.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironments.tsx
@@ -1,6 +1,6 @@
import { useParams } from 'react-router-dom';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import { IFeatureViewParams } from 'interfaces/params';
import FeatureOverviewEnvironment from './FeatureOverviewEnvironment/FeatureOverviewEnvironment';
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
index ea091d6d29..e26746e5ee 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
@@ -1,16 +1,12 @@
import { Fragment } from 'react';
-import {
- IConstraint,
- IFeatureStrategy,
- IParameter,
-} from '../../../../../interfaces/strategy';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
-import PercentageCircle from '../../../../common/PercentageCircle/PercentageCircle';
-import { StrategySeparator } from '../../../../common/StrategySeparator/StrategySeparator';
+import { IConstraint, IFeatureStrategy, IParameter } from 'interfaces/strategy';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
import { useStyles } from './FeatureOverviewExecution.styles';
import FeatureOverviewExecutionChips from './FeatureOverviewExecutionChips/FeatureOverviewExecutionChips';
-import { useStrategies } from '../../../../../hooks/api/getters/useStrategies/useStrategies';
-import Constraint from '../../../../common/Constraint/Constraint';
+import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
+import Constraint from 'component/common/Constraint/Constraint';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
interface IFeatureOverviewExecutionProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
index f5348bfb24..c474624224 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
@@ -1,5 +1,5 @@
import { Chip } from '@material-ui/core';
-import ConditionallyRender from '../../../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from './FeatureOverviewExecutionChips.styles';
interface IFeatureOverviewExecutionChipsProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index d20066033a..aa789b5de5 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -2,16 +2,16 @@ import { capitalize } from '@material-ui/core';
import classnames from 'classnames';
import { useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from './FeatureOverviewMetadata.styles';
import { Edit } from '@material-ui/icons';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
-import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
-import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
-import useTags from '../../../../../hooks/api/getters/useTags/useTags';
+import { IFeatureViewParams } from 'interfaces/params';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import useTags from 'hooks/api/getters/useTags/useTags';
import FeatureOverviewTags from './FeatureOverviewTags/FeatureOverviewTags';
const FeatureOverviewMetaData = () => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
index 121e888979..6b2943dc55 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
@@ -2,21 +2,21 @@ import React, { useContext, useState } from 'react';
import { Chip } from '@material-ui/core';
import { Close, Label } from '@material-ui/icons';
import { useParams } from 'react-router-dom';
-import useTags from '../../../../../../hooks/api/getters/useTags/useTags';
-import { IFeatureViewParams } from '../../../../../../interfaces/params';
+import useTags from 'hooks/api/getters/useTags/useTags';
+import { IFeatureViewParams } from 'interfaces/params';
import { useStyles } from './FeatureOverviewTags.styles';
-import slackIcon from '../../../../../../assets/icons/slack.svg';
-import jiraIcon from '../../../../../../assets/icons/jira.svg';
-import webhookIcon from '../../../../../../assets/icons/webhooks.svg';
+import slackIcon from 'assets/icons/slack.svg';
+import jiraIcon from 'assets/icons/jira.svg';
+import webhookIcon from 'assets/icons/webhooks.svg';
import { formatAssetPath } from 'utils/formatPath';
-import useTagTypes from '../../../../../../hooks/api/getters/useTagTypes/useTagTypes';
-import useFeatureApi from '../../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import Dialogue from '../../../../../common/Dialogue';
-import { ITag } from '../../../../../../interfaces/tags';
-import useToast from '../../../../../../hooks/useToast';
-import { UPDATE_FEATURE } from '../../../../../providers/AccessProvider/permissions';
-import ConditionallyRender from '../../../../../common/ConditionallyRender';
-import AccessContext from '../../../../../../contexts/AccessContext';
+import useTagTypes from 'hooks/api/getters/useTagTypes/useTagTypes';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import Dialogue from 'component/common/Dialogue';
+import { ITag } from 'interfaces/tags';
+import useToast from 'hooks/useToast';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
import { formatUnknownError } from 'utils/formatUnknownError';
interface IFeatureOverviewTagsProps extends React.HTMLProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx
index 764a985ef6..f836bf4131 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx
@@ -1,12 +1,12 @@
-import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
import { useParams } from 'react-router-dom';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
+import { IFeatureViewParams } from 'interfaces/params';
import { DialogContentText } from '@material-ui/core';
-import ConditionallyRender from '../../../../common/ConditionallyRender/ConditionallyRender';
-import Dialogue from '../../../../common/Dialogue';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import Dialogue from 'component/common/Dialogue';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import React from 'react';
-import useToast from '../../../../../hooks/useToast';
+import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
interface IStaleDialogProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
index 2d0cb89e9c..eadac85fda 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
@@ -1,11 +1,11 @@
import { useState } from 'react';
-import PageContent from '../../../common/PageContent';
+import PageContent from 'component/common/PageContent';
import { useStyles } from './FeatureSettings.styles';
import { List, ListItem } from '@material-ui/core';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import FeatureSettingsProject from './FeatureSettingsProject/FeatureSettingsProject';
import { useParams } from 'react-router-dom';
-import { IFeatureViewParams } from '../../../../interfaces/params';
+import { IFeatureViewParams } from 'interfaces/params';
import { FeatureSettingsInformation } from './FeatureSettingsInformation/FeatureSettingsInformation';
const METADATA = 'metadata';
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
index 437af86040..2a9b9d2420 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
@@ -1,9 +1,9 @@
import { Typography } from '@material-ui/core';
import { Edit } from '@material-ui/icons';
import { useHistory } from 'react-router-dom';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
-import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
-import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { useStyles } from './FeatureSettingsInformation.style';
interface IFeatureSettingsInformationProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx
index 4041300fad..8b428349ce 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx
@@ -1,16 +1,16 @@
import { useContext, useEffect, useState } from 'react';
import * as jsonpatch from 'fast-json-patch';
import { TextField } from '@material-ui/core';
-import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import FeatureTypeSelect from './FeatureTypeSelect/FeatureTypeSelect';
import { useParams } from 'react-router';
-import AccessContext from '../../../../../contexts/AccessContext';
-import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
-import useToast from '../../../../../hooks/useToast';
-import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import { IFeatureViewParams } from 'interfaces/params';
+import useToast from 'hooks/useToast';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { formatUnknownError } from 'utils/formatUnknownError';
const FeatureSettingsMetadata = () => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx
index 471c2e0a7f..6918730fcc 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx
@@ -1,7 +1,7 @@
-import useFeatureTypes from '../../../../../../hooks/api/getters/useFeatureTypes/useFeatureTypes';
+import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
import GeneralSelect, {
ISelectOption,
-} from '../../../../../common/GeneralSelect/GeneralSelect';
+} from 'component/common/GeneralSelect/GeneralSelect';
const FeatureTypeSelect = ({
// @ts-expect-error
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx
index 71c222c71b..923eeebc93 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx
@@ -1,6 +1,6 @@
-import useProjects from '../../../../../../hooks/api/getters/useProjects/useProjects';
-import { IProject } from '../../../../../../interfaces/project';
-import GeneralSelect from '../../../../../common/GeneralSelect/GeneralSelect';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
+import { IProject } from 'interfaces/project';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
interface IFeatureProjectSelect {
enabled: boolean;
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProject.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProject.tsx
index 8c51566aba..3da4ef023b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProject.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProject.tsx
@@ -1,17 +1,17 @@
import { useContext, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router';
-import AccessContext from '../../../../../contexts/AccessContext';
-import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
-import useToast from '../../../../../hooks/useToast';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
-import { MOVE_FEATURE_TOGGLE } from '../../../../providers/AccessProvider/permissions';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
-import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
+import AccessContext from 'contexts/AccessContext';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import useToast from 'hooks/useToast';
+import { IFeatureViewParams } from 'interfaces/params';
+import { MOVE_FEATURE_TOGGLE } from 'component/providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import FeatureProjectSelect from './FeatureProjectSelect/FeatureProjectSelect';
import FeatureSettingsProjectConfirm from './FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm';
-import { IPermission } from '../../../../../interfaces/user';
-import { useAuthPermissions } from '../../../../../hooks/api/getters/useAuth/useAuthPermissions';
+import { IPermission } from 'interfaces/user';
+import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
import { formatUnknownError } from 'utils/formatUnknownError';
const FeatureSettingsProject = () => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
index d57a4f07dc..cb7e2bbe82 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
@@ -1,13 +1,10 @@
import { List, ListItem } from '@material-ui/core';
import { Check, Error, Cloud } from '@material-ui/icons';
import { useState, useEffect } from 'react';
-import useProject from '../../../../../../hooks/api/getters/useProject/useProject';
-import {
- IFeatureEnvironment,
- IFeatureToggle,
-} from '../../../../../../interfaces/featureToggle';
-import ConditionallyRender from '../../../../../common/ConditionallyRender';
-import Dialogue from '../../../../../common/Dialogue';
+import useProject from 'hooks/api/getters/useProject/useProject';
+import { IFeatureEnvironment, IFeatureToggle } from 'interfaces/featureToggle';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import Dialogue from 'component/common/Dialogue';
import { useStyles } from './FeatureSettingsProjectConfirm.styles';
interface IFeatureSettingsProjectConfirm {
diff --git a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
index 7fa2d08228..062f4969b5 100644
--- a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
@@ -1,6 +1,6 @@
import { useStyles } from './FeatureStatus.styles';
import TimeAgo from 'react-timeago';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { Tooltip, TooltipProps } from '@material-ui/core';
import React from 'react';
diff --git a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
index c5d632591e..8e995c1aea 100644
--- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
@@ -1,7 +1,7 @@
import { useStyles } from './FeatureType.styles';
import { Tooltip } from '@material-ui/core';
import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
-import useFeatureTypes from '../../../../hooks/api/getters/useFeatureTypes/useFeatureTypes';
+import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
interface FeatureTypeProps {
type: string;
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx
index b5f752cdba..d4c66031d9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx
@@ -4,11 +4,11 @@ import { Grid, IconButton, TextField } from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import { useStyles } from './OverrideConfig.styles.js';
import { Autocomplete } from '@material-ui/lab';
-import GeneralSelect from '../../../../../../common/GeneralSelect/GeneralSelect';
-import { useCommonStyles } from '../../../../../../../common.styles';
-import ConditionallyRender from '../../../../../../common/ConditionallyRender';
-import InputListField from '../../../../../../common/InputListField.jsx';
-import useUnleashContext from '../../../../../../../hooks/api/getters/useUnleashContext/useUnleashContext';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import { useCommonStyles } from 'common.styles';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import InputListField from 'component/common/InputListField.jsx';
+import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
export const OverrideConfig = ({
overrides,
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
index 3f4493528f..360f126dc6 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
@@ -13,22 +13,22 @@ import {
import { AddVariant } from './AddFeatureVariant/AddFeatureVariant';
import { useContext, useEffect, useState } from 'react';
-import { useFeature } from '../../../../../hooks/api/getters/useFeature/useFeature';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useParams } from 'react-router';
-import { IFeatureViewParams } from '../../../../../interfaces/params';
-import AccessContext from '../../../../../contexts/AccessContext';
+import { IFeatureViewParams } from 'interfaces/params';
+import AccessContext from 'contexts/AccessContext';
import FeatureVariantListItem from './FeatureVariantsListItem/FeatureVariantsListItem';
-import { UPDATE_FEATURE_VARIANTS } from '../../../../providers/AccessProvider/permissions';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
-import useUnleashContext from '../../../../../hooks/api/getters/useUnleashContext/useUnleashContext';
-import GeneralSelect from '../../../../common/GeneralSelect/GeneralSelect';
-import { IFeatureVariant } from '../../../../../interfaces/featureToggle';
-import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import useToast from '../../../../../hooks/useToast';
-import { updateWeight } from '../../../../common/util';
+import { UPDATE_FEATURE_VARIANTS } from 'component/providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import { IFeatureVariant } from 'interfaces/featureToggle';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import useToast from 'hooks/useToast';
+import { updateWeight } from 'component/common/util';
import cloneDeep from 'lodash.clonedeep';
import useDeleteVariantMarkup from './FeatureVariantsListItem/useDeleteVariantMarkup';
-import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { formatUnknownError } from 'utils/formatUnknownError';
const FeatureOverviewVariants = () => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
index 3d5fb09cbf..bb80b49c36 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
@@ -2,8 +2,8 @@ import { Chip, IconButton, TableCell, TableRow } from '@material-ui/core';
import { Delete, Edit } from '@material-ui/icons';
import styles from '../variants.module.scss';
-import { IFeatureVariant } from '../../../../../../interfaces/featureToggle';
-import ConditionallyRender from '../../../../../common/ConditionallyRender';
+import { IFeatureVariant } from 'interfaces/featureToggle';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { weightTypes } from '../AddFeatureVariant/enums';
interface IFeatureVariantListItem {
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx
index 0abdf6fda3..99c0873b7a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx
@@ -1,5 +1,5 @@
import { Alert } from '@material-ui/lab';
-import Dialogue from '../../../../../common/Dialogue';
+import Dialogue from 'component/common/Dialogue';
interface IUseDeleteVariantMarkupProps {
show: boolean;
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 9cf263e4f9..540851d4fe 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -2,30 +2,30 @@ import { Tab, Tabs, useMediaQuery } from '@material-ui/core';
import React, { useState } from 'react';
import { Archive, FileCopy, Label, WatchLater } from '@material-ui/icons';
import { Link, Route, useHistory, useParams, Switch } from 'react-router-dom';
-import useFeatureApi from '../../../hooks/api/actions/useFeatureApi/useFeatureApi';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
-import useProject from '../../../hooks/api/getters/useProject/useProject';
-import useTabs from '../../../hooks/useTabs';
-import useToast from '../../../hooks/useToast';
+import useProject from 'hooks/api/getters/useProject/useProject';
+import useTabs from 'hooks/useTabs';
+import useToast from 'hooks/useToast';
import { IFeatureViewParams } from 'interfaces/params';
import {
CREATE_FEATURE,
DELETE_FEATURE,
UPDATE_FEATURE,
-} from '../../providers/AccessProvider/permissions';
-import Dialogue from '../../common/Dialogue';
-import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
+} from 'component/providers/AccessProvider/permissions';
+import Dialogue from 'component/common/Dialogue';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import FeatureLog from './FeatureLog/FeatureLog';
import FeatureOverview from './FeatureOverview/FeatureOverview';
import FeatureVariants from './FeatureVariants/FeatureVariants';
import { FeatureMetrics } from './FeatureMetrics/FeatureMetrics';
import { useStyles } from './FeatureView.styles';
import { FeatureSettings } from './FeatureSettings/FeatureSettings';
-import useLoading from '../../../hooks/useLoading';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import useLoading from 'hooks/useLoading';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import StaleDialog from './FeatureOverview/StaleDialog/StaleDialog';
import AddTagDialog from './FeatureOverview/AddTagDialog/AddTagDialog';
-import StatusChip from '../../common/StatusChip/StatusChip';
+import StatusChip from 'component/common/StatusChip/StatusChip';
import { formatUnknownError } from 'utils/formatUnknownError';
import { FeatureNotFound } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound';
diff --git a/frontend/src/component/feature/RedirectFeatureView/RedirectFeatureView.tsx b/frontend/src/component/feature/RedirectFeatureView/RedirectFeatureView.tsx
index b8c786e00a..4c5a2f912b 100644
--- a/frontend/src/component/feature/RedirectFeatureView/RedirectFeatureView.tsx
+++ b/frontend/src/component/feature/RedirectFeatureView/RedirectFeatureView.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { Redirect, useParams } from 'react-router-dom';
-import { useFeatures } from '../../../hooks/api/getters/useFeatures/useFeatures';
-import { IFeatureToggle } from '../../../interfaces/featureToggle';
+import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
+import { IFeatureToggle } from 'interfaces/featureToggle';
import { getTogglePath } from 'utils/routePathHelpers';
interface IRedirectParams {
diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx
index 7ee554755d..b521c4bb4d 100644
--- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx
+++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx
@@ -4,12 +4,12 @@ import { IconButton, TextField } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';
import { Delete } from '@material-ui/icons';
-import InputListField from '../../../common/InputListField';
-import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
-import { useCommonStyles } from '../../../../common.styles';
+import InputListField from 'component/common/InputListField';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useCommonStyles } from 'common.styles';
import { useStyles } from './StrategyConstraintInputField.styles';
-import { CONSTRAINT_AUTOCOMPLETE_ID } from '../../../../testIds';
-import GeneralSelect from '../../../common/GeneralSelect/GeneralSelect';
+import { CONSTRAINT_AUTOCOMPLETE_ID } from 'testIds';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
const constraintOperators = [
{ key: 'IN', label: 'IN' },
diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx b/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx
index acaf0a53c2..27aba08bf0 100644
--- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx
+++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx
@@ -1,10 +1,10 @@
import { Button, Tooltip, Typography } from '@material-ui/core';
import { Info } from '@material-ui/icons';
-import { IConstraint } from '../../../interfaces/strategy';
-import { useCommonStyles } from '../../../common.styles';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
-import { C } from '../../common/flags';
-import useUnleashContext from '../../../hooks/api/getters/useUnleashContext/useUnleashContext';
+import { IConstraint } from 'interfaces/strategy';
+import { useCommonStyles } from 'common.styles';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { C } from 'component/common/flags';
+import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import StrategyConstraintInputField from './StrategyConstraintInputField';
import React, { useEffect } from 'react';
import cloneDeep from 'lodash.clonedeep';
diff --git a/frontend/src/component/feature/StrategyTypes/DefaultStrategy/DefaultStrategy.tsx b/frontend/src/component/feature/StrategyTypes/DefaultStrategy/DefaultStrategy.tsx
index aa853f05c3..cfcb5aadd6 100644
--- a/frontend/src/component/feature/StrategyTypes/DefaultStrategy/DefaultStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/DefaultStrategy/DefaultStrategy.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { IStrategy } from '../../../../interfaces/strategy';
+import { IStrategy } from 'interfaces/strategy';
interface IDefaultStrategyProps {
strategyDefinition: IStrategy;
diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
index 4e07eec9a2..f6d3e876bd 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
@@ -1,15 +1,15 @@
import { Tooltip, Typography } from '@material-ui/core';
import { Info } from '@material-ui/icons';
-import { IParameter } from '../../../../interfaces/strategy';
+import { IParameter } from 'interfaces/strategy';
import RolloutSlider from '../RolloutSlider/RolloutSlider';
-import Select from '../../../common/select';
+import Select from 'component/common/select';
import React from 'react';
-import Input from '../../../common/Input/Input';
+import Input from 'component/common/Input/Input';
import {
FLEXIBLE_STRATEGY_GROUP_ID,
FLEXIBLE_STRATEGY_STICKINESS_ID,
-} from '../../../../testIds';
+} from 'testIds';
const builtInStickinessOptions = [
{ key: 'default', label: 'default' },
diff --git a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
index bde9a391ef..145c7b208e 100644
--- a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
@@ -7,7 +7,7 @@ import {
} from '@material-ui/core';
import StrategyInputList from '../StrategyInputList/StrategyInputList';
import RolloutSlider from '../RolloutSlider/RolloutSlider';
-import { IParameter, IStrategy } from '../../../../interfaces/strategy';
+import { IParameter, IStrategy } from 'interfaces/strategy';
import { useStyles } from './GeneralStrategy.styles';
interface IGeneralStrategyProps {
diff --git a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
index 7a8ef0d71d..fe66c1999f 100644
--- a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
+++ b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
@@ -1,6 +1,6 @@
import { makeStyles, withStyles } from '@material-ui/core/styles';
import { Slider, Typography } from '@material-ui/core';
-import { ROLLOUT_SLIDER_ID } from '../../../../testIds';
+import { ROLLOUT_SLIDER_ID } from 'testIds';
import React from 'react';
const StyledSlider = withStyles({
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
index 87921303ff..c1d07ef2fd 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
@@ -1,11 +1,8 @@
import React, { ChangeEvent, useState } from 'react';
import { Button, Chip, TextField, Typography } from '@material-ui/core';
import { Add } from '@material-ui/icons';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import {
- ADD_TO_STRATEGY_INPUT_LIST,
- STRATEGY_INPUT_LIST,
-} from '../../../../testIds';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'testIds';
interface IStrategyInputList {
name: string;
diff --git a/frontend/src/component/feature/StrategyTypes/UserWithIdStrategy/UserWithId.tsx b/frontend/src/component/feature/StrategyTypes/UserWithIdStrategy/UserWithId.tsx
index 6e6d0d51e2..8ee27ca09c 100644
--- a/frontend/src/component/feature/StrategyTypes/UserWithIdStrategy/UserWithId.tsx
+++ b/frontend/src/component/feature/StrategyTypes/UserWithIdStrategy/UserWithId.tsx
@@ -1,4 +1,4 @@
-import { IParameter } from '../../../../interfaces/strategy';
+import { IParameter } from 'interfaces/strategy';
import StrategyInputList from '../StrategyInputList/StrategyInputList';
interface IUserWithIdStrategyProps {
diff --git a/frontend/src/component/feature/hooks/useFeatureForm.ts b/frontend/src/component/feature/hooks/useFeatureForm.ts
index 4848f04a15..7894333925 100644
--- a/frontend/src/component/feature/hooks/useFeatureForm.ts
+++ b/frontend/src/component/feature/hooks/useFeatureForm.ts
@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
-import useFeatureApi from '../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import useQueryParams from '../../../hooks/useQueryParams';
-import { IFeatureViewParams } from '../../../interfaces/params';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import useQueryParams from 'hooks/useQueryParams';
+import { IFeatureViewParams } from 'interfaces/params';
const useFeatureForm = (
initialName = '',
diff --git a/frontend/src/component/history/EventHistory/EventHistory.tsx b/frontend/src/component/history/EventHistory/EventHistory.tsx
index ec989e9348..624a9bb627 100644
--- a/frontend/src/component/history/EventHistory/EventHistory.tsx
+++ b/frontend/src/component/history/EventHistory/EventHistory.tsx
@@ -1,5 +1,5 @@
import EventLog from '../EventLog';
-import { useEvents } from '../../../hooks/api/getters/useEvents/useEvents';
+import { useEvents } from 'hooks/api/getters/useEvents/useEvents';
export const EventHistory = () => {
const { events } = useEvents();
diff --git a/frontend/src/component/history/EventHistoryPage/EventHistoryPage.tsx b/frontend/src/component/history/EventHistoryPage/EventHistoryPage.tsx
index 0e6736dbde..ff2b4b2b86 100644
--- a/frontend/src/component/history/EventHistoryPage/EventHistoryPage.tsx
+++ b/frontend/src/component/history/EventHistoryPage/EventHistoryPage.tsx
@@ -1,8 +1,8 @@
import { Alert } from '@material-ui/lab';
import React, { useContext } from 'react';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
-import ConditionallyRender from '../../common/ConditionallyRender';
-import AccessContext from '../../../contexts/AccessContext';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
import { EventHistory } from '../EventHistory/EventHistory';
export const EventHistoryPage = () => {
diff --git a/frontend/src/component/history/EventLog/EventCard/EventCard.jsx b/frontend/src/component/history/EventLog/EventCard/EventCard.jsx
index c34fb13800..5f7bbd2a9f 100644
--- a/frontend/src/component/history/EventLog/EventCard/EventCard.jsx
+++ b/frontend/src/component/history/EventLog/EventCard/EventCard.jsx
@@ -1,7 +1,7 @@
import EventDiff from './EventDiff/EventDiff';
import { useStyles } from './EventCard.styles';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
const EventCard = ({ entry, timeFormatted }) => {
const styles = useStyles();
diff --git a/frontend/src/component/history/EventLog/EventLog.jsx b/frontend/src/component/history/EventLog/EventLog.jsx
index ea22aa9d43..b6cecc5f54 100644
--- a/frontend/src/component/history/EventLog/EventLog.jsx
+++ b/frontend/src/component/history/EventLog/EventLog.jsx
@@ -1,11 +1,11 @@
import { List, Switch, FormControlLabel } from '@material-ui/core';
import PropTypes from 'prop-types';
import EventJson from './EventJson/EventJson';
-import PageContent from '../../common/PageContent/PageContent';
-import HeaderTitle from '../../common/HeaderTitle';
+import PageContent from 'component/common/PageContent/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
import EventCard from './EventCard/EventCard';
import { useStyles } from './EventLog.styles.js';
-import { formatDateYMDHMS } from '../../../utils/formatDate';
+import { formatDateYMDHMS } from 'utils/formatDate';
const EventLog = ({
title,
diff --git a/frontend/src/component/history/EventLog/index.tsx b/frontend/src/component/history/EventLog/index.tsx
index 4e28a44ea3..2709266b51 100644
--- a/frontend/src/component/history/EventLog/index.tsx
+++ b/frontend/src/component/history/EventLog/index.tsx
@@ -1,6 +1,6 @@
import EventLog from './EventLog';
-import { useEventSettings } from '../../../hooks/useEventSettings';
-import { useLocationSettings } from '../../../hooks/useLocationSettings';
+import { useEventSettings } from 'hooks/useEventSettings';
+import { useLocationSettings } from 'hooks/useLocationSettings';
interface IEventLogContainerProps {
title: string;
diff --git a/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.jsx b/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.jsx
index eac9a008a7..7ddb32fa53 100644
--- a/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.jsx
+++ b/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.jsx
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import EventLog from '../EventLog';
-import { useFeatureEvents } from '../../../hooks/api/getters/useFeatureEvents/useFeatureEvents';
+import { useFeatureEvents } from 'hooks/api/getters/useFeatureEvents/useFeatureEvents';
export const FeatureEventHistory = ({ toggleName }) => {
const { events } = useFeatureEvents(toggleName);
diff --git a/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx b/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx
index ebf4b8754d..17a5b34551 100644
--- a/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx
+++ b/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx
@@ -1,4 +1,4 @@
-import ConditionallyRender from '../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { matchPath } from 'react-router';
import { useLocation } from 'react-router-dom';
import { MainLayout } from '../MainLayout/MainLayout';
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 19a7b0e087..7d0ee7a418 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -2,13 +2,13 @@ import React, { ReactNode } from 'react';
import classnames from 'classnames';
import { makeStyles } from '@material-ui/core/styles';
import { Grid } from '@material-ui/core';
-import styles from '../../styles.module.scss';
-import Header from '../../menu/Header/Header';
-import Footer from '../../menu/Footer/Footer';
-import Proclamation from '../../common/Proclamation/Proclamation';
-import BreadcrumbNav from '../../common/BreadcrumbNav/BreadcrumbNav';
-import { ReactComponent as Texture } from '../../../assets/img/texture.svg';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
+import styles from 'component/styles.module.scss';
+import Header from 'component/menu/Header/Header';
+import Footer from 'component/menu/Footer/Footer';
+import Proclamation from 'component/common/Proclamation/Proclamation';
+import BreadcrumbNav from 'component/common/BreadcrumbNav/BreadcrumbNav';
+import { ReactComponent as Texture } from 'assets/img/texture.svg';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
const useStyles = makeStyles(theme => ({
container: {
diff --git a/frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx b/frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx
index ed9bacc4ec..5b656bee7d 100644
--- a/frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx
+++ b/frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx
@@ -1,5 +1,5 @@
import { ReactElement } from 'react';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import {
formatCurrentVersion,
formatUpdateNotification,
diff --git a/frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx b/frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx
index 92b1652d47..6ccaa333df 100644
--- a/frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx
+++ b/frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx
@@ -1,4 +1,4 @@
-import { IVersionInfo } from '../../../../interfaces/uiConfig';
+import { IVersionInfo } from 'interfaces/uiConfig';
export interface IPartialUiConfig {
name: string;
diff --git a/frontend/src/component/menu/Footer/Footer.jsx b/frontend/src/component/menu/Footer/Footer.jsx
index 9801f5fa7d..e8ee99dc83 100644
--- a/frontend/src/component/menu/Footer/Footer.jsx
+++ b/frontend/src/component/menu/Footer/Footer.jsx
@@ -1,7 +1,7 @@
/* eslint-disable react/jsx-no-target-blank */
import { List, ListItem, ListItemText, Grid } from '@material-ui/core';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ApiDetails } from './ApiDetails/ApiDetails';
import { useStyles } from './Footer.styles';
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index e169ffa229..790ca05bb9 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -6,21 +6,21 @@ import { AppBar, Container, IconButton, Tooltip } from '@material-ui/core';
import { DrawerMenu } from '../drawer';
import MenuIcon from '@material-ui/icons/Menu';
import SettingsIcon from '@material-ui/icons/Settings';
-import UserProfile from '../../user/UserProfile';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+import UserProfile from 'component/user/UserProfile';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
import MenuBookIcon from '@material-ui/icons/MenuBook';
import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
import { useStyles } from './Header.styles';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
-import { useCommonStyles } from '../../../common.styles';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
-import { IPermission } from '../../../interfaces/user';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useCommonStyles } from 'common.styles';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import { IPermission } from 'interfaces/user';
import NavigationMenu from './NavigationMenu/NavigationMenu';
import { getRoutes } from '../routes';
import { KeyboardArrowDown } from '@material-ui/icons';
-import { filterByFlags } from '../../common/util';
-import { useAuthPermissions } from '../../../hooks/api/getters/useAuth/useAuthPermissions';
+import { filterByFlags } from 'component/common/util';
+import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
const Header = () => {
const theme = useTheme();
diff --git a/frontend/src/component/menu/__tests__/footerTest.jsx b/frontend/src/component/menu/__tests__/footerTest.jsx
index 5e359a6b9b..68fc32e20a 100644
--- a/frontend/src/component/menu/__tests__/footerTest.jsx
+++ b/frontend/src/component/menu/__tests__/footerTest.jsx
@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core';
import Footer from '../Footer/Footer';
-import theme from '../../../themes/mainTheme';
+import theme from 'themes/mainTheme';
test('should render DrawerMenu', () => {
const tree = renderer.create(
diff --git a/frontend/src/component/menu/drawer.jsx b/frontend/src/component/menu/drawer.jsx
index 74baa83a12..f42f05f8ef 100644
--- a/frontend/src/component/menu/drawer.jsx
+++ b/frontend/src/component/menu/drawer.jsx
@@ -7,10 +7,10 @@ import ExitToApp from '@material-ui/icons/ExitToApp';
import styles from './drawer.module.scss';
-import { ReactComponent as LogoIcon } from '../../assets/icons/logoBg.svg';
+import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
import NavigationLink from './Header/NavigationLink/NavigationLink';
-import ConditionallyRender from '../common/ConditionallyRender';
-import { getBasePath } from '../../utils/formatPath';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { getBasePath } from 'utils/formatPath';
export const DrawerMenu = ({
links = [],
diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js
index eb6d13d55f..e00d003785 100644
--- a/frontend/src/component/menu/routes.js
+++ b/frontend/src/component/menu/routes.js
@@ -1,53 +1,53 @@
-import { FeatureToggleListContainer } from '../feature/FeatureToggleList/FeatureToggleListContainer';
-import { StrategyView } from '../strategies/StrategyView/StrategyView';
-import { StrategiesList } from '../strategies/StrategiesList/StrategiesList';
-import { ArchiveListContainer } from '../archive/ArchiveListContainer';
-import { TagTypeList } from '../tags/TagTypeList/TagTypeList';
-import { AddonList } from '../addons/AddonList/AddonList';
-import Admin from '../admin';
-import AdminApi from '../admin/api';
-import AdminInvoice from '../admin/invoice/InvoiceAdminPage';
-import AdminUsers from '../admin/users/UsersAdmin';
-import { AuthSettings } from '../admin/auth/AuthSettings';
-import Login from '../user/Login/Login';
-import { C, E, EEA, P, RE, SE } from '../common/flags';
-import { NewUser } from '../user/NewUser/NewUser';
-import ResetPassword from '../user/ResetPassword/ResetPassword';
-import ForgottenPassword from '../user/ForgottenPassword/ForgottenPassword';
-import { ProjectListNew } from '../project/ProjectList/ProjectList';
-import Project from '../project/Project/Project';
-import RedirectArchive from '../archive/RedirectArchive';
-import EnvironmentList from '../environments/EnvironmentList/EnvironmentList';
-import { FeatureView } from '../feature/FeatureView/FeatureView';
-import ProjectRoles from '../admin/projectRoles/ProjectRoles/ProjectRoles';
-import CreateProjectRole from '../admin/projectRoles/CreateProjectRole/CreateProjectRole';
-import EditProjectRole from '../admin/projectRoles/EditProjectRole/EditProjectRole';
-import CreateUser from '../admin/users/CreateUser/CreateUser';
-import EditUser from '../admin/users/EditUser/EditUser';
-import { CreateApiToken } from '../admin/apiToken/CreateApiToken/CreateApiToken';
-import CreateEnvironment from '../environments/CreateEnvironment/CreateEnvironment';
-import EditEnvironment from '../environments/EditEnvironment/EditEnvironment';
-import { CreateContext } from '../context/CreateContext/CreateContext';
-import { EditContext } from '../context/EditContext/EditContext';
-import EditTagType from '../tags/EditTagType/EditTagType';
-import CreateTagType from '../tags/CreateTagType/CreateTagType';
-import EditProject from '../project/Project/EditProject/EditProject';
-import CreateProject from '../project/Project/CreateProject/CreateProject';
-import CreateFeature from '../feature/CreateFeature/CreateFeature';
-import EditFeature from '../feature/EditFeature/EditFeature';
-import { ApplicationEdit } from '../application/ApplicationEdit/ApplicationEdit';
-import { ApplicationList } from '../application/ApplicationList/ApplicationList';
-import ContextList from '../context/ContextList/ContextList';
-import RedirectFeatureView from '../feature/RedirectFeatureView/RedirectFeatureView';
-import { CreateAddon } from '../addons/CreateAddon/CreateAddon';
-import { EditAddon } from '../addons/EditAddon/EditAddon';
-import { CopyFeatureToggle } from '../feature/CopyFeature/CopyFeature';
-import { EventHistoryPage } from '../history/EventHistoryPage/EventHistoryPage';
-import { FeatureEventHistoryPage } from '../history/FeatureEventHistoryPage/FeatureEventHistoryPage';
-import { CreateStrategy } from '../strategies/CreateStrategy/CreateStrategy';
-import { EditStrategy } from '../strategies/EditStrategy/EditStrategy';
-import { SegmentsList } from '../segments/SegmentList/SegmentList';
-import { SplashPage } from '../splash/SplashPage/SplashPage';
+import { FeatureToggleListContainer } from 'component/feature/FeatureToggleList/FeatureToggleListContainer';
+import { StrategyView } from 'component/strategies/StrategyView/StrategyView';
+import { StrategiesList } from 'component/strategies/StrategiesList/StrategiesList';
+import { ArchiveListContainer } from 'component/archive/ArchiveListContainer';
+import { TagTypeList } from 'component/tags/TagTypeList/TagTypeList';
+import { AddonList } from 'component/addons/AddonList/AddonList';
+import Admin from 'component/admin';
+import AdminApi from 'component/admin/api';
+import AdminInvoice from 'component/admin/invoice/InvoiceAdminPage';
+import AdminUsers from 'component/admin/users/UsersAdmin';
+import { AuthSettings } from 'component/admin/auth/AuthSettings';
+import Login from 'component/user/Login/Login';
+import { C, E, EEA, P, RE, SE } from 'component/common/flags';
+import { NewUser } from 'component/user/NewUser/NewUser';
+import ResetPassword from 'component/user/ResetPassword/ResetPassword';
+import ForgottenPassword from 'component/user/ForgottenPassword/ForgottenPassword';
+import { ProjectListNew } from 'component/project/ProjectList/ProjectList';
+import Project from 'component/project/Project/Project';
+import RedirectArchive from 'component/archive/RedirectArchive';
+import EnvironmentList from 'component/environments/EnvironmentList/EnvironmentList';
+import { FeatureView } from 'component/feature/FeatureView/FeatureView';
+import ProjectRoles from 'component/admin/projectRoles/ProjectRoles/ProjectRoles';
+import CreateProjectRole from 'component/admin/projectRoles/CreateProjectRole/CreateProjectRole';
+import EditProjectRole from 'component/admin/projectRoles/EditProjectRole/EditProjectRole';
+import CreateUser from 'component/admin/users/CreateUser/CreateUser';
+import EditUser from 'component/admin/users/EditUser/EditUser';
+import { CreateApiToken } from 'component/admin/apiToken/CreateApiToken/CreateApiToken';
+import CreateEnvironment from 'component/environments/CreateEnvironment/CreateEnvironment';
+import EditEnvironment from 'component/environments/EditEnvironment/EditEnvironment';
+import { CreateContext } from 'component/context/CreateContext/CreateContext';
+import { EditContext } from 'component/context/EditContext/EditContext';
+import EditTagType from 'component/tags/EditTagType/EditTagType';
+import CreateTagType from 'component/tags/CreateTagType/CreateTagType';
+import EditProject from 'component/project/Project/EditProject/EditProject';
+import CreateProject from 'component/project/Project/CreateProject/CreateProject';
+import CreateFeature from 'component/feature/CreateFeature/CreateFeature';
+import EditFeature from 'component/feature/EditFeature/EditFeature';
+import { ApplicationEdit } from 'component/application/ApplicationEdit/ApplicationEdit';
+import { ApplicationList } from 'component/application/ApplicationList/ApplicationList';
+import ContextList from 'component/context/ContextList/ContextList';
+import RedirectFeatureView from 'component/feature/RedirectFeatureView/RedirectFeatureView';
+import { CreateAddon } from 'component/addons/CreateAddon/CreateAddon';
+import { EditAddon } from 'component/addons/EditAddon/EditAddon';
+import { CopyFeatureToggle } from 'component/feature/CopyFeature/CopyFeature';
+import { EventHistoryPage } from 'component/history/EventHistoryPage/EventHistoryPage';
+import { FeatureEventHistoryPage } from 'component/history/FeatureEventHistoryPage/FeatureEventHistoryPage';
+import { CreateStrategy } from 'component/strategies/CreateStrategy/CreateStrategy';
+import { EditStrategy } from 'component/strategies/EditStrategy/EditStrategy';
+import { SegmentsList } from 'component/segments/SegmentList/SegmentList';
+import { SplashPage } from 'component/splash/SplashPage/SplashPage';
export const routes = [
// Splash
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 728956a60b..7d6e7fca7c 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -1,22 +1,22 @@
import { useHistory, useParams } from 'react-router';
-import useProject from '../../../hooks/api/getters/useProject/useProject';
-import useLoading from '../../../hooks/useLoading';
-import ApiError from '../../common/ApiError/ApiError';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import useProject from 'hooks/api/getters/useProject/useProject';
+import useLoading from 'hooks/useLoading';
+import ApiError from 'component/common/ApiError/ApiError';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from './Project.styles';
import { Tab, Tabs } from '@material-ui/core';
import { Edit } from '@material-ui/icons';
-import useToast from '../../../hooks/useToast';
-import useQueryParams from '../../../hooks/useQueryParams';
+import useToast from 'hooks/useToast';
+import useQueryParams from 'hooks/useQueryParams';
import { useEffect } from 'react';
-import useTabs from '../../../hooks/useTabs';
-import TabPanel from '../../common/TabNav/TabPanel';
+import useTabs from 'hooks/useTabs';
+import TabPanel from 'component/common/TabNav/TabPanel';
import { ProjectAccess } from '../ProjectAccess/ProjectAccess';
import ProjectEnvironment from '../ProjectEnvironment/ProjectEnvironment';
import ProjectOverview from './ProjectOverview';
import ProjectHealth from './ProjectHealth/ProjectHealth';
-import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
-import { UPDATE_PROJECT } from '../../providers/AccessProvider/permissions';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
const Project = () => {
const { id, activeTab } = useParams<{ id: string; activeTab: string }>();
diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index 9fcc293c6a..0f6dcf5626 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -1,8 +1,8 @@
-import Input from '../../../common/Input/Input';
+import Input from 'component/common/Input/Input';
import { TextField, Button } from '@material-ui/core';
import { useStyles } from './ProjectForm.styles';
import React from 'react';
-import { trim } from '../../../common/util';
+import { trim } from 'component/common/util';
interface IProjectForm {
projectId: string;
diff --git a/frontend/src/component/project/Project/ProjectHealth/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectHealth/ProjectHealth.tsx
index 99dd106dfa..21489200bd 100644
--- a/frontend/src/component/project/Project/ProjectHealth/ProjectHealth.tsx
+++ b/frontend/src/component/project/Project/ProjectHealth/ProjectHealth.tsx
@@ -1,8 +1,8 @@
-import { useHealthReport } from '../../../../hooks/api/getters/useHealthReport/useHealthReport';
-import ApiError from '../../../common/ApiError/ApiError';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import ReportToggleList from '../../../Reporting/ReportToggleList/ReportToggleList';
-import { ReportCard } from '../../../Reporting/ReportCard/ReportCard';
+import { useHealthReport } from 'hooks/api/getters/useHealthReport/useHealthReport';
+import ApiError from 'component/common/ApiError/ApiError';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import ReportToggleList from 'component/Reporting/ReportToggleList/ReportToggleList';
+import { ReportCard } from 'component/Reporting/ReportCard/ReportCard';
interface ProjectHealthProps {
projectId: string;
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
index 8a94309fe8..4f582b6c7b 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
@@ -4,18 +4,18 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import classnames from 'classnames';
import { Edit, ExpandMore } from '@material-ui/icons';
-import { useCommonStyles } from '../../../../common.styles';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import PercentageCircle from '../../../common/PercentageCircle/PercentageCircle';
-import PermissionIconButton from '../../../common/PermissionIconButton/PermissionIconButton';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import { useCommonStyles } from 'common.styles';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import {
Accordion,
AccordionActions,
AccordionDetails,
AccordionSummary,
} from '@material-ui/core';
-import { UPDATE_PROJECT } from '../../../providers/AccessProvider/permissions';
+import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
interface IProjectInfoProps {
id: string;
diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
index a61d8c7481..c84608cdc1 100644
--- a/frontend/src/component/project/Project/ProjectOverview.tsx
+++ b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -1,4 +1,4 @@
-import useProject from '../../../hooks/api/getters/useProject/useProject';
+import useProject from 'hooks/api/getters/useProject/useProject';
import { ProjectFeatureToggles } from './ProjectFeatureToggles/ProjectFeatureToggles';
import ProjectInfo from './ProjectInfo/ProjectInfo';
import { useStyles } from './Project.styles';
diff --git a/frontend/src/component/project/Project/hooks/useProjectForm.ts b/frontend/src/component/project/Project/hooks/useProjectForm.ts
index 946d5cf4ae..8ffee53f3a 100644
--- a/frontend/src/component/project/Project/hooks/useProjectForm.ts
+++ b/frontend/src/component/project/Project/hooks/useProjectForm.ts
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import useProjectApi from '../../../../hooks/api/actions/useProjectApi/useProjectApi';
+import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
const useProjectForm = (
initialProjectId = '',
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
index 457467e8da..f308602efa 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
@@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { Alert } from '@material-ui/lab';
import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
-import PageContent from '../../common/PageContent';
+import PageContent from 'component/common/PageContent';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useStyles } from './ProjectAccess.styles';
import { useParams } from 'react-router-dom';
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx
index c396caa35c..edf620a96b 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx
@@ -10,14 +10,14 @@ import { Search } from '@material-ui/icons';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { Alert } from '@material-ui/lab';
import { ProjectRoleSelect } from '../ProjectRoleSelect/ProjectRoleSelect';
-import useProjectApi from '../../../../hooks/api/actions/useProjectApi/useProjectApi';
+import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
import { useParams } from 'react-router-dom';
-import useToast from '../../../../hooks/useToast';
+import useToast from 'hooks/useToast';
import useProjectAccess, {
IProjectAccessUser,
-} from '../../../../hooks/api/getters/useProjectAccess/useProjectAccess';
-import { IProjectRole } from '../../../../interfaces/role';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+} from 'hooks/api/getters/useProjectAccess/useProjectAccess';
+import { IProjectRole } from 'interfaces/role';
+import ConditionallyRender from 'component/common/ConditionallyRender';
interface IProjectAccessAddUserProps {
roles: IProjectRole[];
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
index 7539e1e135..56c4cf5790 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
@@ -15,7 +15,7 @@ import {
import { IProjectViewParams } from 'interfaces/params';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
-import { ProjectRoleSelect } from '../../ProjectRoleSelect/ProjectRoleSelect';
+import { ProjectRoleSelect } from 'component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect';
import { useStyles } from '../ProjectAccessListItem/ProjectAccessListItem.styles';
import React from 'react';
diff --git a/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx b/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx
index c8f7dcf257..ba091df875 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx
@@ -1,6 +1,6 @@
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
import React from 'react';
-import { IProjectRole } from '../../../../interfaces/role';
+import { IProjectRole } from 'interfaces/role';
import { useStyles } from '../ProjectAccess.styles';
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
index 8c677bbda1..f5aa8c949e 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
@@ -1,7 +1,7 @@
import { Card, Menu, MenuItem } from '@material-ui/core';
import { useStyles } from './ProjectCard.styles';
import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { ReactComponent as ProjectIcon } from '../../../assets/icons/projectIcon.svg';
+import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import Dialogue from 'component/common/Dialogue';
diff --git a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
index 02e537ced6..5a6ba71c5a 100644
--- a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
@@ -1,9 +1,9 @@
import { Alert } from '@material-ui/lab';
import React from 'react';
-import Dialogue from '../../../common/Dialogue';
-import Input from '../../../common/Input/Input';
+import Dialogue from 'component/common/Dialogue';
+import Input from 'component/common/Input/Input';
import { useStyles } from './EnvironmentDisableConfirm.styles';
-import { IProjectEnvironment } from '../../../../interfaces/environments';
+import { IProjectEnvironment } from 'interfaces/environments';
interface IEnvironmentDisableConfirmProps {
env?: IProjectEnvironment;
diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
index 4a6d835d43..266897fde9 100644
--- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
@@ -1,24 +1,24 @@
import { useEffect, useState } from 'react';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from './ProjectEnvironment.styles';
-import useLoading from '../../../hooks/useLoading';
-import PageContent from '../../common/PageContent';
-import HeaderTitle from '../../common/HeaderTitle';
-import { UPDATE_PROJECT } from '../../providers/AccessProvider/permissions';
+import useLoading from 'hooks/useLoading';
+import PageContent from 'component/common/PageContent';
+import HeaderTitle from 'component/common/HeaderTitle';
+import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
-import ApiError from '../../common/ApiError/ApiError';
-import useToast from '../../../hooks/useToast';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
-import { useEnvironments } from '../../../hooks/api/getters/useEnvironments/useEnvironments';
-import useProject from '../../../hooks/api/getters/useProject/useProject';
+import ApiError from 'component/common/ApiError/ApiError';
+import useToast from 'hooks/useToast';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
+import useProject from 'hooks/api/getters/useProject/useProject';
import { FormControlLabel, FormGroup } from '@material-ui/core';
-import useProjectApi from '../../../hooks/api/actions/useProjectApi/useProjectApi';
+import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
import EnvironmentDisableConfirm from './EnvironmentDisableConfirm/EnvironmentDisableConfirm';
import { Link } from 'react-router-dom';
import { Alert } from '@material-ui/lab';
-import PermissionSwitch from '../../common/PermissionSwitch/PermissionSwitch';
-import { IProjectEnvironment } from '../../../interfaces/environments';
+import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
+import { IProjectEnvironment } from 'interfaces/environments';
import { getEnabledEnvs } from './helpers';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { useCommonStyles } from 'common.styles';
diff --git a/frontend/src/component/project/ProjectEnvironment/helpers.ts b/frontend/src/component/project/ProjectEnvironment/helpers.ts
index ac422eff26..06d9e9f318 100644
--- a/frontend/src/component/project/ProjectEnvironment/helpers.ts
+++ b/frontend/src/component/project/ProjectEnvironment/helpers.ts
@@ -1,4 +1,4 @@
-import { IProjectEnvironment } from '../../../interfaces/environments';
+import { IProjectEnvironment } from 'interfaces/environments';
export const getEnabledEnvs = (envs: IProjectEnvironment[]) => {
return envs.reduce((enabledEnvs, currentEnv) => {
diff --git a/frontend/src/component/providers/AccessProvider/AccessProvider.tsx b/frontend/src/component/providers/AccessProvider/AccessProvider.tsx
index 6ee47f0937..28b27c7ae4 100644
--- a/frontend/src/component/providers/AccessProvider/AccessProvider.tsx
+++ b/frontend/src/component/providers/AccessProvider/AccessProvider.tsx
@@ -1,8 +1,8 @@
import { ReactElement, ReactNode, useCallback, useMemo } from 'react';
-import AccessContext, { IAccessContext } from '../../../contexts/AccessContext';
+import AccessContext, { IAccessContext } from 'contexts/AccessContext';
import { ADMIN } from './permissions';
-import { IPermission } from '../../../interfaces/user';
-import { useAuthPermissions } from '../../../hooks/api/getters/useAuth/useAuthPermissions';
+import { IPermission } from 'interfaces/user';
+import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
interface IAccessProviderProps {
children: ReactNode;
diff --git a/frontend/src/component/providers/SWRProvider/SWRProvider.tsx b/frontend/src/component/providers/SWRProvider/SWRProvider.tsx
index ffb5b85c79..35fc42c88f 100644
--- a/frontend/src/component/providers/SWRProvider/SWRProvider.tsx
+++ b/frontend/src/component/providers/SWRProvider/SWRProvider.tsx
@@ -1,9 +1,9 @@
import { mutate, SWRConfig, useSWRConfig } from 'swr';
import { useHistory } from 'react-router';
-import useToast from '../../../hooks/useToast';
+import useToast from 'hooks/useToast';
import { formatApiPath } from 'utils/formatPath';
import React from 'react';
-import { USER_ENDPOINT_PATH } from '../../../hooks/api/getters/useAuth/useAuthEndpoint';
+import { USER_ENDPOINT_PATH } from 'hooks/api/getters/useAuth/useAuthEndpoint';
interface ISWRProviderProps {
isUnauthorized: () => boolean;
diff --git a/frontend/src/component/providers/UIProvider/UIProvider.tsx b/frontend/src/component/providers/UIProvider/UIProvider.tsx
index fcd68e8d61..75e53a255a 100644
--- a/frontend/src/component/providers/UIProvider/UIProvider.tsx
+++ b/frontend/src/component/providers/UIProvider/UIProvider.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
-import UIContext, { createEmptyToast } from '../../../contexts/UIContext';
-import { IToast } from '../../../interfaces/toast';
+import UIContext, { createEmptyToast } from 'contexts/UIContext';
+import { IToast } from 'interfaces/toast';
const UIProvider: React.FC = ({ children }) => {
const [toastData, setToast] = useState(createEmptyToast());
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.test.jsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.test.jsx
index c6f5a439d4..ffc9389b40 100644
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.test.jsx
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.test.jsx
@@ -2,10 +2,10 @@ import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core';
import { StrategiesList } from './StrategiesList';
import renderer from 'react-test-renderer';
-import theme from '../../../themes/mainTheme';
-import AccessProvider from '../../providers/AccessProvider/AccessProvider';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
-import UIProvider from '../../providers/UIProvider/UIProvider';
+import theme from 'themes/mainTheme';
+import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import UIProvider from 'component/providers/UIProvider/UIProvider';
test('renders correctly with one strategy', () => {
const strategy = {
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
index 37aa1cc1b8..fe1017abe3 100644
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
@@ -21,7 +21,7 @@ import {
CREATE_STRATEGY,
DELETE_STRATEGY,
UPDATE_STRATEGY,
-} from '../../providers/AccessProvider/permissions';
+} from 'component/providers/AccessProvider/permissions';
import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
import PageContent from 'component/common/PageContent/PageContent';
import HeaderTitle from 'component/common/HeaderTitle';
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
index fbebee88c5..057d988126 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
+++ b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
@@ -1,8 +1,8 @@
-import Input from '../../common/Input/Input';
+import Input from 'component/common/Input/Input';
import { Button } from '@material-ui/core';
import { useStyles } from './StrategyForm.styles';
import { Add } from '@material-ui/icons';
-import { trim } from '../../common/util';
+import { trim } from 'component/common/util';
import { StrategyParameters } from './StrategyParameters/StrategyParameters';
import { ICustomStrategyParameter } from 'interfaces/strategy';
import React from 'react';
diff --git a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
index ad85bc7281..944f772919 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
@@ -10,7 +10,7 @@ import { Add, RadioButtonChecked } from '@material-ui/icons';
import { AppsLinkList } from 'component/common';
import ConditionallyRender from 'component/common/ConditionallyRender';
import styles from '../../strategies.module.scss';
-import { TogglesLinkList } from '../../TogglesLinkList/TogglesLinkList';
+import { TogglesLinkList } from 'component/strategies/TogglesLinkList/TogglesLinkList';
import { IParameter, IStrategy } from 'interfaces/strategy';
import { IApplication } from 'interfaces/application';
import { IFeatureToggle } from 'interfaces/featureToggle';
diff --git a/frontend/src/component/strategies/StrategyView/StrategyView.test.jsx b/frontend/src/component/strategies/StrategyView/StrategyView.test.jsx
index 63163d82ea..cbe999105d 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyView.test.jsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyView.test.jsx
@@ -3,8 +3,8 @@ import { ThemeProvider } from '@material-ui/core';
import { StrategyView } from './StrategyView';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
-import theme from '../../../themes/mainTheme';
-import AccessProvider from '../../providers/AccessProvider/AccessProvider';
+import theme from 'themes/mainTheme';
+import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
test('renders correctly with one strategy', () => {
const strategy = {
diff --git a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
index 1596379680..3e0c3a4b87 100644
--- a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
+++ b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
@@ -6,10 +6,10 @@ import {
Tooltip,
} from '@material-ui/core';
import { Pause, PlayArrow } from '@material-ui/icons';
-import styles from '../../common/common.module.scss';
+import styles from 'component/common/common.module.scss';
import { Link } from 'react-router-dom';
-import ConditionallyRender from '../../common/ConditionallyRender';
-import { IFeatureToggle } from '../../../interfaces/featureToggle';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { IFeatureToggle } from 'interfaces/featureToggle';
interface ITogglesLinkListProps {
toggles: IFeatureToggle[];
diff --git a/frontend/src/component/tags/EditTagType/EditTagType.tsx b/frontend/src/component/tags/EditTagType/EditTagType.tsx
index 54343ef2a5..0e64b3c721 100644
--- a/frontend/src/component/tags/EditTagType/EditTagType.tsx
+++ b/frontend/src/component/tags/EditTagType/EditTagType.tsx
@@ -1,5 +1,5 @@
import { useHistory, useParams } from 'react-router-dom';
-import { UPDATE_TAG_TYPE } from '../../providers/AccessProvider/permissions';
+import { UPDATE_TAG_TYPE } from 'component/providers/AccessProvider/permissions';
import useTagTypeForm from '../TagTypeForm/useTagTypeForm';
import TagForm from '../TagTypeForm/TagTypeForm';
import { UpdateButton } from 'component/common/UpdateButton/UpdateButton';
diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
index 0a1d3e6757..3e434f0f4c 100644
--- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
+++ b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
@@ -1,10 +1,10 @@
-import Input from '../../common/Input/Input';
+import Input from 'component/common/Input/Input';
import { TextField, Button } from '@material-ui/core';
import { useStyles } from './TagTypeForm.styles';
import React from 'react';
-import { trim } from '../../common/util';
-import { EDIT } from '../../../constants/misc';
+import { trim } from 'component/common/util';
+import { EDIT } from 'constants/misc';
interface ITagTypeForm {
tagName: string;
diff --git a/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts b/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts
index 6140004ecf..d0eecc818a 100644
--- a/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts
+++ b/frontend/src/component/tags/TagTypeForm/useTagTypeForm.ts
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import useTagTypesApi from '../../../hooks/api/actions/useTagTypesApi/useTagTypesApi';
+import useTagTypesApi from 'hooks/api/actions/useTagTypesApi/useTagTypesApi';
import { formatUnknownError } from 'utils/formatUnknownError';
const useTagTypeForm = (initialTagName = '', initialTagDesc = '') => {
diff --git a/frontend/src/component/tags/TagTypeList/TagTypeList.jsx b/frontend/src/component/tags/TagTypeList/TagTypeList.jsx
index 1b6ac7c37f..9ddd641186 100644
--- a/frontend/src/component/tags/TagTypeList/TagTypeList.jsx
+++ b/frontend/src/component/tags/TagTypeList/TagTypeList.jsx
@@ -11,22 +11,22 @@ import {
Tooltip,
} from '@material-ui/core';
import { Add, Delete, Edit, Label } from '@material-ui/icons';
-import HeaderTitle from '../../common/HeaderTitle';
-import PageContent from '../../common/PageContent/PageContent';
-import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+import HeaderTitle from 'component/common/HeaderTitle';
+import PageContent from 'component/common/PageContent/PageContent';
+import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender';
import {
DELETE_TAG_TYPE,
UPDATE_TAG_TYPE,
-} from '../../providers/AccessProvider/permissions';
-import Dialogue from '../../common/Dialogue/Dialogue';
+} from 'component/providers/AccessProvider/permissions';
+import Dialogue from 'component/common/Dialogue/Dialogue';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import styles from './TagTypeList.module.scss';
-import AccessContext from '../../../contexts/AccessContext';
-import useTagTypesApi from '../../../hooks/api/actions/useTagTypesApi/useTagTypesApi';
-import useTagTypes from '../../../hooks/api/getters/useTagTypes/useTagTypes';
-import useToast from '../../../hooks/useToast';
-import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
-import { formatUnknownError } from '../../../utils/formatUnknownError';
+import AccessContext from 'contexts/AccessContext';
+import useTagTypesApi from 'hooks/api/actions/useTagTypesApi/useTagTypesApi';
+import useTagTypes from 'hooks/api/getters/useTagTypes/useTagTypes';
+import useToast from 'hooks/useToast';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { formatUnknownError } from 'utils/formatUnknownError';
export const TagTypeList = () => {
const { hasAccess } = useContext(AccessContext);
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.js b/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.js
index 00ca1e9f3b..f6d2b02cb9 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.js
+++ b/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.js
@@ -3,14 +3,14 @@ import { TagTypeList } from '../TagTypeList';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/styles';
-import theme from '../../../../themes/mainTheme';
-import AccessProvider from '../../../providers/AccessProvider/AccessProvider';
+import theme from 'themes/mainTheme';
+import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
import {
ADMIN,
DELETE_TAG_TYPE,
UPDATE_TAG_TYPE,
-} from '../../../providers/AccessProvider/permissions';
-import UIProvider from '../../../providers/UIProvider/UIProvider';
+} from 'component/providers/AccessProvider/permissions';
+import UIProvider from 'component/providers/UIProvider/UIProvider';
test('renders an empty list correctly', () => {
const tree = renderer.create(
diff --git a/frontend/src/component/user/Authentication/Authentication.tsx b/frontend/src/component/user/Authentication/Authentication.tsx
index fa62b62438..698cc67290 100644
--- a/frontend/src/component/user/Authentication/Authentication.tsx
+++ b/frontend/src/component/user/Authentication/Authentication.tsx
@@ -8,12 +8,12 @@ import {
DEMO_TYPE,
PASSWORD_TYPE,
HOSTED_TYPE,
-} from '../../../constants/authTypes';
+} from 'constants/authTypes';
import SecondaryLoginActions from '../common/SecondaryLoginActions/SecondaryLoginActions';
-import useQueryParams from '../../../hooks/useQueryParams';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import useQueryParams from 'hooks/useQueryParams';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { Alert } from '@material-ui/lab';
-import { useAuthDetails } from '../../../hooks/api/getters/useAuth/useAuthDetails';
+import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
interface IAuthenticationProps {
redirect: string;
diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.jsx b/frontend/src/component/user/DemoAuth/DemoAuth.jsx
index 4de9d56890..57d6372fd9 100644
--- a/frontend/src/component/user/DemoAuth/DemoAuth.jsx
+++ b/frontend/src/component/user/DemoAuth/DemoAuth.jsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, TextField } from '@material-ui/core';
import styles from './DemoAuth.module.scss';
-import { ReactComponent as Logo } from '../../../assets/img/logo.svg';
-import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from '../../../testIds';
+import { ReactComponent as Logo } from 'assets/img/logo.svg';
+import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'testIds';
import { useHistory } from 'react-router-dom';
-import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi';
-import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
-import useToast from '../../../hooks/useToast';
-import { formatUnknownError } from '../../../utils/formatUnknownError';
+import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';
+import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
const DemoAuth = ({ authDetails, redirect }) => {
const [email, setEmail] = useState('');
diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
index a653202312..0b55a63942 100644
--- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
+++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
@@ -3,12 +3,12 @@ import { AlertTitle, Alert } from '@material-ui/lab';
import classnames from 'classnames';
import { SyntheticEvent, useState } from 'react';
import { Link } from 'react-router-dom';
-import { useCommonStyles } from '../../../common.styles';
-import useLoading from '../../../hooks/useLoading';
-import { FORGOTTEN_PASSWORD_FIELD } from '../../../testIds';
+import { useCommonStyles } from 'common.styles';
+import useLoading from 'hooks/useLoading';
+import { FORGOTTEN_PASSWORD_FIELD } from 'testIds';
import { formatApiPath } from 'utils/formatPath';
-import ConditionallyRender from '../../common/ConditionallyRender';
-import DividerText from '../../common/DividerText/DividerText';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import DividerText from 'component/common/DividerText/DividerText';
import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout';
import { useStyles } from './ForgottenPassword.styles';
diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
index 79cac78a8a..dd2cfdb667 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
@@ -3,20 +3,16 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';
import { Button, Grid, TextField, Typography } from '@material-ui/core';
import { useHistory } from 'react-router';
-import { useCommonStyles } from '../../../common.styles';
+import { useCommonStyles } from 'common.styles';
import { useStyles } from './HostedAuth.styles';
-import useQueryParams from '../../../hooks/useQueryParams';
+import useQueryParams from 'hooks/useQueryParams';
import AuthOptions from '../common/AuthOptions/AuthOptions';
-import DividerText from '../../common/DividerText/DividerText';
-import ConditionallyRender from '../../common/ConditionallyRender';
-import PasswordField from '../../common/PasswordField/PasswordField';
-import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi';
-import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
-import {
- LOGIN_BUTTON,
- LOGIN_EMAIL_ID,
- LOGIN_PASSWORD_ID,
-} from '../../../testIds';
+import DividerText from 'component/common/DividerText/DividerText';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import PasswordField from 'component/common/PasswordField/PasswordField';
+import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';
+import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
+import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'testIds';
const HostedAuth = ({ authDetails, redirect }) => {
const commonStyles = useCommonStyles();
diff --git a/frontend/src/component/user/Login/Login.tsx b/frontend/src/component/user/Login/Login.tsx
index 8ce7ec763c..97e72fd77c 100644
--- a/frontend/src/component/user/Login/Login.tsx
+++ b/frontend/src/component/user/Login/Login.tsx
@@ -1,12 +1,12 @@
-import ConditionallyRender from '../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from './Login.styles';
-import useQueryParams from '../../../hooks/useQueryParams';
+import useQueryParams from 'hooks/useQueryParams';
import ResetPasswordSuccess from '../common/ResetPasswordSuccess/ResetPasswordSuccess';
import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout';
-import { DEMO_TYPE } from '../../../constants/authTypes';
+import { DEMO_TYPE } from 'constants/authTypes';
import Authentication from '../Authentication/Authentication';
-import { useAuthDetails } from '../../../hooks/api/getters/useAuth/useAuthDetails';
-import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
+import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
+import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import { Redirect } from 'react-router-dom';
const Login = () => {
diff --git a/frontend/src/component/user/NewUser/NewUser.tsx b/frontend/src/component/user/NewUser/NewUser.tsx
index 0c72905ba2..acaf555dce 100644
--- a/frontend/src/component/user/NewUser/NewUser.tsx
+++ b/frontend/src/component/user/NewUser/NewUser.tsx
@@ -1,15 +1,15 @@
-import useLoading from '../../../hooks/useLoading';
+import useLoading from 'hooks/useLoading';
import { TextField, Typography } from '@material-ui/core';
import StandaloneBanner from '../StandaloneBanner/StandaloneBanner';
import ResetPasswordDetails from '../common/ResetPasswordDetails/ResetPasswordDetails';
import { useStyles } from './NewUser.styles';
-import useResetPassword from '../../../hooks/api/getters/useResetPassword/useResetPassword';
+import useResetPassword from 'hooks/api/getters/useResetPassword/useResetPassword';
import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import InvalidToken from '../common/InvalidToken/InvalidToken';
import AuthOptions from '../common/AuthOptions/AuthOptions';
-import DividerText from '../../common/DividerText/DividerText';
-import { useAuthDetails } from '../../../hooks/api/getters/useAuth/useAuthDetails';
+import DividerText from 'component/common/DividerText/DividerText';
+import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
export const NewUser = () => {
const { authDetails } = useAuthDetails();
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
index e705614fe3..103bcdc159 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
@@ -2,22 +2,18 @@ import { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { Button, TextField } from '@material-ui/core';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import { useHistory } from 'react-router';
-import { useCommonStyles } from '../../../common.styles';
+import { useCommonStyles } from 'common.styles';
import { useStyles } from './PasswordAuth.styles';
-import useQueryParams from '../../../hooks/useQueryParams';
+import useQueryParams from 'hooks/useQueryParams';
import AuthOptions from '../common/AuthOptions/AuthOptions';
-import DividerText from '../../common/DividerText/DividerText';
+import DividerText from 'component/common/DividerText/DividerText';
import { Alert } from '@material-ui/lab';
-import {
- LOGIN_BUTTON,
- LOGIN_EMAIL_ID,
- LOGIN_PASSWORD_ID,
-} from '../../../testIds';
-import PasswordField from '../../common/PasswordField/PasswordField';
-import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi';
-import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
+import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'testIds';
+import PasswordField from 'component/common/PasswordField/PasswordField';
+import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';
+import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
const PasswordAuth = ({ authDetails, redirect }) => {
const commonStyles = useCommonStyles();
diff --git a/frontend/src/component/user/ResetPassword/ResetPassword.tsx b/frontend/src/component/user/ResetPassword/ResetPassword.tsx
index 787c9bd2b9..caa248d86c 100644
--- a/frontend/src/component/user/ResetPassword/ResetPassword.tsx
+++ b/frontend/src/component/user/ResetPassword/ResetPassword.tsx
@@ -1,12 +1,12 @@
-import useLoading from '../../../hooks/useLoading';
+import useLoading from 'hooks/useLoading';
import ResetPasswordDetails from '../common/ResetPasswordDetails/ResetPasswordDetails';
import { useStyles } from './ResetPassword.styles';
import { Typography } from '@material-ui/core';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import InvalidToken from '../common/InvalidToken/InvalidToken';
-import useResetPassword from '../../../hooks/api/getters/useResetPassword/useResetPassword';
+import useResetPassword from 'hooks/api/getters/useResetPassword/useResetPassword';
import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout';
const ResetPassword = () => {
diff --git a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx
index a423390137..00d87d9d16 100644
--- a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx
+++ b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
import { Button, TextField } from '@material-ui/core';
import styles from './SimpleAuth.module.scss';
import { useHistory } from 'react-router-dom';
-import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi';
-import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
-import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from '../../../testIds';
-import useToast from '../../../hooks/useToast';
-import { formatUnknownError } from '../../../utils/formatUnknownError';
+import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';
+import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
+import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'testIds';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
const SimpleAuth = ({ authDetails, redirect }) => {
const [email, setEmail] = useState('');
diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
index 4f2227c0c5..1ec51c2c03 100644
--- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
+++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
@@ -1,10 +1,10 @@
import { FC } from 'react';
import { Typography, useTheme, useMediaQuery } from '@material-ui/core';
-import Gradient from '../../common/Gradient/Gradient';
+import Gradient from 'component/common/Gradient/Gradient';
import { ReactComponent as Logo } from 'assets/icons/logoWhiteBg.svg';
import { ReactComponent as LogoWithText } from 'assets/img/logoWhiteTransparentHorizontal.svg';
import { useStyles } from './StandaloneBanner.styles';
-import ConditionallyRender from '../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
interface IStandaloneBannerProps {
title: string;
diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
index 0c5a66d332..954a93849e 100644
--- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
+++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
@@ -2,20 +2,20 @@ import React, { SyntheticEvent, useState } from 'react';
import { Button, Typography } from '@material-ui/core';
import classnames from 'classnames';
import { useStyles } from './EditProfile.styles';
-import { useCommonStyles } from '../../../../common.styles';
-import PasswordChecker from '../../common/ResetPasswordForm/PasswordChecker/PasswordChecker';
-import PasswordMatcher from '../../common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
+import { useCommonStyles } from 'common.styles';
+import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
+import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
import { Alert } from '@material-ui/lab';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import useLoading from '../../../../hooks/useLoading';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import useLoading from 'hooks/useLoading';
import {
BAD_REQUEST,
NOT_FOUND,
OK,
UNAUTHORIZED,
-} from '../../../../constants/statusCodes';
+} from 'constants/statusCodes';
import { formatApiPath } from 'utils/formatPath';
-import PasswordField from '../../../common/PasswordField/PasswordField';
+import PasswordField from 'component/common/PasswordField/PasswordField';
import { headers } from 'utils/apiUtils';
interface IEditProfileProps {
diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx
index 6857cba7f0..1c0e578eb0 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.tsx
@@ -3,10 +3,10 @@ import classnames from 'classnames';
import { Avatar, Button, ClickAwayListener } from '@material-ui/core';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import { useStyles } from './UserProfile.styles';
-import { useCommonStyles } from '../../../common.styles';
+import { useCommonStyles } from 'common.styles';
import UserProfileContent from './UserProfileContent/UserProfileContent';
-import { IUser } from '../../../interfaces/user';
-import { ILocationSettings } from '../../../hooks/useLocationSettings';
+import { IUser } from 'interfaces/user';
+import { ILocationSettings } from 'hooks/useLocationSettings';
import { HEADER_USER_AVATAR } from 'testIds';
interface IUserProfileProps {
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
index 4afdbc0f19..30528cd6d6 100644
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import {
Avatar,
Button,
@@ -11,14 +11,14 @@ import {
} from '@material-ui/core';
import classnames from 'classnames';
import { useStyles } from './UserProfileContent.styles';
-import { useCommonStyles } from '../../../../common.styles';
+import { useCommonStyles } from 'common.styles';
import { Alert } from '@material-ui/lab';
import EditProfile from '../EditProfile/EditProfile';
import legacyStyles from '../../user.module.scss';
import { getBasePath } from 'utils/formatPath';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import { IUser } from '../../../../interfaces/user';
-import { ILocationSettings } from '../../../../hooks/useLocationSettings';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { IUser } from 'interfaces/user';
+import { ILocationSettings } from 'hooks/useLocationSettings';
interface IUserProfileContentProps {
showProfile: boolean;
diff --git a/frontend/src/component/user/UserProfile/index.tsx b/frontend/src/component/user/UserProfile/index.tsx
index 5868eccd02..6ace1538b9 100644
--- a/frontend/src/component/user/UserProfile/index.tsx
+++ b/frontend/src/component/user/UserProfile/index.tsx
@@ -1,6 +1,6 @@
import UserProfile from './UserProfile';
-import { useLocationSettings } from '../../../hooks/useLocationSettings';
-import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
const UserProfileContainer = () => {
const { locationSettings, setLocationSettings } = useLocationSettings();
diff --git a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
index e6008c644b..c1c3b6eb39 100644
--- a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
+++ b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
@@ -1,11 +1,11 @@
import { Button } from '@material-ui/core';
import classnames from 'classnames';
-import { useCommonStyles } from '../../../../common.styles';
-import { ReactComponent as GoogleSvg } from '../../../../assets/icons/google.svg';
+import { useCommonStyles } from 'common.styles';
+import { ReactComponent as GoogleSvg } from 'assets/icons/google.svg';
import LockRounded from '@material-ui/icons/LockRounded';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import { IAuthOptions } from '../../../../hooks/api/getters/useAuth/useAuthEndpoint';
-import { SSO_LOGIN_BUTTON } from '../../../../testIds';
+import ConditionallyRender from 'component/common/ConditionallyRender';
+import { IAuthOptions } from 'hooks/api/getters/useAuth/useAuthEndpoint';
+import { SSO_LOGIN_BUTTON } from 'testIds';
interface IAuthOptionProps {
options?: IAuthOptions[];
diff --git a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
index 0ba01627a5..9a416d8223 100644
--- a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
+++ b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
@@ -1,7 +1,7 @@
import { Button, Typography } from '@material-ui/core';
import { Link } from 'react-router-dom';
import { INVALID_TOKEN_BUTTON } from 'testIds';
-import { useCommonStyles } from '../../../../common.styles';
+import { useCommonStyles } from 'common.styles';
import classnames from 'classnames';
const InvalidToken = () => {
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
index 5f69393d89..63d420bea4 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
@@ -1,13 +1,13 @@
import { Tooltip, Typography } from '@material-ui/core';
import classnames from 'classnames';
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { BAD_REQUEST, OK } from '../../../../../constants/statusCodes';
+import { BAD_REQUEST, OK } from 'constants/statusCodes';
import { useStyles } from './PasswordChecker.styles';
import HelpIcon from '@material-ui/icons/Help';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
import { Alert } from '@material-ui/lab';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
interface IPasswordCheckerProps {
password: string;
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
index 82f0de09a8..7f8994a41e 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
@@ -1,5 +1,5 @@
import { Typography } from '@material-ui/core';
-import ConditionallyRender from '../../../../common/ConditionallyRender';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import classnames from 'classnames';
import CheckIcon from '@material-ui/icons/Check';
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
index 61a6a0dad8..ecd62fd5ba 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
@@ -9,15 +9,15 @@ import React, {
useState,
} from 'react';
import { useHistory } from 'react-router';
-import { useCommonStyles } from '../../../../common.styles';
-import { OK } from '../../../../constants/statusCodes';
-import ConditionallyRender from '../../../common/ConditionallyRender';
+import { useCommonStyles } from 'common.styles';
+import { OK } from 'constants/statusCodes';
+import ConditionallyRender from 'component/common/ConditionallyRender';
import ResetPasswordError from '../ResetPasswordError/ResetPasswordError';
import PasswordChecker from './PasswordChecker/PasswordChecker';
import PasswordMatcher from './PasswordMatcher/PasswordMatcher';
import { useStyles } from './ResetPasswordForm.styles';
import { formatApiPath } from 'utils/formatPath';
-import PasswordField from '../../../common/PasswordField/PasswordField';
+import PasswordField from 'component/common/PasswordField/PasswordField';
interface IResetPasswordProps {
token: string;
diff --git a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
index fd29069c6e..39255b668a 100644
--- a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
+++ b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
@@ -1,6 +1,5 @@
import { FC } from 'react';
-import StandaloneBanner from '../../StandaloneBanner/StandaloneBanner';
-
+import StandaloneBanner from 'component/user/StandaloneBanner/StandaloneBanner';
import { useStyles } from './StandaloneLayout.styles';
interface IStandaloneLayout {
diff --git a/frontend/src/contexts/UIContext.ts b/frontend/src/contexts/UIContext.ts
index dea2231646..9f0384f182 100644
--- a/frontend/src/contexts/UIContext.ts
+++ b/frontend/src/contexts/UIContext.ts
@@ -1,5 +1,5 @@
import React from 'react';
-import { IToast } from '../interfaces/toast';
+import { IToast } from 'interfaces/toast';
interface IUIContext {
toastData: IToast;
diff --git a/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts b/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts
index c26719bff0..8cf983057b 100644
--- a/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts
+++ b/frontend/src/hooks/api/actions/useAddonsApi/useAddonsApi.ts
@@ -1,4 +1,4 @@
-import { IAddon } from '../../../../interfaces/addons';
+import { IAddon } from 'interfaces/addons';
import useAPI from '../useApi/useApi';
const useAddonsApi = () => {
diff --git a/frontend/src/hooks/api/actions/useApi/useApi.ts b/frontend/src/hooks/api/actions/useApi/useApi.ts
index 2453aa3134..3aa20a2011 100644
--- a/frontend/src/hooks/api/actions/useApi/useApi.ts
+++ b/frontend/src/hooks/api/actions/useApi/useApi.ts
@@ -5,7 +5,7 @@ import {
NOT_FOUND,
OK,
UNAUTHORIZED,
-} from '../../../../constants/statusCodes';
+} from 'constants/statusCodes';
import {
AuthenticationError,
BadRequestError,
diff --git a/frontend/src/hooks/api/actions/useEnvironmentApi/useEnvironmentApi.ts b/frontend/src/hooks/api/actions/useEnvironmentApi/useEnvironmentApi.ts
index edc23ebd16..c9a5797a3a 100644
--- a/frontend/src/hooks/api/actions/useEnvironmentApi/useEnvironmentApi.ts
+++ b/frontend/src/hooks/api/actions/useEnvironmentApi/useEnvironmentApi.ts
@@ -2,7 +2,7 @@ import {
IEnvironmentPayload,
ISortOrderPayload,
IEnvironmentEditPayload,
-} from '../../../../interfaces/environments';
+} from 'interfaces/environments';
import useAPI from '../useApi/useApi';
const useEnvironmentApi = () => {
diff --git a/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts b/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts
index 06f1c0423b..c9e76b9b6b 100644
--- a/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts
+++ b/frontend/src/hooks/api/actions/useFeatureApi/useFeatureApi.ts
@@ -1,5 +1,5 @@
-import { IFeatureTogglePayload } from '../../../../interfaces/featureToggle';
-import { ITag } from '../../../../interfaces/tags';
+import { IFeatureTogglePayload } from 'interfaces/featureToggle';
+import { ITag } from 'interfaces/tags';
import useAPI from '../useApi/useApi';
import { Operation } from 'fast-json-patch';
import { IConstraint } from 'interfaces/strategy';
diff --git a/frontend/src/hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi.ts b/frontend/src/hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi.ts
index 75e972b45c..8c8bb7254a 100644
--- a/frontend/src/hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi.ts
+++ b/frontend/src/hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi.ts
@@ -1,4 +1,4 @@
-import { IStrategyPayload } from '../../../../interfaces/strategy';
+import { IStrategyPayload } from 'interfaces/strategy';
import useAPI from '../useApi/useApi';
const useFeatureStrategyApi = () => {
diff --git a/frontend/src/hooks/api/actions/useProjectRolesApi/useProjectRolesApi.ts b/frontend/src/hooks/api/actions/useProjectRolesApi/useProjectRolesApi.ts
index 679635a048..8fad233e39 100644
--- a/frontend/src/hooks/api/actions/useProjectRolesApi/useProjectRolesApi.ts
+++ b/frontend/src/hooks/api/actions/useProjectRolesApi/useProjectRolesApi.ts
@@ -1,4 +1,4 @@
-import { IPermission } from '../../../../interfaces/project';
+import { IPermission } from 'interfaces/project';
import useAPI from '../useApi/useApi';
interface ICreateRolePayload {
diff --git a/frontend/src/hooks/api/actions/useTagTypesApi/useTagTypesApi.ts b/frontend/src/hooks/api/actions/useTagTypesApi/useTagTypesApi.ts
index 26a65fd53c..0d7379da02 100644
--- a/frontend/src/hooks/api/actions/useTagTypesApi/useTagTypesApi.ts
+++ b/frontend/src/hooks/api/actions/useTagTypesApi/useTagTypesApi.ts
@@ -1,4 +1,4 @@
-import { ITagPayload } from '../../../../interfaces/tags';
+import { ITagPayload } from 'interfaces/tags';
import useAPI from '../useApi/useApi';
const useTagTypesApi = () => {
diff --git a/frontend/src/hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv.ts b/frontend/src/hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv.ts
index d6a821421c..9e4269e291 100644
--- a/frontend/src/hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv.ts
+++ b/frontend/src/hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv.ts
@@ -1,4 +1,4 @@
-import useProject from '../../getters/useProject/useProject';
+import useProject from 'hooks/api/getters/useProject/useProject';
import useAPI from '../useApi/useApi';
const useToggleFeatureByEnv = (projectId: string, name: string) => {
diff --git a/frontend/src/hooks/api/getters/useApplication/useApplication.ts b/frontend/src/hooks/api/getters/useApplication/useApplication.ts
index d969d29d52..81c8ee0930 100644
--- a/frontend/src/hooks/api/getters/useApplication/useApplication.ts
+++ b/frontend/src/hooks/api/getters/useApplication/useApplication.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IApplication } from '../../../../interfaces/application';
+import { IApplication } from 'interfaces/application';
interface IUseApplicationOutput {
application: IApplication;
diff --git a/frontend/src/hooks/api/getters/useApplications/useApplications.ts b/frontend/src/hooks/api/getters/useApplications/useApplications.ts
index 897487a76d..9e2cb97454 100644
--- a/frontend/src/hooks/api/getters/useApplications/useApplications.ts
+++ b/frontend/src/hooks/api/getters/useApplications/useApplications.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IApplication } from '../../../../interfaces/application';
+import { IApplication } from 'interfaces/application';
const path = formatApiPath('api/admin/metrics/applications');
diff --git a/frontend/src/hooks/api/getters/useAuth/useAuthEndpoint.ts b/frontend/src/hooks/api/getters/useAuth/useAuthEndpoint.ts
index 70bd32862c..beed59a25c 100644
--- a/frontend/src/hooks/api/getters/useAuth/useAuthEndpoint.ts
+++ b/frontend/src/hooks/api/getters/useAuth/useAuthEndpoint.ts
@@ -1,7 +1,7 @@
import useSWR, { mutate } from 'swr';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
-import { IPermission, IUser } from '../../../../interfaces/user';
+import { IPermission, IUser } from 'interfaces/user';
// The auth endpoint returns different things depending on the auth status.
// When the user is logged in, the endpoint returns user data and permissions.
diff --git a/frontend/src/hooks/api/getters/useAuth/useAuthPermissions.ts b/frontend/src/hooks/api/getters/useAuth/useAuthPermissions.ts
index 3cb4d2fd2e..ab35cbb1d3 100644
--- a/frontend/src/hooks/api/getters/useAuth/useAuthPermissions.ts
+++ b/frontend/src/hooks/api/getters/useAuth/useAuthPermissions.ts
@@ -1,4 +1,4 @@
-import { IPermission } from '../../../../interfaces/user';
+import { IPermission } from 'interfaces/user';
import { useAuthEndpoint } from './useAuthEndpoint';
interface IUseAuthPermissionsOutput {
diff --git a/frontend/src/hooks/api/getters/useAuth/useAuthUser.ts b/frontend/src/hooks/api/getters/useAuth/useAuthUser.ts
index 2a142a55e1..4b557ad316 100644
--- a/frontend/src/hooks/api/getters/useAuth/useAuthUser.ts
+++ b/frontend/src/hooks/api/getters/useAuth/useAuthUser.ts
@@ -1,4 +1,4 @@
-import { IUser } from '../../../../interfaces/user';
+import { IUser } from 'interfaces/user';
import { useAuthEndpoint } from './useAuthEndpoint';
interface IUseAuthUserOutput {
diff --git a/frontend/src/hooks/api/getters/useEnvironment/defaultEnvironment.ts b/frontend/src/hooks/api/getters/useEnvironment/defaultEnvironment.ts
index c904928a18..1478fc0fdc 100644
--- a/frontend/src/hooks/api/getters/useEnvironment/defaultEnvironment.ts
+++ b/frontend/src/hooks/api/getters/useEnvironment/defaultEnvironment.ts
@@ -1,4 +1,4 @@
-import { IEnvironment } from '../../../../interfaces/environments';
+import { IEnvironment } from 'interfaces/environments';
export const defaultEnvironment: IEnvironment = {
name: '',
diff --git a/frontend/src/hooks/api/getters/useEnvironment/useEnvironment.ts b/frontend/src/hooks/api/getters/useEnvironment/useEnvironment.ts
index 9160098cd6..68c355cd53 100644
--- a/frontend/src/hooks/api/getters/useEnvironment/useEnvironment.ts
+++ b/frontend/src/hooks/api/getters/useEnvironment/useEnvironment.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
-import { IEnvironment } from '../../../../interfaces/environments';
+import { IEnvironment } from 'interfaces/environments';
import handleErrorResponses from '../httpErrorResponseHandler';
import { defaultEnvironment } from './defaultEnvironment';
diff --git a/frontend/src/hooks/api/getters/useEvents/useEvents.ts b/frontend/src/hooks/api/getters/useEvents/useEvents.ts
index d23c92a890..c424e67300 100644
--- a/frontend/src/hooks/api/getters/useEvents/useEvents.ts
+++ b/frontend/src/hooks/api/getters/useEvents/useEvents.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IEvent } from '../../../../interfaces/event';
+import { IEvent } from 'interfaces/event';
const PATH = formatApiPath('api/admin/events');
diff --git a/frontend/src/hooks/api/getters/useFeature/emptyFeature.ts b/frontend/src/hooks/api/getters/useFeature/emptyFeature.ts
index 4d878101f5..f2da62298f 100644
--- a/frontend/src/hooks/api/getters/useFeature/emptyFeature.ts
+++ b/frontend/src/hooks/api/getters/useFeature/emptyFeature.ts
@@ -1,4 +1,4 @@
-import { IFeatureToggle } from '../../../../interfaces/featureToggle';
+import { IFeatureToggle } from 'interfaces/featureToggle';
export const emptyFeature: IFeatureToggle = {
environments: [],
diff --git a/frontend/src/hooks/api/getters/useFeatureEvents/useFeatureEvents.ts b/frontend/src/hooks/api/getters/useFeatureEvents/useFeatureEvents.ts
index a5fe63c861..d78957218d 100644
--- a/frontend/src/hooks/api/getters/useFeatureEvents/useFeatureEvents.ts
+++ b/frontend/src/hooks/api/getters/useFeatureEvents/useFeatureEvents.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IEvent } from '../../../../interfaces/event';
+import { IEvent } from 'interfaces/event';
const PATH = formatApiPath('api/admin/events');
diff --git a/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts b/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts
index 2eeb101b2e..df06d8912d 100644
--- a/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts
+++ b/frontend/src/hooks/api/getters/useFeatureMetrics/useFeatureMetrics.ts
@@ -1,7 +1,7 @@
import { formatApiPath } from 'utils/formatPath';
import { useEffect, useState } from 'react';
import useSWR, { mutate, SWRConfiguration } from 'swr';
-import { IFeatureMetrics } from '../../../../interfaces/featureToggle';
+import { IFeatureMetrics } from 'interfaces/featureToggle';
import handleErrorResponses from '../httpErrorResponseHandler';
const emptyMetrics: IFeatureMetrics = {
diff --git a/frontend/src/hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw.ts b/frontend/src/hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw.ts
index 347b86879c..ef7818a09e 100644
--- a/frontend/src/hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw.ts
+++ b/frontend/src/hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate } from 'swr';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IFeatureMetricsRaw } from '../../../../interfaces/featureToggle';
+import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
const PATH = formatApiPath('api/admin/client-metrics/features');
diff --git a/frontend/src/hooks/api/getters/useFeatureTypes/useFeatureTypes.ts b/frontend/src/hooks/api/getters/useFeatureTypes/useFeatureTypes.ts
index 5b96627113..71f4e7b001 100644
--- a/frontend/src/hooks/api/getters/useFeatureTypes/useFeatureTypes.ts
+++ b/frontend/src/hooks/api/getters/useFeatureTypes/useFeatureTypes.ts
@@ -1,7 +1,7 @@
import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
-import { IFeatureType } from '../../../../interfaces/featureTypes';
+import { IFeatureType } from 'interfaces/featureTypes';
import handleErrorResponses from '../httpErrorResponseHandler';
const useFeatureTypes = (options: SWRConfiguration = {}) => {
diff --git a/frontend/src/hooks/api/getters/useFeatures/useFeatures.ts b/frontend/src/hooks/api/getters/useFeatures/useFeatures.ts
index 06f008b6e4..6571864e7b 100644
--- a/frontend/src/hooks/api/getters/useFeatures/useFeatures.ts
+++ b/frontend/src/hooks/api/getters/useFeatures/useFeatures.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IFeatureToggle } from '../../../../interfaces/featureToggle';
+import { IFeatureToggle } from 'interfaces/featureToggle';
const PATH = formatApiPath('api/admin/features');
diff --git a/frontend/src/hooks/api/getters/useFeaturesArchive/useFeaturesArchive.ts b/frontend/src/hooks/api/getters/useFeaturesArchive/useFeaturesArchive.ts
index 3a06811063..0b95fcca83 100644
--- a/frontend/src/hooks/api/getters/useFeaturesArchive/useFeaturesArchive.ts
+++ b/frontend/src/hooks/api/getters/useFeaturesArchive/useFeaturesArchive.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IFeatureToggle } from '../../../../interfaces/featureToggle';
+import { IFeatureToggle } from 'interfaces/featureToggle';
const PATH = formatApiPath('api/admin/archive/features');
diff --git a/frontend/src/hooks/api/getters/useHealthReport/useHealthReport.ts b/frontend/src/hooks/api/getters/useHealthReport/useHealthReport.ts
index 651cf46953..7b30cd0d67 100644
--- a/frontend/src/hooks/api/getters/useHealthReport/useHealthReport.ts
+++ b/frontend/src/hooks/api/getters/useHealthReport/useHealthReport.ts
@@ -1,6 +1,6 @@
import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useCallback } from 'react';
-import { IProjectHealthReport } from '../../../../interfaces/project';
+import { IProjectHealthReport } from 'interfaces/project';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
diff --git a/frontend/src/hooks/api/getters/useProject/useProject.ts b/frontend/src/hooks/api/getters/useProject/useProject.ts
index 0af0dfe650..910eb4eaf7 100644
--- a/frontend/src/hooks/api/getters/useProject/useProject.ts
+++ b/frontend/src/hooks/api/getters/useProject/useProject.ts
@@ -1,9 +1,9 @@
import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { getProjectFetcher } from './getProjectFetcher';
-import { IProject } from '../../../../interfaces/project';
+import { IProject } from 'interfaces/project';
import { fallbackProject } from './fallbackProject';
-import useSort from '../../../useSort';
+import useSort from 'hooks/useSort';
const useProject = (id: string, options: SWRConfiguration = {}) => {
const { KEY, fetcher } = getProjectFetcher(id);
diff --git a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts
index d8e59ad05b..3c57cb0593 100644
--- a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts
+++ b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IProjectRole } from '../../../../interfaces/role';
+import { IProjectRole } from 'interfaces/role';
export interface IProjectAccessUser {
id: number;
diff --git a/frontend/src/hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions.ts b/frontend/src/hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions.ts
index 5565f84145..3b4eff9f57 100644
--- a/frontend/src/hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions.ts
+++ b/frontend/src/hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions.ts
@@ -6,7 +6,7 @@ import {
IProjectEnvironmentPermissions,
IProjectRolePermissions,
IPermission,
-} from '../../../../interfaces/project';
+} from 'interfaces/project';
import handleErrorResponses from '../httpErrorResponseHandler';
interface IUseProjectRolePermissions {
diff --git a/frontend/src/hooks/api/getters/useProjects/useProjects.ts b/frontend/src/hooks/api/getters/useProjects/useProjects.ts
index 0eaaeae6be..c30259b921 100644
--- a/frontend/src/hooks/api/getters/useProjects/useProjects.ts
+++ b/frontend/src/hooks/api/getters/useProjects/useProjects.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
-import { IProjectCard } from '../../../../interfaces/project';
+import { IProjectCard } from 'interfaces/project';
import handleErrorResponses from '../httpErrorResponseHandler';
const useProjects = (options: SWRConfiguration = {}) => {
diff --git a/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts b/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts
index ca0c3c75e8..fcb01b24f6 100644
--- a/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts
+++ b/frontend/src/hooks/api/getters/useResetPassword/useResetPassword.ts
@@ -1,5 +1,5 @@
import useSWR, { SWRConfiguration } from 'swr';
-import useQueryParams from '../../../useQueryParams';
+import useQueryParams from 'hooks/useQueryParams';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
diff --git a/frontend/src/hooks/api/getters/useStrategies/useStrategies.ts b/frontend/src/hooks/api/getters/useStrategies/useStrategies.ts
index be93a27e0b..db9adaf389 100644
--- a/frontend/src/hooks/api/getters/useStrategies/useStrategies.ts
+++ b/frontend/src/hooks/api/getters/useStrategies/useStrategies.ts
@@ -1,7 +1,7 @@
import useSWR, { mutate } from 'swr';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
-import { IStrategy } from '../../../../interfaces/strategy';
+import { IStrategy } from 'interfaces/strategy';
import handleErrorResponses from '../httpErrorResponseHandler';
interface IUseStrategiesOutput {
diff --git a/frontend/src/hooks/api/getters/useTagTypes/useTagTypes.ts b/frontend/src/hooks/api/getters/useTagTypes/useTagTypes.ts
index 682d89f9a3..bbc1586dfe 100644
--- a/frontend/src/hooks/api/getters/useTagTypes/useTagTypes.ts
+++ b/frontend/src/hooks/api/getters/useTagTypes/useTagTypes.ts
@@ -1,7 +1,7 @@
import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
-import { ITagType } from '../../../../interfaces/tags';
+import { ITagType } from 'interfaces/tags';
import handleErrorResponses from '../httpErrorResponseHandler';
const useTagTypes = (options: SWRConfiguration = {}) => {
diff --git a/frontend/src/hooks/api/getters/useTags/useTags.ts b/frontend/src/hooks/api/getters/useTags/useTags.ts
index f9c7e15d1a..1a1ef26e6e 100644
--- a/frontend/src/hooks/api/getters/useTags/useTags.ts
+++ b/frontend/src/hooks/api/getters/useTags/useTags.ts
@@ -1,7 +1,7 @@
import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
-import { ITag } from '../../../../interfaces/tags';
+import { ITag } from 'interfaces/tags';
import handleErrorResponses from '../httpErrorResponseHandler';
const useTags = (featureId: string, options: SWRConfiguration = {}) => {
diff --git a/frontend/src/hooks/api/getters/useUiConfig/useUiConfig.ts b/frontend/src/hooks/api/getters/useUiConfig/useUiConfig.ts
index 1daa7d6550..17eda8bfa7 100644
--- a/frontend/src/hooks/api/getters/useUiConfig/useUiConfig.ts
+++ b/frontend/src/hooks/api/getters/useUiConfig/useUiConfig.ts
@@ -1,7 +1,7 @@
import useSWR, { mutate, SWRConfiguration } from 'swr';
import { formatApiPath } from 'utils/formatPath';
import { defaultValue } from './defaultValue';
-import { IUiConfig } from '../../../../interfaces/uiConfig';
+import { IUiConfig } from 'interfaces/uiConfig';
import handleErrorResponses from '../httpErrorResponseHandler';
const REQUEST_KEY = 'api/admin/ui-config';
diff --git a/frontend/src/hooks/api/getters/useUnleashContext/useUnleashContext.ts b/frontend/src/hooks/api/getters/useUnleashContext/useUnleashContext.ts
index 662e3b2868..af12006527 100644
--- a/frontend/src/hooks/api/getters/useUnleashContext/useUnleashContext.ts
+++ b/frontend/src/hooks/api/getters/useUnleashContext/useUnleashContext.ts
@@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
-import { IUnleashContextDefinition } from '../../../../interfaces/context';
+import { IUnleashContextDefinition } from 'interfaces/context';
interface IUnleashContextOutput {
context: IUnleashContextDefinition[];