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

src/containers/Views/ViewForm.container.tsx

@@ -1,10 +1,10 @@
 import {connect} from 'react-redux';
-import {compose} from 'utils';
+import {compose} from '@/utils';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withResourceDetail from 'containers/Resources/withResourceDetails';
-import withViewsActions from 'containers/Views/withViewsActions';
-import withViewsDetails from 'containers/Views/withViewDetails';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withResourceDetail from '@/containers/Resources/withResourceDetails';
+import withViewsActions from '@/containers/Views/withViewsActions';
+import withViewsDetails from '@/containers/Views/withViewDetails';
 
 const mapStateToProps = (state, ownProps) => {
   return {

src/containers/Views/ViewForm.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useFormik } from 'formik';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import { FormattedMessage as T } from '@/components';
 
-import {useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import {
   InputGroup,
   FormGroup,
@@ -20,11 +19,9 @@ import { Row, Col } from 'react-grid-system';
 import { ReactSortable } from 'react-sortablejs';
 import * as Yup from 'yup';
 import { pick, get } from 'lodash';
-import Icon from 'components/Icon';
-import ErrorMessage from 'components/ErrorMessage';
-import AppToaster from 'components/AppToaster';
-import { If } from 'components';
-import ViewFormContainer from 'containers/Views/ViewForm.container.js';
+import ErrorMessage from '@/components/ErrorMessage';
+import { If, Icon, AppToaster } from '@/components';
+import ViewFormContainer from '@/containers/Views/ViewForm.container.js';
 
 function ViewForm({
   requestSubmitView,
@@ -49,20 +46,21 @@ function ViewForm({
     return () => {
       changePageSubtitle('');
     };
-  }, [changePageSubtitle,resourceMetadata.label]);
+  }, [changePageSubtitle, resourceMetadata.label]);
 
   const [draggedColumns, setDraggedColumn] = useState([
     ...(viewMeta && viewMeta.columns ? viewMeta.columns : []),
   ]);
 
-  const draggedColumnsIds = useMemo(() => draggedColumns.map((c) => c.id), [
-    draggedColumns,
-  ]);
+  const draggedColumnsIds = useMemo(
+    () => draggedColumns.map((c) => c.id),
+    [draggedColumns],
+  );
 
   const [availableColumns, setAvailableColumns] = useState([
     ...(viewMeta && viewMeta.columns
       ? resourceColumns.filter(
-          (column) => draggedColumnsIds.indexOf(column.id) === -1
+          (column) => draggedColumnsIds.indexOf(column.id) === -1,
         )
       : resourceColumns),
   ]);
@@ -74,26 +72,30 @@ function ViewForm({
       value: '',
       index: 1,
     }),
-    []
+    [],
   );
 
   const validationSchema = Yup.object().shape({
     resource_name: Yup.string().required(),
-    name: Yup.string().required().label(intl.formatMessage({id:'name_'})),
-    logic_expression: Yup.string().required().label(intl.formatMessage({id:'logic_expression'})),
+    name: Yup.string()
+      .required()
+      .label(intl.formatMessage({ id: 'name_' })),
+    logic_expression: Yup.string()
+      .required()
+      .label(intl.formatMessage({ id: 'logic_expression' })),
     roles: Yup.array().of(
       Yup.object().shape({
         comparator: Yup.string().required(),
         value: Yup.string().required(),
         field_key: Yup.string().required(),
         index: Yup.number().required(),
-      })
+      }),
     ),
     columns: Yup.array().of(
       Yup.object().shape({
         key: Yup.string().required(),
         index: Yup.string().required(),
-      })
+      }),
     ),
   });
 
@@ -105,7 +107,7 @@ function ViewForm({
       roles: [defaultViewRole],
       columns: [],
     }),
-    [defaultViewRole, resourceName]
+    [defaultViewRole, resourceName],
   );
 
   const initialForm = useMemo(
@@ -118,7 +120,7 @@ function ViewForm({
           }
         : {}),
     }),
