Add create control and framework

Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-27 14:22:08 +01:00
parent 63b596464a
commit c54febadb8
21 changed files with 2141 additions and 290 deletions

View File

@@ -44,6 +44,8 @@ const RegisterPage = lazy(() => import("./pages/RegisterPage"));
const CreateOrganizationPage = lazy(
() => import("./pages/CreateOrganizationPage")
);
const CreateFrameworkPage = lazy(() => import("./pages/CreateFrameworkPage"));
const CreateControlPage = lazy(() => import("./pages/CreateControlPage"));
function App() {
return (
@@ -208,6 +210,16 @@ function App() {
</Suspense>
}
/>
<Route
path="frameworks/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreateFrameworkPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId"
element={
@@ -218,6 +230,16 @@ function App() {
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreateControlPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/:controlId"
element={

View File

@@ -0,0 +1,22 @@
import * as React from "react";
import { cn } from "@/lib/utils";
const Textarea = React.forwardRef<
HTMLTextAreaElement,
React.TextareaHTMLAttributes<HTMLTextAreaElement>
>(({ className, ...props }, ref) => {
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
);
});
Textarea.displayName = "Textarea";
export { Textarea };

View File

@@ -16,13 +16,13 @@ import {
SidebarTrigger,
} from "@/components/ui/sidebar";
import { Toaster } from "@/components/ui/toaster";
import { graphql } from "react-relay";
import { useLazyLoadQuery } from "react-relay";
import { graphql, useLazyLoadQuery } from "react-relay";
import { ConsoleLayoutBreadcrumbFrameworkOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql";
import { ConsoleLayoutBreadcrumbPeopleOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPeopleOverviewQuery.graphql";
import { ConsoleLayoutBreadcrumbVendorOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql";
import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql";
import { ConsoleLayoutOrganizationQuery } from "./__generated__/ConsoleLayoutOrganizationQuery.graphql";
import { ConsoleLayoutBreadcrumbCreateControlQuery } from "./__generated__/ConsoleLayoutBreadcrumbCreateControlQuery.graphql";
function BreadcrumbHome({ children }: { children: React.ReactNode }) {
const { organizationId } = useParams();
@@ -57,7 +57,7 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) {
}
`,
{ organizationId: organizationId! },
{ fetchPolicy: "store-or-network" },
{ fetchPolicy: "store-or-network" }
);
return (
@@ -93,6 +93,17 @@ function BreadcrumbFrameworkList() {
);
}
function BreadcrumbCreateFramework() {
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
function BreadcrumbFrameworkOverview() {
const { organizationId, frameworkId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbFrameworkOverviewQuery>(
@@ -106,8 +117,7 @@ function BreadcrumbFrameworkOverview() {
}
}
`,
{ frameworkId: frameworkId! },
{ fetchPolicy: "store-or-network" },
{ frameworkId: frameworkId! }
);
return (
@@ -116,9 +126,9 @@ function BreadcrumbFrameworkOverview() {
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link
to={`/organizations/${organizationId}/frameworks/${data.framework.id}`}
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework.name}
{data.framework?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
@@ -156,7 +166,7 @@ function BreadcrumbVendorOverview() {
}
`,
{ vendorId: vendorId! },
{ fetchPolicy: "store-or-network" },
{ fetchPolicy: "store-or-network" }
);
return (
@@ -216,7 +226,7 @@ function BreadcrumbPeopleOverview() {
}
`,
{ peopleId: peopleId! },
{ fetchPolicy: "store-or-network" },
{ fetchPolicy: "store-or-network" }
);
return (
@@ -258,8 +268,7 @@ function BreadcrumbControlOverview() {
}
}
`,
{ frameworkId: frameworkId!, controlId: controlId! },
{ fetchPolicy: "store-or-network" },
{ frameworkId: frameworkId!, controlId: controlId! }
);
return (
@@ -268,9 +277,9 @@ function BreadcrumbControlOverview() {
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link
to={`/organizations/${organizationId}/frameworks/${data.framework.id}`}
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework.name}
{data.framework?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
@@ -278,13 +287,48 @@ function BreadcrumbControlOverview() {
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link
to={`/organizations/${organizationId}/frameworks/${data.framework.id}/controls/${data.control.id}`}
to={`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`}
>
{data.control.name}
{data.control?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbCreateControl() {
const { organizationId, frameworkId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbCreateControlQuery>(
graphql`
query ConsoleLayoutBreadcrumbCreateControlQuery($frameworkId: ID!) {
framework: node(id: $frameworkId) {
id
... on Framework {
name
}
}
}
`,
{ frameworkId: frameworkId! }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Control</BreadcrumbPage>
</BreadcrumbItem>
</>
);
}
@@ -311,10 +355,19 @@ export default function ConsoleLayout() {
<Route
path=":frameworkId"
element={<BreadcrumbFrameworkOverview />}
/>
>
<Route
path="controls/create"
element={<BreadcrumbCreateControl />}
/>
<Route
path="controls/:controlId"
element={<BreadcrumbControlOverview />}
/>
</Route>
<Route
path=":frameworkId/controls/:controlId"
element={<BreadcrumbControlOverview />}
path="create"
element={<BreadcrumbCreateFramework />}
/>
</Route>
<Route path="peoples" element={<BreadcrumbPeopleList />}>

View File

@@ -0,0 +1,127 @@
/**
* @generated SignedSource<<72acdb0b83faf29c9d1a4f403a40ac5e>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ConsoleLayoutBreadcrumbCreateControlQuery$variables = {
frameworkId: string;
};
export type ConsoleLayoutBreadcrumbCreateControlQuery$data = {
readonly framework: {
readonly id: string;
readonly name?: string;
};
};
export type ConsoleLayoutBreadcrumbCreateControlQuery = {
response: ConsoleLayoutBreadcrumbCreateControlQuery$data;
variables: ConsoleLayoutBreadcrumbCreateControlQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "frameworkId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "frameworkId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"type": "Framework",
"abstractKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "ConsoleLayoutBreadcrumbCreateControlQuery",
"selections": [
{
"alias": "framework",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "ConsoleLayoutBreadcrumbCreateControlQuery",
"selections": [
{
"alias": "framework",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v2/*: any*/),
(v3/*: any*/)
],
"storageKey": null
}
]
},
"params": {
"cacheID": "96453f593f21e812afc5b888cc68da3e",
"id": null,
"metadata": {},
"name": "ConsoleLayoutBreadcrumbCreateControlQuery",
"operationKind": "query",
"text": "query ConsoleLayoutBreadcrumbCreateControlQuery(\n $frameworkId: ID!\n) {\n framework: node(id: $frameworkId) {\n __typename\n id\n ... on Framework {\n name\n }\n }\n}\n"
}
};
})();
(node as any).hash = "f249019075c60c4449f6f232229a6965";
export default node;

View File

@@ -0,0 +1,241 @@
import { Suspense, useState } from "react";
import { useNavigate, useParams } from "react-router";
import { graphql, useMutation, ConnectionHandler } from "react-relay";
import { Helmet } from "react-helmet-async";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/hooks/use-toast";
import { HelpCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import { CreateControlPageCreateControlMutation } from "./__generated__/CreateControlPageCreateControlMutation.graphql";
const createControlMutation = graphql`
mutation CreateControlPageCreateControlMutation(
$input: CreateControlInput!
$connections: [ID!]!
) {
createControl(input: $input) {
controlEdge @prependEdge(connections: $connections) {
node {
id
name
description
category
state
}
}
}
}
`;
function EditableField({
label,
value,
onChange,
type = "text",
helpText,
required,
multiline = false,
}: {
label: string;
value: string;
onChange: (value: string) => void;
type?: string;
helpText?: string;
required?: boolean;
multiline?: boolean;
}) {
return (
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label htmlFor={label} className="text-sm font-medium">
{label}
{required && <span className="text-red-500">*</span>}
</Label>
{helpText && (
<div className="relative flex items-center">
<HelpCircle className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">{helpText}</span>
</div>
)}
</div>
{multiline ? (
<Textarea
id={label}
value={value}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
onChange(e.target.value)
}
className={cn(
"w-full resize-none",
required && !value && "border-red-500"
)}
placeholder={`Enter ${label.toLowerCase()}`}
rows={4}
/>
) : (
<Input
id={label}
type={type}
value={value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChange(e.target.value)
}
className={cn("w-full", required && !value && "border-red-500")}
placeholder={`Enter ${label.toLowerCase()}`}
/>
)}
</div>
);
}
function CreateControlPageContent() {
const { organizationId, frameworkId } = useParams();
const navigate = useNavigate();
const { toast } = useToast();
const [formData, setFormData] = useState({
name: "",
description: "",
category: "",
});
const [commit, isInFlight] =
useMutation<CreateControlPageCreateControlMutation>(createControlMutation);
const handleFieldChange = (field: keyof typeof formData, value: unknown) => {
setFormData((prev) => ({
...prev,
[field]: value,
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!formData.name || !formData.description || !formData.category) {
toast({
title: "Validation Error",
description: "Please fill in all required fields.",
variant: "destructive",
});
return;
}
const connectionId = ConnectionHandler.getConnectionID(
frameworkId!,
"FrameworkOverviewPage_controls"
);
commit({
variables: {
input: {
frameworkId: frameworkId!,
name: formData.name,
description: formData.description,
category: formData.category,
},
connections: [connectionId],
},
onCompleted(data, errors) {
if (errors) {
toast({
title: "Error",
description: errors[0]?.message || "Failed to create control",
variant: "destructive",
});
return;
}
toast({
title: "Success",
description: "Control created successfully",
});
navigate(
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${data.createControl.controlEdge.node.id}`
);
},
onError(error) {
toast({
title: "Error",
description: error.message || "Failed to create control",
variant: "destructive",
});
},
});
};
return (
<>
<Helmet>
<title>Create Control - Probo</title>
</Helmet>
<div className="container mx-auto py-6">
<div className="mb-6">
<h1 className="text-2xl font-bold">Create Control</h1>
<p className="text-muted-foreground">
Create a new control for your framework
</p>
</div>
<Card className="max-w-2xl">
<form onSubmit={handleSubmit} className="p-6 space-y-6">
<EditableField
label="Name"
value={formData.name}
onChange={(value) => handleFieldChange("name", value)}
required
/>
<EditableField
label="Category"
value={formData.category}
onChange={(value) => handleFieldChange("category", value)}
required
helpText="The category this control belongs to"
/>
<EditableField
label="Description"
value={formData.description}
onChange={(value) => handleFieldChange("description", value)}
required
multiline
helpText="Provide a detailed description of the control"
/>
<div className="flex justify-end gap-3">
<Button
type="button"
variant="outline"
onClick={() =>
navigate(
`/organizations/${
frameworkId?.split(":")[1]
}/frameworks/${frameworkId}`
)
}
>
Cancel
</Button>
<Button type="submit" disabled={isInFlight}>
{isInFlight ? "Creating..." : "Create Control"}
</Button>
</div>
</form>
</Card>
</div>
</>
);
}
export default function CreateControlPage() {
return (
<Suspense fallback={<div>Loading...</div>}>
<CreateControlPageContent />
</Suspense>
);
}

View File

@@ -0,0 +1,227 @@
import { Suspense, useState } from "react";
import { useNavigate, useParams } from "react-router";
import { graphql, useMutation, ConnectionHandler } from "react-relay";
import { Helmet } from "react-helmet-async";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/hooks/use-toast";
import { HelpCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import { CreateFrameworkPageCreateFrameworkMutation } from "./__generated__/CreateFrameworkPageCreateFrameworkMutation.graphql";
const createFrameworkMutation = graphql`
mutation CreateFrameworkPageCreateFrameworkMutation(
$input: CreateFrameworkInput!
$connections: [ID!]!
) {
createFramework(input: $input) {
frameworkEdge @prependEdge(connections: $connections) {
node {
id
name
description
}
}
}
}
`;
function EditableField({
label,
value,
onChange,
type = "text",
helpText,
required,
multiline = false,
}: {
label: string;
value: string;
onChange: (value: string) => void;
type?: string;
helpText?: string;
required?: boolean;
multiline?: boolean;
}) {
return (
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label htmlFor={label} className="text-sm font-medium">
{label}
{required && <span className="text-red-500">*</span>}
</Label>
{helpText && (
<div className="relative flex items-center">
<HelpCircle className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">{helpText}</span>
</div>
)}
</div>
{multiline ? (
<Textarea
id={label}
value={value}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
onChange(e.target.value)
}
className={cn(
"w-full resize-none",
required && !value && "border-red-500"
)}
placeholder={`Enter ${label.toLowerCase()}`}
rows={4}
/>
) : (
<Input
id={label}
type={type}
value={value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
onChange(e.target.value)
}
className={cn("w-full", required && !value && "border-red-500")}
placeholder={`Enter ${label.toLowerCase()}`}
/>
)}
</div>
);
}
function CreateFrameworkPageContent() {
const { organizationId } = useParams();
const navigate = useNavigate();
const { toast } = useToast();
const [formData, setFormData] = useState({
name: "",
description: "",
});
const [commit, isInFlight] =
useMutation<CreateFrameworkPageCreateFrameworkMutation>(
createFrameworkMutation
);
const handleFieldChange = (field: keyof typeof formData, value: unknown) => {
setFormData((prev) => ({
...prev,
[field]: value,
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!formData.name || !formData.description) {
toast({
title: "Validation Error",
description: "Please fill in all required fields.",
variant: "destructive",
});
return;
}
const connectionId = ConnectionHandler.getConnectionID(
organizationId!,
"FrameworkListPage_frameworks"
);
commit({
variables: {
input: {
organizationId: organizationId!,
name: formData.name,
description: formData.description,
},
connections: [connectionId],
},
onCompleted(data, errors) {
if (errors) {
toast({
title: "Error",
description: errors[0]?.message || "Failed to create framework",
variant: "destructive",
});
return;
}
toast({
title: "Success",
description: "Framework created successfully",
});
navigate(
`/organizations/${organizationId}/frameworks/${data.createFramework.frameworkEdge.node.id}`
);
},
onError(error) {
toast({
title: "Error",
description: error.message || "Failed to create framework",
variant: "destructive",
});
},
});
};
return (
<>
<Helmet>
<title>Create Framework - Probo</title>
</Helmet>
<div className="container mx-auto py-6">
<div className="mb-6">
<h1 className="text-2xl font-bold">Create Framework</h1>
<p className="text-muted-foreground">
Create a new framework to organize your controls
</p>
</div>
<Card className="max-w-2xl">
<form onSubmit={handleSubmit} className="p-6 space-y-6">
<EditableField
label="Name"
value={formData.name}
onChange={(value) => handleFieldChange("name", value)}
required
/>
<EditableField
label="Description"
value={formData.description}
onChange={(value) => handleFieldChange("description", value)}
required
multiline
helpText="Provide a detailed description of the framework"
/>
<div className="flex justify-end gap-3">
<Button
type="button"
variant="outline"
onClick={() =>
navigate(`/organizations/${organizationId}/frameworks`)
}
>
Cancel
</Button>
<Button type="submit" disabled={isInFlight}>
{isInFlight ? "Creating..." : "Create Framework"}
</Button>
</div>
</form>
</Card>
</div>
</>
);
}
export default function CreateFrameworkPage() {
return (
<Suspense fallback={<div>Loading...</div>}>
<CreateFrameworkPageContent />
</Suspense>
);
}

View File

@@ -9,12 +9,14 @@ import { Card, CardContent } from "@/components/ui/card";
import { Link, useParams } from "react-router";
import type { FrameworkListPageQuery as FrameworkListPageQueryType } from "./__generated__/FrameworkListPageQuery.graphql";
import { Helmet } from "react-helmet-async";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
const FrameworkListPageQuery = graphql`
query FrameworkListPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
... on Organization {
frameworks {
frameworks(first: 25) @connection(key: "FrameworkListPage_frameworks") {
edges {
node {
id
@@ -84,56 +86,75 @@ function FrameworkListPageContent({
}: {
queryRef: PreloadedQuery<FrameworkListPageQueryType>;
}) {
const data = usePreloadedQuery(FrameworkListPageQuery, queryRef);
const data = usePreloadedQuery<FrameworkListPageQueryType>(
FrameworkListPageQuery,
queryRef
);
const { organizationId } = useParams();
const frameworks =
data.organization.frameworks?.edges.map((edge) => edge?.node) ?? [];
return (
<div className="space-y-6">
<div>
<h2 className="text-2xl font-semibold mb-1">Framework</h2>
<p className="text-muted-foreground">
Track and manage your compliance frameworks and their controls.
</p>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
{frameworks.map((framework) => {
const validatedControls = framework.controls.edges.filter(
(edge) => edge?.node?.state === "IMPLEMENTED",
).length;
const totalControls = framework.controls.edges.length;
return (
<Link
key={framework.id}
to={`/organizations/${organizationId}/frameworks/${framework.id}`}
>
<FrameworkCard
title={framework.name}
description={framework.description}
icon={
<div className="flex size-full items-center justify-center rounded-full bg-blue-100">
<span className="text-lg font-semibold text-blue-900">
{framework.name.split(" ")[0]}
</span>
</div>
}
status={
validatedControls === totalControls ? "Compliant" : undefined
}
progress={
validatedControls === totalControls
? "All controls validated"
: `${validatedControls}/${totalControls} Controls validated`
}
/>
<>
<Helmet>
<title>Frameworks - Probo</title>
</Helmet>
<div className="container mx-auto py-6">
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-2xl font-bold">Frameworks</h1>
<p className="text-muted-foreground">
Manage your compliance frameworks
</p>
</div>
<Button asChild>
<Link to={`/organizations/${organizationId}/frameworks/create`}>
<Plus className="mr-2 h-4 w-4" />
Create Framework
</Link>
);
})}
</Button>
</div>
<div className="space-y-6">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
{frameworks.map((framework) => {
const validatedControls = framework.controls.edges.filter(
(edge) => edge?.node?.state === "IMPLEMENTED"
).length;
const totalControls = framework.controls.edges.length;
return (
<Link
key={framework.id}
to={`/organizations/${organizationId}/frameworks/${framework.id}`}
>
<FrameworkCard
title={framework.name}
description={framework.description}
icon={
<div className="flex size-full items-center justify-center rounded-full bg-blue-100">
<span className="text-lg font-semibold text-blue-900">
{framework.name.split(" ")[0]}
</span>
</div>
}
status={
validatedControls === totalControls
? "Compliant"
: undefined
}
progress={
validatedControls === totalControls
? "All controls validated"
: `${validatedControls}/${totalControls} Controls validated`
}
/>
</Link>
);
})}
</div>
</div>
</div>
</div>
</>
);
}
@@ -164,7 +185,7 @@ function FrameworkListPageFallback() {
export default function FrameworkListPage() {
const [queryRef, loadQuery] = useQueryLoader<FrameworkListPageQueryType>(
FrameworkListPageQuery,
FrameworkListPageQuery
);
const { organizationId } = useParams();

View File

@@ -1,14 +1,15 @@
import { Suspense, useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router";
import { useParams, useNavigate, Link } from "react-router";
import {
graphql,
PreloadedQuery,
usePreloadedQuery,
useQueryLoader,
} from "react-relay";
import { Shield, MoveUpRight, Clock } from "lucide-react";
import { Shield, MoveUpRight, Clock, Plus } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql";
import { Helmet } from "react-helmet-async";
import { createPortal } from "react-dom";
@@ -20,7 +21,7 @@ const FrameworkOverviewPageQuery = graphql`
... on Framework {
name
description
controls {
controls(first: 90) @connection(key: "FrameworkOverviewPage_controls") {
edges {
node {
id
@@ -56,17 +57,14 @@ function FrameworkOverviewPageContent({
const { organizationId } = useParams();
// Group controls by their category
const controlsByCategory = controls.reduce(
(acc, control) => {
if (!control?.category) return acc;
if (!acc[control.category]) {
acc[control.category] = [];
}
acc[control.category].push(control);
return acc;
},
{} as Record<string, typeof controls>,
);
const controlsByCategory = controls.reduce((acc, control) => {
if (!control?.category) return acc;
if (!acc[control.category]) {
acc[control.category] = [];
}
acc[control.category].push(control);
return acc;
}, {} as Record<string, typeof controls>);
const controlCards = Object.entries(controlsByCategory).map(
([category, controls]) => ({
@@ -74,20 +72,30 @@ function FrameworkOverviewPageContent({
controls,
completed: controls.filter((c) => c?.state === "IMPLEMENTED").length,
total: controls.length,
}),
})
);
const totalImplemented = controls.filter(
(c) => c?.state === "IMPLEMENTED",
(c) => c?.state === "IMPLEMENTED"
).length;
return (
<div className="min-h-screen bg-background p-6 space-y-6">
<div className="space-y-4 mb-8">
<h1 className="text-2xl font-semibold">{framework.name}</h1>
<p className="text-muted-foreground max-w-3xl">
{framework.description}
</p>
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-semibold mb-1">{framework.name}</h2>
<p className="text-muted-foreground">{framework.description}</p>
</div>
<Button asChild>
<Link
to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/create`}
>
<Plus className="mr-2 h-4 w-4" />
Create Control
</Link>
</Button>
</div>
</div>
<div>
@@ -190,7 +198,7 @@ function FrameworkOverviewPageContent({
onClick={() => {
if (control?.id) {
navigate(
`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`,
`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`
);
}
}}
@@ -274,7 +282,7 @@ function FrameworkOverviewPageContent({
</div>
</div>
</div>,
document.body,
document.body
)}
</div>
);
@@ -308,7 +316,7 @@ function FrameworkOverviewPageFallback() {
export default function FrameworkOverviewPage() {
const { frameworkId } = useParams();
const [queryRef, loadQuery] = useQueryLoader<FrameworkOverviewPageQueryType>(
FrameworkOverviewPageQuery,
FrameworkOverviewPageQuery
);
useEffect(() => {

View File

@@ -0,0 +1,194 @@
/**
* @generated SignedSource<<0e78396d5cf08670ae21d8a415c97948>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ControlState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
export type CreateControlInput = {
category: string;
description: string;
frameworkId: string;
name: string;
};
export type CreateControlPageCreateControlMutation$variables = {
connections: ReadonlyArray<string>;
input: CreateControlInput;
};
export type CreateControlPageCreateControlMutation$data = {
readonly createControl: {
readonly controlEdge: {
readonly node: {
readonly category: string;
readonly description: string;
readonly id: string;
readonly name: string;
readonly state: ControlState;
};
};
};
};
export type CreateControlPageCreateControlMutation = {
response: CreateControlPageCreateControlMutation$data;
variables: CreateControlPageCreateControlMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "controlEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "CreateControlPageCreateControlMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateControlPayload",
"kind": "LinkedField",
"name": "createControl",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "CreateControlPageCreateControlMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateControlPayload",
"kind": "LinkedField",
"name": "createControl",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "prependEdge",
"key": "",
"kind": "LinkedHandle",
"name": "controlEdge",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "c6b6a979bccf19dd57123c49d5ce738b",
"id": null,
"metadata": {},
"name": "CreateControlPageCreateControlMutation",
"operationKind": "mutation",
"text": "mutation CreateControlPageCreateControlMutation(\n $input: CreateControlInput!\n) {\n createControl(input: $input) {\n controlEdge {\n node {\n id\n name\n description\n category\n state\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "4f8f339056a2f83c78ce3a642fa6ecc6";
export default node;

View File

@@ -0,0 +1,176 @@
/**
* @generated SignedSource<<9c88cb0bf2c3491784bdea7e46c918a3>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type CreateFrameworkInput = {
description: string;
name: string;
organizationId: string;
};
export type CreateFrameworkPageCreateFrameworkMutation$variables = {
connections: ReadonlyArray<string>;
input: CreateFrameworkInput;
};
export type CreateFrameworkPageCreateFrameworkMutation$data = {
readonly createFramework: {
readonly frameworkEdge: {
readonly node: {
readonly description: string;
readonly id: string;
readonly name: string;
};
};
};
};
export type CreateFrameworkPageCreateFrameworkMutation = {
response: CreateFrameworkPageCreateFrameworkMutation$data;
variables: CreateFrameworkPageCreateFrameworkMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"concreteType": "FrameworkEdge",
"kind": "LinkedField",
"name": "frameworkEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Framework",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "CreateFrameworkPageCreateFrameworkMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateFrameworkPayload",
"kind": "LinkedField",
"name": "createFramework",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "CreateFrameworkPageCreateFrameworkMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateFrameworkPayload",
"kind": "LinkedField",
"name": "createFramework",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "prependEdge",
"key": "",
"kind": "LinkedHandle",
"name": "frameworkEdge",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "142ffd990da914bddaa2752dfff0faaf",
"id": null,
"metadata": {},
"name": "CreateFrameworkPageCreateFrameworkMutation",
"operationKind": "mutation",
"text": "mutation CreateFrameworkPageCreateFrameworkMutation(\n $input: CreateFrameworkInput!\n) {\n createFramework(input: $input) {\n frameworkEdge {\n node {\n id\n name\n description\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "60b83b4b5302f15a8e6f6b711c905963";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<ea02ef2ebc2c52a72d443c130a44087c>>
* @generated SignedSource<<fd058cd12c357b25b11a3806c359e33b>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -64,115 +64,146 @@ v2 = {
"storageKey": null
},
v3 = {
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FrameworkConnection",
"kind": "LinkedField",
"name": "frameworks",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FrameworkEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Framework",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
};
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v4 = [
{
"alias": null,
"args": null,
"concreteType": "FrameworkEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Framework",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
}
],
v5 = [
{
"kind": "Literal",
"name": "first",
"value": 25
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
@@ -188,7 +219,23 @@ return {
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/)
{
"kind": "InlineFragment",
"selections": [
{
"alias": "frameworks",
"args": null,
"concreteType": "FrameworkConnection",
"kind": "LinkedField",
"name": "__FrameworkListPage_frameworks_connection",
"plural": false,
"selections": (v4/*: any*/),
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
@@ -210,14 +257,33 @@ return {
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v3/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v5/*: any*/),
"concreteType": "FrameworkConnection",
"kind": "LinkedField",
"name": "frameworks",
"plural": false,
"selections": (v4/*: any*/),
"storageKey": "frameworks(first:25)"
},
{
"alias": null,
"args": (v5/*: any*/),
"filters": null,
"handle": "connection",
"key": "FrameworkListPage_frameworks",
"kind": "LinkedHandle",
"name": "frameworks"
}
],
"type": "Organization",
"abstractKey": null
},
(v2/*: any*/)
],
"storageKey": null
@@ -225,16 +291,28 @@ return {
]
},
"params": {
"cacheID": "e45d4e64a00b3e27cd6dc52179f47d52",
"cacheID": "0922c219bcd69d7b2fd6b85399de7029",
"id": null,
"metadata": {},
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "forward",
"path": [
"organization",
"frameworks"
]
}
]
},
"name": "FrameworkListPageQuery",
"operationKind": "query",
"text": "query FrameworkListPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n frameworks {\n edges {\n node {\n id\n name\n description\n controls {\n edges {\n node {\n id\n state\n }\n }\n }\n createdAt\n updatedAt\n }\n }\n }\n }\n id\n }\n}\n"
"text": "query FrameworkListPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n frameworks(first: 25) {\n edges {\n node {\n id\n name\n description\n controls {\n edges {\n node {\n id\n state\n }\n }\n }\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "5cd314faffe31e716de2336e70cca4ee";
(node as any).hash = "11e5b067132c7a20da3f6d0d7b6ff450";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<27e925c9f55d555878de5cbe0c131d44>>
* @generated SignedSource<<6f707328d181f9b362855a7b6023acc0>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -73,64 +73,93 @@ v4 = {
"storageKey": null
},
v5 = {
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "Framework",
"abstractKey": null
};
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v6 = [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
(v5/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
}
],
v7 = [
{
"kind": "Literal",
"name": "first",
"value": 90
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
@@ -147,7 +176,25 @@ return {
"plural": false,
"selections": [
(v2/*: any*/),
(v5/*: any*/)
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"alias": "controls",
"args": null,
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "__FrameworkOverviewPage_controls_connection",
"plural": false,
"selections": (v6/*: any*/),
"storageKey": null
}
],
"type": "Framework",
"abstractKey": null
}
],
"storageKey": null
}
@@ -169,31 +216,64 @@ return {
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v5/*: any*/),
(v2/*: any*/),
(v5/*: any*/)
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": (v7/*: any*/),
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": (v6/*: any*/),
"storageKey": "controls(first:90)"
},
{
"alias": null,
"args": (v7/*: any*/),
"filters": null,
"handle": "connection",
"key": "FrameworkOverviewPage_controls",
"kind": "LinkedHandle",
"name": "controls"
}
],
"type": "Framework",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "c02ad61a9b6ce13a83576ad58aa0a7f4",
"cacheID": "77f347f74c922dbf3c1dd0baf0e37efd",
"id": null,
"metadata": {},
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "forward",
"path": [
"node",
"controls"
]
}
]
},
"name": "FrameworkOverviewPageQuery",
"operationKind": "query",
"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 category\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(first: 90) {\n edges {\n node {\n id\n name\n description\n state\n category\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "3103fb6eba6ddf2625aa5b50bcdb43f6";
(node as any).hash = "de913888fcb5a475baf829a5773326a3";
export default node;