Add mitigation edit page

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx

@@ -12,7 +12,6 @@ import { graphql, useLazyLoadQuery } from "react-relay";
 import { NavLink, Outlet, Route, Routes, To, useParams } from "react-router";
 
 import { OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbFrameworkOverviewQuery.graphql";
-import { OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery.graphql";
 import { OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbPeopleOverviewQuery.graphql";
 import { OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbPolicyOverviewQuery.graphql";
 import { OrganizationBreadcrumbBreadcrumbVendorOverviewQuery } from "./__generated__/OrganizationBreadcrumbBreadcrumbVendorOverviewQuery.graphql";
@@ -264,40 +263,6 @@ function BreadcrumbPeopleOverview() {
   );
 }
 
-function BreadcrumbMitigationOverview() {
-  const { organizationId, frameworkId, mitigationId } = useParams();
-  const data =
-    useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery>(
-      graphql`
-        query OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery(
-          $mitigationId: ID!
-        ) {
-          mitigation: node(id: $mitigationId) {
-            id
-            ... on Mitigation {
-              name
-            }
-          }
-        }
-      `,
-      { mitigationId: mitigationId! }
-    );
-
-  return (
-    <>
-      <BreadcrumbSeparator />
-      <BreadcrumbItem>
-        <BreadcrumbNavLink
-          to={`/organizations/${organizationId}/frameworks/${frameworkId}/mitigations/${mitigationId}`}
-        >
-          {data.mitigation?.name}
-        </BreadcrumbNavLink>
-      </BreadcrumbItem>
-      <Outlet />
-    </>
-  );
-}
-
 function BreadcrumbPolicyList() {
   const { organizationId } = useParams();
   return (
@@ -402,6 +367,7 @@ function BreadcrumbMitigationView() {
           {data.mitigation.name}
         </BreadcrumbNavLink>
       </BreadcrumbItem>
+      <Outlet />
     </>
   );
 }
@@ -472,7 +438,9 @@ export function BreadCrumb() {
                 <BreadcrumbMitigationView />
               </Suspense>
             }
-          />
+          >
+            <Route path="edit" element={<Edit />} />
+          </Route>
         </Route>
         <Route path="risks" element={<BreadcrumbRiskList />}>
           <Route path="new" element={<New />} />
@@ -494,16 +462,6 @@ export function BreadCrumb() {
                 </Suspense>
               }
             />
-            <Route
-              path="mitigations/:mitigationId"
-              element={
-                <Suspense>
-                  <BreadcrumbMitigationOverview />
-                </Suspense>
-              }
-            >
-              <Route path="update" element={<Edit />} />
-            </Route>
             <Route path="update" element={<Edit />} />
           </Route>
           <Route path="create" element={<New />} />

apps/console/src/pages/organizations/Routes.tsx

@@ -10,8 +10,10 @@ import { FrameworkListPage } from "./frameworks/FrameworkListPage";
 import { FrameworkPage } from "./frameworks/FrameworkPage";
 import { UpdateFrameworkPage } from "./frameworks/UpdateFrameworkPage";
 import { ControlPage } from "./frameworks/controls/ControlPage";
-import { MitigationPage } from "./mitigations/MitigationPage";
+import { EditMitigationPage } from "./mitigations/EditMitigationPage";
 import { MitigationListPage } from "./mitigations/MitigationListPage";
+import { MitigationNewPage } from "./mitigations/MitigationNewPage";
+import { MitigationPage } from "./mitigations/MitigationPage";
 import { CreatePeoplePage } from "./people/CreatePeoplePage";
 import { PeopleListPage } from "./people/PeopleListPage";
 import { PeoplePage } from "./people/PeoplePage";
@@ -19,12 +21,11 @@ import { CreatePolicyPage } from "./policies/CreatePolicyPage";
 import { PolicyListPage } from "./policies/PolicyListPage";
 import { PolicyPage } from "./policies/PolicyPage";
 import { UpdatePolicyPage } from "./policies/UpdatePolicyPage";
+import { NewRiskPage } from "./risks/NewRiskPage";
+import { RiskListPage } from "./risks/RiskListPage";
+import ShowRiskView from "./risks/ShowRiskView";
 import { VendorListPage } from "./vendors/VendorListPage";
 import { VendorPage } from "./vendors/VendorPage";
-import { MitigationNewPage } from "./mitigations/MitigationNewPage";
-import { RiskListPage } from "./risks/RiskListPage";
-import { NewRiskPage } from "./risks/NewRiskPage";
-import ShowRiskView from "./risks/ShowRiskView";
 
 export function OrganizationsRoutes() {
   return (
@@ -48,6 +49,10 @@ export function OrganizationsRoutes() {
         <Route path="mitigations" element={<MitigationListPage />} />
         <Route path="mitigations/new" element={<MitigationNewPage />} />
         <Route path="mitigations/:mitigationId" element={<MitigationPage />} />
+        <Route
+          path="mitigations/:mitigationId/edit"
+          element={<EditMitigationPage />}
+        />
         <Route path="vendors/:vendorId" element={<VendorPage />} />
         <Route path="policies" element={<PolicyListPage />} />
         <Route path="policies/create" element={<CreatePolicyPage />} />

apps/console/src/pages/organizations/__generated__/OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery.graphql.ts

@@ -1,127 +0,0 @@
-/**
- * @generated SignedSource<<5ba3e58b066b4fb849ab455b287dc1ff>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-import { ConcreteRequest } from 'relay-runtime';
-export type OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$variables = {
-  mitigationId: string;
-};
-export type OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$data = {
-  readonly mitigation: {
-    readonly id: string;
-    readonly name?: string;
-  };
-};
-export type OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery = {
-  response: OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$data;
-  variables: OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery$variables;
-};
-
-const node: ConcreteRequest = (function(){
-var v0 = [
-  {
-    "defaultValue": null,
-    "kind": "LocalArgument",
-    "name": "mitigationId"
-  }
-],
-v1 = [
-  {
-    "kind": "Variable",
-    "name": "id",
-    "variableName": "mitigationId"
-  }
-],
-v2 = {
-  "alias": null,
-  "args": null,
-  "kind": "ScalarField",
-  "name": "id",
-  "storageKey": null
-},
-v3 = {
-  "kind": "InlineFragment",
-  "selections": [
-    {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "name",
-      "storageKey": null
-    }
-  ],
-  "type": "Mitigation",
-  "abstractKey": null
-};
-return {
-  "fragment": {
-    "argumentDefinitions": (v0/*: any*/),
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery",
-    "selections": [
-      {
-        "alias": "mitigation",
-        "args": (v1/*: any*/),
-        "concreteType": null,
-        "kind": "LinkedField",
-        "name": "node",
-        "plural": false,
-        "selections": [
-          (v2/*: any*/),
-          (v3/*: any*/)
-        ],
-        "storageKey": null
-      }
-    ],
-    "type": "Query",
-    "abstractKey": null
-  },
-  "kind": "Request",
-  "operation": {
-    "argumentDefinitions": (v0/*: any*/),
-    "kind": "Operation",
-    "name": "OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery",
-    "selections": [
-      {
-        "alias": "mitigation",
-        "args": (v1/*: any*/),
-        "concreteType": null,
-        "kind": "LinkedField",
-        "name": "node",
-        "plural": false,
-        "selections": [
-          {
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "__typename",
-            "storageKey": null
-          },
-          (v2/*: any*/),
-          (v3/*: any*/)
-        ],
-        "storageKey": null
-      }
-    ]
-  },
-  "params": {
-    "cacheID": "1f6462cdfacf6a2ce5bf51135d26daf3",
-    "id": null,
-    "metadata": {},
-    "name": "OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery",
-    "operationKind": "query",
-    "text": "query OrganizationBreadcrumbBreadcrumbMitigationOverviewQuery(\n  $mitigationId: ID!\n) {\n  mitigation: node(id: $mitigationId) {\n    __typename\n    id\n    ... on Mitigation {\n      name\n    }\n  }\n}\n"
-  }
-};
-})();
-
-(node as any).hash = "83c2699bc436040d610f5113cc267e7f";
-
-export default node;

apps/console/src/pages/organizations/mitigations/EditMitigationPage.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 EditMitigationView = lazy(() => import("./EditMitigationView"));
+
+export function EditMitigationViewSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="Edit Mitigation"
+      description="Edit a 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 EditMitigationPage() {
+  const location = useLocation();
+
+  return (
+    <Suspense key={location.pathname} fallback={<EditMitigationViewSkeleton />}>
+      <ErrorBoundaryWithLocation>
+        <EditMitigationView />
+      </ErrorBoundaryWithLocation>
+    </Suspense>
+  );
+}

apps/console/src/pages/organizations/mitigations/EditMitigationView.tsx

@@ -0,0 +1,249 @@
+import { Suspense, useEffect, useState } from "react";
+import {
+  graphql,
+  PreloadedQuery,
+  useMutation,
+  usePreloadedQuery,
+  useQueryLoader,
+} from "react-relay";
+import { useParams, useNavigate } from "react-router";
+import { PageTemplate } from "@/components/PageTemplate";
+import { useToast } from "@/hooks/use-toast";
+import { EditMitigationViewUpdateMitigationMutation } from "./__generated__/EditMitigationViewUpdateMitigationMutation.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";
+import { EditMitigationViewSkeleton } from "./EditMitigationPage";
+import { EditMitigationViewQuery } from "./__generated__/EditMitigationViewQuery.graphql";
+
+const editMitigationQuery = graphql`
+  query EditMitigationViewQuery($mitigationId: ID!) {
+    node(id: $mitigationId) {
+      ... on Mitigation {
+        id
+        name
+        description
+        category
+        importance
+      }
+    }
+  }
+`;
+
+const updateMitigationMutation = graphql`
+  mutation EditMitigationViewUpdateMitigationMutation(
+    $input: UpdateMitigationInput!
+  ) {
+    updateMitigation(input: $input) {
+      mitigation {
+        id
+        name
+        description
+      }
+    }
+  }
+`;
+
+function EditMitigationViewContent({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<EditMitigationViewQuery>;
+}) {
+  const { organizationId } = useParams<{
+    organizationId: string;
+  }>();
+  const { mitigationId } = useParams();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { node: mitigation } = usePreloadedQuery(editMitigationQuery, queryRef);
+  const [formData, setFormData] = useState({
+    name: mitigation.name ?? "",
+    description: mitigation.description ?? "",
+    category: mitigation.category ?? "",
+    importance: mitigation.importance,
+  });
+
+  const [commit, isInFlight] =
+    useMutation<EditMitigationViewUpdateMitigationMutation>(
+      updateMitigationMutation
+    );
+
+  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;
+    }
+
+    commit({
+      variables: {
+        input: {
+          id: mitigationId!,
+          name: formData.name,
+          description: formData.description,
+          category: formData.category,
+          importance: formData.importance,
+        },
+      },
+      onCompleted(data, errors) {
+        if (errors) {
+          toast({
+            title: "Error",
+            description: errors[0]?.message || "Failed to update mitigation",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        toast({
+          title: "Success",
+          description: "Mitigation updated successfully",
+        });
+
+        navigate(
+          `/organizations/${organizationId}/mitigations/${mitigationId}`
+        );
+      },
+      onError(error) {
+        toast({
+          title: "Error",
+          description: error.message || "Failed to update framework",
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  return (
+    <PageTemplate
+      title="Edit Mitigation"
+      description="Edit a 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/${mitigationId}`
+                )
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isInFlight}>
+              {isInFlight ? "Updating..." : "Update Mitigation"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </PageTemplate>
+  );
+}
+
+export default function EditMitigationView() {
+  const { mitigationId } = useParams();
+  const [queryRef, loadQuery] =
+    useQueryLoader<EditMitigationViewQuery>(editMitigationQuery);
+
+  useEffect(() => {
+    if (mitigationId) {
+      loadQuery({ mitigationId });
+    }
+  }, [mitigationId, loadQuery]);
+
+  if (!queryRef) {
+    return <EditMitigationViewSkeleton />;
+  }
+
+  return (
+    <Suspense fallback={<EditMitigationViewSkeleton />}>
+      <EditMitigationViewContent queryRef={queryRef} />
+    </Suspense>
+  );
+}

apps/console/src/pages/organizations/mitigations/MitigationNewView.tsx

@@ -37,7 +37,7 @@ export default function MitigationNewView() {
     name: "",
     description: "",
     category: "",
-    importance: "EMPLOYEE" as "MANDATORY" | "PREFERRED" | "ADVANCED",
+    importance: "MADATORY" as "MANDATORY" | "PREFERRED" | "ADVANCED",
   });
 
   const [commit, isInFlight] =
@@ -102,7 +102,7 @@ export default function MitigationNewView() {
       onError(error) {
         toast({
           title: "Error",
-          description: error.message || "Failed to create framework",
+          description: error.message || "Failed to create mitigation",
           variant: "destructive",
         });
       },

apps/console/src/pages/organizations/mitigations/MitigationView.tsx

@@ -18,12 +18,10 @@ import {
 } from "react-relay";
 import {
   AlertTriangle,
-  ArrowRight,
   Check,
   CheckCircle2,
   ChevronDown,
   ChevronUp,
-  Clock,
   Download,
   Eye,
   File as FileGeneric,
@@ -32,8 +30,6 @@ import {
   Image,
   Link2,
   Loader2,
-  LucideIcon,
-  MoreHorizontal,
   Plus,
   Search,
   ShieldCheck,
@@ -44,14 +40,7 @@ import {
   UserPlus,
   X,
 } from "lucide-react";
-import {
+import { Card, CardContent } from "@/components/ui/card";
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -99,10 +88,7 @@ import { MitigationViewAssignTaskMutation as MitigationViewAssignTaskMutationTyp
 import { MitigationViewUnassignTaskMutation as MitigationViewUnassignTaskMutationType } from "./__generated__/MitigationViewUnassignTaskMutation.graphql";
 import { MitigationViewUpdateMitigationStateMutation as MitigationViewUpdateMitigationStateMutationType } from "./__generated__/MitigationViewUpdateMitigationStateMutation.graphql";
 import { MitigationViewQuery as MitigationViewQueryType } from "./__generated__/MitigationViewQuery.graphql";
-import {
+import { MitigationViewOrganizationQuery$data } from "./__generated__/MitigationViewOrganizationQuery.graphql";
-  MitigationViewOrganizationQuery,
-  MitigationViewOrganizationQuery$data,
-} from "./__generated__/MitigationViewOrganizationQuery.graphql";
 import {
   MitigationViewFrameworksQuery,
   MitigationViewFrameworksQuery$data,
@@ -111,14 +97,8 @@ import {
   MitigationViewLinkedControlsQuery,
   MitigationViewLinkedControlsQuery$data,
 } from "./__generated__/MitigationViewLinkedControlsQuery.graphql";
-import {
-  MitigationViewRisksQuery,
-  MitigationViewRisksQuery$data,
-} from "./__generated__/MitigationViewRisksQuery.graphql";
 import { MitigationViewCreateEvidenceMutation as MitigationViewCreateEvidenceMutationType } from "./__generated__/MitigationViewCreateEvidenceMutation.graphql";
-import { MitigationViewGetEvidenceFileUrlQuery as MitigationViewGetEvidenceFileUrlQueryType } from "./__generated__/MitigationViewGetEvidenceFileUrlQuery.graphql";
 import { MitigationViewFulfillEvidenceMutation as MitigationViewFulfillEvidenceMutationType } from "./__generated__/MitigationViewFulfillEvidenceMutation.graphql";
-import { MitigationViewUploadEvidenceMutation as MitigationViewUploadEvidenceMutationType } from "./__generated__/MitigationViewUploadEvidenceMutation.graphql";
 
 // Function to format ISO8601 duration to human-readable format
 const formatDuration = (isoDuration: string): string => {
@@ -539,7 +519,7 @@ function MitigationViewContent({
     queryRef
   );
   const { toast } = useToast();
-  const { organizationId, frameworkId, mitigationId } = useParams();
+  const { organizationId, mitigationId } = useParams();
   const navigate = useNavigate();
   const environment = useRelayEnvironment();
 
@@ -1004,7 +984,7 @@ function MitigationViewContent({
 
   const handleEditMitigation = () => {
     navigate(
-      `/organizations/${organizationId}/frameworks/${frameworkId}/mitigations/${mitigationId}/update`
+      `/organizations/${organizationId}/mitigations/${mitigationId}/edit`
     );
   };
 
@@ -3648,8 +3628,7 @@ function MitigationViewContent({
                       const originalOnChange =
                         hiddenFileInputRef.current.onchange;
                       hiddenFileInputRef.current.onchange = (e) => {
-                        hiddenFileInputRef.current!.onchange =
+                        hiddenFileInputRef.current!.onchange = originalOnChange;
-                          originalOnChange as any;
                         handleFulfillEvidenceWithFile({
                           target: {
                             files: (e.target as HTMLInputElement)?.files,

apps/console/src/pages/organizations/mitigations/__generated__/EditMitigationViewQuery.graphql.ts

@@ -0,0 +1,165 @@
+/**
+ * @generated SignedSource<<851436cc3003fed7f1e384d153eff0b7>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type MitigationImportance = "ADVANCED" | "MANDATORY" | "PREFERRED";
+export type EditMitigationViewQuery$variables = {
+  mitigationId: string;
+};
+export type EditMitigationViewQuery$data = {
+  readonly node: {
+    readonly category?: string;
+    readonly description?: string;
+    readonly id?: string;
+    readonly importance?: MitigationImportance;
+    readonly name?: string;
+  };
+};
+export type EditMitigationViewQuery = {
+  response: EditMitigationViewQuery$data;
+  variables: EditMitigationViewQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "mitigationId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "mitigationId"
+  }
+],
+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": "importance",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "EditMitigationViewQuery",
+    "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*/)
+            ],
+            "type": "Mitigation",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "EditMitigationViewQuery",
+    "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*/)
+            ],
+            "type": "Mitigation",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "df8ca216b15dda843c6da7f82bc4fb37",
+    "id": null,
+    "metadata": {},
+    "name": "EditMitigationViewQuery",
+    "operationKind": "query",
+    "text": "query EditMitigationViewQuery(\n  $mitigationId: ID!\n) {\n  node(id: $mitigationId) {\n    __typename\n    ... on Mitigation {\n      id\n      name\n      description\n      category\n      importance\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "bb3db4a2e4bcdcd77f8847d302f74340";
+
+export default node;

apps/console/src/pages/organizations/mitigations/__generated__/EditMitigationViewUpdateMitigationMutation.graphql.ts

@@ -0,0 +1,128 @@
+/**
+ * @generated SignedSource<<ef4c93d248af00040b679e1bdb225a64>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type MitigationImportance = "ADVANCED" | "MANDATORY" | "PREFERRED";
+export type MitigationState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
+export type UpdateMitigationInput = {
+  category?: string | null | undefined;
+  description?: string | null | undefined;
+  id: string;
+  importance?: MitigationImportance | null | undefined;
+  name?: string | null | undefined;
+  state?: MitigationState | null | undefined;
+};
+export type EditMitigationViewUpdateMitigationMutation$variables = {
+  input: UpdateMitigationInput;
+};
+export type EditMitigationViewUpdateMitigationMutation$data = {
+  readonly updateMitigation: {
+    readonly mitigation: {
+      readonly description: string;
+      readonly id: string;
+      readonly name: string;
+    };
+  };
+};
+export type EditMitigationViewUpdateMitigationMutation = {
+  response: EditMitigationViewUpdateMitigationMutation$data;
+  variables: EditMitigationViewUpdateMitigationMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UpdateMitigationPayload",
+    "kind": "LinkedField",
+    "name": "updateMitigation",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Mitigation",
+        "kind": "LinkedField",
+        "name": "mitigation",
+        "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*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "EditMitigationViewUpdateMitigationMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "EditMitigationViewUpdateMitigationMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "b28b509d2111119e074541df44720f4f",
+    "id": null,
+    "metadata": {},
+    "name": "EditMitigationViewUpdateMitigationMutation",
+    "operationKind": "mutation",
+    "text": "mutation EditMitigationViewUpdateMitigationMutation(\n  $input: UpdateMitigationInput!\n) {\n  updateMitigation(input: $input) {\n    mitigation {\n      id\n      name\n      description\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "30ac146016e936fd8912b480286c93de";
+
+export default node;