Add analysis create mutation in analysis dashboard

the-deep · Nov 7, 2024 · 6301ac1 · 6301ac1
1 parent a75d382
commit 6301ac1
Show file tree

Hide file tree

Showing 6 changed files with 227 additions and 69 deletions.
diff --git a/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx b/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx
@@ -24,7 +24,6 @@ import { calcPercent } from '#utils/common';
 import _ts from '#ts';
 import styles from './styles.css';
 
-type PillarSummary = NonNullable<NonNullable<NonNullable<AnalysisSummaryQuery['project']>['analysisPillars']>['results']>[number];
 type AnalyticalStatement = NonNullable<NonNullable<NonNullable<AnalysisSummaryQuery['project']>['analyticalStatements']>['results']>[number];
 
 const statementKeySelector = (item: AnalyticalStatement) => Number(item.id);
@@ -37,7 +36,8 @@ export interface Props {
     createdAt: string;
     onDelete: (value: number) => void;
     pendingPillarDelete: boolean;
-    pillarId: PillarSummary['id']; projectId: string;
+    pillarId: string;
+    projectId: string;
     className?: string;
     totalEntries: number | undefined;
     analyzedEntries?: number | undefined;

diff --git a/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx b/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx
@@ -6,76 +6,130 @@ import {
     ListView,
     Kraken,
 } from '@the-deep/deep-ui';
+import { gql, useQuery } from '@apollo/client';
 
-import { AnalysisSummaryQuery } from '#generated/types';
+import {
+    AnalysisPillarsQuery,
+    AnalysisPillarsQueryVariables,
+} from '#generated/types';
 
 import AnalysisPillar, { Props as PillarComponentProps } from '../AnalysisPillar';
 
 import styles from './styles.css';
 
-type PillarSummary = NonNullable<NonNullable<NonNullable<AnalysisSummaryQuery['project']>['analysisPillars']>['results']>[number];
+type PillarItem = NonNullable<NonNullable<NonNullable<AnalysisPillarsQuery['project']>['analysisPillars']>['results']>[number];
+
+export const ANALYSIS_PILLARS = gql`
+    query AnalysisPillars(
+        $projectId: ID!,
+        $page: Int,
+        $analysisId: ID!,
+        $pageSize: Int,
+    ) {
+        project(id: $projectId) {
+            analysisPillars(
+                page: $page,
+                analyses: [$analysisId],
+                pageSize: $pageSize,
+            ) {
+                results {
+                    id
+                    title
+                    createdAt
+                    analysisId
+                    analyzedEntriesCount
+                    assignee {
+                        displayName
+                        id
+                    }
+                    statements {
+                        id
+                        statement
+                        entriesCount
+                    }
+                }
+                totalCount
+            }
+        }
+    }
+`;
 
 const MAX_ITEMS_PER_PAGE = 5;
-const keySelector = (item: PillarSummary) => item.id;
+const keySelector = (item: PillarItem) => item.id;
 
 interface Props {
     className?: string;
     createdAt: string;
-    activeProject: string;
-    onAnalysisPillarDelete: () => void;
+    projectId: string;
     analysisId: string;
     totalEntries: number | undefined;
-    pillars: PillarSummary[] | null | undefined;
-    pillarsPending: boolean;
 }
 
 function AnalysisDetails(props: Props) {
     const {
         className,
         createdAt,
-        activeProject,
-        onAnalysisPillarDelete,
+        projectId,
         analysisId,
         totalEntries,
-        pillars,
-        pillarsPending,
     } = props;
 
     const [activePage, setActivePage] = useState(1);
 
+    const handleAnalysisPillarDelete = useCallback(() => {
+        console.log('here');
+    }, []);
+
+    const {
+        data: analysisPillarsData,
+        loading: pillarsPending,
+    } = useQuery<AnalysisPillarsQuery, AnalysisPillarsQueryVariables>(
+        ANALYSIS_PILLARS,
+        {
+            variables: {
+                page: activePage,
+                analysisId,
+                projectId,
+                pageSize: MAX_ITEMS_PER_PAGE,
+            },
+        },
+    );
+
     const analysisPillarRendererParams = useCallback(
-        (_: string, data: PillarSummary): PillarComponentProps => ({
+        (_: string, data: PillarItem): PillarComponentProps => ({
             className: styles.pillar,
             analysisId,
             assigneeName: data.assignee?.displayName,
             createdAt,
-            onDelete: onAnalysisPillarDelete,
+            onDelete: handleAnalysisPillarDelete,
             statements: data.statements,
             pillarId: data.id,
             analyzedEntries: data.analyzedEntriesCount,
-            projectId: activeProject,
+            projectId,
             title: data.title,
             totalEntries,
             pendingPillarDelete: pillarsPending,
         }), [
-            onAnalysisPillarDelete,
+            handleAnalysisPillarDelete,
             totalEntries,
             createdAt,
             analysisId,
-            activeProject,
+            projectId,
             pillarsPending,
         ],
     );
 
+    const pillars = analysisPillarsData?.project?.analysisPillars;
+
     return (
         <Container
             className={_cs(className, styles.container)}
             spacing="none"
             contentClassName={styles.content}
-            footerActions={((pillars?.length ?? 0) / MAX_ITEMS_PER_PAGE) > 1 ? (
+            footerActions={((pillars?.totalCount ?? 0) / MAX_ITEMS_PER_PAGE) > 1 ? (
                 <Pager
                     activePage={activePage}
-                    itemsCount={pillars?.length ?? 0}
+                    itemsCount={pillars?.totalCount ?? 0}
                     maxItemsPerPage={MAX_ITEMS_PER_PAGE}
                     onActivePageChange={setActivePage}
                     itemsPerPageControlHidden
@@ -84,7 +138,7 @@ function AnalysisDetails(props: Props) {
         >
             <ListView
                 className={styles.pillarList}
-                data={pillars}
+                data={analysisPillarsData?.project?.analysisPillars?.results}
                 keySelector={keySelector}
                 renderer={AnalysisPillar}
                 rendererParams={analysisPillarRendererParams}

diff --git a/app/views/AnalysisDashboard/Analysis/index.tsx b/app/views/AnalysisDashboard/Analysis/index.tsx
@@ -69,7 +69,9 @@ const CREATE_ANALYSIS_EXPORT = gql`
     }
 `;
 
-type PillarSummary = NonNullable<NonNullable<NonNullable<AnalysisSummaryQuery['project']>['analysisPillars']>['results']>[number];
+type PillarSummary = NonNullable<NonNullable<NonNullable<NonNullable<
+AnalysisSummaryQuery['project']
+>['analyses']>['results']>[number]['pillars']>[number];
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderCustomizedLabel = (props: any) => {
@@ -108,7 +110,6 @@ export interface Props {
     startDate?: string | null;
     endDate: string;
     onEdit: (analysisId: string) => void;
-    onAnalysisPillarDelete: () => void;
     onAnalysisCloseSuccess: () => void;
     teamLeadName?: string | null;
     createdAt: string;
@@ -132,7 +133,6 @@ function Analysis(props: Props) {
         endDate,
         analysisId,
         teamLeadName,
-        onAnalysisPillarDelete,
         onAnalysisCloseSuccess,
         pillars,
         pillarsPending,
@@ -443,11 +443,8 @@ function Analysis(props: Props) {
                     <PillarAnalysisList
                         createdAt={createdAt}
                         analysisId={analysisId}
-                        activeProject={activeProject}
-                        onAnalysisPillarDelete={onAnalysisPillarDelete}
+                        projectId={activeProject}
                         totalEntries={totalEntries}
-                        pillars={pillars}
-                        pillarsPending={pillarsPending}
                     />
                 )}
             </ExpandableContainer>

diff --git a/app/views/AnalysisDashboard/AnalysisEditModal/PillarAnalysisRow/index.tsx b/app/views/AnalysisDashboard/AnalysisEditModal/PillarAnalysisRow/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import { _cs } from '@togglecorp/fujs';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
 import { IoClose } from 'react-icons/io5';
 import {
     QuickActionButton,
@@ -110,8 +113,8 @@ function PillarAnalysisRow(props: Props) {
                 className={styles.button}
                 name={index}
                 onClick={onRemove}
-                title="Remove"
-                disabled={pending}
+                title={isDefined(value.id) ? 'This cannot be removed from here. Please delete is individually from the list.' : 'Remove'}
+                disabled={pending || isDefined(value.id)}
             >
                 <IoClose />
             </QuickActionButton>