-    [initialEmptyForm, viewMeta, resourceName]
+    [initialEmptyForm, viewMeta, resourceName],
   );
 
   const {
@@ -153,7 +155,7 @@ function ViewForm({
             intent: Intent.SUCCESS,
           });
           history.push(
-            `${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`
+            `${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`,
           );
           setSubmitting(false);
         });
@@ -164,7 +166,7 @@ function ViewForm({
             intent: Intent.SUCCESS,
           });
           history.push(
-            `${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`
+            `${resourceMetadata.baseRoute}/${viewMeta.id}/custom_view`,
           );
           setSubmitting(false);
         });
@@ -178,7 +180,7 @@ function ViewForm({
       draggedColumns.map((column, index) => ({
         index,
         key: column.key,
-      }))
+      })),
     );
   }, [setFieldValue, draggedColumns]);
 
@@ -187,12 +189,12 @@ function ViewForm({
       { value: 'and', label: 'AND' },
       { value: 'or', label: 'OR' },
     ],
-    []
+    [],
   );
 
   const whenConditionalsItems = useMemo(
     () => [{ value: '', label: 'When' }],
-    []
+    [],
   );
 
   // Compatotors items.
@@ -204,7 +206,7 @@ function ViewForm({
       { value: 'contain', label: 'Contain' },
       { value: 'not_contain', label: 'Not Contain' },
     ],
-    []
+    [],
   );
 
   // Resource fields.
@@ -216,7 +218,7 @@ function ViewForm({
         label: field.label_name,
       })),
     ],
-    [resourceFields]
+    [resourceFields],
   );
 
   // Account item of select accounts field.
@@ -247,11 +249,11 @@ function ViewForm({
           'roles',
           viewRoles.map((role) => {
             return role;
-          })
+          }),
         );
       }
     },
