From 1b15b01758cf112afb27749092571d4eac1ba9c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <nemile.re@gmail.com>
Date: Fri, 28 Mar 2025 19:02:36 +0400
Subject: [PATCH] Add new mitigation page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <nemile.re@gmail.com>
---
 apps/console/src/components/EditableField.tsx |  66 ++++
 apps/console/src/components/ui/button.tsx     |   6 +-
 .../organizations/OrganizationBreadcrumb.tsx  | 116 ++-----
 .../src/pages/organizations/Routes.tsx        |   2 +
 .../mitigations/MitigationListView.tsx        |  12 +-
 .../mitigations/MitigationNewPage.tsx         |  30 ++
 .../mitigations/MitigationNewView.tsx         | 206 ++++++++++++
 .../MitigationListViewQuery.graphql.ts        | 311 +++++++++++-------
 ...NewViewCreateMitigationMutation.graphql.ts | 179 ++++++++++
 9 files changed, 719 insertions(+), 209 deletions(-)
 create mode 100644 apps/console/src/components/EditableField.tsx
 create mode 100644 apps/console/src/pages/organizations/mitigations/MitigationNewPage.tsx
 create mode 100644 apps/console/src/pages/organizations/mitigations/MitigationNewView.tsx
 create mode 100644 apps/console/src/pages/organizations/mitigations/__generated__/MitigationNewViewCreateMitigationMutation.graphql.ts

diff --git a/apps/console/src/components/EditableField.tsx b/apps/console/src/components/EditableField.tsx
new file mode 100644
index 000000000..963c5b0a1
--- /dev/null
+++ b/apps/console/src/components/EditableField.tsx
@@ -0,0 +1,66 @@
+import { HelpCircle } from "lucide-react";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { Input } from "./ui/input";
+import { cn } from "@/lib/utils";
+
+export 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>
+  );
+}
diff --git a/apps/console/src/components/ui/button.tsx b/apps/console/src/components/ui/button.tsx
index 224a2af28..84d74b5b2 100644
--- a/apps/console/src/components/ui/button.tsx
+++ b/apps/console/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -31,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -50,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  },
+  }
 );
 Button.displayName = "Button";
 
diff --git a/apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx b/apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx
index 75aefd51e..2f82d9b56 100644
--- a/apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx
+++ b/apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx
@@ -20,6 +20,28 @@ import { OrganizationBreadcrumbOrganizationQuery } from "./__generated__/Organiz
 import { OrganizationBreadcrumbBreadcrumbMitigationViewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbMitigationViewQuery.graphql";
 import { OrganizationBreadcrumbBreadcrumbControlQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbControlQuery.graphql";
 
+const New = () => {
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>New</BreadcrumbPage>
+      </BreadcrumbItem>
+    </>
+  );
+};
+
+const Edit = () => {
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Edit</BreadcrumbPage>
+      </BreadcrumbItem>
+    </>
+  );
+};
+
 const BreadcrumbNavLink = ({
   to,
   children,
@@ -107,17 +129,6 @@ function BreadcrumbFrameworkList() {
   );
 }
 
-function BreadcrumbCreateFramework() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Create</BreadcrumbPage>
-      </BreadcrumbItem>
-    </>
-  );
-}
-
 function BreadcrumbFrameworkOverview() {
   const { organizationId, frameworkId } = useParams();
   const data =
@@ -152,17 +163,6 @@ function BreadcrumbFrameworkOverview() {
   );
 }
 
-function BreadcrumbUpdateFramework() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Update</BreadcrumbPage>
-      </BreadcrumbItem>
-    </>
-  );
-}
-
 function BreadcrumbVendorList() {
   const { organizationId } = useParams();
   return (
@@ -228,28 +228,6 @@ function BreadcrumbPeopleList() {
   );
 }
 
-function BreadcrumbCreatePeople() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Create</BreadcrumbPage>
-      </BreadcrumbItem>
-    </>
-  );
-}
-
-function BreadcrumbUpdatePolicy() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Update</BreadcrumbPage>
-      </BreadcrumbItem>
-    </>
-  );
-}
-
 function BreadcrumbPeopleOverview() {
   const { organizationId, peopleId } = useParams();
   const data =
@@ -319,28 +297,6 @@ function BreadcrumbMitigationOverview() {
   );
 }
 
