Add query for edit analysis dashboard

the-deep · Jul 18, 2024 · a160364 · a160364
1 parent 34d6c2c
commit a160364
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 173 deletions.
diff --git a/app/types/analysisModule.tsx b/app/types/analysisModule.tsx
@@ -48,8 +48,6 @@ export interface PillarSummary {
       totalCount?: number | null | undefined;
     } | null | undefined;
     analyticalStatementCount: number;
-    analyticalStatements: any[];
-    assigneeDetails: any;
 }
 
 export interface AnalysisElement {

diff --git a/app/types/user.tsx b/app/types/user.tsx
@@ -16,7 +16,7 @@ export interface User {
 }
 
 export interface UserMini {
-    id: number;
+    id: string;
     email: string;
     displayName: string;
 }
diff --git a/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx b/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx
@@ -7,8 +7,6 @@ import {
     Kraken,
 } from '@the-deep/deep-ui';
 
-import _ts from '#ts';
-
 import { AnalysisSummaryQuery } from '#generated/types';
 
 import AnalysisPillar, { Props as PillarComponentProps } from '../AnalysisPillar';
@@ -59,6 +57,7 @@ function AnalysisDetails(props: Props) {
             title: data.title,
             totalEntries,
         }), [
+            onAnalysisPillarDelete,
             totalEntries,
             createdAt,
             analysisId,

diff --git a/app/views/AnalysisDashboard/AnalysisEditModal/PillarAnalysisRow/index.tsx b/app/views/AnalysisDashboard/AnalysisEditModal/PillarAnalysisRow/index.tsx
@@ -18,25 +18,23 @@ import {
 } from '@togglecorp/toggle-form';
 
 import _ts from '#ts';
-import { ProjectUserMembersQuery } from '#generated/types';
+import { UserMini } from '#types';
 
 import { MatrixPillar } from '../utils';
 
 import styles from './styles.css';
 
-type UserMemberType = NonNullable<NonNullable<NonNullable<NonNullable<ProjectUserMembersQuery['project']>['userMembers']>['results']>>[number];
-
 export interface PillarAnalysisFields {
     title: string;
-    emailDisplay: UserMemberType;
+    assignee: string;
     filters: MatrixPillar['uniqueId'][];
 }
 
 const idSelector = (d: MatrixPillar) => d.uniqueId;
 const labelSelector = (d: MatrixPillar) => d.altTitle ?? d.title;
 
-const userKeySelector = (u: UserMemberType) => u.id;
-const userLabelSelector = (u: UserMemberType) => u.member.emailDisplay;
+const userKeySelector = (u: UserMini) => u.id;
+const userLabelSelector = (u: UserMini) => u.displayName;
 
 type Value = PartialForm<PillarAnalysisFields>
 const defaultValue: Value = {
@@ -50,7 +48,7 @@ export interface Props {
     matrixPillars?: MatrixPillar[];
     onChange: (value: SetValueArg<Value>, index: number) => void;
     onRemove: (index: number) => void;
-    usersList: UserMemberType[];
+    usersList: UserMini[];
     value: Value;
     pending: boolean;
 }
@@ -70,7 +68,6 @@ function PillarAnalysisRow(props: Props) {
 
     const error = getErrorObject(riskyError);
 
-    console.info('value', value);
     const onFieldChange = useFormObject(index, onChange, defaultValue);
 
     return (
@@ -87,15 +84,15 @@ function PillarAnalysisRow(props: Props) {
             />
             <SelectInput
                 className={styles.input}
-                error={error?.emailDisplay}
+                error={error?.assignee}
                 keySelector={userKeySelector}
                 label={_ts('analysis.editModal', 'pillarAnalysisAssigneeLabel')}
                 labelSelector={userLabelSelector}
-                name="emailDisplay"
+                name="assignee"
                 onChange={onFieldChange}
                 options={usersList}
                 placeholder={_ts('analysis.editModal', 'pillarAnalysisAssigneePlaceholder')}
-                value={value.emailDisplay}
+                value={value.assignee}
                 disabled={pending}
             />
             <MultiSelectInput

diff --git a/app/views/AnalysisDashboard/AnalysisEditModal/index.tsx b/app/views/AnalysisDashboard/AnalysisEditModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import {
     _cs,
     randomString,
@@ -21,7 +21,6 @@ import {
 } from '@togglecorp/toggle-form';
 import {
     useAlert,
-    PendingMessage,
     Button,
     Modal,
     TextInput,
@@ -32,6 +31,7 @@ import {
 import { IoAdd } from 'react-icons/io5';
 import { gql, useQuery } from '@apollo/client';
 
+import { ProjectContext } from '#base/context/ProjectContext';
 import { useRequest, useLazyRequest } from '#base/utils/restRequest';
 import { flatten } from '#utils/common';
 import NonFieldError from '#components/NonFieldError';
@@ -41,8 +41,6 @@ import {
     UserMini,
 } from '#types';
 import {
-    ProjectUserMembersQuery,
-    ProjectUserMembersQueryVariables,
     FrameworkDetailsForAnalysisQuery,
     FrameworkDetailsForAnalysisQueryVariables,
 } from '#generated/types';
@@ -58,22 +56,6 @@ import {
 import PillarAnalysisRow, { PillarAnalysisFields, Props as PillarAnalysisProps } from './PillarAnalysisRow';
 import styles from './styles.css';
 
-const PROJECT_USER_MEMBERS = gql`
-    query ProjectUserMembers($projectId: ID!) {
-         project(id: $projectId) {
-             userMembers {
-                 results {
-                     member {
-                         displayName
-                         emailDisplay
-                         id
-                     }
-                 }
-             }
-         }
-    }
-`;
-
 const FRAMEWORK_DETAILS_FOR_ANALYSIS = gql`
     ${FRAMEWORK_FRAGMENT}
     query FrameworkDetailsForAnalysis($projectId: ID!) {
@@ -88,13 +70,11 @@ const FRAMEWORK_DETAILS_FOR_ANALYSIS = gql`
 `;
 
 type PartialForm<T> = RawPartialForm<T, 'key'>;
-type AnalysisPillar = Partial<PillarAnalysisFields> & { key: string; id?: number };
-
-type UserMemberType = NonNullable<NonNullable<NonNullable<NonNullable<ProjectUserMembersQuery['project']>['userMembers']>['results']>>[number];
+type AnalysisPillar = Partial<PillarAnalysisFields> & { key: string; id?: string };
 
 type FormType = {
     title?: string;
-    teamLead?: UserMemberType['id'];
+    teamLead?: UserMini['id'];
     startDate?: string;
     endDate: string;
     analysisPillar?: AnalysisPillar[];
@@ -156,7 +136,7 @@ const defaultAnalysisFormValues: PartialForm<FormType> = {
     analysisPillar: [{ key: randomString(16) }],
 };
 
-const userKeySelector = (u: UserMini) => String(u.id);
+const userKeySelector = (u: UserMini) => u.id;
 const userLabelSelector = (u: UserMini) => u.displayName;
 const childrenSelector = (d: MatrixPillar) => d.children;
 
@@ -167,7 +147,6 @@ interface AnalysisEditModalProps {
     onSuccess: (value: AnalysisElement, isEditMode: boolean) => void;
     onModalClose: () => void;
     analysisToEdit?: string;
-    projectId: number;
 }
 
 function AnalysisEditModal(props: AnalysisEditModalProps) {
@@ -176,7 +155,6 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
         onSuccess,
         onModalClose,
         analysisToEdit,
-        projectId,
     } = props;
 
     const {
@@ -186,57 +164,63 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
         setFieldValue,
         validate,
         setError,
-        setValue,
     } = useForm(analysisFormSchema, defaultAnalysisFormValues);
 
     const error = getErrorObject(riskyError);
     const arrayError = getErrorObject(error?.analysisPillar);
 
     const {
-        pending: analysisGetPending,
-    } = useRequest<AnalysisElement>({
-        skip: !analysisToEdit,
-        url: `server://projects/${projectId}/analysis/${analysisToEdit}/`,
-        onSuccess: (response) => {
-            setValue({
-                teamLead: String(response.teamLead),
-                title: response.title,
-                startDate: response.startDate,
-                endDate: response.endDate,
-                analysisPillar: response.analysisPillar.map((ap) => ({
-                    id: ap.id,
-                    key: String(ap.id),
-                    assignee: String(ap.assignee),
-                    filters: ap.filters?.map((f) => f.uniqueId),
-                    title: ap.title,
-                })),
-            });
-        },
-    });
-
-    const userMembersVariables = useMemo(
-        (): ProjectUserMembersQueryVariables => ({
-            projectId: String(projectId),
-            analysisId: '',
-        }),
-        [projectId],
-    );
-
-    const {
-        loading: pendingProjectUserMembers,
-        data: projectUserMembers,
-    } = useQuery<ProjectUserMembersQuery, ProjectUserMembersQueryVariables>(
-        PROJECT_USER_MEMBERS,
+        project,
+    } = useContext(ProjectContext);
+
+    /*
+    const [
+        updateAnalysis,
+        { loading: updateAnalysisPending },
+    ] = useMutation<ProjectUpdateMutation, ProjectUpdateMutationVariables>(
+        PROJECT_UPDATE,
         {
-            variables: userMembersVariables,
+            onCompleted: (gqlResponse) => {
+                const response = gqlResponse?.project?.projectUpdate;
+                if (!response) {
+                    return;
+                }
+
+                if (response.ok) {
+                    alert.show(
+                        'Successfully Update Analysis',
+                        { variant: 'success' },
+                    );
+                } else {
+                    const formError = transformToFormError(
+                        removeNull(response.errors) as ObjectError[],
+                    );
+                    setError(formError);
+
+                    alert.show(
+                        'Failed to update analysis!',
+                        { variant: 'error' },
+                    );
+                }
+            },
+            onError: (gqlError) => {
+                alert.show(
+                    'Failed to update analysis!',
+                    { variant: 'error' },
+                );
+
+                console.error(gqlError);
+            },
         },
     );
+    */
 
     const frameworkVariables = useMemo(
-        (): FrameworkDetailsForAnalysisQueryVariables => ({
-            projectId: String(projectId),
-        }),
-        [projectId],
+        (): FrameworkDetailsForAnalysisQueryVariables | undefined => (
+            (project) ? ({
+                projectId: project.id,
+            }) : undefined),
+        [project],
     );
 
     const {
@@ -270,7 +254,7 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
         pending: pendingUsersList,
         response: usersListResponse,
     } = useRequest<MultiResponse<UserMini>>({
-        url: `server://projects/${projectId}/members/`,
+        url: `server://projects/${project?.id}/members/`,
         query: usersQueryFields,
         method: 'GET',
     });
@@ -280,8 +264,8 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
         trigger: triggerAnalysisEdit,
     } = useLazyRequest<AnalysisElement, unknown>({
         url: isDefined(analysisToEdit)
-            ? `server://projects/${projectId}/analysis/${analysisToEdit}/`
-            : `server://projects/${projectId}/analysis/`,
+            ? `server://projects/${project?.id}/analysis/${analysisToEdit}/`
+            : `server://projects/${project?.id}/analysis/`,
         method: isDefined(analysisToEdit) ? 'PATCH' : 'POST',
         body: (ctx) => ctx,
         onSuccess: (response) => {
@@ -303,9 +287,7 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
             : 'Failed to create new analysis',
     });
 
-    const pending = pendingFramework || pendingProjectUserMembers || pendingAnalysisEdit;
-
-    console.log('user', usersListResponse, 'graphql', projectUserMembers);
+    const pending = pendingFramework || pendingAnalysisEdit;
 
     const {
         setValue: onRowChange,
@@ -324,10 +306,17 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
             onChange: onRowChange as PillarAnalysisProps['onChange'],
             onRemove: onRowRemove,
             pending,
-            usersList: projectUserMembers?.project?.userMembers?.results ?? [],
+            usersList: usersListResponse?.results ?? [],
             value: data,
         }),
-        [projectUserMembers, matrixPillars, arrayError, onRowChange, onRowRemove, pending],
+        [
+            usersListResponse,
+            matrixPillars,
+            arrayError,
+            onRowChange,
+            onRowRemove,
+            pending,
+        ],
     );
 
     type AnalysisPillarList = typeof value.analysisPillar;
@@ -395,7 +384,6 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
             {/*
                 NOTE: Set delay to 0 as it needs to be blocked
             */}
-            {analysisGetPending && <PendingMessage />}
             <NonFieldError error={error} />
             <TextInput
                 label={_ts('analysis.editModal', 'analysisTitleLabel')}
@@ -442,7 +430,7 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
                     renderer={PillarAnalysisRow}
                     keySelector={analysisPillarKeySelector}
                     rendererParams={rowRendererParams}
-                    pending={pending}
+                    pending={pendingUsersList}
                     filtered={false}
                     errored={false}
                 />