Add graphql mutation for patch framework in project

app/views/AnalyticalFramework/UserTable/AddUserModal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useState } from 'react';
-import { isDefined, isNotDefined } from '@togglecorp/fujs';
+import { isDefined } from '@togglecorp/fujs';
 import {
     ObjectSchema,
     PartialForm,
@@ -36,29 +36,29 @@ type AnalysisFrameworkRolesType = NonNullable<NonNullable<AnalysisFrameworkRoles
 const roleKeySelector = (d: AnalysisFrameworkRolesType) => d.id;
 const roleLabelSelector = (d: AnalysisFrameworkRolesType) => d.title;
 
-type PartialAnalysisMemembershipForm = PartialForm<
-    BulkAnalysisFrameworkMembershipInputType & { frameworkId: string}
->
+type PartialAnalysisMembershipForm = PartialForm<BulkAnalysisFrameworkMembershipInputType>
 
-type FormSchema = ObjectSchema<PartialAnalysisMemembershipForm>;
+type FormSchema = ObjectSchema<PartialAnalysisMembershipForm>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>
 
 const schema: FormSchema = {
     fields: (value): FormSchemaFields => {
-        if (isDefined(value?.frameworkId)) {
+        if (isDefined(value?.id)) {
             return ({
-                member: [],
+                id: [requiredCondition],
+                member: [requiredCondition],
                 role: [requiredCondition],
             });
         }
         return ({
+            id: [],
             member: [requiredCondition],
             role: [requiredCondition],
         });
     },
 };
 
-const defaultFormValue: PartialAnalysisMemembershipForm = {};
+const defaultFormValue: PartialAnalysisMembershipForm = {};
 
 const ANALYSIS_MEMBERSHIP_ADD_EDIT = gql`
     mutation AnalysisMembershipAddEdit(
@@ -107,17 +107,16 @@ function AddUserModal(props: Props) {
         isPrivateFramework,
     } = props;
 
-    const initialFormValue: PartialAnalysisMemembershipForm = useMemo(() => {
+    const initialFormValue: PartialAnalysisMembershipForm = useMemo(() => {
         if (!userValue) {
             return defaultFormValue;
         }
         return ({
-            frameworkId,
             id: userValue.id,
             role: userValue.role.id,
             member: userValue.member.id,
         });
-    }, [userValue, frameworkId]);
+    }, [userValue]);
 
     const alert = useAlert();
 
@@ -208,15 +207,16 @@ function AddUserModal(props: Props) {
                 validate,
                 setError,
                 (val) => {
-                    if (isNotDefined(val.member)) {
-                        addEditFrameworkMembership({ variables: undefined });
-                    } else if (userValue?.id) {
+                    const finalVal = val as BulkAnalysisFrameworkMembershipInputType;
+
+                    // NOTE: In case the membership already exists
+                    if (userValue?.id) {
                         addEditFrameworkMembership({
                             variables: {
                                 frameworkId,
                                 items: [{
-                                    member: val.member,
-                                    role: val.role,
+                                    member: finalVal.member,
+                                    role: finalVal.role,
                                     id: userValue.id,
                                 }],
                             },
@@ -226,8 +226,8 @@ function AddUserModal(props: Props) {
                             variables: {
                                 frameworkId,
                                 items: [{
-                                    member: val.member,
-                                    role: val.role,
+                                    member: finalVal.member,
+                                    role: finalVal.role,
                                 }],
                             },
                         });

app/views/AnalyticalFramework/UserTable/index.tsx

@@ -217,7 +217,7 @@ function UserTable(props: Props) {
                     itemKey: userId,
                     onEditClick: handleUserEditClick,
                     onDeleteClick: handleUserDeleteClick,
-                    disabled: data.id === activeUserId,
+                    disabled: data.member.id === activeUserId,
                     editButtonTitle: _ts('analyticalFramework', 'editUserLabel'),
                     deleteButtonTitle: _ts('analyticalFramework', 'deleteUserLabel'),
                     deleteConfirmationMessage: _ts('analyticalFramework', 'removeUserConfirmation'),

app/views/ProjectEdit/Framework/FrameworkDetail/index.tsx

@@ -5,7 +5,7 @@ import {
     isDefined,
 } from '@togglecorp/fujs';
 import { generatePath } from 'react-router-dom';
-import { gql, useQuery } from '@apollo/client';
+import { gql, useMutation, useQuery } from '@apollo/client';
 import {
     IoCopyOutline,
     IoCheckmark,
@@ -35,6 +35,7 @@ import {
     TextOutput,
     RawButton,
     Button,
+    useAlert,
 } from '@the-deep/deep-ui';
 import { removeNull } from '@togglecorp/toggle-form';
 
@@ -44,14 +45,14 @@ import {
     DeepReplace,
 } from '#utils/types';
 import FrameworkImageButton from '#components/framework/FrameworkImageButton';
-import { useLazyRequest } from '#base/utils/restRequest';
 import { ProjectContext } from '#base/context/ProjectContext';
 import { useModalState } from '#hooks/stateManagement';
 import routes from '#base/configs/routes';
 import Section from '#components/entry/Section';
 import _ts from '#ts';
-import { ProjectDetails } from '#types';
 import {
+    AnalyticalFrameworkPatchMutation,
+    AnalyticalFrameworkPatchMutationVariables,
     FrameworkDetailsQuery,
     FrameworkDetailsQueryVariables,
     WidgetType as WidgetRaw,
@@ -66,6 +67,25 @@ function noop() {}
 
 const emptyObject = {};
 
+const ANALYTICAL_FRAMEWORK_PATCH = gql`
+    mutation AnalyticalFrameworkPatch(
+        $projectId: ID!,
+        $frameworkId: ID,
+    ) {
+        project(id: $projectId) {
+            projectUpdate(data: {analysisFramework: $frameworkId}) {
+                ok
+                errors
+                result {
+                    analysisFramework {
+                        id
+                    }
+                }
+            }
+        }
+    }
+`;
+
 const FRAMEWORK_DETAILS = gql`
     ${FRAMEWORK_FRAGMENT}
     query FrameworkDetails(
@@ -155,6 +175,7 @@ function FrameworkDetail(props: Props) {
     const { setProject } = useContext(ProjectContext);
 
     const [activeTab, setActiveTab] = useState<'primary' | 'secondary' | undefined>('primary');
+    const alert = useAlert();
     const [selectedSection, setSelectedSection] = useState<string | undefined>();
 
     const variables = useMemo(
@@ -236,31 +257,50 @@ function FrameworkDetail(props: Props) {
         frameworkDetailsResponse?.projects,
     ]);
 
-    const {
-        pending: projectPatchPending,
-        trigger: projectPatch,
-    } = useLazyRequest<ProjectDetails>({
-        url: `server://projects/${projectId}/`,
-        method: 'PATCH',
-        body: ({
-            analysisFramework: frameworkId,
-        }),
-        onSuccess: (response) => {
-            setProject((oldProjectDetails) => {
-                const { analysisFramework } = response;
-                if (!oldProjectDetails || isNotDefined(analysisFramework)) {
-                    return oldProjectDetails;
+    const [
+        projectPatch,
+        {
+            loading: projectPatchPending,
+        },
+    ] = useMutation<AnalyticalFrameworkPatchMutation, AnalyticalFrameworkPatchMutationVariables>(
+        ANALYTICAL_FRAMEWORK_PATCH,
+        {
+            onCompleted: (response) => {
+                if (!response || !response.project?.projectUpdate) {
+                    return;
                 }
-                return ({
-                    ...oldProjectDetails,
-                    analysisFramework: {
-                        id: String(analysisFramework),
-                    },
-                });
-            });
+                const {
+                    ok,
+                    errors,
+                    result,
+                } = response.project.projectUpdate;
+
+                const analysisFrameworkId = result?.analysisFramework?.id;
+
+                if (errors) {
+                    alert.show(
+                        'Failed to create assessment registry.',
+                        { variant: 'error' },
+                    );
+                } else if (ok) {
+                    if (!analysisFrameworkId) {
+                        return;
+                    }
+                    setProject((oldProjectDetails) => {
+                        if (!oldProjectDetails) {
+                            return oldProjectDetails;
+                        }
+                        return ({
+                            ...oldProjectDetails,
+                            analysisFramework: {
+                                id: analysisFrameworkId,
+                            },
+                        });
+                    });
+                }
+            },
         },
-        failureMessage: _ts('projectEdit', 'projectDetailsLabel'),
-    });
+    );
 
     const itemRendererParams = useCallback((_: string, data: { title: string; id: string }) => ({
         className: styles.projectTitle,
@@ -275,8 +315,13 @@ function FrameworkDetail(props: Props) {
     ] = useModalState(false);
 
     const handleUseFrameworkClick = useCallback(() => {
-        projectPatch(null);
-    }, [projectPatch]);
+        projectPatch({
+            variables: {
+                projectId,
+                frameworkId,
+            },
+        });
+    }, [projectPatch, projectId, frameworkId]);
 
     const handleNewFrameworkAddSuccess = useCallback((newFrameworkId: string) => {
         onFrameworkCreate(newFrameworkId);