-    [values, setFieldValue]
+    [values, setFieldValue],
   );
 
   const onClickDeleteView = useCallback(() => {
@@ -265,9 +267,9 @@ function ViewForm({
   };
 
   return (
-    <div class='view-form'>
+    <div class="view-form">
       <form onSubmit={handleSubmit}>
-        <div class='view-form--name-section'>
+        <div class="view-form--name-section">
           <Row>
             <Col sm={8}>
               <FormGroup
@@ -290,12 +292,12 @@ function ViewForm({
           </Row>
         </div>
 
-        <H5 className='mb2'>Define the conditionals</H5>
+        <H5 className="mb2">Define the conditionals</H5>
 
         {values.roles.map((role, index) => (
-          <Row class='view-form__role-conditional'>
-            <Col sm={2} class='flex'>
-              <div class='mr2 pt1 condition-number'>{index + 1}</div>
+          <Row class="view-form__role-conditional">
+            <Col sm={2} class="flex">
+              <div class="mr2 pt1 condition-number">{index + 1}</div>
               {index === 0 ? (
                 <HTMLSelect
                   options={whenConditionalsItems}
@@ -335,7 +337,7 @@ function ViewForm({
               </FormGroup>
             </Col>
 
-            <Col sm={5} class='flex'>
+            <Col sm={5} class="flex">
               <FormGroup
                 intent={hasError(`roles[${index}].value`) && Intent.DANGER}
               >
@@ -346,9 +348,9 @@ function ViewForm({
               </FormGroup>
 
               <Button
-                icon={<Icon icon='times-circle' iconSize={14} />}
+                icon={<Icon icon="times-circle" iconSize={14} />}
                 iconSize={14}
-                className='ml2'
+                className="ml2"
                 minimal={true}
                 intent={Intent.DANGER}
                 onClick={() => onClickRemoveRole(role, index)}
@@ -367,7 +369,7 @@ function ViewForm({
           </Button>
         </div>
 
-        <div class='view-form--logic-expression-section'>
+        <div class="view-form--logic-expression-section">
           <Row>
             <Col sm={8}>
               <FormGroup
@@ -381,7 +383,7 @@ function ViewForm({
                 helperText={
                   <ErrorMessage
                     {...{ errors, touched }}
-                    name='logic_expression'
+                    name="logic_expression"
                   />
                 }
                 inline={true}
@@ -403,22 +405,19 @@ function ViewForm({
 
         <H5 className={'mb2'}>Columns Preferences</H5>
 
-        <div class='dragable-columns'>
+        <div class="dragable-columns">
           <Row gutterWidth={14}>
-            <Col sm={4} className='dragable-columns__column'>
-              <H6 className='dragable-columns__title'>Available Columns</H6>
+            <Col sm={4} className="dragable-columns__column">
+              <H6 className="dragable-columns__title">Available Columns</H6>
 
-              <InputGroup
-                placeholder={intl.get('search')}
-                leftIcon='search'
-              />
+              <InputGroup placeholder={intl.get('search')} leftIcon="search" />
 
-              <div class='dragable-columns__items'>
+              <div class="dragable-columns__items">
                 <Menu>
                   <ReactSortable
                     list={availableColumns}
                     setList={setAvailableColumns}
-                    group='shared-group-name'
+                    group="shared-group-name"
                   >
                     {availableColumns.map((field) => (
                       <MenuItem key={field.id} text={field.label} />
@@ -429,37 +428,34 @@ function ViewForm({
             </Col>
 
             <Col sm={1}>
-              <div class='dragable-columns__arrows'>
+              <div class="dragable-columns__arrows">
                 <div>
                   <Icon
-                    icon='arrow-circle-left'
+                    icon="arrow-circle-left"
                     iconSize={30}
-                    color='#cecece'
+                    color="#cecece"
                   />
                 </div>
-                <div class='mt2'>
+                <div class="mt2">
                   <Icon
-                    icon='arrow-circle-right'
+                    icon="arrow-circle-right"
                     iconSize={30}
-                    color='#cecece'
+                    color="#cecece"
                   />
                 </div>
               </div>
             </Col>
 
-            <Col sm={4} className='dragable-columns__column'>
-              <H6 className='dragable-columns__title'>Selected Columns</H6>
-              <InputGroup
-                placeholder={intl.get('search')}
-                leftIcon='search'
-              />
+            <Col sm={4} className="dragable-columns__column">
+              <H6 className="dragable-columns__title">Selected Columns</H6>
+              <InputGroup placeholder={intl.get('search')} leftIcon="search" />
 
-              <div class='dragable-columns__items'>
+              <div class="dragable-columns__items">
                 <Menu>
                   <ReactSortable
                     list={draggedColumns}
                     setList={setDraggedColumn}
-                    group='shared-group-name'
+                    group="shared-group-name"
                   >
                     {draggedColumns.map((field) => (
                       <MenuItem key={field.id} text={field.label} />
@@ -471,14 +467,14 @@ function ViewForm({
           </Row>
         </div>
 
-        <div class='form__floating-footer'>
-          <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
+        <div class="form__floating-footer">
+          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
             <T id={'submit'} />
           </Button>
 
           <Button
             intent={Intent.NONE}
-            className='ml1'
+            className="ml1"
             onClick={handleClickCancelBtn}
           >
             <T id={'cancel'} />

src/containers/Views/ViewFormPage.tsx

@@ -1,21 +1,23 @@
-import React, {useEffect, useState, useCallback} from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useAsync } from 'react-use';
 import { useParams } from 'react-router-dom';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import {
+  If,
+  AppToaster,
+  DashboardInsider,
+  DashboardPageContent,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
 
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import ViewForm from 'containers/Views/ViewForm';
+import ViewForm from '@/containers/Views/ViewForm';
 
-import AppToaster from 'components/AppToaster';
-import {compose} from 'utils';
-import { If } from 'components';
-
-import withResourcesActions from 'containers/Resources/withResourcesActions';
-import withViewsActions from 'containers/Views/withViewsActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { compose } from '@/utils';
 
+import withResourcesActions from '@/containers/Resources/withResourcesActions';
+import withViewsActions from '@/containers/Views/withViewsActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
 // @flow
 function ViewFormPage({
@@ -33,19 +35,17 @@ function ViewFormPage({
   const { resource_slug: resourceSlug, view_id: viewId } = useParams();
   const [stateDeleteView, setStateDeleteView] = useState(null);
 
-    
-
   const fetchHook = useAsync(async () => {
     return Promise.all([
-      ...(resourceSlug) ? [
-        requestFetchResourceColumns(resourceSlug),
-        requestFetchResourceFields(resourceSlug),
-      ] : (viewId) ? [
-        requestFetchViewResource(viewId),
-      ] : [],
-      ...(viewId) ? [
-        requestFetchView(viewId),
-      ] : [],
+      ...(resourceSlug
+        ? [
+            requestFetchResourceColumns(resourceSlug),
+            requestFetchResourceFields(resourceSlug),
+          ]
+        : viewId
+        ? [requestFetchViewResource(viewId)]
+        : []),
+      ...(viewId ? [requestFetchView(viewId)] : []),
     ]);
   }, []);
 
@@ -60,7 +60,6 @@ function ViewFormPage({
     };
   }, [viewId, changePageTitle]);
 
-
   // Handle delete view button click.
   const handleDeleteView = useCallback((view) => {
     setStateDeleteView(view);
@@ -79,46 +78,52 @@ function ViewFormPage({
         message: intl.get('the_custom_view_has_been_deleted_successfully'),
         intent: Intent.SUCCESS,
       });
-    })
+    });
   }, [requestDeleteView, stateDeleteView]);
 
   return (
     <DashboardInsider
       name={'view-form'}
       loading={fetchHook.loading}
-      mount={false}>
+      mount={false}
+    >
       <DashboardPageContent>
         <If condition={fetchHook.value}>
           <ViewForm
             viewId={viewId}
             resourceName={resourceSlug}
-            onDelete={handleDeleteView} />
+            onDelete={handleDeleteView}
+          />
 
           <Alert
-            cancelButtonText={<T id={'cancel'}/>}
-            confirmButtonText={<T id={'delete'}/>}
+            cancelButtonText={<T id={'cancel'} />}
+            confirmButtonText={<T id={'delete'} />}
             icon="trash"
             intent={Intent.DANGER}
             isOpen={stateDeleteView}
             onCancel={handleCancelDeleteView}
-            onConfirm={handleConfirmDeleteView}>
+            onConfirm={handleConfirmDeleteView}
+          >
             <p>
               <FormattedHTMLMessage
-                id={'once_delete_these_views_you_will_not_able_restore_them'} />
+                id={'once_delete_these_views_you_will_not_able_restore_them'}
+              />
             </p>
           </Alert>
         </If>
 
         <If condition={fetchHook.error}>
-          <h4><T id={'something_wrong'}/></h4>
+          <h4>
+            <T id={'something_wrong'} />
+          </h4>
         </If>
       </DashboardPageContent>
-    </DashboardInsider>   
+    </DashboardInsider>
   );
 }
 
 export default compose(
   withDashboardActions,
   withViewsActions,
-  withResourcesActions
-)(ViewFormPage);
+  withResourcesActions,
+)(ViewFormPage);

src/containers/Views/withViewDetails.tsx

@@ -2,7 +2,7 @@ import {connect} from 'react-redux';
 import {
   getViewItemFactory,
   getViewMetaFactory,
-} from 'store/customViews/customViews.selectors';
+} from '@/store/customViews/customViews.selectors';
 
 export default () => {
   const getViewItem = getViewItemFactory();

src/containers/Views/withViewsActions.tsx

@@ -6,7 +6,7 @@ import {
   editView,
   fetchViewResource,
   fetchResourceViews,
-} from 'store/customViews/customViews.actions';
+} from '@/store/customViews/customViews.actions';
 
 
 export const mapDispatchToProps = (dispatch) => ({