Dashboard v2: code restructure (#103125)

Author: fushar

client/dashboard/agency-overview/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../components/page-layout';
 
 export default function AgencyOverview() {
 	return (

client/dashboard/404/index.tsx renamed to client/dashboard/app/404/index.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
-import RouterLinkButton from '../router-link-button';
+import PageLayout from '../../components/page-layout';
+import RouterLinkButton from '../../components/router-link-button';
 
 function NotFound() {
 	return (

client/dashboard/500/index.tsx renamed to client/dashboard/app/500/index.tsx

@@ -1,7 +1,7 @@
 import { Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
-import RouterLinkButton from '../router-link-button';
+import PageLayout from '../../components/page-layout';
+import RouterLinkButton from '../../components/router-link-button';
 
 function UnknownError( { error }: { error: Error } ) {
 	return (

client/dashboard/auth/index.tsx renamed to client/dashboard/app/auth/index.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { createContext, useContext } from 'react';
-import { fetchUser } from '../data';
-import type { User } from '../data/types';
+import { fetchUser } from '../../data';
+import type { User } from '../../data/types';
 
 export const AUTH_QUERY_KEY = [ 'auth', 'user' ];
 export const TWO_STEP_QUERY_KEY = [ 'me', 'two-step' ];

client/dashboard/command-palette/README.md renamed to client/dashboard/app/command-palette/README.md

@@ -1,8 +1,8 @@
 import { useRouter } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
 import { globe, commentAuthorAvatar, envelope, bell, wordpress, home } from '@wordpress/icons';
-import { useAppContext } from '../app/context';
-import type { AppConfig } from '../app/context';
+import { useAppContext } from '../context';
+import type { AppConfig } from '../context';
 
 export interface Command {
 	name: string;

client/dashboard/command-palette/commands.tsx renamed to client/dashboard/app/command-palette/commands.tsx

@@ -1,9 +1,9 @@
 import { useViewportMatch } from '@wordpress/compose';
-import { useAppContext } from '../app/context';
-import HeaderBar from '../header-bar';
+import HeaderBar from '../../components/header-bar';
+import RouterLinkButton from '../../components/router-link-button';
+import { useAppContext } from '../context';
 import PrimaryMenu from '../primary-menu';
 import PrimaryMenuMobile from '../primary-menu-mobile';
-import RouterLinkButton from '../router-link-button';
 import SecondaryMenu from '../secondary-menu';
 
 function Header() {

client/dashboard/command-palette/index.tsx renamed to client/dashboard/app/command-palette/index.tsx

@@ -1,7 +1,7 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from '@tanstack/react-router';
 import { useMemo } from 'react';
-import { AuthProvider, useAuth } from '../auth';
+import { AuthProvider, useAuth } from './auth';
 import { AppProvider, type AppConfig } from './context';
 import { queryClient } from './query-client';
 import { getRouter } from './router';

client/dashboard/command-palette/utils.ts renamed to client/dashboard/app/command-palette/utils.ts

@@ -1,8 +1,8 @@
 import { DropdownMenu } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { menu } from '@wordpress/icons';
-import { useAppContext } from '../app/context';
-import RouterLinkMenuItem from '../router-link-menu-item';
+import RouterLinkMenuItem from '../../components/router-link-menu-item';
+import { useAppContext } from '../context';
 
 function PrimaryMenuMobile() {
 	const { supports } = useAppContext();

client/dashboard/header/index.tsx renamed to client/dashboard/app/header/index.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import { useAppContext } from '../app/context';
-import Menu from '../menu';
+import Menu from '../../components/menu';
+import { useAppContext } from '../context';
 
 function PrimaryMenu() {
 	const { supports } = useAppContext();

client/dashboard/app/layout.tsx

@@ -1,7 +1,7 @@
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
 import { QueryClient } from '@tanstack/react-query';
 import { persistQueryClient } from '@tanstack/react-query-persist-client';
-import { TWO_STEP_QUERY_KEY } from '../auth';
+import { TWO_STEP_QUERY_KEY } from './auth';
 
 export const queryClient = new QueryClient( {
 	defaultOptions: {

client/dashboard/primary-menu-mobile/index.tsx renamed to client/dashboard/app/primary-menu-mobile/index.tsx

@@ -1,10 +1,10 @@
 import { WordPressLogo } from '@automattic/components';
 import { useIsFetching } from '@tanstack/react-query';
 import { Outlet, useRouterState } from '@tanstack/react-router';
-import { useAppContext } from '../app/context';
+import { LoadingLine } from '../../components/loading-line';
 import CommandPalette from '../command-palette';
+import { useAppContext } from '../context';
 import Header from '../header';
-import { LoadingLine } from '../loading-line';
 import './style.scss';
 
 function Root() {

client/dashboard/primary-menu/index.tsx renamed to client/dashboard/app/primary-menu/index.tsx

@@ -5,12 +5,12 @@ import {
 	redirect,
 	createLazyRoute,
 } from '@tanstack/react-router';
-import NotFound from '../404';
-import UnknownError from '../500';
 import { fetchTwoStep } from '../data';
-import Root from '../root';
+import NotFound from './404';
+import UnknownError from './500';
 import { sitesQuery, siteQuery, domainsQuery, emailsQuery, profileQuery } from './queries';
 import { queryClient } from './query-client';
+import Root from './root';
 import type { AppConfig } from './context';
 import type { FetchQueryOptions } from '@tanstack/react-query';
 
@@ -65,7 +65,7 @@ const siteRoute = createRoute( {
 	path: 'sites/$siteSlug',
 	loader: ( { params: { siteSlug } } ) => maybeAwaitFetch( siteQuery( siteSlug ) ),
 } ).lazy( () =>
-	import( '../site' ).then( ( d ) =>
+	import( '../sites/site' ).then( ( d ) =>
 		createLazyRoute( 'site' )( {
 			component: d.default,
 		} )
@@ -76,7 +76,7 @@ const siteOverviewRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: '/',
 } ).lazy( () =>
-	import( '../site-overview' ).then( ( d ) =>
+	import( '../sites/overview' ).then( ( d ) =>
 		createLazyRoute( 'site-overview' )( {
 			component: d.default,
 		} )
@@ -87,7 +87,7 @@ const siteDeploymentsRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: 'deployments',
 } ).lazy( () =>
-	import( '../site-deployments' ).then( ( d ) =>
+	import( '../sites/deployments' ).then( ( d ) =>
 		createLazyRoute( 'site-deployments' )( {
 			component: d.default,
 		} )
@@ -98,7 +98,7 @@ const sitePerformanceRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: 'performance',
 } ).lazy( () =>
-	import( '../site-performance' ).then( ( d ) =>
+	import( '../sites/performance' ).then( ( d ) =>
 		createLazyRoute( 'site-performance' )( {
 			component: d.default,
 		} )
@@ -109,7 +109,7 @@ const siteSettingsRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: 'settings',
 } ).lazy( () =>
-	import( '../site-settings' ).then( ( d ) =>
+	import( '../sites/settings' ).then( ( d ) =>
 		createLazyRoute( 'site-settings' )( {
 			component: d.default,
 		} )
@@ -167,7 +167,7 @@ const profileRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'profile',
 } ).lazy( () =>
-	import( '../profile' ).then( ( d ) =>
+	import( '../me/profile' ).then( ( d ) =>
 		createLazyRoute( 'profile' )( {
 			component: d.default,
 		} )
@@ -178,7 +178,7 @@ const billingRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'billing',
 } ).lazy( () =>
-	import( '../billing' ).then( ( d ) =>
+	import( '../me/billing' ).then( ( d ) =>
 		createLazyRoute( 'billing' )( {
 			component: d.default,
 		} )
@@ -189,7 +189,7 @@ const billingHistoryRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'billing/billing-history',
 } ).lazy( () =>
-	import( '../billing-history' ).then( ( d ) =>
+	import( '../me/billing-history' ).then( ( d ) =>
 		createLazyRoute( 'billing-history' )( {
 			component: d.default,
 		} )
@@ -200,7 +200,7 @@ const activeSubscriptionsRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'billing/active-subscriptions',
 } ).lazy( () =>
-	import( '../active-subscriptions' ).then( ( d ) =>
+	import( '../me/active-subscriptions' ).then( ( d ) =>
 		createLazyRoute( 'active-subscriptions' )( {
 			component: d.default,
 		} )
@@ -211,7 +211,7 @@ const paymentMethodsRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'billing/payment-methods',
 } ).lazy( () =>
-	import( '../payment-methods' ).then( ( d ) =>
+	import( '../me/payment-methods' ).then( ( d ) =>
 		createLazyRoute( 'payment-methods' )( {
 			component: d.default,
 		} )
@@ -222,7 +222,7 @@ const taxDetailsRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'billing/tax-details',
 } ).lazy( () =>
-	import( '../tax-details' ).then( ( d ) =>
+	import( '../me/tax-details' ).then( ( d ) =>
 		createLazyRoute( 'tax-details' )( {
 			component: d.default,
 		} )
@@ -233,7 +233,7 @@ const securityRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'security',
 } ).lazy( () =>
-	import( '../security' ).then( ( d ) =>
+	import( '../me/security' ).then( ( d ) =>
 		createLazyRoute( 'security' )( {
 			component: d.default,
 		} )
@@ -244,7 +244,7 @@ const privacyRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'privacy',
 } ).lazy( () =>
-	import( '../privacy' ).then( ( d ) =>
+	import( '../me/privacy' ).then( ( d ) =>
 		createLazyRoute( 'privacy' )( {
 			component: d.default,
 		} )
@@ -255,7 +255,7 @@ const notificationsRoute = createRoute( {
 	getParentRoute: () => meRoute,
 	path: 'notifications',
 } ).lazy( () =>
-	import( '../notifications' ).then( ( d ) =>
+	import( '../me/notifications' ).then( ( d ) =>
 		createLazyRoute( 'notifications' )( {
 			component: d.default,
 		} )

client/dashboard/app/query-client.ts

@@ -11,11 +11,11 @@ import {
 import { __ } from '@wordpress/i18n';
 import { help, bellUnread, bell, commentAuthorAvatar } from '@wordpress/icons';
 import ReaderIcon from 'calypso/assets/icons/reader/reader-icon';
-import { useAppContext } from '../app/context';
+import MenuDivider from '../../components/menu-divider';
+import RouterLinkMenuItem from '../../components/router-link-menu-item';
 import { useAuth } from '../auth';
 import { useOpenCommandPalette } from '../command-palette/utils';
-import MenuDivider from '../menu-divider';
-import RouterLinkMenuItem from '../router-link-menu-item';
+import { useAppContext } from '../context';
 
 import './style.scss';
 

client/dashboard/root/index.tsx renamed to client/dashboard/app/root/index.tsx

@@ -5,8 +5,8 @@ import { dateI18n } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 import { useState } from 'react';
 import { domainsQuery } from '../app/queries';
-import DataViewsCard from '../dataviews-card';
-import PageLayout from '../page-layout';
+import DataViewsCard from '../components/dataviews-card';
+import PageLayout from '../components/page-layout';
 import type { Domain } from '../data/types';
 
 const fields = [

client/dashboard/root/style.scss renamed to client/dashboard/app/root/style.scss

@@ -5,8 +5,8 @@ import { Button, ExternalLink, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo } from 'react';
 import { emailsQuery } from '../app/queries';
-import DataViewsCard from '../dataviews-card';
-import PageLayout from '../page-layout';
+import DataViewsCard from '../components/dataviews-card';
+import PageLayout from '../components/page-layout';
 import type { Email } from '../data/types';
 import type { View } from '@automattic/dataviews';
 

client/dashboard/app/router.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 export default function ActiveSubscriptions() {
 	return (

client/dashboard/secondary-menu/index.tsx renamed to client/dashboard/app/secondary-menu/index.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 function BillingHistory() {
 	return (

client/dashboard/secondary-menu/style.scss renamed to client/dashboard/app/secondary-menu/style.scss

@@ -6,9 +6,9 @@ import {
 	billingHistoryRoute,
 	paymentMethodsRoute,
 	taxDetailsRoute,
-} from '../app/router';
-import PageLayout from '../page-layout';
-import RouterLinkSummaryButton from '../router-link-summary-button';
+} from '../../app/router';
+import PageLayout from '../../components/page-layout';
+import RouterLinkSummaryButton from '../../components/router-link-summary-button';
 
 function Billing() {
 	return (

client/dashboard/dataviews-card/index.tsx renamed to client/dashboard/components/dataviews-card/index.tsx

@@ -2,9 +2,9 @@ import { Outlet } from '@tanstack/react-router';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import HeaderBar from '../header-bar';
-import MeMenu from '../me-menu';
-import MenuDivider from '../menu-divider';
+import HeaderBar from '../components/header-bar';
+import MenuDivider from '../components/menu-divider';
+import MeMenu from './me-menu';
 
 function Me() {
 	const isDesktop = useViewportMatch( 'medium' );

client/dashboard/header-bar/index.tsx renamed to client/dashboard/components/header-bar/index.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import { useAppContext } from '../app/context';
-import ResponsiveMenu from '../responsive-menu';
+import { useAppContext } from '../../app/context';
+import ResponsiveMenu from '../../components/responsive-menu';
 
 const MeMenu = () => {
 	const { supports } = useAppContext();

client/dashboard/header-bar/style.scss renamed to client/dashboard/components/header-bar/style.scss

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 function Notifications() {
 	return (

client/dashboard/loading-line/index.tsx renamed to client/dashboard/components/loading-line/index.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 export default function PaymentMethods() {
 	return (

client/dashboard/loading-line/style.scss renamed to client/dashboard/components/loading-line/style.scss

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 function Privacy() {
 	return (

client/dashboard/menu-divider/index.tsx renamed to client/dashboard/components/menu-divider/index.tsx

@@ -17,10 +17,10 @@ import {
 import { createInterpolateElement, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
-import { profileQuery, profileMutation } from '../app/queries';
+import { profileQuery, profileMutation } from '../../app/queries';
+import PageLayout from '../../components/page-layout';
 import EditGravatar from '../edit-gravatar';
-import PageLayout from '../page-layout';
-import type { Profile as ProfileType } from '../data/types';
+import type { Profile as ProfileType } from '../../data/types';
 import type { Field } from '@automattic/dataviews';
 
 import './style.scss';

client/dashboard/menu-divider/style.scss renamed to client/dashboard/components/menu-divider/style.scss

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 function Security() {
 	return (

client/dashboard/menu/index.tsx renamed to client/dashboard/components/menu/index.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 export default function TaxDetails() {
 	return (

client/dashboard/menu/style.scss renamed to client/dashboard/components/menu/style.scss

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import PageLayout from '../page-layout';
+import PageLayout from '../../components/page-layout';
 
 function SiteDeployments() {
 	return <PageLayout title={ __( 'Deployments' ) } />;