fix(dashboard): Minor cleanup and improve text legibility (#7045)

**What**
- Cleans up some artifacts from the V1 -> V2 migrations.
- Removes the MedusaProvider from the root in favor of a plain QueryClient.
- Applies font styles to make the text in admin resemble designs in Figma more closely.

packages/admin-next/dashboard/src/providers/feature-provider/feature-context.tsx

@@ -1,8 +1,8 @@
-import { createContext } from "react";
-import { Feature } from "./types";
+import { createContext } from "react"
+import { Feature } from "./types"
 
 type FeatureContextValue = {
-  isFeatureEnabled: (feature: Feature) => boolean;
-};
+  isFeatureEnabled: (feature: Feature) => boolean
+}
 
-export const FeatureContext = createContext<FeatureContextValue | null>(null);
+export const FeatureContext = createContext<FeatureContextValue | null>(null)

packages/admin-next/dashboard/src/providers/feature-provider/feature-provider.tsx

@@ -1,33 +1,33 @@
-import { useAdminStore } from "medusa-react";
-import { PropsWithChildren, useEffect, useState } from "react";
-import { FeatureContext } from "./feature-context";
-import { Feature } from "./types";
+import { useAdminStore } from "medusa-react"
+import { PropsWithChildren, useEffect, useState } from "react"
+import { FeatureContext } from "./feature-context"
+import { Feature } from "./types"
 
 export const FeatureProvider = ({ children }: PropsWithChildren) => {
-  const { store, isLoading } = useAdminStore();
-  const [features, setFeatures] = useState<Feature[]>([]);
+  const { store, isLoading } = useAdminStore()
+  const [features, setFeatures] = useState<Feature[]>([])
 
   useEffect(() => {
     if (!store || isLoading) {
-      return;
+      return
     }
 
     const flags = store.feature_flags
       .filter((f) => f.value === true)
-      .map((f) => f.key);
-    const modules = store.modules.map((m) => m.module);
-    const enabled = flags.concat(modules);
+      .map((f) => f.key)
+    const modules = store.modules.map((m) => m.module)
+    const enabled = flags.concat(modules)
 
-    setFeatures(enabled as Feature[]);
-  }, [store, isLoading]);
+    setFeatures(enabled as Feature[])
+  }, [store, isLoading])
 
   function isFeatureEnabled(feature: Feature) {
-    return features.includes(feature);
+    return features.includes(feature)
   }
 
   return (
     <FeatureContext.Provider value={{ isFeatureEnabled }}>
       {children}
     </FeatureContext.Provider>
-  );
-};
+  )
+}

packages/admin-next/dashboard/src/providers/feature-provider/types.ts

@@ -5,12 +5,12 @@ const featureFlags = [
   "publishable_api_keys",
   "sales_channels",
   "tax_inclusive_pricing",
-] as const;
+] as const
 
-type FeatureFlag = (typeof featureFlags)[number];
+type FeatureFlag = (typeof featureFlags)[number]
 
-const modules = ["inventory"] as const;
+const modules = ["inventory"] as const
 
-type Module = (typeof modules)[number];
+type Module = (typeof modules)[number]
 
-export type Feature = FeatureFlag | Module;
+export type Feature = FeatureFlag | Module

packages/admin-next/dashboard/src/providers/router-provider/v2.tsx

@@ -1,3 +1,10 @@
+import { AdminCustomersRes } from "@medusajs/client-types"
+import {
+  AdminCollectionsRes,
+  AdminProductsRes,
+  AdminPromotionRes,
+  AdminRegionsRes,
+} from "@medusajs/medusa"
 import {
   AdminApiKeyResponse,
   AdminCustomerGroupResponse,
@@ -5,49 +12,13 @@ import {
   SalesChannelDTO,
   UserDTO,
 } from "@medusajs/types"
-import {
-  AdminCollectionsRes,
-  AdminProductsRes,
-  AdminPromotionRes,
-  AdminRegionsRes,
-} from "@medusajs/medusa"
-import { Navigate, Outlet, RouteObject, useLocation } from "react-router-dom"
+import { Outlet, RouteObject } from "react-router-dom"
 
-import { AdminCustomersRes } from "@medusajs/client-types"
+import { ProtectedRoute } from "../../components/authentication/protected-route"
 import { ErrorBoundary } from "../../components/error/error-boundary"
-import { InventoryItemRes } from "../../types/api-responses"
-import { MainLayout } from "../../components/layout-v2/main-layout"
-import { PriceListRes } from "../../types/api-responses"
-import { SearchProvider } from "../search-provider"
+import { MainLayout } from "../../components/layout/main-layout"
 import { SettingsLayout } from "../../components/layout/settings-layout"
-import { SidebarProvider } from "../sidebar-provider"
-import { Spinner } from "@medusajs/icons"
-import { useMe } from "../../hooks/api/users"
-
-export const ProtectedRoute = () => {
-  const { user, isLoading } = useMe()
-  const location = useLocation()
-
-  if (isLoading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <Spinner className="text-ui-fg-interactive animate-spin" />
-      </div>
-    )
-  }
-
-  if (!user) {
-    return <Navigate to="/login" state={{ from: location }} replace />
-  }
-
-  return (
-    <SidebarProvider>
-      <SearchProvider>
-        <Outlet />
-      </SearchProvider>
-    </SidebarProvider>
-  )
-}
+import { InventoryItemRes, PriceListRes } from "../../types/api-responses"
 
 /**
  * Experimental V2 routes.
@@ -473,9 +444,6 @@ export const v2Routes: RouteObject[] = [
       {
         path: "/settings",
         element: <SettingsLayout />,
-        handle: {
-          crumb: () => "Settings",
-        },
         children: [
           {
             index: true,

packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-provider.tsx

@@ -1,10 +1,13 @@
-import { PropsWithChildren, useState } from "react"
+import { PropsWithChildren, useEffect, useState } from "react"
+import { useLocation } from "react-router-dom"
 import { SidebarContext } from "./sidebar-context"
 
 export const SidebarProvider = ({ children }: PropsWithChildren) => {
   const [desktop, setDesktop] = useState(true)
   const [mobile, setMobile] = useState(false)
 
+  const { pathname } = useLocation()
+
   const toggle = (view: "desktop" | "mobile") => {
     if (view === "desktop") {
       setDesktop(!desktop)
@@ -13,6 +16,13 @@ export const SidebarProvider = ({ children }: PropsWithChildren) => {
     }
   }
 
+  // close the mobile sidebar on route change
+  // this is to prevent the sidebar from staying open
+  // when navigating to a new page
+  useEffect(() => {
+    setMobile(false)
+  }, [pathname])
+
   return (
     <SidebarContext.Provider value={{ desktop, mobile, toggle }}>
       {children}