Protect: Add "routes" directory (#37941)

projects/plugins/protect/changelog/add-protect-routing-improvements

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updating project directory structure, organizational change.
+
+

projects/plugins/protect/src/js/index.js

@@ -2,10 +2,10 @@ import { ThemeProvider } from '@automattic/jetpack-components';
 import * as WPElement from '@wordpress/element';
 import React, { useEffect } from 'react';
 import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
-import FirewallPage from './components/firewall-page';
 import Modal from './components/modal';
-import ScanPage from './components/scan-page';
 import { OnboardingRenderedContextProvider } from './hooks/use-onboarding';
+import FirewallRoute from './routes/firewall';
+import ScanRoute from './routes/scan';
 import { initStore } from './state/store';
 import './styles.module.scss';
 
@@ -40,8 +40,8 @@ function render() {
 				<HashRouter>
 					<ScrollToTop />
 					<Routes>
-						<Route path="/" element={ <ScanPage /> } />
-						<Route path="/firewall" element={ <FirewallPage /> } />
+						<Route path="/" element={ <ScanRoute /> } />
+						<Route path="/firewall" element={ <FirewallRoute /> } />
 					</Routes>
 				</HashRouter>
 				<Modal />

projects/plugins/protect/src/js/components/firewall-page/index.jsx → projects/plugins/protect/src/js/routes/firewall/index.jsx

@@ -16,17 +16,17 @@ import { Icon, arrowLeft, closeSmall } from '@wordpress/icons';
 import moment from 'moment';
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import API from '../../api';
+import AdminPage from '../../components/admin-page';
+import FirewallFooter from '../../components/firewall-footer';
+import ConnectedFirewallHeader from '../../components/firewall-header';
+import FormToggle from '../../components/form-toggle';
+import ScanFooter from '../../components/scan-footer';
+import Textarea from '../../components/textarea';
 import { JETPACK_SCAN_SLUG, PLUGIN_SUPPORT_URL } from '../../constants';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import useProtectData from '../../hooks/use-protect-data';
 import useWafData from '../../hooks/use-waf-data';
 import { STORE_ID } from '../../state/store';
-import AdminPage from '../admin-page';
-import FirewallFooter from '../firewall-footer';
-import ConnectedFirewallHeader from '../firewall-header';
-import FormToggle from '../form-toggle';
-import ScanFooter from '../scan-footer';
-import Textarea from '../textarea';
 import styles from './styles.module.scss';
 
 const ADMIN_URL = window?.jetpackProtectInitialState?.adminUrl;

projects/plugins/protect/src/js/components/scan-page/index.jsx → projects/plugins/protect/src/js/routes/scan/index.jsx

@@ -4,17 +4,17 @@ import { Spinner } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import React, { useEffect } from 'react';
+import AdminPage from '../../components/admin-page';
+import AlertSVGIcon from '../../components/alert-icon';
+import ProgressBar from '../../components/progress-bar';
+import ScanFooter from '../../components/scan-footer';
+import SeventyFiveLayout from '../../components/seventy-five-layout';
+import Summary from '../../components/summary';
+import ThreatsList from '../../components/threats-list';
 import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
 import { OnboardingContext } from '../../hooks/use-onboarding';
 import useProtectData from '../../hooks/use-protect-data';
 import { STORE_ID } from '../../state/store';
-import AdminPage from '../admin-page';
-import AlertSVGIcon from '../alert-icon';
-import ProgressBar from '../progress-bar';
-import ScanFooter from '../scan-footer';
-import SeventyFiveLayout from '../seventy-five-layout';
-import Summary from '../summary';
-import ThreatsList from '../threats-list';
 import inProgressImage from './in-progress.png';
 import onboardingSteps from './onboarding-steps';
 import styles from './styles.module.scss';