gearnode
@@ -24,7 +24,7 @@ posthog.init(process.env.POSTHOG_KEY!, {
|
||||
});
|
||||
|
||||
const OrganizationSelectionPage = lazy(
|
||||
() => import("./pages/OrganizationSelectionPage"),
|
||||
() => import("./pages/OrganizationSelectionPage")
|
||||
);
|
||||
const HomePage = lazy(() => import("./pages/HomePage"));
|
||||
const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
|
||||
@@ -35,18 +35,19 @@ const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage"));
|
||||
const SettingsPage = lazy(() => import("./pages/SettingsPage"));
|
||||
const CreatePeoplePage = lazy(() => import("./pages/CreatePeoplePage"));
|
||||
const FrameworkOverviewPage = lazy(
|
||||
() => import("./pages/FrameworkOverviewPage"),
|
||||
() => import("./pages/FrameworkOverviewPage")
|
||||
);
|
||||
const ControlOverviewPage = lazy(() => import("./pages/ControlOverviewPage"));
|
||||
const PeopleOverviewPage = lazy(() => import("./pages/PeopleOverviewPage"));
|
||||
const LoginPage = lazy(() => import("./pages/LoginPage"));
|
||||
const RegisterPage = lazy(() => import("./pages/RegisterPage"));
|
||||
const CreateOrganizationPage = lazy(
|
||||
() => import("./pages/CreateOrganizationPage"),
|
||||
() => import("./pages/CreateOrganizationPage")
|
||||
);
|
||||
const CreateFrameworkPage = lazy(() => import("./pages/CreateFrameworkPage"));
|
||||
const CreateControlPage = lazy(() => import("./pages/CreateControlPage"));
|
||||
const UpdateFrameworkPage = lazy(() => import("./pages/UpdateFrameworkPage"));
|
||||
const UpdateControlPage = lazy(() => import("./pages/UpdateControlPage"));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -261,6 +262,16 @@ function App() {
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="frameworks/:frameworkId/controls/:controlId/update"
|
||||
element={
|
||||
<Suspense>
|
||||
<ErrorBoundaryWithLocation>
|
||||
<UpdateControlPage />
|
||||
</ErrorBoundaryWithLocation>
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="vendors/:vendorId"
|
||||
element={
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import { useParams, useNavigate } from "react-router";
|
||||
import {
|
||||
graphql,
|
||||
PreloadedQuery,
|
||||
@@ -102,12 +102,14 @@ function ControlOverviewPageContent({
|
||||
}) {
|
||||
const data = usePreloadedQuery<ControlOverviewPageQueryType>(
|
||||
controlOverviewPageQuery,
|
||||
queryRef,
|
||||
queryRef
|
||||
);
|
||||
const { toast } = useToast();
|
||||
const { organizationId, frameworkId, controlId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [updateTaskState] =
|
||||
useMutation<ControlOverviewPageUpdateTaskStateMutationType>(
|
||||
updateTaskStateMutation,
|
||||
updateTaskStateMutation
|
||||
);
|
||||
const [createTask] =
|
||||
useMutation<ControlOverviewPageCreateTaskMutationType>(createTaskMutation);
|
||||
@@ -244,201 +246,222 @@ function ControlOverviewPageContent({
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditControl = () => {
|
||||
navigate(
|
||||
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}/update`
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white p-6 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-semibold">{control?.name}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
|
||||
30 min
|
||||
</div>
|
||||
<div className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
|
||||
Mandatory
|
||||
</div>
|
||||
<div className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
|
||||
Assigned to you
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 max-w-3xl">{control?.description}</p>
|
||||
</div>
|
||||
|
||||
<Card className="bg-gray-50 border border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-4 h-4 rounded-full bg-white flex items-center justify-center border border-gray-200">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
control?.state === "IMPLEMENTED"
|
||||
? "bg-green-500"
|
||||
: "bg-gray-300"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-gray-700">
|
||||
{control?.state === "IMPLEMENTED" ? "Validated" : "Not validated"}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold">Tasks</h2>
|
||||
<Dialog open={isCreateTaskOpen} onOpenChange={setIsCreateTaskOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm" className="flex items-center gap-1">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add Task</span>
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{control?.name || "Control"} - Probo</title>
|
||||
</Helmet>
|
||||
<div className="min-h-screen bg-white p-6 space-y-6">
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-semibold">{control?.name}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleEditControl}>
|
||||
Edit Control
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New Task</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new task to this control. Click save when you're
|
||||
done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">
|
||||
Task Name
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
value={newTaskName}
|
||||
onChange={(e) => setNewTaskName(e.target.value)}
|
||||
placeholder="Enter task name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="description" className="text-sm font-medium">
|
||||
Description (optional)
|
||||
</label>
|
||||
<Input
|
||||
id="description"
|
||||
value={newTaskDescription}
|
||||
onChange={(e) => setNewTaskDescription(e.target.value)}
|
||||
placeholder="Enter task description"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
|
||||
30 min
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateTaskOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreateTask}>Create Task</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<div className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
|
||||
Mandatory
|
||||
</div>
|
||||
<div className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
|
||||
Assigned to you
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 max-w-3xl">{control?.description}</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{tasks.map((task) => (
|
||||
<div
|
||||
key={task?.id}
|
||||
className="flex items-center gap-3 py-4 px-2 hover:bg-gray-50 group"
|
||||
>
|
||||
|
||||
<Card className="bg-gray-50 border border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={`w-5 h-5 rounded border flex items-center justify-center cursor-pointer ${
|
||||
task?.state === "DONE"
|
||||
? "border-gray-400 bg-gray-100"
|
||||
: "border-gray-300"
|
||||
}`}
|
||||
onClick={() =>
|
||||
task?.id &&
|
||||
task?.state &&
|
||||
handleTaskClick(task.id, task.state)
|
||||
}
|
||||
className={`w-4 h-4 rounded-full bg-white flex items-center justify-center border border-gray-200`}
|
||||
>
|
||||
{task?.state === "DONE" && (
|
||||
<CheckCircle2 className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
control?.state === "IMPLEMENTED"
|
||||
? "bg-green-500"
|
||||
: "bg-gray-300"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="flex-1 flex items-center justify-between cursor-pointer"
|
||||
onClick={() =>
|
||||
task?.id &&
|
||||
task?.state &&
|
||||
handleTaskClick(task.id, task.state)
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<h3
|
||||
className={`text-sm ${
|
||||
task?.state === "DONE"
|
||||
? "text-gray-500 line-through"
|
||||
: "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{task?.name}
|
||||
</h3>
|
||||
{task?.description && (
|
||||
<p
|
||||
className={`text-xs mt-1 ${
|
||||
task?.state === "DONE"
|
||||
? "text-gray-400 line-through"
|
||||
: "text-gray-500"
|
||||
}`}
|
||||
<span className="text-sm text-gray-700">
|
||||
{control?.state === "IMPLEMENTED"
|
||||
? "Validated"
|
||||
: "Not validated"}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold">Tasks</h2>
|
||||
<Dialog open={isCreateTaskOpen} onOpenChange={setIsCreateTaskOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm" className="flex items-center gap-1">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add Task</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New Task</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new task to this control. Click save when you're
|
||||
done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">
|
||||
Task Name
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
value={newTaskName}
|
||||
onChange={(e) => setNewTaskName(e.target.value)}
|
||||
placeholder="Enter task name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
{task.description}
|
||||
</p>
|
||||
Description (optional)
|
||||
</label>
|
||||
<Input
|
||||
id="description"
|
||||
value={newTaskDescription}
|
||||
onChange={(e) => setNewTaskDescription(e.target.value)}
|
||||
placeholder="Enter task description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateTaskOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreateTask}>Create Task</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{tasks.map((task) => (
|
||||
<div
|
||||
key={task?.id}
|
||||
className="flex items-center gap-3 py-4 px-2 hover:bg-gray-50 group"
|
||||
>
|
||||
<div
|
||||
className={`w-5 h-5 rounded border flex items-center justify-center cursor-pointer ${
|
||||
task?.state === "DONE"
|
||||
? "border-gray-400 bg-gray-100"
|
||||
: "border-gray-300"
|
||||
}`}
|
||||
onClick={() =>
|
||||
task?.id &&
|
||||
task?.state &&
|
||||
handleTaskClick(task.id, task.state)
|
||||
}
|
||||
>
|
||||
{task?.state === "DONE" && (
|
||||
<CheckCircle2 className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="text-gray-400 text-sm">06.00 - 07.30</div>
|
||||
<button
|
||||
className="text-gray-400 hover:text-red-600"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (task?.id && task?.name) {
|
||||
handleDeleteTask(task.id, task.name);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
<div
|
||||
className="flex-1 flex items-center justify-between cursor-pointer"
|
||||
onClick={() =>
|
||||
task?.id &&
|
||||
task?.state &&
|
||||
handleTaskClick(task.id, task.state)
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<h3
|
||||
className={`text-sm ${
|
||||
task?.state === "DONE"
|
||||
? "text-gray-500 line-through"
|
||||
: "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{task?.name}
|
||||
</h3>
|
||||
{task?.description && (
|
||||
<p
|
||||
className={`text-xs mt-1 ${
|
||||
task?.state === "DONE"
|
||||
? "text-gray-400 line-through"
|
||||
: "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{task.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="text-gray-400 text-sm">06.00 - 07.30</div>
|
||||
<button
|
||||
className="text-gray-400 hover:text-red-600"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (task?.id && task?.name) {
|
||||
handleDeleteTask(task.id, task.name);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
|
||||
{tasks.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<p>No tasks yet. Click "Add Task" to create one.</p>
|
||||
</div>
|
||||
)}
|
||||
{tasks.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<p>No tasks yet. Click "Add Task" to create one.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete Task Confirmation Dialog */}
|
||||
<Dialog open={isDeleteTaskOpen} onOpenChange={setIsDeleteTaskOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Task</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete the task "
|
||||
{taskToDelete?.name}"? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsDeleteTaskOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmDeleteTask}>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
{/* Delete Task Confirmation Dialog */}
|
||||
<Dialog open={isDeleteTaskOpen} onOpenChange={setIsDeleteTaskOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Task</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete the task "
|
||||
{taskToDelete?.name}"? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsDeleteTaskOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmDeleteTask}>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -466,21 +489,22 @@ function ControlOverviewPageFallback() {
|
||||
export default function ControlOverviewPage() {
|
||||
const { controlId } = useParams();
|
||||
const [queryRef, loadQuery] = useQueryLoader<ControlOverviewPageQueryType>(
|
||||
controlOverviewPageQuery,
|
||||
controlOverviewPageQuery
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
loadQuery({ controlId: controlId! });
|
||||
}, [loadQuery, controlId]);
|
||||
if (controlId) {
|
||||
loadQuery({ controlId });
|
||||
}
|
||||
}, [controlId, loadQuery]);
|
||||
|
||||
if (!queryRef) {
|
||||
return <ControlOverviewPageFallback />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Control Overview - Probo Console</title>
|
||||
</Helmet>
|
||||
<Suspense fallback={<ControlOverviewPageFallback />}>
|
||||
{queryRef && <ControlOverviewPageContent queryRef={queryRef} />}
|
||||
</Suspense>
|
||||
</>
|
||||
<Suspense fallback={<ControlOverviewPageFallback />}>
|
||||
<ControlOverviewPageContent queryRef={queryRef} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
335
apps/console/src/pages/UpdateControlPage.tsx
Normal file
335
apps/console/src/pages/UpdateControlPage.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
// Type imports will be available after Relay compiler runs
|
||||
// import type { UpdateControlPageQuery as UpdateControlPageQueryType } from "./__generated__/UpdateControlPageQuery.graphql";
|
||||
// import type { UpdateControlPageUpdateControlMutation as UpdateControlPageUpdateControlMutationType } from "./__generated__/UpdateControlPageUpdateControlMutation.graphql";
|
||||
|
||||
const updateControlMutation = graphql`
|
||||
mutation UpdateControlPageUpdateControlMutation($input: UpdateControlInput!) {
|
||||
updateControl(input: $input) {
|
||||
control {
|
||||
id
|
||||
name
|
||||
description
|
||||
category
|
||||
state
|
||||
version
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const updateControlQuery = graphql`
|
||||
query UpdateControlPageQuery($controlId: ID!) {
|
||||
node(id: $controlId) {
|
||||
... on Control {
|
||||
id
|
||||
name
|
||||
description
|
||||
category
|
||||
state
|
||||
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 UpdateControlPageContent({
|
||||
queryRef,
|
||||
}: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
queryRef: PreloadedQuery<any>;
|
||||
}) {
|
||||
const { organizationId, frameworkId, controlId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useToast();
|
||||
const data = usePreloadedQuery(updateControlQuery, queryRef);
|
||||
const [editedFields, setEditedFields] = useState<Set<string>>(new Set());
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
category: "",
|
||||
state: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data.node) {
|
||||
setFormData({
|
||||
name: data.node.name || "",
|
||||
description: data.node.description || "",
|
||||
category: data.node.category || "",
|
||||
state: data.node.state || "",
|
||||
});
|
||||
}
|
||||
}, [data.node]);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [commit, isInFlight] = useMutation<any>(updateControlMutation);
|
||||
|
||||
const handleFieldChange = (field: keyof typeof formData, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
setEditedFields((prev) => new Set(prev).add(field));
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate(
|
||||
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`
|
||||
);
|
||||
};
|
||||
|
||||
const hasChanges = editedFields.size > 0;
|
||||
|
||||
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 input: {
|
||||
id: string;
|
||||
expectedVersion: number;
|
||||
name?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
state?: string;
|
||||
} = {
|
||||
id: controlId!,
|
||||
expectedVersion: data.node.version,
|
||||
};
|
||||
|
||||
if (editedFields.has("name")) {
|
||||
input.name = formData.name;
|
||||
}
|
||||
if (editedFields.has("description")) {
|
||||
input.description = formData.description;
|
||||
}
|
||||
if (editedFields.has("category")) {
|
||||
input.category = formData.category;
|
||||
}
|
||||
if (editedFields.has("state")) {
|
||||
input.state = formData.state;
|
||||
}
|
||||
|
||||
commit({
|
||||
variables: {
|
||||
input,
|
||||
},
|
||||
onCompleted(data, errors) {
|
||||
if (errors) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: errors[0]?.message || "Failed to update control",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Control updated successfully",
|
||||
});
|
||||
|
||||
navigate(
|
||||
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`
|
||||
);
|
||||
},
|
||||
onError(error) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error.message || "Failed to update control",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Update Control - Probo</title>
|
||||
</Helmet>
|
||||
<div className="container mx-auto py-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold">Update Control</h1>
|
||||
<p className="text-muted-foreground">Update the control 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 control"
|
||||
/>
|
||||
|
||||
<EditableField
|
||||
label="Category"
|
||||
value={formData.category}
|
||||
onChange={(value) => handleFieldChange("category", value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="state" className="text-sm font-medium">
|
||||
State
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.state}
|
||||
onValueChange={(value) => handleFieldChange("state", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select state" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="NOT_STARTED">Not Started</SelectItem>
|
||||
<SelectItem value="IN_PROGRESS">In Progress</SelectItem>
|
||||
<SelectItem value="NOT_APPLICABLE">Not Applicable</SelectItem>
|
||||
<SelectItem value="IMPLEMENTED">Implemented</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button type="button" variant="outline" onClick={handleCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isInFlight || !hasChanges}>
|
||||
{isInFlight ? "Updating..." : "Update Control"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function UpdateControlPageFallback() {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
export default function UpdateControlPage() {
|
||||
const { controlId } = useParams();
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [queryRef, loadQuery] = useQueryLoader<any>(updateControlQuery);
|
||||
|
||||
useEffect(() => {
|
||||
if (controlId) {
|
||||
loadQuery({ controlId });
|
||||
}
|
||||
}, [controlId, loadQuery]);
|
||||
|
||||
if (!queryRef) {
|
||||
return <UpdateControlPageFallback />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense fallback={<UpdateControlPageFallback />}>
|
||||
<UpdateControlPageContent queryRef={queryRef} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
175
apps/console/src/pages/__generated__/UpdateControlPageQuery.graphql.ts
generated
Normal file
175
apps/console/src/pages/__generated__/UpdateControlPageQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,175 @@
|
||||
/**
|
||||
* @generated SignedSource<<daddf46b2039f01b80967778f24dd7f4>>
|
||||
* @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 UpdateControlPageQuery$variables = {
|
||||
controlId: string;
|
||||
};
|
||||
export type UpdateControlPageQuery$data = {
|
||||
readonly node: {
|
||||
readonly category?: string;
|
||||
readonly description?: string;
|
||||
readonly id?: string;
|
||||
readonly name?: string;
|
||||
readonly state?: ControlState;
|
||||
readonly version?: number;
|
||||
};
|
||||
};
|
||||
export type UpdateControlPageQuery = {
|
||||
response: UpdateControlPageQuery$data;
|
||||
variables: UpdateControlPageQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "controlId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "controlId"
|
||||
}
|
||||
],
|
||||
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": "category",
|
||||
"storageKey": null
|
||||
},
|
||||
v6 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "state",
|
||||
"storageKey": null
|
||||
},
|
||||
v7 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "version",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "UpdateControlPageQuery",
|
||||
"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*/),
|
||||
(v6/*: any*/),
|
||||
(v7/*: any*/)
|
||||
],
|
||||
"type": "Control",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "UpdateControlPageQuery",
|
||||
"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*/),
|
||||
(v6/*: any*/),
|
||||
(v7/*: any*/)
|
||||
],
|
||||
"type": "Control",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "c44526d8079e0c539d634841a1f14923",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "UpdateControlPageQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query UpdateControlPageQuery(\n $controlId: ID!\n) {\n node(id: $controlId) {\n __typename\n ... on Control {\n id\n name\n description\n category\n state\n version\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "d0a9cc6ebcb5b97ea57567edea1f7d5f";
|
||||
|
||||
export default node;
|
||||
151
apps/console/src/pages/__generated__/UpdateControlPageUpdateControlMutation.graphql.ts
generated
Normal file
151
apps/console/src/pages/__generated__/UpdateControlPageUpdateControlMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,151 @@
|
||||
/**
|
||||
* @generated SignedSource<<81cac01f1ba6637b3367363835258e4c>>
|
||||
* @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 UpdateControlInput = {
|
||||
category?: string | null | undefined;
|
||||
description?: string | null | undefined;
|
||||
expectedVersion: number;
|
||||
id: string;
|
||||
name?: string | null | undefined;
|
||||
state?: ControlState | null | undefined;
|
||||
};
|
||||
export type UpdateControlPageUpdateControlMutation$variables = {
|
||||
input: UpdateControlInput;
|
||||
};
|
||||
export type UpdateControlPageUpdateControlMutation$data = {
|
||||
readonly updateControl: {
|
||||
readonly control: {
|
||||
readonly category: string;
|
||||
readonly description: string;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly state: ControlState;
|
||||
readonly version: number;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type UpdateControlPageUpdateControlMutation = {
|
||||
response: UpdateControlPageUpdateControlMutation$data;
|
||||
variables: UpdateControlPageUpdateControlMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "UpdateControlPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "updateControl",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Control",
|
||||
"kind": "LinkedField",
|
||||
"name": "control",
|
||||
"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
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "version",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "UpdateControlPageUpdateControlMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "UpdateControlPageUpdateControlMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "1e9e2b8000a1b3061fcfda07260413ed",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "UpdateControlPageUpdateControlMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation UpdateControlPageUpdateControlMutation(\n $input: UpdateControlInput!\n) {\n updateControl(input: $input) {\n control {\n id\n name\n description\n category\n state\n version\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "861813b150cef2977f8d9455a9bcf4fa";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user