Merge pull request #10562 from jakemcdermott/fix-relatives-2

Fix relative imports in src code, relocate src

(Lots of files modified but the changes are low-risk and automated)
This PR is a follow-up to #6954, specifically the part where we removed webpack aliases to pick up react-scripts.
SUMMARY

 Add the jsconfig.json w/  baseUrl to enable absolute imports from src. Replaces all the ../../../../../ importing
  jsx -> js extension renaming
 hooks directory
[ ] ui_next -> ui see: #10676

For posterity, the script used to fix the relative imports is included in the commit history.
python3 tools/fixrelative.py awx/ui_next/src
npm --prefix=awx/ui_next run lint -- --fix
npm --prefix=awx/ui_next run prettier

import argparse
import glob
import os
from shutil import move, copymode
from tempfile import mkstemp


def get_new_import_string(old_import_str, root):
    if not root.startswith("./"):
        raise Exception("root must start with './'")
    name = root.replace("./", "")
    left, right = old_import_str.split("from")
    left += "from '"
    _, trailing = right.split(name)

    return left + name + trailing


roots = [
    "./api",
    "./components",
    # "./constants",
    "./contexts",
    "./screens",
    "./types",
    "./util",
]


def get_root(line):
    matched_root = None
    for root in roots:
        if root in line:
            matched_root = root
            break
    if "jest" in line:
        matched_root = None
    return matched_root


def find_and_replace_roots(file_path, root_dir, preview):
    fh, temp_path = mkstemp()
    has_logged_file_name = False
    with os.fdopen(fh, "w") as new_file:
        with open(file_path) as old_file:
            for (line_number, line) in enumerate(old_file):
                matched_root = get_root(line)
                if matched_root:
                    new_line = get_new_import_string(line, matched_root)
                    if not preview:
                        new_file.write(new_line)
                    if not has_logged_file_name:
                        log_file_replacement(root_dir, file_path)
                        has_logged_file_name = True
                    log_line_replacement(line_number, line, new_line)
                elif not preview:
                    new_file.write(line)

    if not preview:
        copymode(file_path, temp_path)
        os.remove(file_path)
        move(temp_path, file_path)


def log_line_replacement(line_number, line, new_line):
    display_line = line.replace(os.linesep, "")
    display_new_line = new_line.replace(os.linesep, "")
    print(f"\t (line {line_number}): {display_line} --> {display_new_line}")


def log_file_replacement(root_dir, file_path):
    display_path = os.path.relpath(file_path, root_dir)
    print("")
    print(f"{display_path}:")


def parse_args():
    parser = argparse.ArgumentParser()
    parser.add_argument("root_dir", help="Root directory")
    parser.add_argument("--preview", help="Preview (no write)", action="store_true")
    args = parser.parse_args()
    return args


def run():
    args = parse_args()
    search_path = args.root_dir + "**/**/*.js*"

    for file_path in glob.iglob(search_path, recursive=True):
        find_and_replace_roots(file_path, args.root_dir, args.preview)


if __name__ == "__main__":
    run()

Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/.eslintrc

@@ -19,6 +19,11 @@
   "settings": {
     "react": {
       "version": "16.5.2"
+    },
+    "import/resolver": {
+      "node": {
+        paths: ["src"]
+      }
     }
   },
   "env": {
@@ -135,6 +140,7 @@
     "jsx-a11y/label-has-for": "off",
     "jsx-a11y/label-has-associated-control": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "react/jsx-filename-extension": "off"
   }
 }

awx/ui_next/CONTRIBUTING.md

@@ -156,6 +156,7 @@ Inside these folders, the internal structure is:
 - **/api** - All classes used to interact with API's are found here. See [AWX REST API Interaction](#awx-rest-api-interaction) for more information.
 - **/components** - All generic components that are meant to be used in multiple contexts throughout awx. Things like buttons, tabs go here.
 - **/contexts** - Components which utilize react's context api.
