Upgrade react-router-dom v6 to react-router v7

awx/ui/config/jest/textEncoderPolyfill.js

@@ -0,0 +1,8 @@
+const { TextEncoder, TextDecoder } = require('util');
+
+if (typeof globalThis.TextEncoder === 'undefined') {
+  globalThis.TextEncoder = TextEncoder;
+}
+if (typeof globalThis.TextDecoder === 'undefined') {
+  globalThis.TextDecoder = TextDecoder;
+}

awx/ui/package.json

@@ -6,6 +6,7 @@
     "node": ">=22.19.0"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^3.0.0",
     "@lingui/react": "^6.3.0",
     "@patternfly/patternfly": "4.224.5",
     "@patternfly/react-core": "4.278.1",
@@ -16,7 +17,6 @@
     "ansi-to-html": "0.7.2",
     "cheerio": "1.0.0-rc.12",
     "d3": "7.9.0",
-    "@dagrejs/dagre": "^3.0.0",
     "dompurify": "^3.4.11",
     "formik": "2.4.9",
     "has-ansi": "5.0.1",
@@ -27,7 +27,7 @@
     "react-ace": "^14.0.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "^6.1.2",
-    "react-router-dom": "^6.30.4",
+    "react-router": "^7.18.0",
     "rrule": "2.8.1",
     "styled-components": "^6.4.2"
   },
@@ -154,6 +154,7 @@
       "testUtils/**/*.{js,jsx}"
     ],
     "setupFiles": [
+      "<rootDir>/config/jest/textEncoderPolyfill.js",
       "react-app-polyfill/jsdom"
     ],
     "setupFilesAfterEnv": [

awx/ui/src/App.js

@@ -6,7 +6,7 @@ import {
   Navigate,
   useLocation,
   useNavigate,
-} from 'react-router-dom';
+} from 'react-router';
 import { ErrorBoundary } from 'react-error-boundary';
 import locationReplace from 'util/navigation';
 import { I18nProvider } from '@lingui/react';

awx/ui/src/components/AdHocCommands/AdHocCommands.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useContext } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useNavigate } from 'routerCompat';
 
 import { useLingui } from '@lingui/react/macro';

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

@@ -19,8 +19,8 @@ jest.mock('../../api/models/Credentials');
 jest.mock('../../api/models/ExecutionEnvironments');
 jest.mock('../../api/models/Root');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useParams: () => ({
     id: 1,
   }),

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useLingui } from '@lingui/react/macro';
 import useRequest from 'hooks/useRequest';
 import { getQSConfig, parseQueryString } from 'util/qs';

awx/ui/src/components/AppContainer/NavExpandableGroup.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { matchPath, Link, useLocation  } from 'react-router-dom';
+import { matchPath, Link, useLocation  } from 'react-router';
 import { NavExpandable, NavItem } from '@patternfly/react-core';
 
 function NavExpandableGroup(props) {

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

@@ -4,7 +4,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styled from 'styled-components';
 import {
   Dropdown,

awx/ui/src/components/ContentError/ContentError.js

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Navigate } from 'routerCompat';
 import { useLingui } from '@lingui/react/macro';
 

awx/ui/src/components/DetailList/LaunchedByDetail.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useLingui } from '@lingui/react/macro';
 import getScheduleUrl from 'util/getScheduleUrl';
 import Detail from './Detail';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Trans } from '@lingui/react/macro';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styled from 'styled-components';
 import { formatDateString } from 'util/dates';
 import _Detail from './Detail';

awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Trans, useLingui } from '@lingui/react/macro';
 
 import { Popover, Tooltip } from '@patternfly/react-core';

awx/ui/src/components/InstanceGroupLabels/InstanceGroupLabels.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Label, LabelGroup } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 function InstanceGroupLabels({ labels, isLinkable = false }) {
   const buildLinkURL = (isContainerGroup) =>

awx/ui/src/components/JobList/JobList.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useLingui, Plural } from '@lingui/react/macro';
 
 import { Card } from '@patternfly/react-core';

awx/ui/src/components/JobList/JobListItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { useLingui } from '@lingui/react/macro';
 import { Button, Chip } from '@patternfly/react-core';