-function BreadcrumbCreateMitigation() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Create Mitigation</BreadcrumbPage>
-      </BreadcrumbItem>
-    </>
-  );
-}
-
-function BreadcrumbUpdateMitigation() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Update Mitigation</BreadcrumbPage>
-      </BreadcrumbItem>
-    </>
-  );
-}
-
 function BreadcrumbPolicyList() {
   const { organizationId } = useParams();
   return (
@@ -356,17 +312,6 @@ function BreadcrumbPolicyList() {
   );
 }
 
-function BreadcrumbCreatePolicy() {
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbPage>Create Policy</BreadcrumbPage>
-      </BreadcrumbItem>
-    </>
-  );
-}
-
 function BreadcrumbPolicyOverview() {
   const { organizationId, policyId } = useParams();
   const data =
@@ -501,6 +446,7 @@ export function BreadCrumb() {
         }
       >
         <Route path="mitigations" element={<BreadcrumbMitigationList />}>
+          <Route path="new" element={<New />} />
           <Route
             path=":mitigationId"
             element={
@@ -527,10 +473,6 @@ export function BreadCrumb() {
                 </Suspense>
               }
             />
-            <Route
-              path="mitigations/create"
-              element={<BreadcrumbCreateMitigation />}
-            />
             <Route
               path="mitigations/:mitigationId"
               element={
@@ -539,11 +481,11 @@ export function BreadCrumb() {
                 </Suspense>
               }
             >
-              <Route path="update" element={<BreadcrumbUpdateMitigation />} />
+              <Route path="update" element={<Edit />} />
             </Route>
-            <Route path="update" element={<BreadcrumbUpdateFramework />} />
+            <Route path="update" element={<Edit />} />
           </Route>
-          <Route path="create" element={<BreadcrumbCreateFramework />} />
+          <Route path="create" element={<New />} />
         </Route>
         <Route path="people" element={<BreadcrumbPeopleList />}>
           <Route
@@ -554,7 +496,7 @@ export function BreadCrumb() {
               </Suspense>
             }
           />
-          <Route path="create" element={<BreadcrumbCreatePeople />} />
+          <Route path="create" element={<New />} />
         </Route>
         <Route path="vendors" element={<BreadcrumbVendorList />}>
           <Route
@@ -575,9 +517,9 @@ export function BreadCrumb() {
               </Suspense>
             }
           >
-            <Route path="update" element={<BreadcrumbUpdatePolicy />} />
+            <Route path="update" element={<Edit />} />
           </Route>
-          <Route path="create" element={<BreadcrumbCreatePolicy />} />
+          <Route path="create" element={<New />} />
         </Route>
         <Route
           path="settings"
diff --git a/apps/console/src/pages/organizations/Routes.tsx b/apps/console/src/pages/organizations/Routes.tsx
index eae7f37c0..3afe197f7 100644
--- a/apps/console/src/pages/organizations/Routes.tsx
+++ b/apps/console/src/pages/organizations/Routes.tsx
@@ -21,6 +21,7 @@ import { PolicyPage } from "./policies/PolicyPage";
 import { UpdatePolicyPage } from "./policies/UpdatePolicyPage";
 import { VendorListPage } from "./vendors/VendorListPage";
 import { VendorPage } from "./vendors/VendorPage";
+import { MitigationNewPage } from "./mitigations/MitigationNewPage";
 
 export function OrganizationsRoutes() {
   return (
@@ -42,6 +43,7 @@ export function OrganizationsRoutes() {
           <Route path="*" element={<NotFoundPage />} />
         </Route>
         <Route path="mitigations" element={<MitigationListPage />} />
+        <Route path="mitigations/new" element={<MitigationNewPage />} />
         <Route path="mitigations/:mitigationId" element={<MitigationPage />} />
         <Route path="vendors/:vendorId" element={<VendorPage />} />
         <Route path="policies" element={<PolicyListPage />} />
diff --git a/apps/console/src/pages/organizations/mitigations/MitigationListView.tsx b/apps/console/src/pages/organizations/mitigations/MitigationListView.tsx
index 11f9946ab..d4320d8af 100644
--- a/apps/console/src/pages/organizations/mitigations/MitigationListView.tsx
+++ b/apps/console/src/pages/organizations/mitigations/MitigationListView.tsx
@@ -5,7 +5,7 @@ import {
   usePreloadedQuery,
   useQueryLoader,
 } from "react-relay";
-import { useParams, useNavigate } from "react-router";
+import { useParams, useNavigate, Link } from "react-router";
 import { Badge } from "@/components/ui/badge";
 import {
   ChevronRight,
@@ -19,6 +19,7 @@ import { PageTemplate } from "@/components/PageTemplate";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { MitigationListViewQuery as MitigationListViewQueryType } from "./__generated__/MitigationListViewQuery.graphql";
 import { MitigationListViewSkeleton } from "./MitigationListPage";
+import { Button } from "@/components/ui/button";
 
 const mitigationListViewQuery = graphql`
   query MitigationListViewQuery($organizationId: ID!, $first: Int) {
@@ -28,7 +29,7 @@ const mitigationListViewQuery = graphql`
         mitigations(
           first: $first
           orderBy: { direction: ASC, field: CREATED_AT }
-        ) {
+        ) @connection(key: "MitigationListView_mitigations") {
           edges {
             node {
               id
@@ -252,6 +253,13 @@ function MitigationListContent({
     <PageTemplate
       title="Mitigations"
       description="Mitigations are actions taken to reduce the risk. Add them to track their implementation status."
+      actions={
+        <Button asChild>
+          <Link to={`/organizations/${organizationId}/mitigations/new`}>
+            New Mitigation
+          </Link>
+        </Button>
+      }
     >
       {/* Global Progress Summary */}
       <div className="mb-8">
diff --git a/apps/console/src/pages/organizations/mitigations/MitigationNewPage.tsx b/apps/console/src/pages/organizations/mitigations/MitigationNewPage.tsx
new file mode 100644
index 000000000..75ed1045a
--- /dev/null
+++ b/apps/console/src/pages/organizations/mitigations/MitigationNewPage.tsx
@@ -0,0 +1,30 @@
+import { PageTemplateSkeleton } from "@/components/PageTemplate";
+import { Suspense } from "react";
+import { lazy } from "@probo/react-lazy";
+import { useLocation } from "react-router";
+import { ErrorBoundaryWithLocation } from "../ErrorBoundary";
+
+const MitigationNewView = lazy(() => import("./MitigationNewView"));
+
+export function MitigationNewViewSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="New Mitigation"
+      description="Add a new mitigation. You will be able to link it to control and risks"
+    >
+      <div className="max-w-2xl aspect-square bg-muted rounded-xl animate-pulse" />
+    </PageTemplateSkeleton>
+  );
+}
+
+export function MitigationNewPage() {
+  const location = useLocation();
+
+  return (
+    <Suspense key={location.pathname} fallback={<MitigationNewViewSkeleton />}>
+      <ErrorBoundaryWithLocation>
+        <MitigationNewView />
+      </ErrorBoundaryWithLocation>
+    </Suspense>
+  );
+}
diff --git a/apps/console/src/pages/organizations/mitigations/MitigationNewView.tsx b/apps/console/src/pages/organizations/mitigations/MitigationNewView.tsx
new file mode 100644
index 000000000..652539ea5
--- /dev/null
+++ b/apps/console/src/pages/organizations/mitigations/MitigationNewView.tsx
@@ -0,0 +1,206 @@
+import { useState } from "react";
+import { ConnectionHandler, graphql, useMutation } from "react-relay";
+import { useParams, useNavigate } from "react-router";
+import { PageTemplate } from "@/components/PageTemplate";
+import { useToast } from "@/hooks/use-toast";
+import { MitigationNewViewCreateMitigationMutation } from "./__generated__/MitigationNewViewCreateMitigationMutation.graphql";
+import { EditableField } from "@/components/EditableField";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const createMitigationMutation = graphql`
+  mutation MitigationNewViewCreateMitigationMutation(
+    $input: CreateMitigationInput!
+    $connections: [ID!]!
+  ) {
+    createMitigation(input: $input) {
+      mitigationEdge @prependEdge(connections: $connections) {
+        node {
+          id
+          name
+          description
+        }
+      }
+    }
+  }
+`;
+
+export default function MitigationNewView() {
+  const { organizationId } = useParams<{
+    organizationId: string;
+  }>();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    category: "",
+    importance: "EMPLOYEE" as "MANDATORY" | "PREFERRED" | "ADVANCED",
+  });
+
+  const [commit, isInFlight] =
+    useMutation<MitigationNewViewCreateMitigationMutation>(
+      createMitigationMutation
+    );
+
+  const handleFieldChange = (field: keyof typeof formData, value: unknown) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!formData.name || !formData.description) {
+      toast({
+        title: "Validation Error",
+        description: "Please fill in all required fields.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const connectionId = ConnectionHandler.getConnectionID(
+      organizationId!,
+      "MitigationListView_mitigations"
+    );
+
+    commit({
+      variables: {
+        input: {
+          organizationId: organizationId!,
+          name: formData.name,
+          description: formData.description,
+          category: formData.category,
+          importance: formData.importance,
+        },
+        connections: [connectionId],
+      },
+      onCompleted(data, errors) {
+        if (errors) {
+          toast({
+            title: "Error",
+            description: errors[0]?.message || "Failed to create mitigation",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        toast({
+          title: "Success",
+          description: "Mitigation created successfully",
+        });
+
+        navigate(
+          `/organizations/${organizationId}/mitigations/${data.createMitigation.mitigationEdge.node.id}`
+        );
+      },
+      onError(error) {
+        toast({
+          title: "Error",
+          description: error.message || "Failed to create framework",
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  return (
+    <PageTemplate
+      title="New Mitigation"
+      description="Add a new mitigation. You will be able to link it to control and risks"
+    >
+      <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 mitigation"
+          />
+
+          <EditableField
+            label="Category"
+            value={formData.category}
+            onChange={(value) => handleFieldChange("category", value)}
+            required
+          />
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Label className="text-sm">Importance</Label>
+              </div>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => handleFieldChange("importance", "MANDATORY")}
+                  className={cn(
+                    "rounded-full cursor-pointer px-4 py-1 text-sm transition-colors",
+                    formData.importance === "MANDATORY"
+                      ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
+                      : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                  )}
+                >
+                  Mandatory
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleFieldChange("importance", "PREFERRED")}
+                  className={cn(
+                    "rounded-full cursor-pointer px-4 py-1 text-sm transition-colors",
+                    formData.importance === "PREFERRED"
+                      ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
+                      : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                  )}
+                >
+                  Preferred
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleFieldChange("importance", "ADVANCED")}
+                  className={cn(
+                    "rounded-full cursor-pointer px-4 py-1 text-sm transition-colors",
+                    formData.importance === "ADVANCED"
+                      ? "bg-blue-100 text-blue-900 ring-2 ring-blue-600 ring-offset-2"
+                      : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                  )}
+                >
+                  Advanced
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                navigate(`/organizations/${organizationId}/mitigations`)
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isInFlight}>
+              {isInFlight ? "Creating..." : "Create Mitigation"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </PageTemplate>
+  );
+}
diff --git a/apps/console/src/pages/organizations/mitigations/__generated__/MitigationListViewQuery.graphql.ts b/apps/console/src/pages/organizations/mitigations/__generated__/MitigationListViewQuery.graphql.ts
index dd56acbef..e1106f8fc 100644
--- a/apps/console/src/pages/organizations/mitigations/__generated__/MitigationListViewQuery.graphql.ts
+++ b/apps/console/src/pages/organizations/mitigations/__generated__/MitigationListViewQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f60cb96210dc7db1b8617d7d4414a3d0>>
+ * @generated SignedSource<<c919ae742bdab52e5e68fb5c7fe92812>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -65,109 +65,135 @@ v3 = {
   "storageKey": null
 },
 v4 = {
-  "kind": "InlineFragment",
-  "selections": [
-    {
-      "alias": null,
-      "args": [
-        {
-          "kind": "Variable",
-          "name": "first",
-          "variableName": "first"
-        },
-        {
-          "kind": "Literal",
-          "name": "orderBy",
-          "value": {
-            "direction": "ASC",
-            "field": "CREATED_AT"
-          }
-        }
-      ],
-      "concreteType": "MitigationConnection",
-      "kind": "LinkedField",
-      "name": "mitigations",
-      "plural": false,
-      "selections": [
-        {
-          "alias": null,
-          "args": null,
-          "concreteType": "MitigationEdge",
-          "kind": "LinkedField",
-          "name": "edges",
-          "plural": true,
-          "selections": [
-            {
-              "alias": null,
-              "args": null,
-              "concreteType": "Mitigation",
-              "kind": "LinkedField",
-              "name": "node",
-              "plural": false,
-              "selections": [
-                (v3/*: any*/),
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "name",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "description",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "category",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "state",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "importance",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "createdAt",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "updatedAt",
-                  "storageKey": null
-                }
-              ],
-              "storageKey": null
-            }
-          ],
-          "storageKey": null
-        }
-      ],
-      "storageKey": null
-    }
-  ],
-  "type": "Organization",
-  "abstractKey": null
-};
+  "kind": "Literal",
+  "name": "orderBy",
+  "value": {
+    "direction": "ASC",
+    "field": "CREATED_AT"
+  }
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "__typename",
+  "storageKey": null
+},
+v6 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "MitigationEdge",
+    "kind": "LinkedField",
+    "name": "edges",
+    "plural": true,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Mitigation",
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "description",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "category",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "state",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "importance",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "createdAt",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "updatedAt",
+            "storageKey": null
+          },
+          (v5/*: any*/)
+        ],
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cursor",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  },
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "PageInfo",
+    "kind": "LinkedField",
+    "name": "pageInfo",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "endCursor",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "hasNextPage",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+],
+v7 = [
+  {
+    "kind": "Variable",
+    "name": "first",
+    "variableName": "first"
+  },
+  (v4/*: any*/)
+];
 return {
   "fragment": {
     "argumentDefinitions": [
@@ -187,7 +213,25 @@ return {
         "plural": false,
         "selections": [
           (v3/*: any*/),
-          (v4/*: any*/)
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": "mitigations",
+                "args": [
+                  (v4/*: any*/)
+                ],
+                "concreteType": "MitigationConnection",
+                "kind": "LinkedField",
+                "name": "__MitigationListView_mitigations_connection",
+                "plural": false,
+                "selections": (v6/*: any*/),
+                "storageKey": "__MitigationListView_mitigations_connection(orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
+              }
+            ],
+            "type": "Organization",
+            "abstractKey": null
+          }
         ],
         "storageKey": null
       }
@@ -212,31 +256,64 @@ return {
         "name": "node",
         "plural": false,
         "selections": [
-          {
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "__typename",
-            "storageKey": null
-          },
+          (v5/*: any*/),
           (v3/*: any*/),
-          (v4/*: any*/)
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": null,
+                "args": (v7/*: any*/),
+                "concreteType": "MitigationConnection",
+                "kind": "LinkedField",
+                "name": "mitigations",
+                "plural": false,
+                "selections": (v6/*: any*/),
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": (v7/*: any*/),
+                "filters": [
+                  "orderBy"
+                ],
+                "handle": "connection",
+                "key": "MitigationListView_mitigations",
+                "kind": "LinkedHandle",
+                "name": "mitigations"
+              }
+            ],
+            "type": "Organization",
+            "abstractKey": null
+          }
         ],
         "storageKey": null
       }
     ]
   },
   "params": {
-    "cacheID": "112f47aec28111c799333f3cd144d3c1",
+    "cacheID": "cb49e5e7740ec71ce0b8e1abbdbcf24d",
     "id": null,
-    "metadata": {},
+    "metadata": {
+      "connection": [
+        {
+          "count": "first",
+          "cursor": null,
+          "direction": "forward",
+          "path": [
+            "organization",
+            "mitigations"
+          ]
+        }
+      ]
+    },
     "name": "MitigationListViewQuery",
     "operationKind": "query",
-    "text": "query MitigationListViewQuery(\n  $organizationId: ID!\n  $first: Int\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    id\n    ... on Organization {\n      mitigations(first: $first, orderBy: {direction: ASC, field: CREATED_AT}) {\n        edges {\n          node {\n            id\n            name\n            description\n            category\n            state\n            importance\n            createdAt\n            updatedAt\n          }\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query MitigationListViewQuery(\n  $organizationId: ID!\n  $first: Int\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    id\n    ... on Organization {\n      mitigations(first: $first, orderBy: {direction: ASC, field: CREATED_AT}) {\n        edges {\n          node {\n            id\n            name\n            description\n            category\n            state\n            importance\n            createdAt\n            updatedAt\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "80e8c9cffc7d63bd3ce97ea90f696e82";
+(node as any).hash = "ee7fdf984d5cb376068ba53d0a56c59b";
 
 export default node;
diff --git a/apps/console/src/pages/organizations/mitigations/__generated__/MitigationNewViewCreateMitigationMutation.graphql.ts b/apps/console/src/pages/organizations/mitigations/__generated__/MitigationNewViewCreateMitigationMutation.graphql.ts
new file mode 100644
index 000000000..a62b755da
--- /dev/null
+++ b/apps/console/src/pages/organizations/mitigations/__generated__/MitigationNewViewCreateMitigationMutation.graphql.ts
@@ -0,0 +1,179 @@
+/**
+ * @generated SignedSource<<56ffdc565a3b834423a8a704d0fa68dc>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type MitigationImportance = "ADVANCED" | "MANDATORY" | "PREFERRED";
+export type CreateMitigationInput = {
+  category: string;
+  description: string;
+  importance: MitigationImportance;
+  name: string;
+  organizationId: string;
+};
+export type MitigationNewViewCreateMitigationMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: CreateMitigationInput;
+};
+export type MitigationNewViewCreateMitigationMutation$data = {
+  readonly createMitigation: {
+    readonly mitigationEdge: {
+      readonly node: {
+        readonly description: string;
+        readonly id: string;
+        readonly name: string;
+      };
+    };
+  };
+};
+export type MitigationNewViewCreateMitigationMutation = {
+  response: MitigationNewViewCreateMitigationMutation$data;
+  variables: MitigationNewViewCreateMitigationMutation$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": "MitigationEdge",
+  "kind": "LinkedField",
+  "name": "mitigationEdge",
+  "plural": false,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "Mitigation",
+      "kind": "LinkedField",
+      "name": "node",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "description",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "MitigationNewViewCreateMitigationMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateMitigationPayload",
+        "kind": "LinkedField",
+        "name": "createMitigation",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "MitigationNewViewCreateMitigationMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateMitigationPayload",
+        "kind": "LinkedField",
+        "name": "createMitigation",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "prependEdge",
+            "key": "",
+            "kind": "LinkedHandle",
+            "name": "mitigationEdge",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "3e7544674c48e16ec6698e04f8b5fb5e",
+    "id": null,
+    "metadata": {},
+    "name": "MitigationNewViewCreateMitigationMutation",
+    "operationKind": "mutation",
+    "text": "mutation MitigationNewViewCreateMitigationMutation(\n  $input: CreateMitigationInput!\n) {\n  createMitigation(input: $input) {\n    mitigationEdge {\n      node {\n        id\n        name\n        description\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "32c38d7a04244e041fc6023efc010d7f";
+
+export default node;