@@ -25,7 +25,8 @@ const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
|
|||||||
const PeoplesPage = lazy(() => import("./pages/PeoplesPage"));
|
const PeoplesPage = lazy(() => import("./pages/PeoplesPage"));
|
||||||
const VendorsPage = lazy(() => import("./pages/VendorsPage"));
|
const VendorsPage = lazy(() => import("./pages/VendorsPage"));
|
||||||
const FrameworksPage = lazy(() => import("./pages/FrameworksPage"));
|
const FrameworksPage = lazy(() => import("./pages/FrameworksPage"));
|
||||||
const FrameworkPage = lazy(() => import("./pages/FrameworkPage"));
|
const FrameworkOverviewPage = lazy(() => import("./pages/FrameworkOverviewPage"));
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
@@ -41,7 +42,7 @@ function App() {
|
|||||||
<Route path="/peoples" element={<PeoplesPage />} />
|
<Route path="/peoples" element={<PeoplesPage />} />
|
||||||
<Route path="/vendors" element={<VendorsPage />} />
|
<Route path="/vendors" element={<VendorsPage />} />
|
||||||
<Route path="/frameworks" element={<FrameworksPage />} />
|
<Route path="/frameworks" element={<FrameworksPage />} />
|
||||||
<Route path="/frameworks/:frameworkId" element={<FrameworkPage />} />
|
<Route path="/frameworks/:frameworkId" element={<FrameworkOverviewPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="*" element={<NotFoundPage />} />
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
@@ -22,10 +22,10 @@ import {
|
|||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Progress } from "@/components/ui/progress";
|
import { Progress } from "@/components/ui/progress";
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
import type { FrameworkPageQuery as FrameworkPageQueryType } from "./__generated__/FrameworkPageQuery.graphql";
|
import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql";
|
||||||
|
|
||||||
const FrameworkPageQuery = graphql`
|
const FrameworkOverviewPageQuery = graphql`
|
||||||
query FrameworkPageQuery($frameworkId: ID!) {
|
query FrameworkOverviewPageQuery($frameworkId: ID!) {
|
||||||
node(id: $frameworkId) {
|
node(id: $frameworkId) {
|
||||||
id
|
id
|
||||||
... on Framework {
|
... on Framework {
|
||||||
@@ -46,12 +46,12 @@ const FrameworkPageQuery = graphql`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function FrameworkPageContent({
|
function FrameworkOverviewPageContent({
|
||||||
queryRef,
|
queryRef,
|
||||||
}: {
|
}: {
|
||||||
queryRef: PreloadedQuery<FrameworkPageQueryType>;
|
queryRef: PreloadedQuery<FrameworkOverviewPageQueryType>;
|
||||||
}) {
|
}) {
|
||||||
const data = usePreloadedQuery(FrameworkPageQuery, queryRef);
|
const data = usePreloadedQuery(FrameworkOverviewPageQuery, queryRef);
|
||||||
const framework = data.node;
|
const framework = data.node;
|
||||||
const controls = framework.controls?.edges.map(edge => edge?.node) ?? [];
|
const controls = framework.controls?.edges.map(edge => edge?.node) ?? [];
|
||||||
|
|
||||||
@@ -164,7 +164,7 @@ function FrameworkPageContent({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function FrameworkPageFallback() {
|
function FrameworkOverviewPageFallback() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background p-6">
|
<div className="min-h-screen bg-background p-6">
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
@@ -189,17 +189,17 @@ function FrameworkPageFallback() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function FrameworkPage() {
|
export default function FrameworkOverviewPage() {
|
||||||
const { frameworkId } = useParams();
|
const { frameworkId } = useParams();
|
||||||
const [queryRef, loadQuery] = useQueryLoader<FrameworkPageQueryType>(FrameworkPageQuery);
|
const [queryRef, loadQuery] = useQueryLoader<FrameworkOverviewPageQueryType>(FrameworkOverviewPageQuery);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadQuery({ frameworkId });
|
loadQuery({ frameworkId });
|
||||||
}, [loadQuery, frameworkId]);
|
}, [loadQuery, frameworkId]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<FrameworkPageFallback />}>
|
<Suspense fallback={<FrameworkOverviewPageFallback />}>
|
||||||
{queryRef && <FrameworkPageContent queryRef={queryRef} />}
|
{queryRef && <FrameworkOverviewPageContent queryRef={queryRef} />}
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* @generated SignedSource<<51618c4ff52c6da6eb39cc0756d037e4>>
|
* @generated SignedSource<<f9715593419cda898b34a0056729d77c>>
|
||||||
* @lightSyntaxTransform
|
* @lightSyntaxTransform
|
||||||
* @nogrep
|
* @nogrep
|
||||||
*/
|
*/
|
||||||
@@ -10,10 +10,10 @@
|
|||||||
|
|
||||||
import { ConcreteRequest } from 'relay-runtime';
|
import { ConcreteRequest } from 'relay-runtime';
|
||||||
export type ControlState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
|
export type ControlState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
|
||||||
export type FrameworkPageQuery$variables = {
|
export type FrameworkOverviewPageQuery$variables = {
|
||||||
frameworkId: string;
|
frameworkId: string;
|
||||||
};
|
};
|
||||||
export type FrameworkPageQuery$data = {
|
export type FrameworkOverviewPageQuery$data = {
|
||||||
readonly node: {
|
readonly node: {
|
||||||
readonly controls?: {
|
readonly controls?: {
|
||||||
readonly edges: ReadonlyArray<{
|
readonly edges: ReadonlyArray<{
|
||||||
@@ -30,9 +30,9 @@ export type FrameworkPageQuery$data = {
|
|||||||
readonly name?: string;
|
readonly name?: string;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
export type FrameworkPageQuery = {
|
export type FrameworkOverviewPageQuery = {
|
||||||
response: FrameworkPageQuery$data;
|
response: FrameworkOverviewPageQuery$data;
|
||||||
variables: FrameworkPageQuery$variables;
|
variables: FrameworkOverviewPageQuery$variables;
|
||||||
};
|
};
|
||||||
|
|
||||||
const node: ConcreteRequest = (function(){
|
const node: ConcreteRequest = (function(){
|
||||||
@@ -128,7 +128,7 @@ return {
|
|||||||
"argumentDefinitions": (v0/*: any*/),
|
"argumentDefinitions": (v0/*: any*/),
|
||||||
"kind": "Fragment",
|
"kind": "Fragment",
|
||||||
"metadata": null,
|
"metadata": null,
|
||||||
"name": "FrameworkPageQuery",
|
"name": "FrameworkOverviewPageQuery",
|
||||||
"selections": [
|
"selections": [
|
||||||
{
|
{
|
||||||
"alias": null,
|
"alias": null,
|
||||||
@@ -151,7 +151,7 @@ return {
|
|||||||
"operation": {
|
"operation": {
|
||||||
"argumentDefinitions": (v0/*: any*/),
|
"argumentDefinitions": (v0/*: any*/),
|
||||||
"kind": "Operation",
|
"kind": "Operation",
|
||||||
"name": "FrameworkPageQuery",
|
"name": "FrameworkOverviewPageQuery",
|
||||||
"selections": [
|
"selections": [
|
||||||
{
|
{
|
||||||
"alias": null,
|
"alias": null,
|
||||||
@@ -176,16 +176,16 @@ return {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"params": {
|
"params": {
|
||||||
"cacheID": "20c37c26ec0c229a526ba1f84a0bb22e",
|
"cacheID": "4190ee685492e95820ecb106f2dc7e3c",
|
||||||
"id": null,
|
"id": null,
|
||||||
"metadata": {},
|
"metadata": {},
|
||||||
"name": "FrameworkPageQuery",
|
"name": "FrameworkOverviewPageQuery",
|
||||||
"operationKind": "query",
|
"operationKind": "query",
|
||||||
"text": "query FrameworkPageQuery(\n $frameworkId: ID!\n) {\n node(id: $frameworkId) {\n __typename\n id\n ... on Framework {\n name\n description\n controls {\n edges {\n node {\n id\n name\n description\n state\n }\n }\n }\n }\n }\n}\n"
|
"text": "query FrameworkOverviewPageQuery(\n $frameworkId: ID!\n) {\n node(id: $frameworkId) {\n __typename\n id\n ... on Framework {\n name\n description\n controls {\n edges {\n node {\n id\n name\n description\n state\n }\n }\n }\n }\n }\n}\n"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
||||||
(node as any).hash = "c018807d1942d694eceae254a3078c4d";
|
(node as any).hash = "25fb6b72c598d19767825ac648654fcf";
|
||||||
|
|
||||||
export default node;
|
export default node;
|
||||||
Reference in New Issue
Block a user