Add update framework

Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-27 14:42:49 +01:00
parent c54febadb8
commit c946e51015
16 changed files with 1129 additions and 28 deletions

View File

@@ -46,6 +46,7 @@ const CreateOrganizationPage = lazy(
);
const CreateFrameworkPage = lazy(() => import("./pages/CreateFrameworkPage"));
const CreateControlPage = lazy(() => import("./pages/CreateControlPage"));
const UpdateFrameworkPage = lazy(() => import("./pages/UpdateFrameworkPage"));
function App() {
return (
@@ -230,6 +231,16 @@ function App() {
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/update"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<UpdateFrameworkPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/create"
element={

View File

@@ -137,6 +137,48 @@ function BreadcrumbFrameworkOverview() {
);
}
function BreadcrumbUpdateFramework() {
const { organizationId, frameworkId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutBreadcrumbUpdateFrameworkQuery>(
graphql`
query ConsoleLayoutBreadcrumbUpdateFrameworkQuery($frameworkId: ID!) {
framework: node(id: $frameworkId) {
id
... on Framework {
name
}
}
}
`,
{ frameworkId: frameworkId! },
{ fetchPolicy: "store-or-network" }
);
return (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink
asChild
className="max-w-[160px] truncate"
aria-label={data.framework?.name}
>
<Link
to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
>
{data.framework?.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Update</BreadcrumbPage>
</BreadcrumbItem>
<Outlet />
</>
);
}
function BreadcrumbVendorList() {
const { organizationId } = useParams();
return (
@@ -303,7 +345,6 @@ function BreadcrumbCreateControl() {
graphql`
query ConsoleLayoutBreadcrumbCreateControlQuery($frameworkId: ID!) {
framework: node(id: $frameworkId) {
id
... on Framework {
name
}
@@ -365,6 +406,10 @@ export default function ConsoleLayout() {
element={<BreadcrumbControlOverview />}
/>
</Route>
<Route
path=":frameworkId/update"
element={<BreadcrumbUpdateFramework />}
/>
<Route
path="create"
element={<BreadcrumbCreateFramework />}

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<72acdb0b83faf29c9d1a4f403a40ac5e>>
* @generated SignedSource<<051137c0676ed5fd6b8807a44b9cb2a4>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -14,7 +14,6 @@ export type ConsoleLayoutBreadcrumbCreateControlQuery$variables = {
};
export type ConsoleLayoutBreadcrumbCreateControlQuery$data = {
readonly framework: {
readonly id: string;
readonly name?: string;
};
};
@@ -39,13 +38,6 @@ v1 = [
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"kind": "InlineFragment",
"selections": [
{
@@ -74,8 +66,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/)
(v2/*: any*/)
],
"storageKey": null
}
@@ -105,23 +96,29 @@ return {
"storageKey": null
},
(v2/*: any*/),
(v3/*: any*/)
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "96453f593f21e812afc5b888cc68da3e",
"cacheID": "a86ec305f24f6a83d549a31e1469a89c",
"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"
"text": "query ConsoleLayoutBreadcrumbCreateControlQuery(\n $frameworkId: ID!\n) {\n framework: node(id: $frameworkId) {\n __typename\n ... on Framework {\n name\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "f249019075c60c4449f6f232229a6965";
(node as any).hash = "5033069853aec310ad544974f7e64b5b";
export default node;

View File

@@ -0,0 +1,127 @@
/**
* @generated SignedSource<<d4b3974723a445d3d352518d6244afd2>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ConsoleLayoutBreadcrumbUpdateFrameworkQuery$variables = {
frameworkId: string;
};
export type ConsoleLayoutBreadcrumbUpdateFrameworkQuery$data = {
readonly framework: {
readonly id: string;
readonly name?: string;
};
};
export type ConsoleLayoutBreadcrumbUpdateFrameworkQuery = {
response: ConsoleLayoutBreadcrumbUpdateFrameworkQuery$data;
variables: ConsoleLayoutBreadcrumbUpdateFrameworkQuery$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": "ConsoleLayoutBreadcrumbUpdateFrameworkQuery",
"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": "ConsoleLayoutBreadcrumbUpdateFrameworkQuery",
"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": "194d6a240ee1e2f0ef799e08bc0e44f5",
"id": null,
"metadata": {},
"name": "ConsoleLayoutBreadcrumbUpdateFrameworkQuery",
"operationKind": "query",
"text": "query ConsoleLayoutBreadcrumbUpdateFrameworkQuery(\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 = "c6381fa068566e0ec00356b3e6835700";
export default node;

View File

@@ -87,14 +87,23 @@ function FrameworkOverviewPageContent({
<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 className="flex gap-2">
<Button variant="outline" asChild>
<Link
to={`/organizations/${organizationId}/frameworks/${framework.id}/update`}
>
Edit Framework
</Link>
</Button>
<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>

View File

@@ -0,0 +1,268 @@
import { Suspense, useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router";
import {
graphql,
useMutation,
usePreloadedQuery,
PreloadedQuery,
useQueryLoader,
} 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 { UpdateFrameworkPageUpdateFrameworkMutation } from "./__generated__/UpdateFrameworkPageUpdateFrameworkMutation.graphql";
import { UpdateFrameworkPageQuery as UpdateFrameworkPageQueryType } from "./__generated__/UpdateFrameworkPageQuery.graphql";
const updateFrameworkMutation = graphql`
mutation UpdateFrameworkPageUpdateFrameworkMutation(
$input: UpdateFrameworkInput!
) {
updateFramework(input: $input) {
id
name
description
version
}
}
`;
const updateFrameworkQuery = graphql`
query UpdateFrameworkPageQuery($frameworkId: ID!) {
node(id: $frameworkId) {
... on Framework {
id
name
description
version
}
}
}
`;
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 UpdateFrameworkPageContent({
queryRef,
}: {
queryRef: PreloadedQuery<UpdateFrameworkPageQueryType>;
}) {
const { organizationId, frameworkId } = useParams();
const navigate = useNavigate();
const { toast } = useToast();
const data = usePreloadedQuery(updateFrameworkQuery, queryRef);
const [editedFields, setEditedFields] = useState<Set<string>>(new Set());
const [formData, setFormData] = useState({
name: "",
description: "",
});
useEffect(() => {
if (data.node) {
setFormData({
name: data.node.name || "",
description: data.node.description || "",
});
}
}, [data.node]);
const [commit, isInFlight] =
useMutation<UpdateFrameworkPageUpdateFrameworkMutation>(
updateFrameworkMutation
);
const handleFieldChange = (field: keyof typeof formData, value: unknown) => {
setFormData((prev) => ({
...prev,
[field]: value,
}));
setEditedFields((prev) => new Set(prev).add(field));
};
const handleCancel = () => {
navigate(`/organizations/${organizationId}/frameworks/${frameworkId}`);
};
const hasChanges = editedFields.size > 0;
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;
}
commit({
variables: {
input: {
id: frameworkId!,
expectedVersion: data.node.version,
name: formData.name,
description: formData.description,
},
},
onCompleted(data, errors) {
if (errors) {
toast({
title: "Error",
description: errors[0]?.message || "Failed to update framework",
variant: "destructive",
});
return;
}
toast({
title: "Success",
description: "Framework updated successfully",
});
navigate(`/organizations/${organizationId}/frameworks/${frameworkId}`);
},
onError(error) {
toast({
title: "Error",
description: error.message || "Failed to update framework",
variant: "destructive",
});
},
});
};
return (
<>
<Helmet>
<title>Update Framework - Probo</title>
</Helmet>
<div className="container mx-auto py-6">
<div className="mb-6">
<h1 className="text-2xl font-bold">Update Framework</h1>
<p className="text-muted-foreground">Update the framework details</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={handleCancel}>
Cancel
</Button>
<Button type="submit" disabled={isInFlight}>
{isInFlight ? "Updating..." : "Update Framework"}
</Button>
</div>
</form>
</Card>
</div>
</>
);
}
function UpdateFrameworkPageFallback() {
return <div>Loading...</div>;
}
export default function UpdateFrameworkPage() {
const { frameworkId } = useParams();
const [queryRef, loadQuery] =
useQueryLoader<UpdateFrameworkPageQueryType>(updateFrameworkQuery);
useEffect(() => {
if (frameworkId) {
loadQuery({ frameworkId });
}
}, [frameworkId, loadQuery]);
if (!queryRef) {
return <UpdateFrameworkPageFallback />;
}
return (
<Suspense fallback={<UpdateFrameworkPageFallback />}>
<UpdateFrameworkPageContent queryRef={queryRef} />
</Suspense>
);
}

View File

@@ -0,0 +1,154 @@
/**
* @generated SignedSource<<c4c46870b65e75baab882f1e9689c119>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type UpdateFrameworkPageQuery$variables = {
frameworkId: string;
};
export type UpdateFrameworkPageQuery$data = {
readonly node: {
readonly description?: string;
readonly id?: string;
readonly name?: string;
readonly version?: number;
};
};
export type UpdateFrameworkPageQuery = {
response: UpdateFrameworkPageQuery$data;
variables: UpdateFrameworkPageQuery$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 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "version",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "UpdateFrameworkPageQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/)
],
"type": "Framework",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "UpdateFrameworkPageQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/)
],
"type": "Framework",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "cae85e293ba2bd3d1d0f13acd1e777f5",
"id": null,
"metadata": {},
"name": "UpdateFrameworkPageQuery",
"operationKind": "query",
"text": "query UpdateFrameworkPageQuery(\n $frameworkId: ID!\n) {\n node(id: $frameworkId) {\n __typename\n ... on Framework {\n id\n name\n description\n version\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "56744b0fcc4892c88f70c71b0ca49b90";
export default node;

View File

@@ -0,0 +1,119 @@
/**
* @generated SignedSource<<190ec3d14b98c4685fcc363fc41cee96>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type UpdateFrameworkInput = {
description?: string | null | undefined;
expectedVersion: number;
id: string;
name?: string | null | undefined;
};
export type UpdateFrameworkPageUpdateFrameworkMutation$variables = {
input: UpdateFrameworkInput;
};
export type UpdateFrameworkPageUpdateFrameworkMutation$data = {
readonly updateFramework: {
readonly description: string;
readonly id: string;
readonly name: string;
readonly version: number;
};
};
export type UpdateFrameworkPageUpdateFrameworkMutation = {
response: UpdateFrameworkPageUpdateFrameworkMutation$data;
variables: UpdateFrameworkPageUpdateFrameworkMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "Framework",
"kind": "LinkedField",
"name": "updateFramework",
"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": "version",
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "UpdateFrameworkPageUpdateFrameworkMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "UpdateFrameworkPageUpdateFrameworkMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "f0f708c6034a6f3c27fbad0193535e51",
"id": null,
"metadata": {},
"name": "UpdateFrameworkPageUpdateFrameworkMutation",
"operationKind": "mutation",
"text": "mutation UpdateFrameworkPageUpdateFrameworkMutation(\n $input: UpdateFrameworkInput!\n) {\n updateFramework(input: $input) {\n id\n name\n description\n version\n }\n}\n"
}
};
})();
(node as any).hash = "b8a8cebfad0ef454a5d5436b61cc595c";
export default node;