Add risk creation form
Signed-off-by: Bryan Frimin <bryan@getprobo.com> Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
committed by
Sacha Al Himdani
Sacha Al Himdani
parent
15cf471454
commit
3d4ecf5f8f
@@ -12,18 +12,22 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.0.1",
|
||||
"@probo/hooks": "1.0.0",
|
||||
"@probo/i18n": "1.0.0",
|
||||
"@probo/ui": "1.0.0",
|
||||
"@radix-ui/react-dialog": "^1.1.14",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-select": "^2.2.5",
|
||||
"@tanstack/react-query": "^5.76.1",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-error-boundary": "^6.0.0",
|
||||
"react-hook-form": "^7.56.4",
|
||||
"react-relay": "^19.0.0",
|
||||
"react-router": "^7.6.0",
|
||||
"relay-runtime": "^19.0.0"
|
||||
"relay-runtime": "^19.0.0",
|
||||
"zod": "^3.25.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.25.0",
|
||||
|
||||
47
apps/console2/src/components/form/ControlledField.tsx
Normal file
47
apps/console2/src/components/form/ControlledField.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import type { ComponentProps, JSXElementConstructor } from "react";
|
||||
import { Field } from "@probo/ui";
|
||||
import { Controller, type Control } from "react-hook-form";
|
||||
import { Select } from "@probo/ui";
|
||||
|
||||
type Props<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
|
||||
ComponentProps<T> & {
|
||||
control: Control<any>;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export function ControlledField({
|
||||
control,
|
||||
name,
|
||||
...props
|
||||
}: Props<typeof Field>) {
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<Field {...props} {...field} onValueChange={field.onChange} />
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ControlledSelect({
|
||||
control,
|
||||
name,
|
||||
...props
|
||||
}: Props<typeof Select>) {
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
id={name}
|
||||
{...props}
|
||||
{...field}
|
||||
onValueChange={field.onChange}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
85
apps/console2/src/components/form/UserSelect.tsx
Normal file
85
apps/console2/src/components/form/UserSelect.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { Avatar, Option, Select } from "@probo/ui";
|
||||
import { Suspense } from "react";
|
||||
import { useLazyLoadQuery } from "react-relay";
|
||||
import { graphql } from "relay-runtime";
|
||||
import type { UserSelectQuery as UserSelectQueryType } from "./__generated__/UserSelectQuery.graphql";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Controller, type Control } from "react-hook-form";
|
||||
|
||||
const usersQuery = graphql`
|
||||
query UserSelectQuery($organizationId: ID!) {
|
||||
organization: node(id: $organizationId) {
|
||||
... on Organization {
|
||||
users(first: 100, orderBy: { direction: ASC, field: CREATED_AT }) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
fullName
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function UserSelect({
|
||||
organization,
|
||||
name,
|
||||
control,
|
||||
}: {
|
||||
organization: string;
|
||||
name: string;
|
||||
control: Control<any>;
|
||||
}) {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={<Select variant="editor" disabled placeholder="Loading..." />}
|
||||
>
|
||||
<UserSelectWithQuery
|
||||
organization={organization}
|
||||
name={name}
|
||||
control={control}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function UserSelectWithQuery({
|
||||
organization,
|
||||
name,
|
||||
control,
|
||||
}: {
|
||||
organization: string;
|
||||
name: string;
|
||||
control: Control;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const data = useLazyLoadQuery<UserSelectQueryType>(usersQuery, {
|
||||
organizationId: organization,
|
||||
});
|
||||
|
||||
const users = data.organization?.users?.edges.map((edge) => edge.node);
|
||||
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
id={name}
|
||||
variant="editor"
|
||||
placeholder={__("Select an user")}
|
||||
{...field}
|
||||
>
|
||||
{users?.map((user) => (
|
||||
<Option key={user.id} value={user.id}>
|
||||
<Avatar name={user.fullName} />
|
||||
{user.fullName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
180
apps/console2/src/components/form/__generated__/UserSelectQuery.graphql.ts
generated
Normal file
180
apps/console2/src/components/form/__generated__/UserSelectQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* @generated SignedSource<<45329c77cfacf0f653adac2e9172b371>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type UserSelectQuery$variables = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type UserSelectQuery$data = {
|
||||
readonly organization: {
|
||||
readonly users?: {
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly fullName: string;
|
||||
readonly id: string;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type UserSelectQuery = {
|
||||
response: UserSelectQuery$data;
|
||||
variables: UserSelectQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "organizationId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "organizationId"
|
||||
}
|
||||
],
|
||||
v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 100
|
||||
},
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "orderBy",
|
||||
"value": {
|
||||
"direction": "ASC",
|
||||
"field": "CREATED_AT"
|
||||
}
|
||||
}
|
||||
],
|
||||
"concreteType": "UserConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "users",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "UserEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "User",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "fullName",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": "users(first:100,orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "UserSelectQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "UserSelectQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
(v3/*: any*/),
|
||||
(v2/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "795bb4c1131f2cacedb1ab8faf9f10ed",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "UserSelectQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query UserSelectQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n users(first: 100, orderBy: {direction: ASC, field: CREATED_AT}) {\n edges {\n node {\n id\n fullName\n }\n }\n }\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "f2a6754264e15c49c53a9ac9fa60264e";
|
||||
|
||||
export default node;
|
||||
13
apps/console2/src/hooks/useFormWithSchema.ts
Normal file
13
apps/console2/src/hooks/useFormWithSchema.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { useForm } from "react-hook-form";
|
||||
import type { z, ZodType } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
export function useFormWithSchema<T extends ZodType<any, any, any>>(
|
||||
schema: T,
|
||||
options: Parameters<typeof useForm<z.infer<T>>>[0]
|
||||
) {
|
||||
return useForm<z.infer<T>>({
|
||||
...options,
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
}
|
||||
9
apps/console2/src/hooks/useOrganizationId.ts
Normal file
9
apps/console2/src/hooks/useOrganizationId.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { useParams } from "react-router";
|
||||
|
||||
export function useOrganizationId(): string {
|
||||
const { organizationId } = useParams<{ organizationId?: string }>();
|
||||
if (!organizationId) {
|
||||
throw new Error("Cannot resolve organizationId in route params");
|
||||
}
|
||||
return organizationId;
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useLazyLoadQuery } from "react-relay";
|
||||
import { graphql } from "relay-runtime";
|
||||
import type { OrganizationSelectionPageQuery as OrganizationSelectionPageQueryType } from "./__generated__/OrganizationSelectionPageQuery.graphql";
|
||||
import type { OrganizationsPageQuery as OrganizationsPageQueryType } from "./__generated__/OrganizationsPageQuery.graphql";
|
||||
import { useEffect } from "react";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { Avatar, Button, Card, IconPlusLarge } from "@probo/ui";
|
||||
|
||||
const OrganizationSelectionPageQuery = graphql`
|
||||
query OrganizationSelectionPageQuery {
|
||||
const OrganizationsPageQuery = graphql`
|
||||
query OrganizationsPageQuery {
|
||||
viewer {
|
||||
organizations(first: 25) {
|
||||
edges {
|
||||
@@ -22,11 +22,11 @@ const OrganizationSelectionPageQuery = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
export default function OrganizationSelectionPage() {
|
||||
export default function OrganizationsPage() {
|
||||
const { __ } = useTranslate();
|
||||
const navigate = useNavigate();
|
||||
const data = useLazyLoadQuery<OrganizationSelectionPageQueryType>(
|
||||
OrganizationSelectionPageQuery,
|
||||
const data = useLazyLoadQuery<OrganizationsPageQueryType>(
|
||||
OrganizationsPageQuery,
|
||||
{}
|
||||
);
|
||||
|
||||
|
||||
150
apps/console2/src/pages/__generated__/OrganizationsPageQuery.graphql.ts
generated
Normal file
150
apps/console2/src/pages/__generated__/OrganizationsPageQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* @generated SignedSource<<91cc89e5e07572ab16c7bc9b8443fcd6>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type OrganizationsPageQuery$variables = Record<PropertyKey, never>;
|
||||
export type OrganizationsPageQuery$data = {
|
||||
readonly viewer: {
|
||||
readonly organizations: {
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly id: string;
|
||||
readonly logoUrl: string | null | undefined;
|
||||
readonly name: string;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type OrganizationsPageQuery = {
|
||||
response: OrganizationsPageQuery$data;
|
||||
variables: OrganizationsPageQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v1 = {
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 25
|
||||
}
|
||||
],
|
||||
"concreteType": "OrganizationConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "organizations",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "OrganizationEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Organization",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v0/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "logoUrl",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": "organizations(first:25)"
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "OrganizationsPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Viewer",
|
||||
"kind": "LinkedField",
|
||||
"name": "viewer",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Operation",
|
||||
"name": "OrganizationsPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Viewer",
|
||||
"kind": "LinkedField",
|
||||
"name": "viewer",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "e771f8e44e9f9224d9cbe0f271b096ed",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "OrganizationsPageQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query OrganizationsPageQuery {\n viewer {\n organizations(first: 25) {\n edges {\n node {\n id\n name\n logoUrl\n }\n }\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "457b1b8b28355830d77458bab7af23f2";
|
||||
|
||||
export default node;
|
||||
@@ -9,9 +9,24 @@ import {
|
||||
Select,
|
||||
Option,
|
||||
Field,
|
||||
Card,
|
||||
PropertyRow,
|
||||
IconPlusLarge,
|
||||
Textarea,
|
||||
useToast,
|
||||
} from "@probo/ui";
|
||||
import { useMemo, useState, type ReactNode } from "react";
|
||||
import { useFetchQuery } from "../../../hooks/useFetchQuery";
|
||||
import { graphql } from "relay-runtime";
|
||||
import { UserSelect } from "../../../components/form/UserSelect";
|
||||
import { useOrganizationId } from "../../../hooks/useOrganizationId";
|
||||
import { useToggle } from "@probo/hooks";
|
||||
import {
|
||||
ControlledField,
|
||||
ControlledSelect,
|
||||
} from "../../../components/form/ControlledField";
|
||||
import { useRiskForm, type RiskForm } from "./forms/useRiskForm";
|
||||
import { useMutation } from "react-relay";
|
||||
|
||||
type Props = {
|
||||
trigger: ReactNode;
|
||||
@@ -23,50 +38,243 @@ type Risk = {
|
||||
description: string;
|
||||
};
|
||||
|
||||
const createRiskMutation = graphql`
|
||||
mutation NewRiskDialogMutation(
|
||||
$input: CreateRiskInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
createRisk(input: $input) {
|
||||
riskEdge @prependEdge(connections: $connections) {
|
||||
node {
|
||||
id
|
||||
name
|
||||
description
|
||||
category
|
||||
inherentLikelihood
|
||||
inherentImpact
|
||||
residualLikelihood
|
||||
residualImpact
|
||||
treatment
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function NewRiskDialog({ trigger }: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
|
||||
const { control, handleSubmit, setValue, register, watch, formState } =
|
||||
useRiskForm(organizationId);
|
||||
const errors = formState.errors ?? {};
|
||||
const [createRisk, isLoading] = useMutation(createRiskMutation);
|
||||
const { toast } = useToast();
|
||||
|
||||
const onTemplateChange = (risk: Risk) => {
|
||||
console.log(risk);
|
||||
setValue("name", risk.name);
|
||||
setValue("description", risk.description);
|
||||
};
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
createRisk({
|
||||
variables: {
|
||||
input: data,
|
||||
},
|
||||
onCompleted: (response, error) => {
|
||||
if (error) {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: __("Failed to create risk. Please try again."),
|
||||
variant: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: __("Success"),
|
||||
description: __("Risk created successfully."),
|
||||
variant: "success",
|
||||
});
|
||||
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const [showNote, toggleNote] = useToggle(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
onClose={() => {}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
trigger={trigger}
|
||||
title={<Breadcrumb items={[__("Risks"), __("New Risk")]}></Breadcrumb>}
|
||||
>
|
||||
<form>
|
||||
<form onSubmit={onSubmit}>
|
||||
<DialogContent className="grid grid-cols-[1fr_420px]">
|
||||
{/* Main form */}
|
||||
<div className="py-8 px-12 space-y-6">
|
||||
<TemplateSelector onChange={onTemplateChange} />
|
||||
<TemplateSelector
|
||||
onChange={onTemplateChange}
|
||||
control={control}
|
||||
watch={watch}
|
||||
/>
|
||||
<Field
|
||||
{...register("name")}
|
||||
error={errors.name?.message}
|
||||
label={__("Risk name")}
|
||||
name="name"
|
||||
placeholder={__("Service Outage")}
|
||||
/>
|
||||
<Field
|
||||
{...register("description")}
|
||||
error={errors.description?.message}
|
||||
label={__("Description")}
|
||||
name="description"
|
||||
placeholder={__("Type your description here")}
|
||||
type="textarea"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<ImpactAndLikelihood
|
||||
errors={errors}
|
||||
control={control}
|
||||
label={__("Inherent Risk")}
|
||||
prefix="inherent"
|
||||
/>
|
||||
<ImpactAndLikelihood
|
||||
errors={errors}
|
||||
control={control}
|
||||
label={__("Residual Risk")}
|
||||
prefix="residual"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Properties form */}
|
||||
<div className="py-5 px-6 bg-subtle"></div>
|
||||
<div className="py-5 px-6 bg-subtle">
|
||||
<Label>{__("Properties")}</Label>
|
||||
|
||||
<PropertyRow
|
||||
id="ownerId"
|
||||
label={__("Owner")}
|
||||
error={errors.ownerId?.message}
|
||||
>
|
||||
<UserSelect
|
||||
name="ownerId"
|
||||
control={control}
|
||||
organization={organizationId}
|
||||
/>
|
||||
</PropertyRow>
|
||||
|
||||
<PropertyRow
|
||||
id="treatment"
|
||||
label={__("Treatment strategy")}
|
||||
error={errors.treatment?.message}
|
||||
>
|
||||
<ControlledSelect
|
||||
control={control}
|
||||
name="treatment"
|
||||
variant="editor"
|
||||
placeholder={__("Select a treatment strategy")}
|
||||
>
|
||||
<Option value="AVOIDED">Avoid</Option>
|
||||
<Option value="MITIGATED">Mitigate</Option>
|
||||
<Option value="TRANSFERRED">Transfer</Option>
|
||||
<Option value="ACCEPTED">Accept</Option>
|
||||
</ControlledSelect>
|
||||
</PropertyRow>
|
||||
|
||||
<PropertyRow
|
||||
id="note"
|
||||
label={__("Note")}
|
||||
error={errors.note?.message}
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
variant="quaternary"
|
||||
icon={IconPlusLarge}
|
||||
onClick={toggleNote}
|
||||
/>
|
||||
{showNote && (
|
||||
<Textarea
|
||||
className="animate-in slide-in-from-top-2"
|
||||
placeholder={__("Add any additional notes about this risk")}
|
||||
/>
|
||||
)}
|
||||
</PropertyRow>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<Button type="submit">{__("Create risk")}</Button>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{__("Create risk")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function TemplateSelector({ onChange }: { onChange: (risk: Risk) => void }) {
|
||||
function ImpactAndLikelihood({
|
||||
label,
|
||||
prefix,
|
||||
control,
|
||||
errors,
|
||||
}: {
|
||||
label: string;
|
||||
prefix: string;
|
||||
control: RiskForm["control"];
|
||||
errors: Record<string, { message: string }>;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
return (
|
||||
<div>
|
||||
<Label>{label}</Label>
|
||||
<Card padded className="space-y-4 p-4">
|
||||
<ControlledField
|
||||
control={control}
|
||||
name={`${prefix}Impact`}
|
||||
type="select"
|
||||
label={__("Impact")}
|
||||
placeholder={__("Select impact level")}
|
||||
error={errors?.[`${prefix}Impact`]?.message}
|
||||
>
|
||||
<Option value="1">1 - Negligible</Option>
|
||||
<Option value="2">2 - Low</Option>
|
||||
<Option value="3">3 - Moderate</Option>
|
||||
<Option value="4">4 - Significant</Option>
|
||||
<Option value="5">5 - Catastrophic</Option>
|
||||
</ControlledField>
|
||||
<ControlledField
|
||||
control={control}
|
||||
name={`${prefix}Likelihood`}
|
||||
type="select"
|
||||
label={__("Likelihood")}
|
||||
placeholder={__("Select likelihood level")}
|
||||
error={errors?.[`${prefix}Likelihood`]?.message}
|
||||
>
|
||||
<Option value="1">1 - Improbable</Option>
|
||||
<Option value="2">2 - Remote</Option>
|
||||
<Option value="3">3 - Occasional</Option>
|
||||
<Option value="4">4 - Probable</Option>
|
||||
<Option value="5">5 - Frequent</Option>
|
||||
</ControlledField>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TemplateSelector({
|
||||
onChange,
|
||||
control,
|
||||
watch,
|
||||
}: {
|
||||
onChange: (risk: Risk) => void;
|
||||
control: RiskForm["control"];
|
||||
watch: RiskForm["watch"];
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const { data: risks } = useFetchQuery<Risk[]>("/data/risks/risks.json", {
|
||||
staleTime: 100_000,
|
||||
@@ -77,7 +285,7 @@ function TemplateSelector({ onChange }: { onChange: (risk: Risk) => void }) {
|
||||
[risks]
|
||||
);
|
||||
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const selectedCategory = watch("category");
|
||||
|
||||
const templates = useMemo(
|
||||
() => risks?.filter((r) => r.category === selectedCategory) ?? [],
|
||||
@@ -94,21 +302,22 @@ function TemplateSelector({ onChange }: { onChange: (risk: Risk) => void }) {
|
||||
return (
|
||||
<div>
|
||||
<Label>{__("Risk category")}</Label>
|
||||
<div className="grid grid-cols-2 gap-2 mt-[6px]">
|
||||
<Select
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<ControlledSelect
|
||||
control={control}
|
||||
name="category"
|
||||
placeholder={__("Select a category")}
|
||||
onChange={setSelectedCategory}
|
||||
>
|
||||
{categories.map((category) => (
|
||||
<Option key={category} value={category}>
|
||||
{category}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</ControlledSelect>
|
||||
<Select
|
||||
empty={templates?.length === 0}
|
||||
variant={templates?.length === 0 ? "dashed" : "default"}
|
||||
placeholder={__("Select template")}
|
||||
onChange={onTemplateChange}
|
||||
onValueChange={onTemplateChange}
|
||||
>
|
||||
{templates?.map((template) => (
|
||||
<Option key={template.name} value={template.name}>
|
||||
|
||||
249
apps/console2/src/pages/organizations/risks/__generated__/NewRiskDialogMutation.graphql.ts
generated
Normal file
249
apps/console2/src/pages/organizations/risks/__generated__/NewRiskDialogMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* @generated SignedSource<<3577f9a5c1b1f5b26dcac244a9a55fc5>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type RiskTreatment = "ACCEPTED" | "AVOIDED" | "MITIGATED" | "TRANSFERRED" | "%future added value";
|
||||
export type CreateRiskInput = {
|
||||
category: string;
|
||||
description: string;
|
||||
inherentImpact: number;
|
||||
inherentLikelihood: number;
|
||||
name: string;
|
||||
note?: string | null | undefined;
|
||||
organizationId: string;
|
||||
ownerId?: string | null | undefined;
|
||||
residualImpact?: number | null | undefined;
|
||||
residualLikelihood?: number | null | undefined;
|
||||
treatment: RiskTreatment;
|
||||
};
|
||||
export type NewRiskDialogMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: CreateRiskInput;
|
||||
};
|
||||
export type NewRiskDialogMutation$data = {
|
||||
readonly createRisk: {
|
||||
readonly riskEdge: {
|
||||
readonly node: {
|
||||
readonly category: string;
|
||||
readonly createdAt: any;
|
||||
readonly description: string;
|
||||
readonly id: string;
|
||||
readonly inherentImpact: number;
|
||||
readonly inherentLikelihood: number;
|
||||
readonly name: string;
|
||||
readonly residualImpact: number;
|
||||
readonly residualLikelihood: number;
|
||||
readonly treatment: RiskTreatment;
|
||||
readonly updatedAt: any;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type NewRiskDialogMutation = {
|
||||
response: NewRiskDialogMutation$data;
|
||||
variables: NewRiskDialogMutation$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": "RiskEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "riskEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Risk",
|
||||
"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": "inherentLikelihood",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "inherentImpact",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "residualLikelihood",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "residualImpact",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "treatment",
|
||||
"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
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "NewRiskDialogMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateRiskPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createRisk",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "NewRiskDialogMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateRiskPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createRisk",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "prependEdge",
|
||||
"key": "",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "riskEdge",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "e9b461ea2a98edd7d4a1b289d5d4673f",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "NewRiskDialogMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation NewRiskDialogMutation(\n $input: CreateRiskInput!\n) {\n createRisk(input: $input) {\n riskEdge {\n node {\n id\n name\n description\n category\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n treatment\n createdAt\n updatedAt\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "532223f85627f715a9a457680073f358";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,38 @@
|
||||
import { z } from "zod";
|
||||
import { useFormWithSchema } from "../../../../hooks/useFormWithSchema";
|
||||
|
||||
// Export the schema so it can be used elsewhere
|
||||
export const riskSchema = z.object({
|
||||
category: z.string(),
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
organizationId: z.string(),
|
||||
ownerId: z.string(),
|
||||
treatment: z.enum(["AVOIDED", "MITIGATED", "TRANSFERRED", "ACCEPTED"]),
|
||||
inherentLikelihood: z.number().min(1).max(5),
|
||||
inherentImpact: z.number().min(1).max(5),
|
||||
residualLikelihood: z.number().min(1).max(5),
|
||||
residualImpact: z.number().min(1).max(5),
|
||||
note: z.string(),
|
||||
});
|
||||
|
||||
export const useRiskForm = (organizationId: string) => {
|
||||
return useFormWithSchema(riskSchema, {
|
||||
defaultValues: {
|
||||
category: "Compliance & Legal",
|
||||
name: "Contractual risk due to poorly drafted agreements",
|
||||
description:
|
||||
"Weak contracts leads to disputes, missed deliverables, or revenue leakage",
|
||||
organizationId: organizationId,
|
||||
ownerId: "a_YJLJ5RAAIACAAAAZbuSmzPhFPhoMEQ",
|
||||
treatment: "MITIGATED",
|
||||
inherentLikelihood: 5,
|
||||
inherentImpact: 5,
|
||||
residualLikelihood: 5,
|
||||
residualImpact: 5,
|
||||
note: "Hello worlds this is a test",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export type RiskForm = ReturnType<typeof useRiskForm>;
|
||||
Reference in New Issue
Block a user