Phase 0: Add sidebar filtering and route guards for modules
- Updated AppSidebar to filter out disabled modules from navigation - Added ModuleGuard to all module routes (planner, writer, thinker, automation) - Modules now dynamically appear/disappear based on enable settings - Routes are protected and redirect to settings if module is disabled
This commit is contained in:
IGNY8 VPS (Salman)
@@ -4,6 +4,7 @@ import { HelmetProvider } from "react-helmet-async";
|
||||
import AppLayout from "./layout/AppLayout";
|
||||
import { ScrollToTop } from "./components/common/ScrollToTop";
|
||||
import ProtectedRoute from "./components/auth/ProtectedRoute";
|
||||
import ModuleGuard from "./components/common/ModuleGuard";
|
||||
import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay";
|
||||
import LoadingStateMonitor from "./components/common/LoadingStateMonitor";
|
||||
|
||||
@@ -133,90 +134,122 @@ export default function App() {
|
||||
{/* Planner Module */}
|
||||
<Route path="/planner" element={
|
||||
<Suspense fallback={null}>
|
||||
<PlannerDashboard />
|
||||
<ModuleGuard module="planner">
|
||||
<PlannerDashboard />
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/planner/keywords" element={
|
||||
<Suspense fallback={null}>
|
||||
<Keywords />
|
||||
<ModuleGuard module="planner">
|
||||
<Keywords />
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/planner/clusters" element={
|
||||
<Suspense fallback={null}>
|
||||
<Clusters />
|
||||
<ModuleGuard module="planner">
|
||||
<Clusters />
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/planner/ideas" element={
|
||||
<Suspense fallback={null}>
|
||||
<Ideas />
|
||||
<ModuleGuard module="planner">
|
||||
<Ideas />
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
|
||||
{/* Writer Module */}
|
||||
<Route path="/writer" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="writer">
|
||||
<WriterDashboard />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/writer/tasks" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="writer">
|
||||
<Tasks />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
{/* Writer Content Routes - Order matters: list route must come before detail route */}
|
||||
<Route path="/writer/content" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="writer">
|
||||
<Content />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
{/* Content detail view - matches /writer/content/:id (e.g., /writer/content/10) */}
|
||||
<Route path="/writer/content/:id" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="writer">
|
||||
<ContentView />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/writer/drafts" element={<Navigate to="/writer/content" replace />} />
|
||||
<Route path="/writer/images" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="writer">
|
||||
<Images />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/writer/published" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="writer">
|
||||
<Published />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
|
||||
{/* Thinker Module */}
|
||||
<Route path="/thinker" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="thinker">
|
||||
<ThinkerDashboard />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/thinker/prompts" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="thinker">
|
||||
<Prompts />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/thinker/author-profiles" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="thinker">
|
||||
<AuthorProfiles />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/thinker/profile" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="thinker">
|
||||
<ThinkerProfile />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/thinker/strategies" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="thinker">
|
||||
<Strategies />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/thinker/image-testing" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="thinker">
|
||||
<ImageTesting />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
|
||||
{/* Billing Module */}
|
||||
@@ -256,8 +289,10 @@ export default function App() {
|
||||
{/* Other Pages */}
|
||||
<Route path="/automation" element={
|
||||
<Suspense fallback={null}>
|
||||
<ModuleGuard module="automation">
|
||||
<AutomationDashboard />
|
||||
</Suspense>
|
||||
</ModuleGuard>
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/schedules" element={
|
||||
<Suspense fallback={null}>
|
||||
|
||||
@@ -20,6 +20,8 @@ import { useSidebar } from "../context/SidebarContext";
|
||||
import SidebarWidget from "./SidebarWidget";
|
||||
import { APP_VERSION } from "../config/version";
|
||||
import { useAuthStore } from "../store/authStore";
|
||||
import { useSettingsStore } from "../store/settingsStore";
|
||||
import { isModuleEnabled } from "../config/modules.config";
|
||||
import ApiStatusIndicator from "../components/sidebar/ApiStatusIndicator";
|
||||
|
||||
type NavItem = {
|
||||
@@ -38,12 +40,19 @@ const AppSidebar: React.FC = () => {
|
||||
const { isExpanded, isMobileOpen, isHovered, setIsHovered } = useSidebar();
|
||||
const location = useLocation();
|
||||
const { user } = useAuthStore();
|
||||
const { moduleEnableSettings, isModuleEnabled: checkModuleEnabled } = useSettingsStore();
|
||||
|
||||
// Show admin menu only for users in aws-admin account
|
||||
const isAwsAdminAccount = Boolean(
|
||||
user?.account?.slug === 'aws-admin' ||
|
||||
user?.role === 'developer' // Also show for developers as fallback
|
||||
);
|
||||
|
||||
// Helper to check if module is enabled
|
||||
const moduleEnabled = (moduleName: string): boolean => {
|
||||
if (!moduleEnableSettings) return true; // Default to enabled if not loaded
|
||||
return checkModuleEnabled(moduleName);
|
||||
};
|
||||
|
||||
const [openSubmenu, setOpenSubmenu] = useState<{
|
||||
sectionIndex: number;
|
||||
@@ -60,77 +69,98 @@ const AppSidebar: React.FC = () => {
|
||||
);
|
||||
|
||||
// Define menu sections with useMemo to prevent recreation on every render
|
||||
const menuSections: MenuSection[] = useMemo(() => [
|
||||
{
|
||||
label: "OVERVIEW",
|
||||
items: [
|
||||
{
|
||||
icon: <GridIcon />,
|
||||
name: "Dashboard",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
icon: <DocsIcon />,
|
||||
name: "Industry / Sectors",
|
||||
path: "/reference/industries",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "WORKFLOWS",
|
||||
items: [
|
||||
{
|
||||
icon: <PlugInIcon />,
|
||||
name: "Setup",
|
||||
subItems: [
|
||||
{ name: "Sites", path: "/settings/sites" },
|
||||
{ name: "Keywords Opportunities", path: "/planner/keyword-opportunities" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: <ListIcon />,
|
||||
name: "Planner",
|
||||
subItems: [
|
||||
{ name: "Dashboard", path: "/planner" },
|
||||
{ name: "Keywords", path: "/planner/keywords" },
|
||||
{ name: "Clusters", path: "/planner/clusters" },
|
||||
{ name: "Ideas", path: "/planner/ideas" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: <TaskIcon />,
|
||||
name: "Writer",
|
||||
subItems: [
|
||||
{ name: "Dashboard", path: "/writer" },
|
||||
{ name: "Tasks", path: "/writer/tasks" },
|
||||
{ name: "Content", path: "/writer/content" },
|
||||
{ name: "Images", path: "/writer/images" },
|
||||
{ name: "Published", path: "/writer/published" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: <BoltIcon />,
|
||||
name: "Thinker",
|
||||
subItems: [
|
||||
{ name: "Dashboard", path: "/thinker" },
|
||||
{ name: "Prompts", path: "/thinker/prompts" },
|
||||
{ name: "Author Profiles", path: "/thinker/author-profiles" },
|
||||
{ name: "Strategies", path: "/thinker/strategies" },
|
||||
{ name: "Image Testing", path: "/thinker/image-testing" },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: <BoltIcon />,
|
||||
name: "Automation",
|
||||
path: "/automation",
|
||||
},
|
||||
{
|
||||
icon: <TimeIcon />,
|
||||
name: "Schedules",
|
||||
path: "/schedules",
|
||||
},
|
||||
],
|
||||
},
|
||||
// Filter out disabled modules based on module enable settings
|
||||
const menuSections: MenuSection[] = useMemo(() => {
|
||||
const workflowItems: NavItem[] = [
|
||||
{
|
||||
icon: <PlugInIcon />,
|
||||
name: "Setup",
|
||||
subItems: [
|
||||
{ name: "Sites", path: "/settings/sites" },
|
||||
{ name: "Keywords Opportunities", path: "/planner/keyword-opportunities" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Add Planner if enabled
|
||||
if (moduleEnabled('planner')) {
|
||||
workflowItems.push({
|
||||
icon: <ListIcon />,
|
||||
name: "Planner",
|
||||
subItems: [
|
||||
{ name: "Dashboard", path: "/planner" },
|
||||
{ name: "Keywords", path: "/planner/keywords" },
|
||||
{ name: "Clusters", path: "/planner/clusters" },
|
||||
{ name: "Ideas", path: "/planner/ideas" },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Add Writer if enabled
|
||||
if (moduleEnabled('writer')) {
|
||||
workflowItems.push({
|
||||
icon: <TaskIcon />,
|
||||
name: "Writer",
|
||||
subItems: [
|
||||
{ name: "Dashboard", path: "/writer" },
|
||||
{ name: "Tasks", path: "/writer/tasks" },
|
||||
{ name: "Content", path: "/writer/content" },
|
||||
{ name: "Images", path: "/writer/images" },
|
||||
{ name: "Published", path: "/writer/published" },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Add Thinker if enabled
|
||||
if (moduleEnabled('thinker')) {
|
||||
workflowItems.push({
|
||||
icon: <BoltIcon />,
|
||||
name: "Thinker",
|
||||
subItems: [
|
||||
{ name: "Dashboard", path: "/thinker" },
|
||||
{ name: "Prompts", path: "/thinker/prompts" },
|
||||
{ name: "Author Profiles", path: "/thinker/author-profiles" },
|
||||
{ name: "Strategies", path: "/thinker/strategies" },
|
||||
{ name: "Image Testing", path: "/thinker/image-testing" },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// Add Automation if enabled
|
||||
if (moduleEnabled('automation')) {
|
||||
workflowItems.push({
|
||||
icon: <BoltIcon />,
|
||||
name: "Automation",
|
||||
path: "/automation",
|
||||
});
|
||||
}
|
||||
|
||||
workflowItems.push({
|
||||
icon: <TimeIcon />,
|
||||
name: "Schedules",
|
||||
path: "/schedules",
|
||||
});
|
||||
|
||||
return [
|
||||
{
|
||||
label: "OVERVIEW",
|
||||
items: [
|
||||
{
|
||||
icon: <GridIcon />,
|
||||
name: "Dashboard",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
icon: <DocsIcon />,
|
||||
name: "Industry / Sectors",
|
||||
path: "/reference/industries",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "WORKFLOWS",
|
||||
items: workflowItems,
|
||||
},
|
||||
{
|
||||
label: "ACCOUNT & SETTINGS",
|
||||
items: [
|
||||
@@ -165,7 +195,8 @@ const AppSidebar: React.FC = () => {
|
||||
},
|
||||
],
|
||||
},
|
||||
], []);
|
||||
];
|
||||
}, [moduleEnableSettings, moduleEnabled]);
|
||||
|
||||
// Admin section - only shown for users in aws-admin account
|
||||
const adminSection: MenuSection = useMemo(() => ({
|
||||
|
||||
Reference in New Issue
Block a user