Rename FrameworkPage -> FrameworkLayout

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/pages/organizations/Routes.tsx

@@ -7,7 +7,7 @@ import OrganizationLayout from "./OrganizationLayout";
 import { SettingsPage } from "./SettingsPage";
 import { CreateFrameworkPage } from "./frameworks/CreateFrameworkPage";
 import { FrameworkListPage } from "./frameworks/FrameworkListPage";
-import { FrameworkPage } from "./frameworks/FrameworkPage";
+import { FrameworkLayout } from "./frameworks/FrameworkLayout";
 import { UpdateFrameworkPage } from "./frameworks/UpdateFrameworkPage";
 import { ControlPage } from "./frameworks/controls/ControlPage";
 import { EditMitigationPage } from "./mitigations/EditMitigationPage";
@@ -39,7 +39,7 @@ export function OrganizationsRoutes() {
         <Route path="frameworks" element={<FrameworkListPage />} />
         <Route path="frameworks/create" element={<CreateFrameworkPage />} />
         <Route path="frameworks/:frameworkId/*">
-          <Route element={<FrameworkPage />}>
+          <Route element={<FrameworkLayout />}>
             <Route index />
             <Route path="controls/:controlId" element={<ControlPage />} />
           </Route>

apps/console/src/pages/organizations/frameworks/FrameworkLayout.tsx

@@ -5,9 +5,9 @@ import { useMatch } from "react-router";
 import { lazy } from "@probo/react-lazy";
 import ErrorBoundary from "@/components/ErrorBoundary";
 
-const FrameworkView = lazy(() => import("./FrameworkView"));
+const FrameworkLayoutView = lazy(() => import("./FrameworkLayoutView"));
 
-export function FrameworkViewSkeleton() {
+export function FrameworkLayoutViewSkeleton() {
   return (
     <PageTemplateSkeleton
       actions={
@@ -35,15 +35,18 @@ export function FrameworkViewSkeleton() {
   );
 }
 
-export function FrameworkPage() {
+export function FrameworkLayout() {
   const match = useMatch(
     "organizations/:organizationId/frameworks/:frameworkId/*"
   );
 
   return (
-    <Suspense key={match?.pathnameBase} fallback={<FrameworkViewSkeleton />}>
+    <Suspense
+      key={match?.pathnameBase}
+      fallback={<FrameworkLayoutViewSkeleton />}
+    >
       <ErrorBoundary key={match?.pathnameBase}>
-        <FrameworkView />
+        <FrameworkLayoutView />
       </ErrorBoundary>
     </Suspense>
   );

apps/console/src/pages/organizations/frameworks/FrameworkLayoutView.tsx

@@ -21,9 +21,8 @@ import { useToast } from "@/hooks/use-toast";
 import type { FrameworkViewQuery as FrameworkViewQueryType } from "./__generated__/FrameworkViewQuery.graphql";
 import type { FrameworkViewDeleteMutation } from "./__generated__/FrameworkViewDeleteMutation.graphql";
 import { PageTemplate } from "@/components/PageTemplate";
-import { FrameworkViewSkeleton } from "./FrameworkPage";
-import { ControlList } from "./FrameworkView/ControlList";
-import ControlView from "./controls/ControlView";
+import { FrameworkLayoutViewSkeleton } from "./FrameworkLayout";
+import { ControlList } from "./FrameworkLayoutView/ControlList";
 
 const FrameworkViewQuery = graphql`
   query FrameworkViewQuery($frameworkId: ID!) {
@@ -68,9 +67,8 @@ function FrameworkViewContent({
 }) {
   const data = usePreloadedQuery(FrameworkViewQuery, queryRef);
   const framework = data.node;
-  const control = data.node.firstControl?.edges[0];
   const navigate = useNavigate();
-  const { organizationId, controlId } = useParams();
+  const { organizationId } = useParams();
   const { toast } = useToast();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -153,7 +151,7 @@ function FrameworkViewContent({
     >
       <div className="flex flex-row items-start justify-start w-full h-[calc(100vh-216px)] overflow-hidden -ml-8">
         <ControlList fragmentKey={framework} />
-        {controlId && <ControlView controlId={control?.node.id} />}
+        <Outlet />
       </div>
 
       {/* Delete Confirmation Dialog */}
@@ -198,11 +196,11 @@ export default function FrameworkView() {
   }, [loadQuery, frameworkId]);
 
   if (!queryRef) {
-    return <FrameworkViewSkeleton />;
+    return <FrameworkLayoutViewSkeleton />;
   }
 
   return (
-    <Suspense fallback={<FrameworkViewSkeleton />}>
+    <Suspense fallback={<FrameworkLayoutViewSkeleton />}>
       <FrameworkViewContent queryRef={queryRef} />
     </Suspense>
   );