Refactor: switch router imports from react-router-dom to react-router and update splat route structure for v7 compatibility

.github/workflows/plugin-check.yml

@@ -37,6 +37,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
+          version: 9
           run_install: false
 
       - name: Get pnpm store directory
@@ -66,7 +67,7 @@ jobs:
 
       - name: Build plugin
         run: |
-          pnpm production
+          pnpm build
           bash .github/copy-assets
 
       - name: WordPress Plugin Check

.prettierrc

@@ -4,7 +4,6 @@
   "printWidth": 105,
   "singleQuote": true,
   "trailingComma": "none",
-  "jsxBracketSameLine": true,
   "useTabs": false,
   "quoteProps": "as-needed",
   "jsxSingleQuote": false,

composer.json

@@ -24,7 +24,7 @@
   },
   "require": {
     "bitapps/wp-telemetry": "v0.0.9",
-    "typisttech/imposter-plugin": "*"
+    "typisttech/imposter-plugin": "^0.6.2"
   },
   "extra": {
     "imposter": {

eslint.config.js

@@ -0,0 +1,67 @@
+const importPlugin = require('eslint-plugin-import')
+const jsxA11yPlugin = require('eslint-plugin-jsx-a11y')
+const reactPlugin = require('eslint-plugin-react')
+const reactHooksPlugin = require('eslint-plugin-react-hooks')
+
+module.exports = [
+  {
+    ignores: ['assets/**', 'build/**', 'vendor/**', 'node_modules/**'],
+    linterOptions: {
+      reportUnusedDisableDirectives: false
+    }
+  },
+  {
+    files: ['frontend/src/**/*.{js,jsx}'],
+    plugins: {
+      import: importPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    settings: {
+      react: {
+        version: '18.3'
+      },
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.json']
+        }
+      }
+    },
+    rules: {
+      ...importPlugin.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      ...jsxA11yPlugin.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-uses-react': 'off',
+      'react/prop-types': 'off',
+      'react/no-unknown-property': 'off',
+      'react/display-name': 'off',
+      'react/no-unescaped-entities': 'off',
+      'react/jsx-no-target-blank': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/immutability': 'off',
+      'react-hooks/preserve-manual-memoization': 'off',
+      'react-hooks/refs': 'off',
+      'react-hooks/purity': 'off',
+      'import/no-duplicates': 'off',
+      'import/no-named-as-default': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+      'jsx-a11y/label-has-associated-control': 'off',
+      'jsx-a11y/alt-text': 'off',
+      'jsx-a11y/no-autofocus': 'off'
+    }
+  }
+]

frontend/src/App.jsx

@@ -4,7 +4,7 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 
 import { lazy, Suspense, useEffect, useState } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router'
 import './resource/sass/app.scss'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Toaster } from 'react-hot-toast'