awx/ui/src/components/JobList/useWsJobs.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import useWebsocket from 'hooks/useWebsocket';
 import useThrottle from 'hooks/useThrottle';
 import { parseQueryString } from 'util/qs';

awx/ui/src/components/LabelLists/LabelListItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tr, Td } from '@patternfly/react-table';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useLingui } from '@lingui/react/macro';
 
 function LabelListItem({ label, searchOrg }) {

awx/ui/src/components/LabelLists/LabelLists.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { Card } from '@patternfly/react-core';
 import { useLingui } from '@lingui/react/macro';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import useRequest from 'hooks/useRequest';
 import { LabelsAPI } from 'api';
 import { getQSConfig, parseQueryString } from 'util/qs';

awx/ui/src/components/LaunchPrompt/steps/CredentialsStep.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useNavigate } from 'routerCompat';
 import { useLingui } from '@lingui/react/macro';
 import { useField } from 'formik';

awx/ui/src/components/ListHeader/ListHeader.js

@@ -1,6 +1,6 @@
 
 import React, { useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useNavigate } from 'routerCompat';
 import styled from 'styled-components';
 import { Toolbar, ToolbarContent } from '@patternfly/react-core';

awx/ui/src/components/Lookup/ApplicationLookup.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useLingui } from '@lingui/react/macro';
 import { FormGroup } from '@patternfly/react-core';
 import { ApplicationsAPI } from 'api';

awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useLingui } from '@lingui/react/macro';
 import { FormGroup, Tooltip } from '@patternfly/react-core';
 import { ExecutionEnvironmentsAPI, ProjectsAPI } from 'api';

awx/ui/src/components/Lookup/HostFilterLookup.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useNavigate } from 'routerCompat';
 
 import styled from 'styled-components';

awx/ui/src/components/NotificationList/NotificationList.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { useLingui } from '@lingui/react/macro';
 import { getQSConfig, parseQueryString } from 'util/qs';

awx/ui/src/components/NotificationList/NotificationListItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Switch } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 import { ActionsTd, ActionItem } from '../PaginatedTable';

awx/ui/src/components/PaginatedTable/HeaderRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useNavigate } from 'routerCompat';
 import { Thead, Tr, Th as PFTh } from '@patternfly/react-table';
 import styled from 'styled-components';

awx/ui/src/components/PaginatedTable/PaginatedTable.js

@@ -3,7 +3,7 @@
 //
 import React, { useEffect } from 'react';
 import { TableComposable, Tbody } from '@patternfly/react-table';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useNavigate } from 'routerCompat';
 
 import { useLingui } from '@lingui/react/macro';

awx/ui/src/components/PaginatedTable/ToolbarAddButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
 import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useLingui } from '@lingui/react/macro';

awx/ui/src/components/PromptDetail/PromptDetail.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styled from 'styled-components';
 import { Chip, Divider, Title } from '@patternfly/react-core';
 import { toTitleCase } from 'util/strings';

awx/ui/src/components/PromptDetail/PromptInventorySourceDetail.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Chip,
   TextList,

awx/ui/src/components/PromptDetail/PromptJobTemplateDetail.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Chip,
   TextList,

awx/ui/src/components/PromptDetail/PromptProjectDetail.js

@@ -6,7 +6,7 @@ import {
   TextListVariants,
   TextListItemVariants,
 } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Config } from 'contexts/Config';
 import { toTitleCase } from 'util/strings';
 import { Detail, DeletedDetail } from '../DetailList';

awx/ui/src/components/PromptDetail/PromptWFJobTemplateDetail.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Chip,
   TextList,

awx/ui/src/components/RelatedTemplateList/RelatedTemplateList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { useParams, useLocation } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router';
 import { Plural, useLingui } from '@lingui/react/macro';
 import { Card } from '@patternfly/react-core';
 import { JobTemplatesAPI } from 'api';

awx/ui/src/components/ResourceAccessList/ResourceAccessList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useLingui } from '@lingui/react/macro';
 import { RolesAPI, TeamsAPI, UsersAPI } from 'api';
 import { getQSConfig, parseQueryString } from 'util/qs';