+- **/hooks** - Custom react [hooks](https://reactjs.org/docs/hooks-custom.html)
 - **/locales** - [Internationalization](#internationalization) config and source files.
 - **/screens** - Based on the various routes of awx.
   - **/shared** - Components that are meant to be used specifically by a particular route, but might be sharable across pages of that route. For example, a form component which is used on both add and edit screens.
@@ -169,24 +170,24 @@ Inside these folders, the internal structure is:
 
 In the root of `/src`, there are a few files which are used to initialize the react app. These are
 
-- **index.jsx**
+- **index.js**
   - Connects react app to root dom node.
   - Sets up root route structure, navigation grouping and login modal
   - Calls base context providers
   - Imports .scss styles.
-- **app.jsx**
+- **app.js**
   - Sets standard page layout, about modal, and root dialog modal.
-- **RootProvider.jsx**
+- **RootProvider.js**
   - Sets up all context providers.
   - Initializes i18n and router
 
 ### Naming files
 
-Ideally, files should be named the same as the component they export, and tests with `.test` appended. In other words, `<FooBar>` would be defined in `FooBar.jsx`, and its tests would be defined in `FooBar.test.jsx`.
+Ideally, files should be named the same as the component they export, and tests with `.test` appended. In other words, `<FooBar>` would be defined in `FooBar.js`, and its tests would be defined in `FooBar.test.js`.
 
 #### Naming components that use the context api
 
-**File naming** - Since contexts export both consumer and provider (and potentially in withContext function form), the file can be simplified to be named after the consumer export. In other words, the file containing the `Network` context components would be named `Network.jsx`.
+**File naming** - Since contexts export both consumer and provider (and potentially in withContext function form), the file can be simplified to be named after the consumer export. In other words, the file containing the `Network` context components would be named `Network.js`.
 
 **Component naming and conventions** - In order to provide a consistent interface with react-router and [lingui](https://lingui.js.org/), as well as make their usage easier and less verbose, context components follow these conventions:
 
@@ -264,7 +265,7 @@ There are currently a few custom hooks:
 1. [useRequest](https://github.com/ansible/awx/blob/devel/awx/ui_next/src/util/useRequest.js#L21) encapsulates main actions related to requests.
 2. [useDismissableError](https://github.com/ansible/awx/blob/devel/awx/ui_next/src/util/useRequest.js#L71) provides controls for "dismissing" an error message.
 3. [useDeleteItems](https://github.com/ansible/awx/blob/devel/awx/ui_next/src/util/useRequest.js#L98) handles deletion of items from a paginated item list.
-4. [useSelected](https://github.com/ansible/awx/blob/devel/awx/ui_next/src/util/useSelected.jsx#L14) provides a way to read and update a selected list.
+4. [useSelected](https://github.com/ansible/awx/blob/devel/awx/ui_next/src/util/useSelected.js#L14) provides a way to read and update a selected list.
 
 ### Naming Functions
 
@@ -302,7 +303,7 @@ this.state = {
 
 ### Testing components that use contexts
 
-We have several React contexts that wrap much of the app, including those from react-router, lingui, and some of our own. When testing a component that depends on one or more of these, you can use the `mountWithContexts()` helper function found in `testUtils/enzymeHelpers.jsx`. This can be used just like Enzyme's `mount()` function, except it will wrap the component tree with the necessary context providers and basic stub data.
+We have several React contexts that wrap much of the app, including those from react-router, lingui, and some of our own. When testing a component that depends on one or more of these, you can use the `mountWithContexts()` helper function found in `testUtils/enzymeHelpers.js`. This can be used just like Enzyme's `mount()` function, except it will wrap the component tree with the necessary context providers and basic stub data.
 
 If you want to stub the value of a context, or assert actions taken on it, you can customize a contexts value by passing a second parameter to `mountWithContexts`. For example, this provides a custom value for the `Config` context:
 
@@ -352,7 +353,7 @@ You can learn more about the ways lingui and its React helpers at [this link](ht
 1. `npm run add-locale` to add the language that you want to translate to (we should only have to do this once and the commit to repo afaik). Example: `npm run add-locale en es fr` # Add English, Spanish and French locale
 2. `npm run extract-strings` to create .po files for each language specified. The .po files will be placed in src/locales. When updating strings that are used by `<Plural>` or `plural()` you will need to run this command to get the strings to render properly. This command will create `.po` files for each of the supported languages that will need to be committed with your PR.
 3. Open up the .po file for the language you want to test and add some translations. In production we would pass this .po file off to the translation team.
-4. Once you've edited your .po file (or we've gotten a .po file back from the translation team) run `npm run compile-strings`. This command takes the .po files and turns them into a minified JSON object and can be seen in the `messages.js` file in each locale directory. These files get loaded at the App root level (see: App.jsx).
+4. Once you've edited your .po file (or we've gotten a .po file back from the translation team) run `npm run compile-strings`. This command takes the .po files and turns them into a minified JSON object and can be seen in the `messages.js` file in each locale directory. These files get loaded at the App root level (see: App.js).
 5. Change the language in your browser and reload the page. You should see your specified translations in place of English strings.
 
 ### Marking an issue to be translated

awx/ui_next/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}

awx/ui_next/src/App.js

@@ -16,21 +16,21 @@ import {
   ConfigProvider,
   useAuthorizedPath,
   useUserProfile,
-} from './contexts/Config';
-import { SessionProvider, useSession } from './contexts/Session';
-import AppContainer from './components/AppContainer';
-import Background from './components/Background';
-import ContentError from './components/ContentError';
-import NotFound from './screens/NotFound';
-import Login from './screens/Login';
-import { isAuthenticated } from './util/auth';
-import { getLanguageWithoutRegionCode } from './util/language';
+} from 'contexts/Config';
+import { SessionProvider, useSession } from 'contexts/Session';
+import AppContainer from 'components/AppContainer';
+import Background from 'components/Background';
+import ContentError from 'components/ContentError';
+import NotFound from 'screens/NotFound';
+import Login from 'screens/Login';
+import { isAuthenticated } from 'util/auth';
+import { getLanguageWithoutRegionCode } from 'util/language';
+import Metrics from 'screens/Metrics';
+import SubscriptionEdit from 'screens/Setting/Subscription/SubscriptionEdit';
+import { RootAPI } from 'api';
 import { dynamicActivate, locales } from './i18nLoader';
-import Metrics from './screens/Metrics';
 import getRouteConfig from './routeConfig';
-import SubscriptionEdit from './screens/Setting/Subscription/SubscriptionEdit';
 import { SESSION_REDIRECT_URL } from './constants';
-import { RootAPI } from './api';
 
 function ErrorFallback({ error }) {
   return (

awx/ui_next/src/App.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { RootAPI } from 'api';
+import * as SessionContext from 'contexts/Session';
 import { mountWithContexts } from '../testUtils/enzymeHelpers';
-import { RootAPI } from './api';
-import * as SessionContext from './contexts/Session';
 import App from './App';
 
 jest.mock('./api');

awx/ui_next/src/api/Base.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
+import { encodeQueryString } from 'util/qs';
+import debounce from 'util/debounce';
 import { SESSION_TIMEOUT_KEY } from '../constants';
-import { encodeQueryString } from '../util/qs';
-import debounce from '../util/debounce';
 
 const updateStorage = debounce((key, val) => {
   window.localStorage.setItem(key, val);

awx/ui_next/src/components/About/About.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@lingui/macro';
 import { AboutModal } from '@patternfly/react-core';
-import useBrandName from '../../util/useBrandName';
+import useBrandName from 'hooks/useBrandName';
 
 function About({ version, isOpen, onClose }) {
   const brandName = useBrandName();

awx/ui_next/src/components/About/About.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import About from './About';
 
-jest.mock('../../util/useBrandName', () => ({
+jest.mock('../../hooks/useBrandName', () => ({
   __esModule: true,
   default: () => ({
     current: 'AWX',

awx/ui_next/src/components/AdHocCommands/AdHocCommands.js

@@ -5,13 +5,13 @@ import { t } from '@lingui/macro';
 import PropTypes from 'prop-types';
 import { Button, DropdownItem } from '@patternfly/react-core';
 
-import useRequest, { useDismissableError } from '../../util/useRequest';
-import { InventoriesAPI, CredentialTypesAPI } from '../../api';
+import useRequest, { useDismissableError } from 'hooks/useRequest';
+import { InventoriesAPI, CredentialTypesAPI } from 'api';
 
+import { KebabifiedContext } from 'contexts/Kebabified';
 import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
 import AdHocCommandsWizard from './AdHocCommandsWizard';
-import { KebabifiedContext } from '../../contexts/Kebabified';
 import ContentError from '../ContentError';
 
 function AdHocCommands({ adHocItems, hasListItems, onLaunchLoading }) {

awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import {
-  mountWithContexts,
-  waitForElement,
-} from '../../../testUtils/enzymeHelpers';
 import {
   CredentialTypesAPI,
   InventoriesAPI,
   CredentialsAPI,
   ExecutionEnvironmentsAPI,
   RootAPI,
-} from '../../api';
+} from 'api';
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../testUtils/enzymeHelpers';
 import AdHocCommands from './AdHocCommands';
 
 jest.mock('../../api/models/CredentialTypes');

awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { CredentialsAPI, ExecutionEnvironmentsAPI, RootAPI } from 'api';
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
-import { CredentialsAPI, ExecutionEnvironmentsAPI, RootAPI } from '../../api';
 import AdHocCommandsWizard from './AdHocCommandsWizard';
 
 jest.mock('../../api/models/CredentialTypes');

awx/ui_next/src/components/AdHocCommands/AdHocCredentialStep.js

@@ -5,14 +5,14 @@ import { t } from '@lingui/macro';
 import PropTypes from 'prop-types';
 import { useField } from 'formik';
 import { Form, FormGroup } from '@patternfly/react-core';
-import { CredentialsAPI } from '../../api';
+import { CredentialsAPI } from 'api';
+import { getQSConfig, parseQueryString, mergeParams } from 'util/qs';
+import useRequest from 'hooks/useRequest';
+import { required } from 'util/validators';
 import Popover from '../Popover';
 
-import { getQSConfig, parseQueryString, mergeParams } from '../../util/qs';
-import useRequest from '../../util/useRequest';
 import ContentError from '../ContentError';
 import ContentLoading from '../ContentLoading';
-import { required } from '../../util/validators';
 import OptionsList from '../OptionsList';
 
 const QS_CONFIG = getQSConfig('credentials', {

awx/ui_next/src/components/AdHocCommands/AdHocCredentialStep.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { Formik } from 'formik';
+import { CredentialsAPI } from 'api';
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
-import { CredentialsAPI } from '../../api';
 import AdHocCredentialStep from './AdHocCredentialStep';
 
 jest.mock('../../api/models/Credentials');

awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.js

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import { useField } from 'formik';
 import { Form, FormGroup, Switch, Checkbox } from '@patternfly/react-core';
 import styled from 'styled-components';
+import { required } from 'util/validators';
+import useBrandName from 'hooks/useBrandName';
 import AnsibleSelect from '../AnsibleSelect';
 import FormField from '../FormField';
 import { VariablesField } from '../CodeEditor';
@@ -15,8 +17,6 @@ import {
   FormCheckboxLayout,
 } from '../FormLayout';
 import Popover from '../Popover';
-import { required } from '../../util/validators';
-import useBrandName from '../../util/useBrandName';
 
 const TooltipWrapper = styled.div`
   text-align: left;

awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { Formik } from 'formik';
+import { RootAPI } from 'api';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-import { RootAPI } from '../../api';
 import DetailsStep from './AdHocDetailsStep';
 
 jest.mock('../../api/models/Credentials');

awx/ui_next/src/components/AdHocCommands/AdHocExecutionEnironmentStep.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { Formik } from 'formik';
+import { ExecutionEnvironmentsAPI } from 'api';
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
-import { ExecutionEnvironmentsAPI } from '../../api';
 import AdHocExecutionEnvironmentStep from './AdHocExecutionEnvironmentStep';
 
 jest.mock('../../api/models/ExecutionEnvironments');

awx/ui_next/src/components/AdHocCommands/AdHocExecutionEnvironmentStep.js

@@ -3,11 +3,11 @@ import { useHistory } from 'react-router-dom';
 import { t } from '@lingui/macro';
 import { useField } from 'formik';
 import { Form, FormGroup } from '@patternfly/react-core';
-import { ExecutionEnvironmentsAPI } from '../../api';
-import Popover from '../Popover';
+import { ExecutionEnvironmentsAPI } from 'api';
 
-import { parseQueryString, getQSConfig, mergeParams } from '../../util/qs';
-import useRequest from '../../util/useRequest';
+import { parseQueryString, getQSConfig, mergeParams } from 'util/qs';
+import useRequest from 'hooks/useRequest';
+import Popover from '../Popover';
 import ContentError from '../ContentError';
 import ContentLoading from '../ContentLoading';
 import OptionsList from '../OptionsList';

awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.js

@@ -2,8 +2,8 @@ import React, { useState, useRef, useEffect, Fragment } from 'react';
 import { t } from '@lingui/macro';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownPosition } from '@patternfly/react-core';
+import { useKebabifiedMenu } from 'contexts/Kebabified';
 import { ToolbarAddButton } from '../PaginatedTable';
-import { useKebabifiedMenu } from '../../contexts/Kebabified';
 
 function AddDropDownButton({ dropdownItems, ouiaId }) {
   const { isKebabified } = useKebabifiedMenu();

awx/ui_next/src/components/AddRole/AddResourceRole.js

@@ -2,11 +2,11 @@ import React, { Fragment, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { t } from '@lingui/macro';
+import { TeamsAPI, UsersAPI } from 'api';
 import SelectableCard from '../SelectableCard';
 import Wizard from '../Wizard';
 import SelectResourceStep from './SelectResourceStep';
 import SelectRoleStep from './SelectRoleStep';
-import { TeamsAPI, UsersAPI } from '../../api';
 
 const readUsers = async queryParams =>
   UsersAPI.read(Object.assign(queryParams, { is_superuser: false }));

awx/ui_next/src/components/AddRole/AddResourceRole.test.js

@@ -4,12 +4,12 @@ import { shallow } from 'enzyme';
 import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
 
+import { TeamsAPI, UsersAPI } from 'api';
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
 import AddResourceRole, { _AddResourceRole } from './AddResourceRole';
-import { TeamsAPI, UsersAPI } from '../../api';
 
 jest.mock('../../api/models/Teams');
 jest.mock('../../api/models/Users');

awx/ui_next/src/components/AddRole/SelectResourceStep.js

@@ -2,12 +2,12 @@ import React, { Fragment, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter, useLocation } from 'react-router-dom';
 import { t } from '@lingui/macro';
-import useRequest from '../../util/useRequest';
-import { SearchColumns, SortColumns } from '../../types';
+import useRequest from 'hooks/useRequest';
+import { SearchColumns, SortColumns } from 'types';
+import { getQSConfig, parseQueryString } from 'util/qs';
 import DataListToolbar from '../DataListToolbar';
 import CheckboxListItem from '../CheckboxListItem';
 import { SelectedList } from '../SelectedList';
-import { getQSConfig, parseQueryString } from '../../util/qs';
 import PaginatedTable, { HeaderCell, HeaderRow } from '../PaginatedTable';
 
 const QS_Config = sortColumns => {

awx/ui_next/src/components/AppContainer/AppContainer.js

@@ -15,9 +15,9 @@ import { t, Plural } from '@lingui/macro';
 
 import styled from 'styled-components';
 
-import { useConfig, useAuthorizedPath } from '../../contexts/Config';
-import { useSession } from '../../contexts/Session';
-import issuePendoIdentity from '../../util/issuePendoIdentity';
+import { useConfig, useAuthorizedPath } from 'contexts/Config';
+import { useSession } from 'contexts/Session';
+import issuePendoIdentity from 'util/issuePendoIdentity';
 import About from '../About';
 import BrandLogo from './BrandLogo';
 import NavExpandableGroup from './NavExpandableGroup';

awx/ui_next/src/components/AppContainer/AppContainer.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { MeAPI, RootAPI } from 'api';
+import { useAuthorizedPath } from 'contexts/Config';
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
-import { MeAPI, RootAPI } from '../../api';
-import { useAuthorizedPath } from '../../contexts/Config';
 import AppContainer from './AppContainer';
 
 jest.mock('../../api');

awx/ui_next/src/components/AppContainer/PageHeaderToolbar.js

@@ -20,10 +20,10 @@ import {
   QuestionCircleIcon,
   UserIcon,
 } from '@patternfly/react-icons';
-import { WorkflowApprovalsAPI } from '../../api';
-import useRequest from '../../util/useRequest';
-import getDocsBaseUrl from '../../util/getDocsBaseUrl';
-import { useConfig } from '../../contexts/Config';
+import { WorkflowApprovalsAPI } from 'api';
+import useRequest from 'hooks/useRequest';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
+import { useConfig } from 'contexts/Config';
 import useWsPendingApprovalCount from './useWsPendingApprovalCount';
 
 const PendingWorkflowApprovals = styled.div`

awx/ui_next/src/components/AppContainer/PageHeaderToolbar.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { WorkflowApprovalsAPI } from 'api';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import PageHeaderToolbar from './PageHeaderToolbar';
-import { WorkflowApprovalsAPI } from '../../api';
 
 jest.mock('../../api');
 

awx/ui_next/src/components/AppContainer/useWsPendingApprovalCount.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import useWebsocket from '../../util/useWebsocket';
-import useThrottle from '../../util/useThrottle';
+import useWebsocket from 'hooks/useWebsocket';
+import useThrottle from 'hooks/useThrottle';
 
 export default function useWsPendingApprovalCount(
   initialCount,

awx/ui_next/src/components/AppContainer/useWsPendingApprovalCount.test.js

@@ -23,7 +23,7 @@ describe('useWsPendingApprovalCount hook', () => {
       Jest mock timers don’t play well with jest-websocket-mock,
       so we'll stub out throttling to resolve immediately
     */
-    jest.mock('../../util/useThrottle', () => ({
+    jest.mock('../../hooks/useThrottle', () => ({
       __esModule: true,
       default: jest.fn(val => val),
     }));

awx/ui_next/src/components/AssociateModal/AssociateModal.js

@@ -3,10 +3,10 @@ import { useHistory } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
 import { Button, Modal } from '@patternfly/react-core';
+import useRequest from 'hooks/useRequest';
+import { getQSConfig, parseQueryString } from 'util/qs';
+import useSelected from 'hooks/useSelected';
 import OptionsList from '../OptionsList';
-import useRequest from '../../util/useRequest';
-import { getQSConfig, parseQueryString } from '../../util/qs';
-import useSelected from '../../util/useSelected';
 
 const QS_CONFIG = (order_by = 'name') => {
   return getQSConfig('associate', {

awx/ui_next/src/components/CodeEditor/CodeEditor.js

@@ -11,7 +11,7 @@ import 'ace-builds/src-noconflict/theme-github';
 
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import debounce from '../../util/debounce';
+import debounce from 'util/debounce';
 
 config.set('loadWorkerFromBlob', false);
 

awx/ui_next/src/components/CodeEditor/CodeEditor.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import debounce from 'util/debounce';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import CodeEditor from './CodeEditor';
-import debounce from '../../util/debounce';
 
 jest.mock('../../util/debounce');
 

awx/ui_next/src/components/CodeEditor/VariablesDetail.js

@@ -11,15 +11,10 @@ import {
   Modal,
 } from '@patternfly/react-core';
 import { ExpandArrowsAltIcon } from '@patternfly/react-icons';
+import { yamlToJson, jsonToYaml, isJsonObject, isJsonString } from 'util/yaml';
 import { DetailName, DetailValue } from '../DetailList';
 import MultiButtonToggle from '../MultiButtonToggle';
 import Popover from '../Popover';
-import {
-  yamlToJson,
-  jsonToYaml,
-  isJsonObject,
-  isJsonString,
-} from '../../util/yaml';
 import CodeEditor from './CodeEditor';
 import { JSON_MODE, YAML_MODE } from './constants';
 

awx/ui_next/src/components/CodeEditor/VariablesField.js

@@ -6,9 +6,9 @@ import { useField } from 'formik';
 import styled from 'styled-components';
 import { Split, SplitItem, Button, Modal } from '@patternfly/react-core';
 import { ExpandArrowsAltIcon } from '@patternfly/react-icons';
+import { yamlToJson, jsonToYaml, isJsonString } from 'util/yaml';
 import { CheckboxField } from '../FormField';
 import MultiButtonToggle from '../MultiButtonToggle';
-import { yamlToJson, jsonToYaml, isJsonString } from '../../util/yaml';
 import CodeEditor from './CodeEditor';
 import Popover from '../Popover';
 import { JSON_MODE, YAML_MODE } from './constants';

awx/ui_next/src/components/CodeEditor/VariablesInput.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { string, func, bool, number } from 'prop-types';
 import { Split, SplitItem } from '@patternfly/react-core';
 import styled from 'styled-components';
-import { yamlToJson, jsonToYaml, isJsonString } from '../../util/yaml';
+import { yamlToJson, jsonToYaml, isJsonString } from 'util/yaml';
 import MultiButtonToggle from '../MultiButtonToggle';
 import CodeEditor from './CodeEditor';
 import { JSON_MODE, YAML_MODE } from './constants';

awx/ui_next/src/components/ContentError/ContentError.js

@@ -10,7 +10,7 @@ import {
   EmptyStateBody,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
-import { useSession } from '../../contexts/Session';
+import { useSession } from 'contexts/Session';
 import ErrorDetail from '../ErrorDetail';
 
 function ContentError({ error, children, isNotFound }) {

awx/ui_next/src/components/CopyButton/CopyButton.js

@@ -3,7 +3,7 @@ import { t } from '@lingui/macro';
 import PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
 import { CopyIcon } from '@patternfly/react-icons';
-import useRequest, { useDismissableError } from '../../util/useRequest';
+import useRequest, { useDismissableError } from 'hooks/useRequest';
 import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
 

awx/ui_next/src/components/CredentialChip/CredentialChip.js

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { t } from '@lingui/macro';
 import { Chip } from '@patternfly/react-core';
-import { Credential } from '../../types';
-import { toTitleCase } from '../../util/strings';
+import { Credential } from 'types';
+import { toTitleCase } from 'util/strings';
 
 function CredentialChip({ credential, ...props }) {
   let type;

awx/ui_next/src/components/DataListToolbar/DataListToolbar.js

@@ -20,11 +20,11 @@ import {
   AngleRightIcon,
   SearchIcon,
 } from '@patternfly/react-icons';
+import { SearchColumns, SortColumns, QSConfig } from 'types';
+import { KebabifiedProvider } from 'contexts/Kebabified';
 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
 import Sort from '../Sort';
-import { SearchColumns, SortColumns, QSConfig } from '../../types';
-import { KebabifiedProvider } from '../../contexts/Kebabified';
 
 const ToolbarContent = styled(PFToolbarContent)`
   & > .pf-c-toolbar__content-section {

awx/ui_next/src/components/DeleteButton/DeleteButton.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import { Button, Badge, Alert, Tooltip } from '@patternfly/react-core';
+import { getRelatedResourceDeleteCounts } from 'util/getRelatedResourceDeleteDetails';
 import AlertModal from '../AlertModal';
-import { getRelatedResourceDeleteCounts } from '../../util/getRelatedResourceDeleteDetails';
 import ErrorDetail from '../ErrorDetail';
 
 const WarningMessage = styled(Alert)`

awx/ui_next/src/components/DeleteButton/DeleteButton.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { CredentialsAPI } from 'api';
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
-import { CredentialsAPI } from '../../api';
 import DeleteButton from './DeleteButton';
 
 jest.mock('../../api');

awx/ui_next/src/components/DetailList/NumberSinceDetail.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { node, string } from 'prop-types';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import { formatDateString } from '../../util/dates';
+import { formatDateString } from 'util/dates';
 import _Detail from './Detail';
 
 const Detail = styled(_Detail)`

awx/ui_next/src/components/DetailList/UserDateDetail.js

@@ -3,9 +3,9 @@ import { node, string } from 'prop-types';
 import { Trans } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { formatDateString } from '../../util/dates';
+import { formatDateString } from 'util/dates';
+import { SummaryFieldUser } from 'types';
 import _Detail from './Detail';
-import { SummaryFieldUser } from '../../types';
 
 const Detail = styled(_Detail)`
   word-break: break-word;

awx/ui_next/src/components/DisassociateButton/DisassociateButton.js

@@ -4,7 +4,7 @@ import { arrayOf, func, shape, string, oneOfType, number } from 'prop-types';
 import { t } from '@lingui/macro';
 import { Button, Tooltip, DropdownItem } from '@patternfly/react-core';
 import styled from 'styled-components';
-import { KebabifiedContext } from '../../contexts/Kebabified';
+import { KebabifiedContext } from 'contexts/Kebabified';
 
 import AlertModal from '../AlertModal';
 

awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js

@@ -5,10 +5,10 @@ import { t, Trans } from '@lingui/macro';
 import { Popover, Tooltip } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { ExclamationTriangleIcon as PFExclamationTriangleIcon } from '@patternfly/react-icons';
+import { ExecutionEnvironment } from 'types';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
+import { useConfig } from 'contexts/Config';
 import { Detail } from '../DetailList';
-import { ExecutionEnvironment } from '../../types';
-import getDocsBaseUrl from '../../util/getDocsBaseUrl';
-import { useConfig } from '../../contexts/Config';
 
 const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
   color: var(--pf-global--warning-color--100);