chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/Accounts/AccountUniversalSearch.tsx

@@ -1,9 +1,9 @@
 import intl from 'react-intl-universal';
 
-import withDrawerActions from '../Drawer/withDrawerActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-import { AbilitySubject, AccountAction } from '../../common/abilityOption';
-import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+import { AbilitySubject, AccountAction } from '@/constants/abilityOption';
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 
 function AccountUniversalSearchItemSelectComponent({
   // #ownProps

src/containers/Accounts/AccountsActionsBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Icon from 'components/Icon';
 import { isEmpty } from 'lodash';
 import {
   Button,
@@ -11,29 +10,29 @@ import {
   Alignment,
 } from '@blueprintjs/core';
 
-import { FormattedMessage as T } from 'components';
 import {
   AdvancedFilterPopover,
   If,
   Can,
+  Icon,
+  FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
   DashboardRowsHeightButton,
-} from 'components';
+  DashboardActionsBar
+} from '@/components';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-
-import { useRefreshAccounts } from 'hooks/query/accounts';
-import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAccounts from 'containers/Accounts/withAccounts';
-import withAlertActions from 'containers/Alert/withAlertActions';
+import { AccountAction, AbilitySubject } from '@/constants/abilityOption';
+import { useRefreshAccounts } from '@/hooks/query/accounts';
+import { useAccountsChartContext } from './AccountsChartProvider';
+import withAccounts from './withAccounts';
 import withAccountsTableActions from './withAccountsTableActions';
-import withSettings from '../Settings/withSettings';
-import withSettingsActions from '../Settings/withSettingsActions';
-import { AccountAction, AbilitySubject } from '../../common/abilityOption';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Accounts actions bar.

src/containers/Accounts/AccountsAlerts.js

@@ -1,20 +0,0 @@
-import React from 'react';
-
-const AccountDeleteAlert = React.lazy(() =>
-  import('containers/Alerts/AccountDeleteAlert'),
-);
-const AccountInactivateAlert = React.lazy(() =>
-  import('containers/Alerts/AccountInactivateAlert'),
-);
-const AccountActivateAlert = React.lazy(() =>
-  import('containers/Alerts/AccountActivateAlert'),
-);
-// import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
-// import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
-// import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
-
-export default [
-  { name: 'account-delete', component: AccountDeleteAlert },
-  { name: 'account-inactivate', component: AccountInactivateAlert },
-  { name: 'account-activate', component: AccountActivateAlert },
-];

src/containers/Accounts/AccountsAlerts.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const AccountDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Accounts/AccountDeleteAlert'),
+);
+const AccountInactivateAlert = React.lazy(
+  () => import('@/containers/Alerts/Accounts/AccountInactivateAlert'),
+);
+const AccountActivateAlert = React.lazy(
+  () => import('@/containers/Alerts/Accounts/AccountDeleteAlert'),
+);
+
+export default [
+  { name: 'account-delete', component: AccountDeleteAlert },
+  { name: 'account-inactivate', component: AccountInactivateAlert },
+  { name: 'account-activate', component: AccountActivateAlert },
+];

src/containers/Accounts/AccountsChart.tsx

@@ -1,19 +1,17 @@
 import React, { useEffect } from 'react';
 
-import 'style/pages/Accounts/List.scss';
-import { DashboardPageContent, DashboardContentTable } from 'components';
+import '@/style/pages/Accounts/List.scss';
+import { DashboardPageContent, DashboardContentTable } from '@/components';
 
 import { AccountsChartProvider } from './AccountsChartProvider';
-
-import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
-import AccountsActionsBar from 'containers/Accounts/AccountsActionsBar';
+import AccountsViewsTabs from './AccountsViewsTabs';
+import AccountsActionsBar from './AccountsActionsBar';
 import AccountsDataTable from './AccountsDataTable';
 
-import withAccounts from 'containers/Accounts/withAccounts';
-
-import { compose } from 'utils';
-import { transformAccountsStateToQuery } from './utils';
+import withAccounts from '@/containers/Accounts/withAccounts';
 import withAccountsTableActions from './withAccountsTableActions';
+import { transformAccountsStateToQuery } from './utils';
+import { compose } from '@/utils';
 
 /**
  * Accounts chart list.

src/containers/Accounts/AccountsChartProvider.tsx

@@ -1,14 +1,14 @@
 import React, { createContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceMeta, useAccounts } from 'hooks/query';
-import { getFieldsFromResourceMeta } from 'utils';
+import { DashboardInsider } from '@/components';
+import { useResourceViews, useResourceMeta, useAccounts } from '@/hooks/query';
+import { getFieldsFromResourceMeta } from '@/utils';
 
 const AccountsChartContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function AccountsChartProvider({ query, tableStateChanged,...props }) {
+function AccountsChartProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: resourceViews, isLoading: isViewsLoading } =
     useResourceViews('accounts');

src/containers/Accounts/AccountsDataTable.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 
-import { TableFastCell, DataTable } from 'components';
-import { compose } from 'utils';
-
+import {
+  TableFastCell,
+  DataTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+  TableVirtualizedListRows,
+} from '@/components';
+import { TABLES } from '@/constants/tables';
 import { useAccountsTableColumns, rowClassNames } from './utils';
 import { ActionsMenu } from './components';
-import { TABLES } from 'common/tables';
-
-import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
-import withSettings from '../Settings/withSettings';
 
 import { useAccountsChartContext } from './AccountsChartProvider';
-import { useMemorizedColumnsWidths } from '../../hooks';
+import { useMemorizedColumnsWidths } from '@/hooks';
+import { AccountDialogAction } from '@/containers/Dialogs/AccountDialog/utils';
 
-import { AccountDialogAction } from '../Dialogs/AccountDialog/utils';
-
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { compose } from '@/utils';
 
 /**
  * Accounts data-table.

src/containers/Accounts/AccountsViewsTabs.tsx

@@ -2,13 +2,13 @@ import React, { useCallback } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { DashboardViewsTabs } from 'components';
-import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
+import { DashboardViewsTabs } from '@/components';
+import { useAccountsChartContext } from './AccountsChartProvider';
 
-import withAccountsTableActions from './withAccountsTableActions';
 import withAccounts from './withAccounts';
+import withAccountsTableActions from './withAccountsTableActions';
 
-import { compose, transfromViewsToTabs } from 'utils';
+import { compose, transfromViewsToTabs } from '@/utils';
 
 /**
  * Accounts views tabs.

src/containers/Accounts/components.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import {
   Position,
   Classes,
@@ -8,10 +9,9 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import { Can, Icon, Money, If } from 'components';
-import intl from 'react-intl-universal';
-import { safeCallback } from 'utils';
-import { AbilitySubject, AccountAction } from '../../common/abilityOption';
+import { Can, Icon, If } from '@/components';
+import { safeCallback } from '@/utils';
+import { AbilitySubject, AccountAction } from '@/constants/abilityOption';
 
 /**
  * Accounts table actions menu.

src/containers/Accounts/utils.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Intent, Tag } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import { Intent, Tag } from '@blueprintjs/core';
 
-import { If, AppToaster } from 'components';
+import { If, AppToaster } from '@/components';
 import { NormalCell, BalanceCell } from './components';
-import { transformTableStateToQuery, isBlank } from 'utils';
+import { transformTableStateToQuery, isBlank } from '@/utils';
 
 /**
  * Account name accessor.

src/containers/Accounts/withAccounts.tsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import {
   getAccountsTableStateFactory,
   accountsTableStateChangedFactory,
-} from 'store/accounts/accounts.selectors';
+} from '@/store/accounts/accounts.selectors';
 
 export default (mapState) => {
   const getAccountsTableState = getAccountsTableStateFactory();

src/containers/Accounts/withAccountsTableActions.tsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import {
   setAccountsTableState,
   resetAccountsTableState,
-} from 'store/accounts/accounts.actions';
+} from '@/store/accounts/accounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
   setAccountsTableState: (queries) => dispatch(setAccountsTableState(queries)),