rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add control importance

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-03-13 08:46:51 +01:00
parent 4ede969b04
commit d4280b1111
16 changed files with 1162 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
apps/console/src/pages/ControlOverviewPage.tsx
View File

@@ -64,6 +64,7 @@ const controlOverviewPageQuery = graphql`
name
description
state
importance
category
tasks(first: 100) @connection(key: "ControlOverviewPage_tasks") {
__id
@@ -195,6 +196,60 @@ function ControlOverviewPageContent({
const { organizationId, frameworkId, controlId } = useParams();
const navigate = useNavigate();
const environment = useRelayEnvironment();
const formatImportance = (importance: string | undefined): string => {
if (!importance) return "";
const upperImportance = importance.toUpperCase();
if (upperImportance === "MANDATORY") return "Mandatory";
if (upperImportance === "PREFERRED") return "Preferred";
if (upperImportance === "ADVANCED") return "Advanced";
const formatted = importance.toLowerCase();
return formatted.charAt(0).toUpperCase() + formatted.slice(1);
};
const formatState = (state: string | undefined): string => {
if (!state) return "";
const upperState = state.toUpperCase();
if (upperState === "NOT_STARTED") return "Not Started";
if (upperState === "IN_PROGRESS") return "In Progress";
if (upperState === "NOT_APPLICABLE") return "Not Applicable";
if (upperState === "IMPLEMENTED") return "Implemented";
// Fallback for any other states
const formatted = state.toLowerCase();
return formatted.charAt(0).toUpperCase() + formatted.slice(1);
};
const getStateColor = (state: string | undefined): string => {
if (!state) return "bg-gray-100 text-gray-800";
const upperState = state.toUpperCase();
if (upperState === "NOT_STARTED") return "bg-gray-100 text-gray-800";
if (upperState === "IN_PROGRESS") return "bg-blue-100 text-blue-800";
if (upperState === "NOT_APPLICABLE") return "bg-purple-100 text-purple-800";
if (upperState === "IMPLEMENTED") return "bg-green-100 text-green-800";
return "bg-gray-100 text-gray-800";
};
const getImportanceColor = (importance: string | undefined): string => {
if (!importance) return "bg-gray-100 text-gray-800";
const upperImportance = importance.toUpperCase();
if (upperImportance === "MANDATORY") return "bg-red-100 text-red-800";
if (upperImportance === "PREFERRED") return "bg-orange-100 text-orange-800";
if (upperImportance === "ADVANCED") return "bg-blue-100 text-blue-800";
return "bg-gray-100 text-gray-800";
};
const [updateTask] =
useMutation<ControlOverviewPageUpdateTaskStateMutationType>(
updateTaskStateMutation
@@ -542,7 +597,6 @@ function ControlOverviewPageContent({
});
};
// Function to format file size
const formatFileSize = (bytes: number) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
@@ -551,7 +605,6 @@ function ControlOverviewPageContent({
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
// Function to format date
const formatDate = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleDateString("en-US", {
@@ -681,40 +734,25 @@ function ControlOverviewPageContent({
<Button variant="outline" size="sm" onClick={handleEditControl}>
Edit Control
</Button>
<div className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
30 min
<div
className={`${getStateColor(
data.control.state
)} px-3 py-1 rounded-full text-sm`}
>
{formatState(data.control.state)}
</div>
<div className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
Mandatory
<div
className={`${getImportanceColor(
data.control.importance
)} px-3 py-1 rounded-full text-sm`}
>
{formatImportance(data.control.importance)}
</div>
</div>
</div>
<p className="text-gray-600 max-w-3xl">{data.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 ${
data.control.state === "IMPLEMENTED"
? "bg-green-500"
: "bg-gray-300"
}`}
/>
</div>
<span className="text-sm text-gray-700">
{data.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>

6
apps/console/src/pages/FrameworkOverviewPage.tsx
View File

@@ -28,6 +28,7 @@ const FrameworkOverviewPageQuery = graphql`
description
state
category
importance
}
}
}
@@ -209,7 +210,10 @@ function FrameworkOverviewPageContent({
30 min
</div>
<div className="bg-[#2A2A2A] text-white px-2 py-1 rounded-full text-xs">
Mandatory
{
controlCards[hoveredCard]?.controls[hoveredControl]
?.importance
}
</div>
</div>
<MoveUpRight className="w-4 h-4 cursor-pointer hover:text-[#A3E635] transition-colors" />

54
apps/console/src/pages/UpdateControlPage.tsx
View File

@@ -23,10 +23,11 @@ import {
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";
import type { UpdateControlPageUpdateControlMutation as UpdateControlPageUpdateControlMutationType } from "./__generated__/UpdateControlPageUpdateControlMutation.graphql";
import type {
ControlState,
ControlImportance,
} from "./__generated__/UpdateControlPageUpdateControlMutation.graphql";
const updateControlMutation = graphql`
mutation UpdateControlPageUpdateControlMutation($input: UpdateControlInput!) {
@@ -36,6 +37,7 @@ const updateControlMutation = graphql`
name
description
category
importance
state
version
}
@@ -51,6 +53,7 @@ const updateControlQuery = graphql`
name
description
category
importance
state
version
}
@@ -98,7 +101,7 @@ function EditableField({
}
className={cn(
"w-full resize-none",
required && !value && "border-red-500",
required && !value && "border-red-500"
)}
placeholder={`Enter ${label.toLowerCase()}`}
rows={4}
@@ -135,6 +138,7 @@ function UpdateControlPageContent({
description: "",
category: "",
state: "",
importance: "",
});
useEffect(() => {
@@ -144,12 +148,15 @@ function UpdateControlPageContent({
description: data.node.description || "",
category: data.node.category || "",
state: data.node.state || "",
importance: data.node.importance || "",
});
}
}, [data.node]);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [commit, isInFlight] = useMutation<any>(updateControlMutation);
const [commit, isInFlight] =
useMutation<UpdateControlPageUpdateControlMutationType>(
updateControlMutation
);
const handleFieldChange = (field: keyof typeof formData, value: string) => {
setFormData((prev) => ({
@@ -161,7 +168,7 @@ function UpdateControlPageContent({
const handleCancel = () => {
navigate(
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`,
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`
);
};
@@ -185,7 +192,8 @@ function UpdateControlPageContent({
name?: string;
description?: string;
category?: string;
state?: string;
state?: ControlState;
importance?: ControlImportance;
} = {
id: controlId!,
expectedVersion: data.node.version,
@@ -201,7 +209,10 @@ function UpdateControlPageContent({
input.category = formData.category;
}
if (editedFields.has("state")) {
input.state = formData.state;
input.state = formData.state as ControlState;
}
if (editedFields.has("importance")) {
input.importance = formData.importance as ControlImportance;
}
commit({
@@ -224,7 +235,7 @@ function UpdateControlPageContent({
});
navigate(
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`,
`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`
);
},
onError(error) {
@@ -273,6 +284,27 @@ function UpdateControlPageContent({
required
/>
<div className="space-y-2">
<Label htmlFor="importance" className="text-sm font-medium">
Importance
</Label>
<Select
value={formData.importance}
onValueChange={(value) =>
handleFieldChange("importance", value)
}
>
<SelectTrigger>
<SelectValue placeholder="Select importance" />
</SelectTrigger>
<SelectContent>
<SelectItem value="MANDATORY">Mandatory</SelectItem>
<SelectItem value="PREFERRED">Preferred</SelectItem>
<SelectItem value="ADVANCED">Advanced</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="state" className="text-sm font-medium">
State

77
apps/console/src/pages/__generated__/ControlOverviewPageQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<b26c1748d5c4ae346ebbe98ea97b7459>>
* @generated SignedSource<<5f28c9407a05834be16d66330e268caa>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,6 +9,7 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ControlImportance = "ADVANCED" | "MANDATORY" | "PREFERRED";
export type ControlState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
export type EvidenceState = "EXPIRED" | "INVALID" | "VALID";
export type TaskState = "DONE" | "TODO";
@@ -20,6 +21,7 @@ export type ControlOverviewPageQuery$data = {
readonly category?: string;
readonly description?: string;
readonly id: string;
readonly importance?: ControlImportance;
readonly name?: string;
readonly state?: ControlState;
readonly tasks?: {
@@ -101,31 +103,38 @@ v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"name": "importance",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "version",
"name": "category",
"storageKey": null
},
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"name": "version",
"storageKey": null
},
v9 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"name": "__typename",
"storageKey": null
},
v10 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
},
v11 = {
"alias": null,
"args": null,
"concreteType": "PageInfo",
@@ -150,7 +159,7 @@ v10 = {
],
"storageKey": null
},
v11 = {
v12 = {
"kind": "ClientExtension",
"selections": [
{
@@ -162,7 +171,7 @@ v11 = {
}
]
},
v12 = [
v13 = [
{
"alias": null,
"args": null,
@@ -209,25 +218,25 @@ v12 = [
"name": "createdAt",
"storageKey": null
},
(v8/*: any*/)
(v9/*: any*/)
],
"storageKey": null
},
(v9/*: any*/)
(v10/*: any*/)
],
"storageKey": null
},
(v10/*: any*/),
(v11/*: any*/)
(v11/*: any*/),
(v12/*: any*/)
],
v13 = [
v14 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
],
v14 = [
v15 = [
{
"kind": "Literal",
"name": "first",
@@ -257,6 +266,7 @@ return {
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"alias": "tasks",
"args": null,
@@ -285,7 +295,7 @@ return {
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v7/*: any*/),
(v8/*: any*/),
{
"alias": "evidences",
"args": null,
@@ -293,19 +303,19 @@ return {
"kind": "LinkedField",
"name": "__ControlOverviewPage_evidences_connection",
"plural": false,
"selections": (v12/*: any*/),
"selections": (v13/*: any*/),
"storageKey": null
},
(v8/*: any*/)
(v9/*: any*/)
],
"storageKey": null
},
(v9/*: any*/)
(v10/*: any*/)
],
"storageKey": null
},
(v10/*: any*/),
(v11/*: any*/)
(v11/*: any*/),
(v12/*: any*/)
],
"storageKey": null
}
@@ -334,7 +344,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v8/*: any*/),
(v9/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
@@ -343,9 +353,10 @@ return {
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"alias": null,
"args": (v13/*: any*/),
"args": (v14/*: any*/),
"concreteType": "TaskConnection",
"kind": "LinkedField",
"name": "tasks",
@@ -371,42 +382,42 @@ return {
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v7/*: any*/),
(v8/*: any*/),
{
"alias": null,
"args": (v14/*: any*/),
"args": (v15/*: any*/),
"concreteType": "EvidenceConnection",
"kind": "LinkedField",
"name": "evidences",
"plural": false,
"selections": (v12/*: any*/),
"selections": (v13/*: any*/),
"storageKey": "evidences(first:50)"
},
{
"alias": null,
"args": (v14/*: any*/),
"args": (v15/*: any*/),
"filters": null,
"handle": "connection",
"key": "ControlOverviewPage_evidences",
"kind": "LinkedHandle",
"name": "evidences"
},
(v8/*: any*/)
(v9/*: any*/)
],
"storageKey": null
},
(v9/*: any*/)
(v10/*: any*/)
],
"storageKey": null
},
(v10/*: any*/),
(v11/*: any*/)
(v11/*: any*/),
(v12/*: any*/)
],
"storageKey": "tasks(first:100)"
},
{
"alias": null,
"args": (v13/*: any*/),
"args": (v14/*: any*/),
"filters": null,
"handle": "connection",
"key": "ControlOverviewPage_tasks",
@@ -423,7 +434,7 @@ return {
]
},
"params": {
"cacheID": "c8fb4975f792904f5106fb8518406063",
"cacheID": "1dc4bdedef3b39fd2e441f5259f83d29",
"id": null,
"metadata": {
"connection": [
@@ -446,11 +457,11 @@ return {
},
"name": "ControlOverviewPageQuery",
"operationKind": "query",
"text": "query ControlOverviewPageQuery(\n $controlId: ID!\n) {\n control: node(id: $controlId) {\n __typename\n id\n ... on Control {\n name\n description\n state\n category\n tasks(first: 100) {\n edges {\n node {\n id\n name\n description\n state\n version\n evidences(first: 50) {\n edges {\n node {\n id\n mimeType\n filename\n size\n state\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
"text": "query ControlOverviewPageQuery(\n $controlId: ID!\n) {\n control: node(id: $controlId) {\n __typename\n id\n ... on Control {\n name\n description\n state\n importance\n category\n tasks(first: 100) {\n edges {\n node {\n id\n name\n description\n state\n version\n evidences(first: 50) {\n edges {\n node {\n id\n mimeType\n filename\n size\n state\n createdAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "bd552dffe1a33e64e693a9170074989f";
(node as any).hash = "ff1a734556fc0d56e90ddae161a93408";
export default node;

17
apps/console/src/pages/__generated__/FrameworkOverviewPageQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<6f707328d181f9b362855a7b6023acc0>>
* @generated SignedSource<<f5c15295df1bbb71ef99c60ec2417464>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,6 +9,7 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ControlImportance = "ADVANCED" | "MANDATORY" | "PREFERRED";
export type ControlState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
export type FrameworkOverviewPageQuery$variables = {
frameworkId: string;
@@ -21,6 +22,7 @@ export type FrameworkOverviewPageQuery$data = {
readonly category: string;
readonly description: string;
readonly id: string;
readonly importance: ControlImportance;
readonly name: string;
readonly state: ControlState;
};
@@ -113,6 +115,13 @@ v6 = [
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "importance",
"storageKey": null
},
(v5/*: any*/)
],
"storageKey": null
@@ -252,7 +261,7 @@ return {
]
},
"params": {
"cacheID": "77f347f74c922dbf3c1dd0baf0e37efd",
"cacheID": "6a4fc22ad7657a6861027975b620b08e",
"id": null,
"metadata": {
"connection": [
@@ -269,11 +278,11 @@ return {
},
"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(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"
"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 importance\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "de913888fcb5a475baf829a5773326a3";
(node as any).hash = "0a7d8e6c782dae1777ee687c768d0ad6";
export default node;

25
apps/console/src/pages/__generated__/UpdateControlPageQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<daddf46b2039f01b80967778f24dd7f4>>
* @generated SignedSource<<86f7062f21c125e478c5a7a58b495d6c>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,6 +9,7 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ControlImportance = "ADVANCED" | "MANDATORY" | "PREFERRED";
export type ControlState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
export type UpdateControlPageQuery$variables = {
controlId: string;
@@ -18,6 +19,7 @@ export type UpdateControlPageQuery$data = {
readonly category?: string;
readonly description?: string;
readonly id?: string;
readonly importance?: ControlImportance;
readonly name?: string;
readonly state?: ControlState;
readonly version?: number;
@@ -75,10 +77,17 @@ v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"name": "importance",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -108,7 +117,8 @@ return {
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/)
(v7/*: any*/),
(v8/*: any*/)
],
"type": "Control",
"abstractKey": null
@@ -149,7 +159,8 @@ return {
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/)
(v7/*: any*/),
(v8/*: any*/)
],
"type": "Control",
"abstractKey": null
@@ -160,16 +171,16 @@ return {
]
},
"params": {
"cacheID": "c44526d8079e0c539d634841a1f14923",
"cacheID": "8b9ee499b6fc5726d6ce679205b59501",
"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"
"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 importance\n state\n version\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "d0a9cc6ebcb5b97ea57567edea1f7d5f";
(node as any).hash = "f3336cff42059e52e983e4cd9d6c2f1e";
export default node;

16
apps/console/src/pages/__generated__/UpdateControlPageUpdateControlMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<21747064508d0bb73d846aed7ed6b97a>>
* @generated SignedSource<<8eaa34f32a83e626da3331f2e0c6a7cf>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -29,6 +29,7 @@ export type UpdateControlPageUpdateControlMutation$data = {
readonly category: string;
readonly description: string;
readonly id: string;
readonly importance: ControlImportance;
readonly name: string;
readonly state: ControlState;
readonly version: number;
@@ -99,6 +100,13 @@ v1 = [
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "importance",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -138,16 +146,16 @@ return {
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "1e9e2b8000a1b3061fcfda07260413ed",
"cacheID": "3d05aa40f4dba0b24241235c54b85c4f",
"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"
"text": "mutation UpdateControlPageUpdateControlMutation(\n $input: UpdateControlInput!\n) {\n updateControl(input: $input) {\n control {\n id\n name\n description\n category\n importance\n state\n version\n }\n }\n}\n"
}
};
})();
(node as any).hash = "861813b150cef2977f8d9455a9bcf4fa";
(node as any).hash = "0de0b5b9560213e95af60cc1732dee4c";
export default node;