@@ -33,6 +33,17 @@ const Error404 = lazy(() => import('./pages/Error404'))
 function App() {
   const loaderStyle = { height: '82vh' }
   const btcbi = useRecoilValue($appConfigState)
+  const defaultLoaderFallback = <Loader className="g-c" style={loaderStyle} />
+  const integrationsElement = (
+    <Suspense fallback={defaultLoaderFallback}>
+      <Integrations />
+    </Suspense>
+  )
+  const authResponseElement = (
+    <Suspense fallback={defaultLoaderFallback}>
+      <AuthResponse />
+    </Suspense>
+  )
 
   // check if integrations are available
   const { data, isLoading } = useFetch({ payload: {}, action: 'flow/list', method: 'get' })
@@ -113,7 +124,7 @@ function App() {
             <Route
               path="/app-settings"
               element={
-                <Suspense fallback={<Loader className="g-c" style={loaderStyle} />}>
+                <Suspense fallback={defaultLoaderFallback}>
                   <Settings />
                 </Suspense>
               }
@@ -122,7 +133,7 @@ function App() {
             <Route
               path="/doc-support"
               element={
-                <Suspense fallback={<Loader className="g-c" style={loaderStyle} />}>
+                <Suspense fallback={defaultLoaderFallback}>
                   <DocSupport />
                 </Suspense>
               }
@@ -131,29 +142,21 @@ function App() {
             <Route
               path="/flow/new"
               element={
-                <Suspense fallback={<Loader className="g-c" style={loaderStyle} />}>
+                <Suspense fallback={defaultLoaderFallback}>
                   <FlowBuilder />
                 </Suspense>
               }
             />
 
-            <Route
-              path="/flow/action/*"
-              element={
-                <Suspense fallback={<Loader className="g-c" style={loaderStyle} />}>
-                  <Integrations />
-                </Suspense>
-              }
-            />
+            <Route path="/flow/action">
+              <Route index element={integrationsElement} />
+              <Route path="*" element={integrationsElement} />
+            </Route>
 
-            <Route
-              path="/auth-response/*"
-              element={
-                <Suspense fallback={<Loader className="g-c" style={loaderStyle} />}>
-                  <AuthResponse />
-                </Suspense>
-              }
-            />
+            <Route path="/auth-response">
+              <Route index element={authResponseElement} />
+              <Route path="*" element={authResponseElement} />
+            </Route>
 
             <Route path="*" element={<Error404 />} />
           </Routes>

frontend/src/components/AllIntegrations/ACPT/ACPT.jsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import toast from 'react-hot-toast'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { __ } from '../../../Utils/i18nwrap'
 import SnackMsg from '../../Utilities/SnackMsg'
 import Steps from '../../Utilities/Steps'

frontend/src/components/AllIntegrations/ACPT/EditACPT.jsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react'
 import { toast } from 'react-hot-toast'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import { __ } from '../../../Utils/i18nwrap'

frontend/src/components/AllIntegrations/AcademyLms/AcademyLms.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import { useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { __ } from '../../../Utils/i18nwrap'
 import SnackMsg from '../../Utilities/SnackMsg'
 import Steps from '../../Utilities/Steps'

frontend/src/components/AllIntegrations/AcademyLms/EditAcademyLms.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import { __ } from '../../../Utils/i18nwrap'

frontend/src/components/AllIntegrations/ActiveCampaign/ActiveCampaign.jsx

@@ -2,7 +2,7 @@
 import { __ } from '../../../Utils/i18nwrap'
 import { useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import BackIcn from '../../../Icons/BackIcn'
 import SnackMsg from '../../Utilities/SnackMsg'
 import Steps from '../../Utilities/Steps'

frontend/src/components/AllIntegrations/ActiveCampaign/EditActiveCampaign.jsx

@@ -2,7 +2,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { __ } from '../../../Utils/i18nwrap'
 import { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import SnackMsg from '../../Utilities/SnackMsg'
 import IntegrationStepThree from '../IntegrationHelpers/IntegrationStepThree'

frontend/src/components/AllIntegrations/Acumbamail/Acumbamail.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import BackIcn from '../../../Icons/BackIcn'
 import { __ } from '../../../Utils/i18nwrap'
 import SnackMsg from '../../Utilities/SnackMsg'

frontend/src/components/AllIntegrations/Acumbamail/EditAcumbamail.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import { __ } from '../../../Utils/i18nwrap'

frontend/src/components/AllIntegrations/AdvancedFormIntegration/AdvancedFormIntegration.jsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import SnackMsg from '../../Utilities/SnackMsg'
 import Steps from '../../Utilities/Steps'
 import { saveIntegConfig } from '../IntegrationHelpers/IntegrationHelpers'

frontend/src/components/AllIntegrations/AdvancedFormIntegration/EditAdvancedFormIntegration.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import SnackMsg from '../../Utilities/SnackMsg'

frontend/src/components/AllIntegrations/Affiliate/Affiliate.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { useRecoilValue } from 'recoil'
 import BackIcn from '../../../Icons/BackIcn'
 import { __ } from '../../../Utils/i18nwrap'

frontend/src/components/AllIntegrations/Affiliate/EditAffiliate.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import { __ } from '../../../Utils/i18nwrap'

frontend/src/components/AllIntegrations/AgiledCRM/Agiled.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-unused-expressions */
 import { useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import toast from 'react-hot-toast'
 import { __ } from '../../../Utils/i18nwrap'
 import SnackMsg from '../../Utilities/SnackMsg'

frontend/src/components/AllIntegrations/AgiledCRM/EditAgiled.jsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react'
 import { toast } from 'react-hot-toast'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import { __ } from '../../../Utils/i18nwrap'

frontend/src/components/AllIntegrations/Airtable/Airtable.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 /* eslint-disable no-unused-expressions */
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import toast from 'react-hot-toast'
 import { __ } from '../../../Utils/i18nwrap'
 import SnackMsg from '../../Utilities/SnackMsg'

frontend/src/components/AllIntegrations/Airtable/EditAirtable.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 
 import { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import { __ } from '../../../Utils/i18nwrap'

frontend/src/components/AllIntegrations/Albato/Albato.jsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import SnackMsg from '../../Utilities/SnackMsg'
 import Steps from '../../Utilities/Steps'
 import { saveIntegConfig } from '../IntegrationHelpers/IntegrationHelpers'

frontend/src/components/AllIntegrations/Albato/EditAlbato.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import SnackMsg from '../../Utilities/SnackMsg'

frontend/src/components/AllIntegrations/AntApps/AntApps.jsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import SnackMsg from '../../Utilities/SnackMsg'
 import Steps from '../../Utilities/Steps'
 import { saveActionConf } from '../IntegrationHelpers/IntegrationHelpers'

frontend/src/components/AllIntegrations/AntApps/EditAntApps.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import SnackMsg from '../../Utilities/SnackMsg'

frontend/src/components/AllIntegrations/Asana/Asana.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-unused-expressions */
 import { useState } from 'react'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import toast from 'react-hot-toast'
 import { __ } from '../../../Utils/i18nwrap'
 import SnackMsg from '../../Utilities/SnackMsg'

frontend/src/components/AllIntegrations/Asana/EditAsana.jsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react'
 import { toast } from 'react-hot-toast'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
 import { __ } from '../../../Utils/i18nwrap'